/* ============================================================================
   MERIDIAN SELLER CENTRE — seller.css
   Extends the main site's design tokens (style.css is linked before this
   file) with the layout and components specific to the seller dashboard:
   sidebar shell, data tables, wizard stepper, file upload widget, mini
   charts, and seller-specific status badges. Distinct from the customer
   site's header/footer nav — this is a business console, not a storefront.
   ============================================================================ */

:root{
  /* Seller centre reuses the brand orange/navy tokens from style.css, with
     a slightly deeper surface tone so it reads as a distinct "console" */
  --seller-bg: #F2F3F6;
  --seller-sidebar-bg: #14213D;
  --seller-sidebar-text: rgba(246,246,248,0.68);
  --seller-sidebar-text-active: #FFFFFF;
  --seller-sidebar-width: 260px;
  --seller-sidebar-width-collapsed: 76px;
  --seller-topbar-h: 68px;
}

body{ background: var(--seller-bg); }

/* -------------------------------- Shell layout ----------------------------- */
.seller-shell{ display: flex; min-height: 100vh; }

.seller-sidebar{
  width: var(--seller-sidebar-width);
  background: var(--seller-sidebar-bg);
  color: var(--seller-sidebar-text);
  flex-shrink: 0;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  transition: width var(--t-base);
}
.seller-shell.is-collapsed .seller-sidebar{ width: var(--seller-sidebar-width-collapsed); }
.seller-shell.is-collapsed .seller-nav span,
.seller-shell.is-collapsed .seller-brand-text,
.seller-shell.is-collapsed .seller-nav .nav-badge{ display: none; }

