/* =====================================================
   RIZYDAK VENDOR DASHBOARD — DESIGN SYSTEM
   Namespace: rzv- (Rizydak Vendor)

   IMPORTANT: every selector below is scoped under .rzv-scope.
   BUG FIX: earlier versions of this file had the entire dashboard
   layout section (shell/sidebar/main/stats/charts/tables/forms/
   mobile-nav) written as bare, unscoped selectors (e.g. .rzv-shell
   instead of .rzv-scope .rzv-shell). That gave them low CSS
   specificity — easily overridden by theme or Elementor CSS with
   equal or higher specificity. This is exactly what caused the
   mobile hamburger button to stay visible on desktop: its bare
   `.rzv-mobile-toggle{ display:none; }` rule lost to some other
   rule on the real site. Every selector is now consistently scoped
   the same way the original "shared atoms" section always was.
   ===================================================== */

:root{
  --rzv-primary:      #23406A;
  --rzv-primary-dark: #17304F;
  --rzv-primary-tint: #EAF0F8;
  --rzv-secondary:    #F8FAFC;
  --rzv-accent:       #E11D48;
  --rzv-accent-tint:  #FCE7EB;
  --rzv-text:         #1E293B;
  --rzv-text-alt:     #64748B;
  --rzv-border:       #E2E8F0;
  --rzv-surface:      #FFFFFF;
  --rzv-success:      #15803D;
  --rzv-success-bg:   #ECFDF3;
  --rzv-pending:      #B45309;
  --rzv-pending-bg:   #FFFBEB;

  --rzv-font:      'Vazirmatn', Tahoma, sans-serif;
  --rzv-font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --rzv-radius-sm: 10px;
  --rzv-radius-md: 14px;
  --rzv-radius-lg: 20px;

  --rzv-shadow: 0 8px 24px rgba(35,64,106,0.07);
  --rzv-shadow-lift: 0 18px 40px rgba(35,64,106,0.15);
}

