/*
 * LaVentiPOS UI V2 shared visual layer.
 *
 * Admin remains the approved source of truth in admin-v2.css. This file is
 * intentionally role-scoped and loaded last for Manager, Warehouse, Store,
 * Dealer and guest screens. It changes presentation only; layout and workflow
 * rules continue to live in the existing role stylesheets.
 */

body[data-role="manager"],
body[data-role="depo"],
body[data-role="magaza"],
body[data-role="dealer"],
body[data-role="guest"] {
  --ui-night: #0a0f18;
  --ui-navy: #111827;
  --ui-slate: #1f2937;
  --ui-blue: #3478f6;
  --ui-blue-bright: #5b8cff;
  --ui-cyan: #0098b5;
  --ui-cyan-bright: #00cfff;
  --ui-success: #0e9f57;
  --ui-success-bright: #16e66a;
  --ui-danger: #e62337;
  --ui-danger-bright: #ff3b4d;
  --ui-warning: #c87900;
  --ui-warning-bright: #ffb000;
  --ui-text: #111827;
  --ui-muted: #526174;
  --ui-neutral: #64748b;
  --ui-bg: #f5f7fa;
  --ui-soft: #f8fafc;
  --ui-card: #ffffff;
  --ui-border: #e2e8f0;
  --ui-border-strong: #cbd5e1;
  --ui-focus: rgba(0, 207, 255, .28);
  --ui-blue-soft: #eff6ff;
  --ui-cyan-soft: rgba(0, 207, 255, .10);
  --ui-success-soft: rgba(22, 230, 106, .10);
  --ui-danger-soft: rgba(255, 59, 77, .09);
  --ui-warning-soft: rgba(255, 176, 0, .11);
  --ui-neutral-soft: #f1f5f9;
  --ui-shadow-sm: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
  --ui-shadow-md: 0 12px 32px rgba(15, 23, 42, .10);

  /* Compatibility aliases for the established component layer. */
  --brand-ink: var(--ui-navy);
  --brand-ink-strong: var(--ui-night);
  --page-surface: var(--ui-bg);
  --card-surface: var(--ui-card);
  --soft-surface: var(--ui-soft);
  --brand-gold: var(--ui-blue);
  --brand-gold-strong: #1859c9;
  --border-subtle: var(--ui-border);
  --positive: #06723b;
  --positive-soft: var(--ui-success-soft);
  --negative: #c5162b;
  --negative-soft: var(--ui-danger-soft);
  --info: #00677d;
  --info-soft: var(--ui-cyan-soft);
  --warning: #804600;
  --warning-soft: var(--ui-warning-soft);
  --neutral: var(--ui-neutral);
  --neutral-soft: var(--ui-neutral-soft);
  --chart-primary: var(--ui-cyan-bright);
  --chart-secondary: var(--ui-blue);
  --chart-negative: var(--ui-danger-bright);
  --chart-grid: var(--ui-border);
  --payment-card: var(--ui-blue);
  --payment-cash: var(--ui-success-bright);
  --primary: var(--ui-navy);
  --primary-dark: var(--ui-night);
  --primary-soft: var(--ui-blue-soft);
  --bg: var(--ui-bg);
  --card: var(--ui-card);
  --surface-soft: var(--ui-soft);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --border: var(--ui-border);
  --border-strong: var(--ui-border-strong);
  --danger: var(--ui-danger);
  --success: var(--ui-success);
  --accent: var(--ui-blue);
  --accent-dark: #1859c9;
  --accent-light: var(--ui-blue-soft);
  --shadow-sm: var(--ui-shadow-sm);
  --shadow-md: var(--ui-shadow-md);

  background: var(--ui-bg);
  color: var(--ui-text);
}

body[data-role="manager"] ::selection,
body[data-role="depo"] ::selection,
body[data-role="magaza"] ::selection,
body[data-role="dealer"] ::selection,
body[data-role="guest"] ::selection {
  background: rgba(0, 207, 255, .22);
  color: var(--ui-night);
}