.seller-brand{
  display: flex; align-items: center; gap: 10px; padding: var(--sp-md);
  border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
}
.seller-brand .brand-mark{ background: var(--color-primary); color: #fff; }
.seller-brand-text strong{ display: block; color: #fff; font-family: var(--font-display); font-size: var(--fs-md); }
.seller-brand-text span{ font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

.seller-nav{ padding: var(--sp-sm); display: flex; flex-direction: column; gap: 2px; flex: 1; }
.seller-nav-section-label{ font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.35); padding: 14px 10px 6px; }
.seller-nav a{
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md);
  color: var(--seller-sidebar-text); font-size: var(--fs-sm); font-weight: 500; position: relative;
  transition: background var(--t-fast), color var(--t-fast);
}
.seller-nav a:hover{ background: rgba(255,255,255,0.06); color: #fff; }
.seller-nav a.is-active{ background: var(--color-primary); color: #fff; font-weight: 600; }
.seller-nav a i{ width: 18px; text-align: center; flex-shrink: 0; }
.seller-nav .nav-badge{
  margin-left: auto; background: var(--color-error); color: #fff; font-size: 0.65rem; font-weight: 800;
  padding: 1px 7px; border-radius: var(--radius-full);
}
.seller-nav-footer{ padding: var(--sp-sm); border-top: 1px solid rgba(255,255,255,0.08); }
.seller-nav-footer a{ color: #FF9F7A; }

.seller-sidebar-backdrop{ display: none; }

/* -------------------------------- Main column ------------------------------- */
.seller-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.seller-topbar{
  height: var(--seller-topbar-h); background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between; padding-inline: var(--sp-lg);
  position: sticky; top: 0; z-index: 50;
}
.seller-topbar-left{ display: flex; align-items: center; gap: var(--sp-sm); }
.seller-topbar h1{ font-size: var(--fs-lg); }
.seller-topbar-actions{ display: flex; align-items: center; gap: var(--sp-sm); position: relative; }
.seller-content{ padding: var(--sp-lg); flex: 1; }

.seller-icon-btn{
  width: 38px; height: 38px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-primary);
  position: relative;
}
.seller-icon-btn:hover{ border-color: var(--color-primary); }
#seller-menu-toggle{ display: none; }

/* -------------------------------- Status badge (seller / product / application) ---- */
.seller-status-badge{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 700; }
.seller-status-badge::before{ content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-draft{ background: #EEF0F3; color: #63696F; }
.st-submitted, .st-pending-approval, .st-under-review{ background: #FFF3E0; color: var(--color-warning); }
.st-approved, .st-verified, .st-paid, .st-delivered{ background: var(--color-success-bg); color: var(--color-success); }
.st-rejected, .st-failed, .st-cancelled{ background: var(--color-error-bg); color: var(--color-error); }
.st-suspended{ background: #F1EEF9; color: #6B4FBB; }
.st-processing, .st-packed, .st-ready-for-dispatch{ background: #FFF3E0; color: var(--color-warning); }
.st-shipped, .st-out-for-delivery{ background: #E3F2FF; color: #1272C9; }
.st-out-of-stock{ background: var(--color-error-bg); color: var(--color-error); }
.st-returned{ background: #F1EEF9; color: #6B4FBB; }
.st-not-submitted{ background: #EEF0F3; color: #63696F; }
.st-requires-update{ background: #FFF3E0; color: var(--color-warning); }

/* -------------------------------- Stat cards ------------------------------------- */
.seller-stat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.seller-stat-card{
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--sp-md); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-sm);
}
.seller-stat-card .stat-icon{ width: 42px; height: 42px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: 1.1rem; background: var(--color-surface-alt); color: var(--color-primary); flex-shrink: 0; }
.seller-stat-card strong{ display: block; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--color-accent); }
.seller-stat-card span.stat-label{ font-size: var(--fs-xs); color: var(--color-text-muted); }
.seller-stat-card .stat-trend{ font-size: 0.68rem; font-weight: 700; }
.stat-trend.up{ color: var(--color-success); }
.stat-trend.down{ color: var(--color-error); }

/* -------------------------------- Panels / cards --------------------------------- */
.seller-card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-lg); margin-bottom: var(--sp-lg); }
.seller-card-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-md); flex-wrap: wrap; gap: 8px; }
.seller-card-head h2{ font-size: var(--fs-md); }

/* -------------------------------- Data table -------------------------------------- */
.seller-table-wrap{ overflow-x: auto; }
.seller-table{ width: 100%; border-collapse: collapse; min-width: 720px; }
.seller-table th{ text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); padding: 10px 12px; border-bottom: 2px solid var(--color-border); white-space: nowrap; }
.seller-table td{ padding: 12px; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); vertical-align: middle; }
.seller-table tr:hover td{ background: var(--color-surface-alt); }
.seller-table .cell-product{ display: flex; align-items: center; gap: 10px; }
.seller-table .cell-product img{ width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-surface-alt); flex-shrink: 0; }
.seller-table .row-actions{ display: flex; gap: 6px; }
.seller-table .row-actions button, .seller-table .row-actions a{
  width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.seller-table .row-actions button:hover, .seller-table .row-actions a:hover{ border-color: var(--color-primary); color: var(--color-primary); }
.seller-table .row-actions .danger:hover{ border-color: var(--color-error); color: var(--color-error); }

/* Responsive card fallback for tables on small screens */
.seller-card-list{ display: none; }

/* -------------------------------- Filters / toolbar ------------------------------- */
.seller-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); margin-bottom: var(--sp-md); flex-wrap: wrap; }
.seller-filter-chips{ display: flex; gap: 6px; flex-wrap: wrap; }
.seller-filter-chip{ padding: 7px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-muted); }
.seller-filter-chip:hover{ border-color: var(--color-primary); }
.seller-filter-chip.is-active{ background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* -------------------------------- Mini bar charts (no external chart lib) ---------- */
.mini-chart{ display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 10px; }
.mini-chart-col{ flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.mini-chart-bar-wrap{ flex: 1; display: flex; align-items: flex-end; width: 100%; }
.mini-chart-bar{ width: 100%; background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary)); border-radius: 4px 4px 0 0; transition: height 700ms var(--ease); }
.mini-chart-label{ font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 6px; }
.chart-legend-row{ display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: var(--sp-sm); }