.rzv-scope, .rzv-scope *{ box-sizing:border-box; }
.rzv-scope{
  font-family:var(--rzv-font);
  color:var(--rzv-text);
  background:var(--rzv-secondary);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.rzv-scope button{ font-family:inherit; }

/* ---------- shared atoms ---------- */
.rzv-scope .rzv-eyebrow{
  font-size:13px; font-weight:600; color:var(--rzv-accent);
  letter-spacing:.02em;
}
.rzv-scope .rzv-btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:12px;
  padding:13px 20px; font-size:14.5px; font-weight:600; line-height:1;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.rzv-scope .rzv-btn:hover{ transform:translateY(-1px); }
.rzv-scope .rzv-btn:active{ transform:translateY(1px); }
.rzv-scope .rzv-btn-accent{ background:var(--rzv-accent); color:#fff; }
.rzv-scope .rzv-btn-accent:hover{ box-shadow:0 10px 22px rgba(225,29,72,.28); }
.rzv-scope .rzv-btn-ghost{ background:var(--rzv-surface); color:var(--rzv-primary); border-color:var(--rzv-border); }
.rzv-scope .rzv-btn-ghost:hover{ border-color:var(--rzv-primary); box-shadow:0 6px 16px rgba(35,64,106,.10); }
.rzv-scope .rzv-btn-icon{
  width:38px; height:38px; padding:0; justify-content:center;
  background:var(--rzv-surface); border:1px solid var(--rzv-border); border-radius:var(--rzv-radius-sm); color:var(--rzv-text-alt);
  transition:color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.rzv-scope .rzv-btn-icon:hover{ color:var(--rzv-primary); border-color:var(--rzv-primary); transform:translateY(-1px); box-shadow:0 6px 14px rgba(35,64,106,.10); }

.rzv-scope .rzv-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px;
  border:1px solid transparent;
}
.rzv-scope .rzv-pill-success{ background:var(--rzv-success-bg); color:var(--rzv-success); border-color:rgba(21,128,61,.18); }
.rzv-scope .rzv-pill-pending{ background:var(--rzv-pending-bg); color:var(--rzv-pending); border-color:rgba(180,83,9,.18); }
.rzv-scope .rzv-pill-muted{ background:#F1F5F9; color:var(--rzv-text-alt); border-color:var(--rzv-border); }
.rzv-scope .rzv-pill-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

.rzv-scope .rzv-code{
  font-family:var(--rzv-font-mono); font-size:14px; font-weight:500;
  background:var(--rzv-primary-tint); color:var(--rzv-primary);
  padding:3px 8px; border-radius:6px; letter-spacing:.02em;
}

.rzv-scope .rzv-card{
  background:var(--rzv-surface); border:1px solid var(--rzv-border);
  border-radius:var(--rzv-radius-md); box-shadow:var(--rzv-shadow);
}

/* =====================================================
   1. DESIGN SYSTEM REFERENCE PANEL
   ===================================================== */
.rzv-scope .rzv-tokens{ max-width:1200px; margin:0 auto; padding:56px 24px 24px; }
.rzv-scope .rzv-tokens h1{ font-size:28px; font-weight:800; margin:0 0 6px; color:var(--rzv-primary); }
.rzv-scope .rzv-tokens .rzv-sub{ color:var(--rzv-text-alt); font-size:15px; margin:0 0 40px; }

.rzv-scope .rzv-tokens h2{ font-size:18px; font-weight:700; margin:0 0 16px; padding-inline-start:14px; border-inline-start:3px solid var(--rzv-accent); }

.rzv-scope .rzv-token-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-bottom:44px; }
.rzv-scope .rzv-swatch{ border-radius:var(--rzv-radius-md); overflow:hidden; border:1px solid var(--rzv-border); background:var(--rzv-surface); }
.rzv-scope .rzv-swatch-color{ height:64px; }
.rzv-scope .rzv-swatch-meta{ padding:10px 14px; }
.rzv-scope .rzv-swatch-meta .rzv-name{ font-size:13px; font-weight:700; display:block; }
.rzv-scope .rzv-swatch-meta .rzv-hex{ font-family:var(--rzv-font-mono); font-size:12px; color:var(--rzv-text-alt); }

.rzv-scope .rzv-type-sample{ display:flex; align-items:baseline; gap:18px; padding:14px 0; border-bottom:1px dashed var(--rzv-border); }
.rzv-scope .rzv-type-sample:last-child{ border-bottom:none; }
.rzv-scope .rzv-type-label{ width:150px; flex:0 0 auto; font-size:12px; color:var(--rzv-text-alt); font-family:var(--rzv-font-mono); }
.rzv-scope .rzv-type-grid{ margin-bottom:44px; }

.rzv-scope .rzv-note{ background:var(--rzv-primary-tint); color:var(--rzv-primary); border-radius:var(--rzv-radius-sm); padding:14px 18px; font-size:14px; margin-bottom:44px; }

/* =====================================================
   2. APPLIED UI — VENDOR DASHBOARD (SHORTCODE OUTPUT)
   ===================================================== */
.rzv-scope .rzv-dashboard{
  max-width:1280px; margin:0 auto 80px; padding:0 24px;
}
.rzv-scope .rzv-shell{
  display:grid; grid-template-columns:270px 1fr;
  gap:24px; border-radius:0; overflow:visible;
  box-shadow:none; border:none;
  height:85vh; max-height:85vh; background:transparent;
  position:relative;
}

/* ---- sidebar (independent floating card, Panel-style) ---- */
.rzv-scope .rzv-side{
  background:var(--rzv-primary); color:#fff; padding:32px 20px;
  display:flex; flex-direction:column; overflow-y:auto; min-height:0;
  border-radius:var(--rzv-radius-lg);
  box-shadow:var(--rzv-shadow-lift);
}
.rzv-scope .rzv-brand{ display:flex; align-items:center; gap:12px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.12); }
.rzv-scope .rzv-brand-badge{
  width:44px; height:44px; border-radius:var(--rzv-radius-sm);
  background:#fff; color:var(--rzv-primary);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex:0 0 auto;
}
.rzv-scope .rzv-brand-name{ font-size:15px; font-weight:700; }
.rzv-scope .rzv-brand-role{ font-size:12px; color:rgba(255,255,255,.6); margin-top:2px; }

.rzv-scope .rzv-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.rzv-scope .rzv-nav button{
  width:100%; display:flex; align-items:center; gap:12px;
  background:transparent; border:none; border-inline-start:3px solid transparent;
  color:rgba(255,255,255,.8); font-size:14px; font-weight:600;
  padding:12px 14px; border-radius:var(--rzv-radius-sm); cursor:pointer; text-align:start;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.rzv-scope .rzv-nav button svg{ width:18px; height:18px; flex:0 0 auto; }
.rzv-scope .rzv-nav button:hover{ background:rgba(255,255,255,.07); color:#fff; }
.rzv-scope .rzv-nav button.is-active{ background:#fff; color:var(--rzv-primary); border-inline-start-color:var(--rzv-accent); box-shadow:0 8px 18px rgba(0,0,0,.14); }

.rzv-scope .rzv-side-foot{ margin-top:auto; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:12px; color:rgba(255,255,255,.55); }

.rzv-scope .rzv-logout-link{
  display:flex; align-items:center; gap:10px; margin-top:14px; padding:11px 14px;
  border-radius:var(--rzv-radius-sm); color:rgba(255,255,255,.7); font-size:14px; font-weight:600;
  text-decoration:none; border:1px solid rgba(255,255,255,.14);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rzv-scope .rzv-logout-link svg{ width:18px; height:18px; flex:0 0 auto; }
.rzv-scope .rzv-logout-link:hover{ background:rgba(225,29,72,.18); color:#fff; border-color:var(--rzv-accent); transform:translateY(-1px); box-shadow:0 6px 15px rgba(225,29,72,.25); }

/* ---- main ---- */
.rzv-scope .rzv-main{ padding:4px 4px 4px 0; background:transparent; overflow-y:auto; min-height:0; }
.rzv-scope .rzv-topbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  background:var(--rzv-surface); border:1px solid var(--rzv-border); border-radius:var(--rzv-radius-lg);
  box-shadow:var(--rzv-shadow); padding:24px 28px; margin-bottom:20px;
}
.rzv-scope .rzv-topbar h2{ font-size:22px; font-weight:800; margin:0; color:var(--rzv-text); }
.rzv-scope .rzv-topbar .rzv-sub{ color:var(--rzv-text-alt); font-size:13.5px; margin:4px 0 0; line-height:1.7; }
.rzv-scope .rzv-store-pill{ display:flex; align-items:center; gap:8px; background:var(--rzv-secondary); border:1px solid var(--rzv-border); border-radius:999px; padding:6px 14px 6px 6px; }
.rzv-scope .rzv-store-pill img,.rzv-scope .rzv-store-pill .rzv-avatar{ width:28px; height:28px; border-radius:50%; background:var(--rzv-primary-tint); color:var(--rzv-primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.rzv-scope .rzv-store-pill span{ font-size:13px; font-weight:600; }

.rzv-scope .rzv-tabpanel{ display:none; }
.rzv-scope .rzv-tabpanel.is-active{ display:block; }

/* stat cards */
.rzv-scope .rzv-stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.rzv-scope .rzv-stat{
  padding:20px; min-width:0; position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s ease;
}
.rzv-scope .rzv-stat::before{
  content:""; position:absolute; bottom:-40px; inset-inline-start:-40px;
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, rgba(35,64,106,.14) 0%, rgba(225,29,72,.07) 45%, transparent 70%);
  filter:blur(20px); pointer-events:none; transition:transform .4s ease, opacity .4s ease;
}
.rzv-scope .rzv-stat::after{
  content:""; position:absolute; top:0; inset-inline:20px; height:3px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg, var(--rzv-primary) 0%, var(--rzv-accent) 100%);
  opacity:.8;
}
.rzv-scope .rzv-stat:hover{ transform:translateY(-3px); box-shadow:var(--rzv-shadow-lift); border-color:rgba(35,64,106,.22); }
.rzv-scope .rzv-stat:hover::before{ transform:scale(1.2); opacity:.9; }
.rzv-scope .rzv-stat .rzv-stat-label{ font-size:13px; color:var(--rzv-text-alt); font-weight:600; margin-bottom:8px; position:relative; }
.rzv-scope .rzv-stat .rzv-stat-value{ font-size:26px; font-weight:800; color:var(--rzv-primary); word-break:break-word; letter-spacing:-.4px; position:relative; }
.rzv-scope .rzv-stat .rzv-stat-value small{ font-size:13px; font-weight:600; color:var(--rzv-text-alt); }
.rzv-scope .rzv-stat .rzv-stat-delta{ font-size:12px; color:var(--rzv-success); font-weight:600; margin-top:6px; position:relative; }

.rzv-scope .rzv-chart-card{ padding:24px; margin-bottom:24px; overflow-x:auto; }
.rzv-scope .rzv-chart-card h3{ font-size:15px; font-weight:700; margin:0 0 18px; }

/* animated, interactive charts */
.rzv-scope .rzv-bar{
  transform-box: fill-box; transform-origin: center bottom;
  transition: transform .55s cubic-bezier(.22,1,.36,1), filter .15s ease;
  cursor:pointer;
}
.rzv-scope .rzv-bar.rzv-bar-hidden{ transform: scaleY(0); }
.rzv-scope .rzv-bar:hover{ filter:brightness(1.18); transform:translateY(-2px); }

.rzv-scope .rzv-cat-bar{
  transform-box: fill-box; transform-origin: left center;
  transition: transform .5s cubic-bezier(.22,1,.36,1), filter .15s ease;
  cursor:pointer;
}
.rzv-scope .rzv-cat-bar.rzv-cat-bar-hidden{ transform: scaleX(0); }
.rzv-scope .rzv-cat-bar:hover{ filter:brightness(1.15); }

.rzv-scope .rzv-chart-tip{
  position:fixed; z-index:9999; pointer-events:none;
  background:#1E293B; color:#fff; font-family:var(--rzv-font);
  font-size:12px; font-weight:600; padding:6px 12px; border-radius:8px;
  white-space:nowrap; opacity:0; transition:opacity .12s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

/* toast notifications */
.rzv-scope .rzv-toast{
  position:fixed; z-index:99999; bottom:24px; inset-inline-end:24px;
  max-width:320px; font-family:var(--rzv-font); font-size:14px; font-weight:600;
  color:#fff; padding:14px 18px; border-radius:var(--rzv-radius-sm);
  box-shadow:var(--rzv-shadow-lift);
  transform:translateY(16px); opacity:0; pointer-events:none;
  transition:transform .25s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.rzv-scope .rzv-toast.rzv-toast-visible{ transform:translateY(0); opacity:1; }
.rzv-scope .rzv-toast.rzv-toast-success{ background:var(--rzv-success); }
.rzv-scope .rzv-toast.rzv-toast-error{ background:var(--rzv-accent); }

.rzv-scope .rzv-filter-bar{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.rzv-scope .rzv-filter-bar input,.rzv-scope .rzv-filter-bar select{
  border:1px solid var(--rzv-border); border-radius:var(--rzv-radius-sm);
  padding:10px 12px; font-family:inherit; font-size:14px; color:var(--rzv-text); background:#fff;
}
.rzv-scope .rzv-filter-bar input{ flex:1 1 220px; min-width:0; }
.rzv-scope .rzv-filter-bar select{ flex:0 0 auto; }
.rzv-scope .rzv-filter-bar input:focus,.rzv-scope .rzv-filter-bar select:focus{ outline:none; border-color:var(--rzv-primary); box-shadow:0 0 0 4px rgba(35,64,106,.08); }

/* table */
.rzv-scope .rzv-table-card{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.rzv-scope .rzv-table-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--rzv-border); }
.rzv-scope .rzv-table-head h3{ font-size:15px; font-weight:700; margin:0; }
.rzv-scope table.rzv-table{ width:100%; border-collapse:collapse; font-size:14px; }
.rzv-scope table.rzv-table th{ text-align:start; font-size:12px; font-weight:700; color:var(--rzv-text-alt); text-transform:uppercase; letter-spacing:.03em; padding:12px 22px; background:var(--rzv-secondary); border-bottom:1px solid var(--rzv-border); white-space:nowrap; }
.rzv-scope table.rzv-table td{ padding:14px 22px; border-bottom:1px solid var(--rzv-border); vertical-align:middle; }
.rzv-scope table.rzv-table tr:last-child td{ border-bottom:none; }
.rzv-scope table.rzv-table tbody tr{ transition:background .15s ease; }
.rzv-scope table.rzv-table tbody tr:hover{ background:rgba(35,64,106,.025); }
.rzv-scope .rzv-prod-cell{ display:flex; align-items:center; gap:12px; }
.rzv-scope .rzv-prod-thumb{
  width:42px; height:42px; border-radius:var(--rzv-radius-sm);
  background:linear-gradient(135deg, var(--rzv-primary-tint), rgba(35,64,106,.16));
  border:1px solid rgba(35,64,106,.10);
  flex:0 0 auto; object-fit:cover; display:block;
}
.rzv-scope .rzv-prod-name{ font-weight:600; }
.rzv-scope .rzv-prod-cat{ font-size:12px; color:var(--rzv-text-alt); }
.rzv-scope .rzv-actions{ display:flex; gap:8px; }
.rzv-scope .rzv-privacy-note{ display:flex; align-items:center; gap:8px; padding:14px 22px; background:var(--rzv-primary-tint); color:var(--rzv-primary); font-size:13px; font-weight:600; }

/* add product panel */
.rzv-scope .rzv-add-panel{ display:none; padding:22px; border-top:1px solid var(--rzv-border); }
.rzv-scope .rzv-add-panel.is-open{ display:block; }
.rzv-scope .rzv-form-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.rzv-scope .rzv-field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.rzv-scope .rzv-field input,.rzv-scope .rzv-field select,.rzv-scope .rzv-field textarea{
  width:100%; border:1px solid var(--rzv-border); border-radius:var(--rzv-radius-sm);
  padding:11px 12px; font-family:inherit; font-size:14px; color:var(--rzv-text); background:#fff;
}
.rzv-scope .rzv-field input:focus,.rzv-scope .rzv-field select:focus,.rzv-scope .rzv-field textarea:focus{ outline:none; border-color:var(--rzv-primary); box-shadow:0 0 0 4px rgba(35,64,106,.08); }
.rzv-scope .rzv-attr-dropdown-wrap{ position:relative; }
.rzv-scope .rzv-attr-control{ position:relative; }

.rzv-scope .rzv-attr-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; min-height:44px; padding:8px 12px;
  border:1px solid var(--rzv-border); border-radius:var(--rzv-radius-sm);
  background:#fff; cursor:pointer; text-align:right; font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.rzv-scope .rzv-attr-toggle:hover{ border-color:var(--rzv-primary); }
.rzv-scope .rzv-attr-toggle.is-open{ border-color:var(--rzv-primary); box-shadow:0 0 0 4px rgba(35,64,106,.08); }

.rzv-scope .rzv-attr-placeholder{ color:var(--rzv-text-alt); font-size:13.5px; }

.rzv-scope .rzv-attr-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.rzv-scope .rzv-attr-chip{
  display:inline-block; font-size:12px; font-weight:600; line-height:1;
  padding:5px 9px; border-radius:999px; background:var(--rzv-primary-tint); color:var(--rzv-primary);
  white-space:nowrap;
}

.rzv-scope .rzv-attr-caret{
  flex:0 0 auto; width:9px; height:9px;
  border-inline-end:2px solid var(--rzv-text-alt); border-bottom:2px solid var(--rzv-text-alt);
  transform:rotate(45deg); margin-top:-3px; transition:transform .15s ease;
}
.rzv-scope .rzv-attr-toggle.is-open .rzv-attr-caret{ transform:rotate(225deg); margin-top:3px; }

.rzv-scope .rzv-attr-panel{
  display:none; position:absolute; z-index:20; top:calc(100% + 6px); inset-inline:0;
  max-height:220px; overflow-y:auto; padding:6px;
  background:#fff; border:1px solid var(--rzv-border); border-radius:var(--rzv-radius-sm);
  box-shadow:var(--rzv-shadow-lift);
}
.rzv-scope .rzv-attr-panel.is-open{ display:block; }

.rzv-scope .rzv-attr-option{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13.5px;
  transition:background .12s ease;
}
.rzv-scope .rzv-attr-option:hover{ background:var(--rzv-secondary); }
.rzv-scope .rzv-attr-option input[type="checkbox"]{
  width:16px; height:16px; margin:0; accent-color:var(--rzv-primary); flex:0 0 auto;
}
.rzv-scope .rzv-field-full{ grid-column:1 / -1; }

/* live search box inside attribute / category checkbox dropdowns */
.rzv-scope .rzv-attr-search-wrap{ padding:4px 4px 8px; position:sticky; top:0; background:#fff; z-index:1; }
.rzv-scope .rzv-attr-search{
  width:100%; border:1px solid var(--rzv-border); border-radius:8px;
  padding:8px 10px; font-family:inherit; font-size:13px; color:var(--rzv-text); background:var(--rzv-secondary);
}
.rzv-scope .rzv-attr-search:focus{ outline:none; border-color:var(--rzv-primary); background:#fff; }
.rzv-scope .rzv-attr-panel.rzv-cat-panel{ max-height:280px; }

/* category hierarchy indentation (depth set inline via JS) */
.rzv-scope .rzv-cat-option span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Supplier Logo card */
.rzv-scope .rzv-logo-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.rzv-scope .rzv-logo-preview{
  width:88px; height:88px; flex:0 0 auto; border-radius:var(--rzv-radius-sm);
  border:1px dashed var(--rzv-border); background:var(--rzv-secondary);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.rzv-scope .rzv-logo-preview img{ width:100%; height:100%; object-fit:contain; }
.rzv-scope .rzv-logo-placeholder{ font-size:11.5px; color:var(--rzv-text-alt); text-align:center; padding:0 6px; }
.rzv-scope .rzv-logo-actions{ display:flex; flex-wrap:wrap; gap:8px; }

/* mobile hamburger + backdrop (hidden on desktop by default) */
.rzv-scope .rzv-mobile-toggle{
  display:none; position:absolute; top:14px; inset-inline-start:14px; z-index:1100;
  width:40px; height:40px; align-items:center; justify-content:center;
  background:var(--rzv-primary); color:#fff; border:none; border-radius:var(--rzv-radius-sm);
  cursor:pointer; box-shadow:var(--rzv-shadow);
}
.rzv-scope .rzv-mobile-backdrop{
  display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:999;
  opacity:0; transition:opacity .2s ease;
}
.rzv-scope .rzv-mobile-backdrop.is-open{ display:block; opacity:1; }

/* =====================================================
   3. RESPONSIVE BREAKPOINTS
   ===================================================== */

/* tablet: narrower sidebar instead of jumping straight to the
   mobile drawer, so the transition feels less abrupt */
@media (max-width: 1024px) and (min-width: 861px){
  .rzv-scope .rzv-shell{ grid-template-columns:210px 1fr; }
  .rzv-scope .rzv-side{ padding:22px 16px; }
  .rzv-scope .rzv-stats-row{ gap:12px; }
}

@media (max-width: 860px){
  .rzv-scope .rzv-shell{ grid-template-columns:1fr; height:88vh; max-height:88vh; }
  .rzv-scope .rzv-mobile-toggle{ display:flex; }

  .rzv-scope .rzv-side{
    position:fixed; top:0; inset-inline-start:0; height:100%; width:78vw; max-width:300px;
    z-index:1000; box-shadow:var(--rzv-shadow-lift); border-radius:0;
    flex-direction:column; align-items:stretch;
    transform:translateX(100%); transition:transform .3s cubic-bezier(.22,1,.36,1);
  }
  .rzv-scope .rzv-side.is-open{ transform:translateX(0); }
  .rzv-scope .rzv-brand{ margin-bottom:32px; }
  .rzv-scope .rzv-nav{ flex-direction:column; }
  .rzv-scope .rzv-side-foot{ display:block; }

  .rzv-scope .rzv-main{ padding:64px 18px 24px; }
  .rzv-scope .rzv-stats-row{ grid-template-columns:repeat(2,1fr); }
  .rzv-scope .rzv-form-grid{ grid-template-columns:1fr; }
  .rzv-scope .rzv-filter-bar{ flex-direction:column; }
  .rzv-scope .rzv-filter-bar input,.rzv-scope .rzv-filter-bar select{ width:100%; }
  .rzv-scope table.rzv-table{ font-size:13px; }
  .rzv-scope table.rzv-table th, .rzv-scope table.rzv-table td{ padding:10px 12px; }
  .rzv-scope .rzv-toast{ inset-inline-end:14px; inset-inline-start:14px; max-width:none; bottom:14px; }
}

@media (max-width: 640px){
  .rzv-scope .rzv-stats-row{ grid-template-columns:1fr 1fr; gap:10px; }
  .rzv-scope .rzv-stat{ padding:14px; }
  .rzv-scope .rzv-stat .rzv-stat-value{ font-size:19px; }
  .rzv-scope .rzv-topbar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .rzv-scope .rzv-store-pill{ align-self:flex-start; }
  .rzv-scope .rzv-side{ width:84vw; }
}

/* short/landscape viewports: the fixed vh height can feel cramped */
@media (max-height: 700px){
  .rzv-scope .rzv-shell{ height:92vh; max-height:92vh; }
}

/* =====================================================
   4. FIRST-VISIT ONBOARDING TOUR
   ===================================================== */
.rzv-scope .rzv-tour-overlay{
  position:fixed; inset:0; z-index:1200;
  background:rgba(15,23,42,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:rzvTourFadeIn .18s ease;
}
.rzv-scope .rzv-tour-overlay[hidden]{ display:none; }

@keyframes rzvTourFadeIn{ from{ opacity:0; } to{ opacity:1; } }

.rzv-scope .rzv-tour-card{
  position:relative;
  width:100%; max-width:380px;
  background:#fff; border-radius:var(--rzv-radius-lg);
  box-shadow:var(--rzv-shadow-lift);
  padding:28px 26px 22px;
  text-align:center;
  animation:rzvTourPop .22s cubic-bezier(.22,1,.36,1);
}
@keyframes rzvTourPop{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }

.rzv-scope .rzv-tour-close{
  position:absolute; top:12px; inset-inline-end:12px;
  width:28px; height:28px; border:none; border-radius:50%;
  background:var(--rzv-secondary); color:var(--rzv-text-alt);
  font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.rzv-scope .rzv-tour-close:hover{ background:var(--rzv-border); }

.rzv-scope .rzv-tour-icon{
  width:52px; height:52px; margin:0 auto 16px;
  border-radius:50%; background:var(--rzv-primary-tint); color:var(--rzv-primary);
  display:flex; align-items:center; justify-content:center;
}

.rzv-scope .rzv-tour-title{ margin:0 0 8px; font-size:18px; font-weight:800; color:var(--rzv-text); }
.rzv-scope .rzv-tour-desc{ margin:0 0 20px; font-size:13.5px; color:var(--rzv-text-alt); line-height:1.8; }

.rzv-scope .rzv-tour-dots{ display:flex; justify-content:center; gap:6px; margin-bottom:22px; }
.rzv-scope .rzv-tour-dot{
  width:6px; height:6px; border-radius:50%; background:var(--rzv-border);
  transition:background .15s ease, width .15s ease;
}
.rzv-scope .rzv-tour-dot.is-active{ background:var(--rzv-accent); width:18px; border-radius:4px; }

.rzv-scope .rzv-tour-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* subtle highlight on the sidebar nav item matching the current tour step */
.rzv-scope .rzv-nav button.rzv-tour-highlight{
  box-shadow:0 0 0 2px var(--rzv-accent) inset;
  border-radius:var(--rzv-radius-sm);
}

@media (max-width: 480px){
  .rzv-scope .rzv-tour-card{ padding:24px 18px 18px; max-width:none; width:100%; }
  .rzv-scope .rzv-tour-actions{ flex-direction:column-reverse; gap:10px; }
  .rzv-scope .rzv-tour-actions > div{ width:100%; display:flex; gap:8px; }
  .rzv-scope .rzv-tour-actions > div .rzv-btn{ flex:1 1 auto; justify-content:center; }
  .rzv-scope #rzv-tour-skip{ width:100%; justify-content:center; }
}