body[data-role="manager"] .topbar,
body[data-role="depo"] .topbar,
body[data-role="magaza"] .topbar,
body[data-role="dealer"] .topbar {
  background: linear-gradient(112deg, var(--ui-night), var(--ui-navy) 62%, #10233d);
  border-bottom-color: var(--ui-cyan-bright);
  box-shadow: 0 6px 20px rgba(2, 6, 23, .20);
}

body[data-role="manager"] .brand span,
body[data-role="depo"] .brand span,
body[data-role="magaza"] .brand span,
body[data-role="dealer"] .brand span {
  color: #cbd5e1;
  border-left-color: rgba(148, 163, 184, .42);
}

body[data-role="manager"] .mainnav a.active,
body[data-role="depo"] .mainnav a.active,
body[data-role="magaza"] .mainnav a.active,
body[data-role="dealer"] .mainnav a.active {
  background: rgba(52, 120, 246, .20);
  box-shadow: inset 0 -3px 0 var(--ui-cyan-bright);
}

body[data-role="manager"] .mainnav a:hover,
body[data-role="depo"] .mainnav a:hover,
body[data-role="magaza"] .mainnav a:hover,
body[data-role="dealer"] .mainnav a:hover {
  background: rgba(255, 255, 255, .10);
}

body[data-role="manager"] .topbar-right select,
body[data-role="depo"] .topbar-right select,
body[data-role="magaza"] .topbar-right select,
body[data-role="dealer"] .topbar-right select {
  border-color: rgba(148, 163, 184, .38);
  background: #172033;
  color: #fff;
}

body[data-role="manager"] a:focus-visible,
body[data-role="manager"] button:focus-visible,
body[data-role="manager"] select:focus-visible,
body[data-role="manager"] input:focus-visible,
body[data-role="manager"] textarea:focus-visible,
body[data-role="depo"] a:focus-visible,
body[data-role="depo"] button:focus-visible,
body[data-role="depo"] select:focus-visible,
body[data-role="depo"] input:focus-visible,
body[data-role="depo"] textarea:focus-visible,
body[data-role="magaza"] a:focus-visible,
body[data-role="magaza"] button:focus-visible,
body[data-role="magaza"] select:focus-visible,
body[data-role="magaza"] input:focus-visible,
body[data-role="magaza"] textarea:focus-visible,
body[data-role="dealer"] a:focus-visible,
body[data-role="dealer"] button:focus-visible,
body[data-role="dealer"] select:focus-visible,
body[data-role="dealer"] input:focus-visible,
body[data-role="dealer"] textarea:focus-visible,
body[data-role="guest"] a:focus-visible,
body[data-role="guest"] button:focus-visible,
body[data-role="guest"] select:focus-visible,
body[data-role="guest"] input:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}

body[data-role="manager"] input:focus,
body[data-role="manager"] select:focus,
body[data-role="manager"] textarea:focus,
body[data-role="depo"] input:focus,
body[data-role="depo"] select:focus,
body[data-role="depo"] textarea:focus,
body[data-role="magaza"] input:focus,
body[data-role="magaza"] select:focus,
body[data-role="magaza"] textarea:focus,
body[data-role="dealer"] input:focus,
body[data-role="dealer"] select:focus,
body[data-role="dealer"] textarea:focus,
body[data-role="guest"] input:focus,
body[data-role="guest"] select:focus {
  border-color: var(--ui-blue);
  box-shadow: 0 0 0 3px var(--ui-focus);
}