.donut-legend{ display: flex; flex-direction: column; gap: 8px; }
.donut-legend-item{ display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.donut-legend-dot{ width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-bar{ flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--color-surface-alt); overflow: hidden; }
.donut-legend-bar-fill{ height: 100%; border-radius: var(--radius-full); transition: width 700ms var(--ease); }

/* -------------------------------- Wizard (seller registration) --------------------- */
.wizard-shell{ max-width: 820px; margin-inline: auto; padding-block: var(--sp-xl); }
.wizard-progress{ display: flex; justify-content: space-between; margin-bottom: var(--sp-xl); position: relative; }
.wizard-progress::before{ content:""; position: absolute; top: 15px; left: 5%; right: 5%; height: 2px; background: var(--color-border); z-index: 0; }
.wizard-progress-fill{ position: absolute; top: 15px; left: 5%; height: 2px; background: var(--color-primary); z-index: 1; transition: width 500ms var(--ease); }
.wizard-dot{ position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.wizard-dot .dot-circle{ width: 32px; height: 32px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-faint); transition: all var(--t-base); }
.wizard-dot span{ font-size: 0.65rem; color: var(--color-text-faint); text-align: center; max-width: 70px; display: none; }
.wizard-dot.is-active .dot-circle{ background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.wizard-dot.is-done .dot-circle{ background: var(--color-success); border-color: var(--color-success); color: #fff; }

.wizard-panel{ display: none; animation: fadeInUp 380ms var(--ease) both; }
.wizard-panel.is-active{ display: block; }
.wizard-step-head{ margin-bottom: var(--sp-lg); }
.wizard-step-head .eyebrow{ margin-bottom: 4px; }
.wizard-step-head h2{ font-size: var(--fs-xl); }
.wizard-step-head p{ color: var(--color-text-muted); margin-top: 4px; }
.wizard-nav-actions{ display: flex; justify-content: space-between; margin-top: var(--sp-xl); }

.strength-meter{ display: flex; gap: 4px; margin-top: 6px; }
.strength-bar{ height: 4px; flex: 1; border-radius: var(--radius-full); background: var(--color-border); }
.strength-bar.filled-weak{ background: var(--color-error); }
.strength-bar.filled-fair{ background: var(--color-warning); }
.strength-bar.filled-strong{ background: var(--color-success); }
.strength-label{ font-size: var(--fs-xs); margin-top: 4px; color: var(--color-text-muted); }

.radio-card-group{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
.radio-card{ border: 2px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-sm) var(--sp-md); cursor: pointer; transition: all var(--t-fast); font-size: var(--fs-sm); font-weight: 600; }
.radio-card:hover{ border-color: var(--color-border-strong); }
.radio-card.is-selected{ border-color: var(--color-primary); background: var(--color-surface-alt); }

/* -------------------------------- File upload widget --------------------------------- */
.upload-zone{
  border: 2px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--sp-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  cursor: pointer; color: var(--color-text-muted); font-size: var(--fs-sm); transition: all var(--t-fast); min-height: 120px;
}
.upload-zone:hover, .upload-zone.is-dragover{ border-color: var(--color-primary); background: var(--color-surface-alt); }
.upload-zone i{ font-size: 1.6rem; color: var(--color-text-faint); }
.upload-zone.has-file{ border-style: solid; padding: var(--sp-sm) var(--sp-md); cursor: default; }
.upload-progress-wrap{ display: flex; align-items: center; gap: 10px; }
.upload-success{ display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.upload-thumb{ width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.upload-file-icon{ width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--color-surface-alt); display: grid; place-items: center; font-size: 1.2rem; color: var(--color-primary); flex-shrink: 0; }
.upload-file-info{ flex: 1; min-width: 0; }
.upload-file-info strong{ display: block; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-file-info span{ font-size: var(--fs-xs); color: var(--color-text-muted); }
.file-remove-btn{ background: none; border: none; color: var(--color-text-faint); flex-shrink: 0; padding: 6px; }
.file-remove-btn:hover{ color: var(--color-error); }

/* Product image gallery uploader (multi-image) */
.image-upload-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.image-upload-slot{ aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; position: relative; border: 1px solid var(--color-border); }
.image-upload-slot img{ width: 100%; height: 100%; object-fit: cover; }
.image-upload-slot .primary-tag{ position: absolute; top: 4px; left: 4px; background: var(--color-primary); color: #fff; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-sm); }
.image-upload-slot .remove-img-btn{ position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; display: grid; place-items: center; font-size: 0.7rem; }
.image-upload-add{ aspect-ratio: 1/1; border: 2px dashed var(--color-border-strong); border-radius: var(--radius-md); display: grid; place-items: center; cursor: pointer; color: var(--color-text-faint); }
.image-upload-add:hover{ border-color: var(--color-primary); color: var(--color-primary); }

/* -------------------------------- Repeatable rows (specs / features / variations) ---- */
.repeater-row{ display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.repeater-row input, .repeater-row select{ flex: 1; }
.repeater-remove{ width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text-faint); }
.repeater-remove:hover{ color: var(--color-error); border-color: var(--color-error); }
.repeater-add-btn{ margin-top: 4px; }

/* -------------------------------- Product preview (customer-facing simulation) ------- */
.product-preview-frame{ border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-lg); background: var(--color-surface); }
.preview-badge{ display: inline-block; background: var(--color-warning); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-sm); margin-bottom: var(--sp-sm); text-transform: uppercase; letter-spacing: 0.04em; }

/* -------------------------------- Notifications dropdown ------------------------------ */
.seller-notif-dropdown{
  position: absolute; top: calc(100% + 10px); right: 0; width: 340px; max-height: 420px; overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--t-base); z-index: 200; padding: 6px;
}
.seller-notif-dropdown.is-open{ opacity: 1; visibility: visible; transform: translateY(0); }
.seller-notif-item{ display: flex; gap: 10px; padding: 12px; border-radius: var(--radius-md); cursor: pointer; }
.seller-notif-item:hover{ background: var(--color-surface-alt); }
.seller-notif-item.is-unread{ background: #FFF7F0; }
.seller-notif-item strong{ font-size: var(--fs-sm); display: block; }
.seller-notif-item p{ font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
.seller-notif-time{ font-size: 0.65rem; color: var(--color-text-faint); }
.seller-notif-dot{ width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.notif-success{ background: var(--color-success); }
.notif-error{ background: var(--color-error); }
.notif-warning{ background: var(--color-warning); }
.notif-info{ background: #1272C9; }
.seller-notif-empty{ padding: var(--sp-lg); text-align: center; color: var(--color-text-muted); font-size: var(--fs-sm); }

/* -------------------------------- Pending / rejected / suspended status pages --------- */
.status-journey{ display: flex; flex-direction: column; gap: 0; max-width: 480px; margin-inline: auto; }
.status-journey-step{ display: flex; gap: var(--sp-md); position: relative; padding-bottom: var(--sp-lg); }
.status-journey-step:last-child{ padding-bottom: 0; }
.status-journey-dot{ width: 30px; height: 30px; border-radius: 50%; background: var(--color-surface-alt); border: 2px solid var(--color-border); display: grid; place-items: center; font-size: 0.8rem; color: var(--color-text-faint); flex-shrink: 0; z-index: 1; }
.status-journey-line{ position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--color-border); }
.status-journey-step.is-done .status-journey-dot{ background: var(--color-success); border-color: var(--color-success); color: #fff; }
.status-journey-step.is-done .status-journey-line{ background: var(--color-success); }
.status-journey-step.is-current .status-journey-dot{ background: var(--color-primary); border-color: var(--color-primary); color: #fff; animation: badgePop 600ms var(--ease); }
.status-journey-body strong{ font-size: var(--fs-sm); }
.status-journey-body span{ display: block; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }

.big-status-card{ text-align: center; padding: var(--sp-2xl) var(--sp-lg); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); }
.big-status-card .status-icon-circle{ width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; margin-inline: auto; margin-bottom: var(--sp-md); }
.status-icon-circle.pending{ background: #FFF3E0; color: var(--color-warning); }
.status-icon-circle.rejected{ background: var(--color-error-bg); color: var(--color-error); }
.status-icon-circle.suspended{ background: #F1EEF9; color: #6B4FBB; }
.status-icon-circle.approved{ background: var(--color-success-bg); color: var(--color-success); }

/* -------------------------------- Review (final registration step) -------------------- */
.review-section{ border-bottom: 1px solid var(--color-border); padding-block: var(--sp-md); }
.review-section:last-child{ border-bottom: none; }
.review-section-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-sm); }
.review-section-head h3{ font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.review-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px var(--sp-lg); }
.review-grid div span{ display: block; font-size: var(--fs-xs); color: var(--color-text-faint); }
.review-grid div strong{ font-size: var(--fs-sm); }

/* -------------------------------- Responsive --------------------------------- */
@media (max-width: 1080px){
  .seller-stat-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  #seller-menu-toggle{ display: grid; }
  .seller-sidebar{
    position: fixed; left: 0; top: 0; z-index: 300; transform: translateX(-100%);
    transition: transform var(--t-slow); width: 260px !important;
  }
  .seller-sidebar.is-open{ transform: translateX(0); }
  .seller-sidebar.is-open .seller-nav span, .seller-sidebar.is-open .seller-brand-text{ display: block !important; }
  .seller-sidebar-backdrop{
    display: block; position: fixed; inset: 0; background: rgba(13,23,48,0.5); z-index: 290;
    opacity: 0; visibility: hidden; transition: opacity var(--t-base);
  }
  .seller-sidebar-backdrop.is-open{ opacity: 1; visibility: visible; }
  #sidebar-collapse-btn{ display: none; }

  .seller-table-wrap{ display: none; }
  .seller-card-list{ display: flex; flex-direction: column; gap: var(--sp-sm); }
  .radio-card-group{ grid-template-columns: 1fr; }
  .review-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .seller-stat-grid{ grid-template-columns: 1fr 1fr; }
  .seller-content{ padding: var(--sp-md); }
  .seller-notif-dropdown{ position: fixed; top: var(--seller-topbar-h); left: 8px; right: 8px; width: auto; }
  .image-upload-grid{ grid-template-columns: repeat(3, 1fr); }
}