body[data-role="manager"] .content > h1:first-child,
body[data-role="manager"] .content > h2:first-child,
body[data-role="manager"] .page-head h1,
body[data-role="depo"] .content > h1:first-child,
body[data-role="depo"] .content > h2:first-child,
body[data-role="depo"] .page-head h1,
body[data-role="magaza"] .content > h1:first-child,
body[data-role="magaza"] .content > h2:first-child,
body[data-role="magaza"] .page-head h1,
body[data-role="dealer"] .content > h1:first-child,
body[data-role="dealer"] .content > h2:first-child,
body[data-role="dealer"] .page-head h1,
body[data-role="dealer"] .dealer-page-head h1 {
  color: var(--ui-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 850;
  letter-spacing: -.035em;
}

body[data-role="manager"] .eyebrow,
body[data-role="depo"] .eyebrow,
body[data-role="magaza"] .eyebrow,
body[data-role="dealer"] .eyebrow {
  color: var(--ui-blue);
}

body[data-role="manager"] .card,
body[data-role="manager"] .dashboard-section,
body[data-role="depo"] .card,
body[data-role="depo"] .dashboard-section,
body[data-role="magaza"] .card,
body[data-role="magaza"] .dashboard-section,
body[data-role="dealer"] .card,
body[data-role="dealer"] .dealer-product-row,
body[data-role="dealer"] .dealer-categories {
  border-color: var(--ui-border);
  background: var(--ui-card);
  box-shadow: var(--ui-shadow-sm);
}

body[data-role="manager"] .card:hover,
body[data-role="depo"] .card:hover,
body[data-role="magaza"] .card:hover,
body[data-role="dealer"] .card:hover {
  border-color: var(--ui-border-strong);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

body[data-role="manager"] .card h3::before,
body[data-role="depo"] .card h3::before,
body[data-role="magaza"] .card h3::before,
body[data-role="dealer"] .card h3::before {
  background: linear-gradient(var(--ui-cyan-bright), var(--ui-blue));
}

body[data-role="manager"] .btn,
body[data-role="depo"] .btn,
body[data-role="magaza"] .btn,
body[data-role="dealer"] .btn,
body[data-role="guest"] .btn {
  border-color: var(--ui-blue);
  background: var(--ui-blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(52, 120, 246, .18);
}

body[data-role="manager"] .btn:hover,
body[data-role="depo"] .btn:hover,
body[data-role="magaza"] .btn:hover,
body[data-role="dealer"] .btn:hover,
body[data-role="guest"] .btn:hover {
  border-color: #1859c9;
  background: #1859c9;
  color: #fff;
  box-shadow: 0 6px 16px rgba(52, 120, 246, .24);
}

body[data-role="manager"] .btn.secondary,
body[data-role="depo"] .btn.secondary,
body[data-role="magaza"] .btn.secondary,
body[data-role="dealer"] .btn.secondary,
body[data-role="guest"] .btn.secondary {
  border-color: var(--ui-border-strong);
  background: var(--ui-card);
  color: var(--ui-slate);
  box-shadow: none;
}

body[data-role="manager"] .btn.secondary:hover,
body[data-role="depo"] .btn.secondary:hover,
body[data-role="magaza"] .btn.secondary:hover,
body[data-role="dealer"] .btn.secondary:hover,
body[data-role="guest"] .btn.secondary:hover {
  border-color: var(--ui-blue);
  background: var(--ui-blue-soft);
  color: #1859c9;
}

body[data-role="manager"] .btn.danger,
body[data-role="depo"] .btn.danger,
body[data-role="magaza"] .btn.danger,
body[data-role="dealer"] .btn.danger {
  border-color: var(--ui-danger);
  background: var(--ui-danger);
  color: #fff;
}

body[data-role="manager"] .btn:disabled,
body[data-role="depo"] .btn:disabled,
body[data-role="magaza"] .btn:disabled,
body[data-role="dealer"] .btn:disabled,
body[data-role="guest"] .btn:disabled {
  border-color: var(--ui-border-strong);
  background: #dbe2ea;
  color: #64748b;
  opacity: .78;
}

body[data-role="manager"] table th,
body[data-role="depo"] table th,
body[data-role="magaza"] table th,
body[data-role="dealer"] table th {
  border-bottom-color: var(--ui-blue);
  background: var(--ui-soft);
  color: var(--ui-muted);
}

body[data-role="manager"] table tbody tr:nth-child(even) td,
body[data-role="depo"] table tbody tr:nth-child(even) td,
body[data-role="magaza"] table tbody tr:nth-child(even) td,
body[data-role="dealer"] table tbody tr:nth-child(even) td {
  background: #fbfdff;
}

body[data-role="manager"] table tr:hover td,
body[data-role="depo"] table tr:hover td,
body[data-role="magaza"] table tr:hover td,
body[data-role="dealer"] table tr:hover td {
  background: var(--ui-blue-soft);
}

body[data-role="manager"] .alert.success,
body[data-role="depo"] .alert.success,
body[data-role="magaza"] .alert.success,
body[data-role="dealer"] .alert.success {
  border: 1px solid var(--ui-success-bright);
  background: var(--ui-success-soft);
  color: #06723b;
}

body[data-role="manager"] .alert.error,
body[data-role="depo"] .alert.error,
body[data-role="magaza"] .alert.error,
body[data-role="dealer"] .alert.error,
body[data-role="guest"] .alert.error {
  border: 1px solid var(--ui-danger-bright);
  background: var(--ui-danger-soft);
  color: #a30f20;
}

body[data-role="manager"] .alert.warning,
body[data-role="depo"] .alert.warning,
body[data-role="magaza"] .alert.warning,
body[data-role="dealer"] .alert.warning,
body[data-role="manager"] .notification-banner,
body[data-role="depo"] .notification-banner,
body[data-role="magaza"] .notification-banner,
body[data-role="dealer"] .notification-banner {
  border: 1px solid var(--ui-warning-bright);
  background: var(--ui-warning-soft);
  color: #704000;
}

body[data-role="manager"] .notification-banner .notification-icon,
body[data-role="depo"] .notification-banner .notification-icon,
body[data-role="magaza"] .notification-banner .notification-icon,
body[data-role="dealer"] .notification-banner .notification-icon {
  background: var(--ui-warning-bright);
  color: #3b2400;
}

body[data-role="manager"] .status-badge,
body[data-role="depo"] .status-badge,
body[data-role="magaza"] .status-badge,
body[data-role="dealer"] .status-badge {
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-neutral-soft);
  color: #475569;
}

body[data-role="manager"] .status-badge.status-active,
body[data-role="manager"] .status-badge.status-approved,
body[data-role="manager"] .status-badge.status-delivered,
body[data-role="depo"] .status-badge.status-active,
body[data-role="depo"] .status-badge.status-approved,
body[data-role="depo"] .status-badge.status-delivered,
body[data-role="magaza"] .status-badge.status-active,
body[data-role="magaza"] .status-badge.status-approved,
body[data-role="magaza"] .status-badge.status-delivered,
body[data-role="dealer"] .status-badge.status-active,
body[data-role="dealer"] .status-badge.status-approved,
body[data-role="dealer"] .status-badge.status-delivered {
  border-color: var(--ui-success-bright);
  background: var(--ui-success-soft);
  color: #06723b;
}

body[data-role="manager"] .status-badge.status-prepared,
body[data-role="manager"] .status-badge.status-sent,
body[data-role="manager"] .status-badge.status-preparing,
body[data-role="depo"] .status-badge.status-prepared,
body[data-role="depo"] .status-badge.status-sent,
body[data-role="depo"] .status-badge.status-preparing,
body[data-role="magaza"] .status-badge.status-prepared,
body[data-role="magaza"] .status-badge.status-sent,
body[data-role="magaza"] .status-badge.status-preparing,
body[data-role="dealer"] .status-badge.status-prepared,
body[data-role="dealer"] .status-badge.status-sent,
body[data-role="dealer"] .status-badge.status-preparing {
  border-color: var(--ui-cyan-bright);
  background: var(--ui-cyan-soft);
  color: #00677d;
}

body[data-role="manager"] .status-badge.status-pending,
body[data-role="manager"] .status-badge.status-partial,
body[data-role="depo"] .status-badge.status-pending,
body[data-role="depo"] .status-badge.status-partial,
body[data-role="magaza"] .status-badge.status-pending,
body[data-role="magaza"] .status-badge.status-partial,
body[data-role="dealer"] .status-badge.status-pending,
body[data-role="dealer"] .status-badge.status-partial {
  border-color: var(--ui-warning-bright);
  background: var(--ui-warning-soft);
  color: #704000;
}

body[data-role="manager"] .status-badge.status-rejected,
body[data-role="manager"] .status-badge.status-cancelled,
body[data-role="depo"] .status-badge.status-rejected,
body[data-role="depo"] .status-badge.status-cancelled,
body[data-role="magaza"] .status-badge.status-rejected,
body[data-role="magaza"] .status-badge.status-cancelled,
body[data-role="dealer"] .status-badge.status-rejected,
body[data-role="dealer"] .status-badge.status-cancelled {
  border-color: var(--ui-danger-bright);
  background: var(--ui-danger-soft);
  color: #a30f20;
}

body[data-role="manager"] .quick-actions-bar,
body[data-role="depo"] .quick-actions-bar,
body[data-role="magaza"] .quick-actions-bar,
body[data-role="dealer"] .quick-actions-bar {
  border-color: var(--ui-border);
  background: var(--ui-card);
}

body[data-role="manager"] .quick-action,
body[data-role="depo"] .quick-action,
body[data-role="magaza"] .quick-action,
body[data-role="dealer"] .quick-action {
  border-color: var(--ui-border);
  background: var(--ui-card);
  color: var(--ui-slate);
}

body[data-role="manager"] .quick-action:hover,
body[data-role="depo"] .quick-action:hover,
body[data-role="magaza"] .quick-action:hover,
body[data-role="dealer"] .quick-action:hover {
  border-color: var(--ui-blue);
  background: var(--ui-blue-soft);
}

body[data-role="manager"] .quick-action-icon,
body[data-role="depo"] .quick-action-icon,
body[data-role="magaza"] .quick-action-icon,
body[data-role="dealer"] .quick-action-icon {
  color: var(--ui-blue);
}

body[data-role="manager"] .quick-action.primary,
body[data-role="depo"] .quick-action.primary,
body[data-role="magaza"] .quick-action.primary,
body[data-role="dealer"] .quick-action.primary {
  border-color: var(--ui-blue);
  background: var(--ui-blue);
  color: #fff;
}

body[data-role="manager"] .quick-action.attention,
body[data-role="depo"] .quick-action.attention,
body[data-role="magaza"] .quick-action.attention,
body[data-role="dealer"] .quick-action.attention {
  border-color: var(--ui-warning-bright);
  background: var(--ui-warning-soft);
  color: #704000;
}

body[data-role="manager"] .stat,
body[data-role="depo"] .stat,
body[data-role="magaza"] .stat,
body[data-role="manager"] .dashboard-kpi,
body[data-role="depo"] .dashboard-kpi,
body[data-role="magaza"] .dashboard-kpi {
  border-color: var(--ui-border);
  border-top-color: var(--ui-blue);
  background: var(--ui-card);
  box-shadow: var(--ui-shadow-sm);
}

body[data-role="manager"] .stat::after,
body[data-role="depo"] .stat::after,
body[data-role="magaza"] .stat::after {
  display: none;
}

body[data-role="manager"] .stat .num,
body[data-role="manager"] .stats-grid .stat strong,
body[data-role="manager"] .dashboard-kpi > strong,
body[data-role="depo"] .stat .num,
body[data-role="depo"] .stats-grid .stat strong,
body[data-role="depo"] .dashboard-kpi > strong,
body[data-role="magaza"] .stat .num,
body[data-role="magaza"] .stats-grid .stat strong,
body[data-role="magaza"] .dashboard-kpi > strong {
  color: #08783f;
}

body[data-role="manager"] .danger-stat,
body[data-role="manager"] .dashboard-kpi.has-critical,
body[data-role="depo"] .danger-stat,
body[data-role="depo"] .dashboard-kpi.has-critical,
body[data-role="magaza"] .danger-stat,
body[data-role="magaza"] .dashboard-kpi.has-critical {
  border-top-color: var(--ui-danger-bright);
  background: linear-gradient(145deg, #fff 58%, rgba(255, 59, 77, .045));
}

body[data-role="manager"] .danger-stat strong,
body[data-role="manager"] .dashboard-kpi.has-critical > strong,
body[data-role="depo"] .danger-stat strong,
body[data-role="depo"] .dashboard-kpi.has-critical > strong,
body[data-role="magaza"] .danger-stat strong,
body[data-role="magaza"] .dashboard-kpi.has-critical > strong {
  color: var(--ui-danger);
}

body[data-role="manager"] .dashboard-store-card,
body[data-role="depo"] .dashboard-store-card,
body[data-role="magaza"] .dashboard-store-card {
  border-color: var(--ui-border);
  background: var(--ui-card);
}

body[data-role="manager"] .dashboard-store-card.is-selected,
body[data-role="depo"] .dashboard-store-card.is-selected,
body[data-role="magaza"] .dashboard-store-card.is-selected {
  border-color: var(--ui-blue);
  box-shadow: 0 0 0 2px rgba(52, 120, 246, .12);
}

body[data-role="manager"] .dashboard-store-head a,
body[data-role="depo"] .dashboard-store-head a,
body[data-role="magaza"] .dashboard-store-head a {
  border-left: 3px solid var(--ui-blue);
  color: var(--ui-text);
}

body[data-role="manager"] .dashboard-store-head a:hover,
body[data-role="depo"] .dashboard-store-head a:hover,
body[data-role="magaza"] .dashboard-store-head a:hover {
  background: var(--ui-blue-soft);
}

body[data-role="manager"] .payment-badge.nakit,
body[data-role="depo"] .payment-badge.nakit,
body[data-role="magaza"] .payment-badge.nakit {
  border: 1px solid var(--ui-success-bright);
  background: var(--ui-success-soft);
  color: #06723b;
}

body[data-role="manager"] .payment-badge.kart,
body[data-role="depo"] .payment-badge.kart,
body[data-role="magaza"] .payment-badge.kart {
  border: 1px solid var(--ui-blue-bright);
  background: rgba(52, 120, 246, .10);
  color: #1859c9;
}

body[data-role="manager"] .payment-badge.diger,
body[data-role="depo"] .payment-badge.diger,
body[data-role="magaza"] .payment-badge.diger {
  border: 1px solid var(--ui-cyan-bright);
  background: var(--ui-cyan-soft);
  color: #00677d;
}

body[data-role="manager"] .filter-pills a.active,
body[data-role="manager"] .filter-tabs a.active,
body[data-role="depo"] .filter-pills a.active,
body[data-role="depo"] .filter-tabs a.active,
body[data-role="magaza"] .filter-pills a.active,
body[data-role="magaza"] .filter-tabs a.active,
body[data-role="dealer"] .filter-pills a.active,
body[data-role="dealer"] .filter-tabs a.active {
  border-color: var(--ui-blue);
  background: var(--ui-blue);
  color: #fff;
}

body[data-role="manager"] .stock-pill.ok,
body[data-role="depo"] .stock-pill.ok,
body[data-role="magaza"] .stock-pill.ok {
  background: var(--ui-success-soft);
  color: #06723b;
}

body[data-role="manager"] .stock-pill.low,
body[data-role="depo"] .stock-pill.low,
body[data-role="magaza"] .stock-pill.low {
  background: var(--ui-warning-soft);
  color: #704000;
}

body[data-role="manager"] .stock-pill.out,
body[data-role="depo"] .stock-pill.out,
body[data-role="magaza"] .stock-pill.out {
  background: var(--ui-danger-soft);
  color: #a30f20;
}

/* Warehouse catalogue: same structure, cool surfaces and functional accents. */
body[data-role="depo"] .category-menu,
body[data-role="depo"] .product-tile,
body[data-role="depo"] .cart-line,
body[data-role="depo"] .transfer-flow-steps > div {
  border-color: var(--ui-border);
  background: var(--ui-card);
}

body[data-role="depo"] .category-menu button:hover,
body[data-role="depo"] .category-menu button.active {
  background: var(--ui-blue-soft);
  color: #1859c9;
}

body[data-role="depo"] .product-tile:hover {
  border-color: var(--ui-blue);
  box-shadow: 0 7px 20px rgba(52, 120, 246, .12);
}

body[data-role="depo"] .tile-stock,
body[data-role="magaza"] .tile-stock {
  background: var(--ui-success-soft);
  color: #06723b;
}

body[data-role="depo"] .tile-stock.low,
body[data-role="magaza"] .tile-stock.low {
  background: var(--ui-warning-soft);
  color: #704000;
}

body[data-role="magaza"] .tile-stock.empty {
  background: var(--ui-danger-soft);
  color: #a30f20;
}

/* Store/POS: color-only overrides. Grid, cart and payment flow stay untouched. */
body[data-role="magaza"] .store-sale-screen .sale-page-head,
body[data-role="magaza"] .store-sale-screen .category-menu,
body[data-role="magaza"] .store-sale-screen .catalog-search,
body[data-role="magaza"] .store-sale-screen .product-tile,
body[data-role="magaza"] .store-sale-screen .pos-cart,
body[data-role="magaza"] .store-sale-screen .summary-figure,
body[data-role="magaza"] .store-sale-screen .sale-confirm-dialog {
  border-color: var(--ui-border);
  background: var(--ui-card);
  box-shadow: var(--ui-shadow-sm);
}

body[data-role="magaza"] .store-sale-screen .sale-page-head h1,
body[data-role="magaza"] .store-sale-screen .cart-title h2 {
  color: var(--ui-text);
}

body[data-role="magaza"] .store-sale-screen .sale-page-head .eyebrow,
body[data-role="magaza"] .store-sale-screen .category-icon,
body[data-role="magaza"] .store-sale-screen .cart-title-icon,
body[data-role="magaza"] .store-sale-screen .cart-count,
body[data-role="magaza"] .store-sale-screen .tile-copy b,
body[data-role="magaza"] .store-sale-screen .sale-net-total strong {
  color: #1859c9;
}

body[data-role="magaza"] .store-sale-screen .category-menu button:hover,
body[data-role="magaza"] .store-sale-screen .category-menu button.active,
body[data-role="magaza"] .store-sale-screen .catalog-view-toggle button.active {
  border-color: var(--ui-blue);
  background: var(--ui-blue-soft);
  color: #1859c9;
}

body[data-role="magaza"] .store-sale-screen .product-tile:hover {
  border-color: var(--ui-blue);
  box-shadow: 0 7px 20px rgba(52, 120, 246, .12);
}

body[data-role="magaza"] .store-sale-screen .tile-code-mark {
  background: var(--ui-blue-soft);
  color: #1859c9;
}

body[data-role="magaza"] .store-sale-screen .discount-type-toggle button.active,
body[data-role="magaza"] .store-sale-screen .cart-line-discount-trigger[aria-expanded="true"],
body[data-role="magaza"] .store-sale-screen .general-discount-trigger[aria-expanded="true"],
body[data-role="magaza"] .store-sale-screen .mobile-cart-toggle {
  border-color: var(--ui-blue);
  background: var(--ui-blue);
  color: #fff;
}

body[data-role="magaza"] .store-sale-screen .payment-action.kart {
  background: var(--ui-blue);
}

body[data-role="magaza"] .store-sale-screen .payment-action.nakit {
  background: var(--ui-success);
}

body[data-role="magaza"] .store-sale-screen .payment-action.diger {
  background: var(--info);
}

body[data-role="magaza"] .store-sale-screen .payment-action:disabled {
  background: #cbd5e1;
  color: #526174;
}

body[data-role="magaza"] .store-break-button.is-start {
  border-color: var(--ui-success-bright);
  background: var(--ui-success);
}

body[data-role="magaza"] .store-break-button.is-end {
  border-color: var(--ui-danger-bright);
  background: var(--ui-danger);
}

body[data-role="magaza"] .store-break-button:disabled,
body[data-role="magaza"] .store-break-button.is-start:disabled,
body[data-role="magaza"] .store-break-button.is-end:disabled {
  border-color: #8f969f;
  background: #68717d;
  color: #e4e7eb;
  opacity: .58;
  filter: grayscale(.7);
  cursor: not-allowed;
  box-shadow: none;
}

body[data-role="depo"] .content,
body[data-role="dealer"] .content {
  padding-top: 18px;
}

body[data-role="depo"] .page-head,
body[data-role="dealer"] .dealer-page-head {
  margin-top: 0;
  margin-bottom: 18px;
}

body[data-role="depo"] .page-head h1,
body[data-role="dealer"] .dealer-page-head h1 {
  margin-top: 4px;
  margin-bottom: 0;
}

/* Dealer: color-only overrides. Ordering, cart and responsive layout stay intact. */
body[data-role="dealer"] .dealer-categories button:hover,
body[data-role="dealer"] .dealer-categories button.is-active {
  border-color: var(--ui-blue);
  background: var(--ui-blue-soft);
  color: #1859c9;
  box-shadow: none;
}

body[data-role="dealer"] .dealer-product-row:hover,
body[data-role="dealer"] .dealer-product-row:focus-visible {
  border-color: var(--ui-blue);
  background: #f8fbff;
}

body[data-role="dealer"] .dealer-product-label b,
body[data-role="dealer"] .dealer-add-feedback {
  color: #1859c9;
}

body[data-role="dealer"] .dealer-cart,
body[data-role="dealer"] .dealer-review-card,
body[data-role="dealer"] .dealer-order-card {
  border-color: var(--ui-border);
  background: var(--ui-card);
  box-shadow: var(--ui-shadow-sm);
}

body[data-role="dealer"] .dealer-cart-fab {
  border-color: var(--ui-blue);
  background: var(--ui-blue);
  color: #fff;
}

/* Product family accents: small markers only, never a full-card fill. */
body[data-role="depo"] .product-tile[data-code^="M" i],
body[data-role="magaza"] .product-tile[data-code^="M" i],
body[data-role="dealer"] .dealer-product-row[data-code^="M" i] {
  border-left: 3px solid #3478f6;
}

body[data-role="depo"] .product-tile[data-code^="W" i],
body[data-role="magaza"] .product-tile[data-code^="W" i],
body[data-role="dealer"] .dealer-product-row[data-code^="W" i] {
  border-left: 3px solid #e84b8a;
}

body[data-role="depo"] .product-tile[data-code^="U" i],
body[data-role="magaza"] .product-tile[data-code^="U" i],
body[data-role="dealer"] .dealer-product-row[data-code^="U" i] {
  border-left: 3px solid #0ea5a6;
}

body[data-role="magaza"] .product-tile[data-code^="M" i] .tile-code-mark {
  background: rgba(52, 120, 246, .11);
  color: #1859c9;
}

body[data-role="magaza"] .product-tile[data-code^="W" i] .tile-code-mark {
  background: rgba(232, 75, 138, .11);
  color: #b72060;
}

body[data-role="magaza"] .product-tile[data-code^="U" i] .tile-code-mark {
  background: rgba(14, 165, 166, .11);
  color: #087477;
}

/* Guest login/store-access: shared navy surface with the approved light UI. */
body[data-role="guest"] .login-wrap {
  background:
    radial-gradient(circle at 18% 18%, rgba(0, 207, 255, .10), transparent 27rem),
    radial-gradient(circle at 84% 82%, rgba(52, 120, 246, .13), transparent 30rem),
    linear-gradient(155deg, var(--ui-night), var(--ui-navy));
}

body[data-role="guest"] .login-card {
  border-color: rgba(148, 163, 184, .28);
  border-top-color: var(--ui-cyan-bright);
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 28px 70px rgba(2, 6, 23, .42);
}

body[data-role="guest"] .login-card::after {
  border-color: rgba(0, 207, 255, .16);
}

body[data-role="guest"] .login-product-name {
  color: #1859c9;
}

body[data-role="guest"] .store-context-badge {
  border-color: rgba(0, 207, 255, .35);
  background: var(--ui-cyan-soft);
  color: var(--ui-text);
}

body[data-role="guest"] .store-context-badge span {
  color: #00677d;
}

body[data-role="guest"] .offline-banner {
  background: var(--ui-danger);
}

@media (prefers-reduced-motion: reduce) {
  body[data-role="manager"] *,
  body[data-role="depo"] *,
  body[data-role="magaza"] *,
  body[data-role="dealer"] *,
  body[data-role="guest"] * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}