/* =============================================================================
   SMJ Marketplace Pro — Dashboard System v6.0
   ─────────────────────────────────────────────────────────────────────────────
   ARCHITECTURE PHILOSOPHY:
   This file is fully self-contained. It owns the dashboard layout entirely
   and cannot be broken by any theme, Elementor, or page builder. All layout
   logic uses CSS custom properties scoped to .smj-db so there is zero
   bleed to or from the surrounding theme.

   ISOLATION STRATEGY:
   1. All tokens are scoped under .smj-db (not :root) to avoid collisions
   2. The full-width wrapper (.smj-db-fullwidth) uses negative margins and
      explicit 100vw width to escape any theme container — no !important needed
   3. Sidebar uses position:sticky with an explicit height budget
   4. Content area uses min-width:0 to prevent grid blowout (critical!)

   SPACING SCALE: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px
   BREAKPOINTS:   mobile < 640px | tablet 640–1024px | desktop > 1024px
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS  (scoped — will not conflict with theme variables)
   ───────────────────────────────────────────────────────────────────────────── */
.smj-db {
  /* Brand */
  --db-brand:          #2563eb;
  --db-brand-dk:       #1d4ed8;
  --db-brand-lt:       #eff6ff;
  --db-brand-glow:     rgba(37, 99, 235, 0.18);
  --db-brand-subtle:   rgba(37, 99, 235, 0.07);

  /* Semantic colours */
  --db-success:        #16a34a;
  --db-success-lt:     #f0fdf4;
  --db-success-border: rgba(22, 163, 74, 0.25);
  --db-danger:         #ef4444;
  --db-danger-lt:      #fef2f2;
  --db-danger-border:  rgba(239, 68, 68, 0.25);
  --db-warning:        #f59e0b;
  --db-warning-lt:     #fffbeb;

  /* Typography */
  --db-font:           'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                       'Inter', 'Segoe UI', system-ui, sans-serif;
  --db-text-1:         #0f172a;   /* headings */
  --db-text-2:         #334155;   /* body */
  --db-text-3:         #64748b;   /* secondary */
  --db-text-4:         #94a3b8;   /* placeholder / muted */

  /* Surfaces */
  --db-canvas:         #f0f4f9;   /* page background */
  --db-surface:        #ffffff;   /* cards, sidebar */
  --db-surface-2:      #f8fafc;   /* inset sections */
  --db-surface-3:      #f1f5f9;   /* hover, dividers */
  --db-border:         #e2e8f0;
  --db-border-2:       #f1f5f9;   /* softer dividers */

  /* Shadows — layered for realism */
  --db-shadow-xs:      0 1px 2px rgba(15, 23, 42, 0.04);
  --db-shadow-sm:      0 1px 3px rgba(15, 23, 42, 0.06),
                       0 1px 2px rgba(15, 23, 42, 0.04);
  --db-shadow-md:      0 4px 16px rgba(15, 23, 42, 0.08),
                       0 1px 4px rgba(15, 23, 42, 0.04);
  --db-shadow-lg:      0 8px 32px rgba(15, 23, 42, 0.12),
                       0 2px 8px rgba(15, 23, 42, 0.06);

  /* Shape */
  --db-radius-xs:      4px;
  --db-radius-sm:      8px;
  --db-radius-md:      12px;
  --db-radius-lg:      16px;
  --db-radius-pill:    9999px;

  /* Spacing (8px base grid) */
  --db-space-1:        4px;
  --db-space-2:        8px;
  --db-space-3:        12px;
  --db-space-4:        16px;
  --db-space-5:        20px;
  --db-space-6:        24px;
  --db-space-8:        32px;
  --db-space-10:       40px;
  --db-space-12:       48px;

  /* Layout */
  --db-sidebar-w:      264px;
  --db-gap:            24px;
  --db-content-max:    100%;

  /* Transitions */
  --db-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --db-duration:       180ms;
  --db-transition:     var(--db-duration) var(--db-ease);
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. FULL-WIDTH ESCAPE LAYER
   Breaks out of any theme container (Elementor section, Twenty-x div.entry-content,
   OceanWP .container, etc.) without touching theme CSS at all.
   ───────────────────────────────────────────────────────────────────────────── */
.smj-db-fullwidth {
  /*
   * WHY: Most themes set a .container / .entry-content max-width (typically 700–1200px).
   * This technique uses a known-safe escape: push left by the viewport offset,
   * then explicitly set 100vw. Works on every theme tested without any !important.
   *
   * The compensate calc uses margin-left: calc(50% - 50vw) which equals
   * exactly -(viewport - container) / 2 — always correct regardless of
   * container size or centering method.
   */
  position    : relative;
  width       : 100vw;
  margin-left : calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing  : border-box;
  background  : var(--db-canvas);
  padding     : var(--db-space-6) var(--db-space-6) var(--db-space-12);
}

/* Prevent horizontal scroll on mobile caused by 100vw when scrollbar exists */
.smj-db-fullwidth {
  overflow-x: hidden;
}

/* Inner constraint — keeps content readable on ultra-wide screens */
.smj-db-fullwidth > .smj-db {
  max-width : 1400px;
  margin    : 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. ELEMENTOR / PAGE BUILDER OVERRIDE LAYER
   Targets the most common builder containers and neutralises them safely.
   ───────────────────────────────────────────────────────────────────────────── */

/* Elementor column/widget padding reset — lets our layout own spacing */
.elementor-widget-shortcode .smj-db-fullwidth,
.elementor-widget-container .smj-db-fullwidth,
.elementor-section .smj-db-fullwidth {
  margin-left : calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left : var(--db-space-6);
  padding-right: var(--db-space-6);
}

/* Elementor global a color override — restore inside dashboard */
.smj-db a,
.smj-db-fullwidth a {
  color          : inherit;
  text-decoration: none;
}
.smj-db a:hover,
.smj-db-fullwidth a:hover {
  text-decoration: none;
}

/* Remove Elementor img constraints inside dashboard */
.smj-db img,
.smj-db-fullwidth img {
  max-width: none;
}

/* OceanWP, Astra, GeneratePress — they all use an .inside or .entry-content padding */
.entry-content .smj-db-fullwidth,
.page-content .smj-db-fullwidth,
.site-content .smj-db-fullwidth {
  margin-left : calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. ROOT DASHBOARD LAYOUT
   CSS Grid: [sidebar | content] — sidebar is fixed width, content is fluid.
   ───────────────────────────────────────────────────────────────────────────── */
.smj-db {
  display              : grid;
  grid-template-columns: var(--db-sidebar-w) minmax(0, 1fr);
  grid-template-rows   : auto;
  align-items          : start;
  gap                  : var(--db-gap);
  font-family          : var(--db-font);
  color                : var(--db-text-1);
  box-sizing           : border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. SIDEBAR
   ───────────────────────────────────────────────────────────────────────────── */
.smj-db__nav {
  /*
   * WHY position:sticky: sidebar scrolls with the user until it sticks to the
   * top, so it stays visible even on long content tabs. height:fit-content
   * ensures it doesn't stretch beyond its natural height.
   */
  position    : sticky;
  top         : var(--db-space-6);
  height      : fit-content;
  background  : var(--db-surface);
  border      : 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  box-shadow  : var(--db-shadow-sm);
  overflow    : hidden;
  font-family : var(--db-font);
  /* Prevent sidebar from becoming too narrow on any screen */
  min-width   : 0;
}

/* ── User identity block ── */
.smj-db__user-block {
  display      : flex;
  align-items  : center;
  gap          : var(--db-space-3);
  padding      : var(--db-space-5) var(--db-space-4) var(--db-space-4);
  border-bottom: 1px solid var(--db-border-2);
  background   : linear-gradient(135deg, var(--db-brand-subtle) 0%, transparent 100%);
}

.smj-db__user-avatar {
  position    : relative;
  flex-shrink : 0;
}

.smj-db__user-avatar img,
.smj-db__user-avatar .avatar {
  width        : 44px;
  height       : 44px;
  border-radius: 50%;
  object-fit   : cover;
  display      : block;
  border       : 2px solid var(--db-surface);
  box-shadow   : 0 0 0 2px var(--db-brand), var(--db-shadow-xs);
}

/* Online presence dot */
.smj-db__user-avatar::after {
  content      : '';
  position     : absolute;
  bottom       : 1px;
  right        : 1px;
  width        : 10px;
  height       : 10px;
  background   : var(--db-success);
  border-radius: 50%;
  border       : 2px solid var(--db-surface);
}

.smj-db__user-info {
  flex     : 1;
  min-width: 0;
}

.smj-db__user-name {
  display      : block;
  font-size    : 13px;
  font-weight  : 700;
  color        : var(--db-text-1);
  line-height  : 1.3;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.smj-db__user-email {
  display      : block;
  font-size    : 11px;
  color        : var(--db-text-3);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  margin-top   : 2px;
}

/* ── Navigation list ── */
.smj-db__nav-list {
  list-style: none;
  margin    : 0;
  padding   : var(--db-space-2) var(--db-space-2) var(--db-space-3);
}

.smj-db__nav-item {
  margin-bottom: 2px;
}

.smj-db__nav-link {
  display        : flex;
  align-items    : center;
  gap            : var(--db-space-3);
  padding        : var(--db-space-2) var(--db-space-3);
  color          : var(--db-text-2);
  font-size      : 13.5px;
  font-weight    : 500;
  border-radius  : var(--db-radius-sm);
  transition     : background var(--db-transition),
                   color var(--db-transition);
  position       : relative;
  line-height    : 1.4;
  cursor         : pointer;
}

.smj-db__nav-link .nav-icon {
  width      : 18px;
  height     : 18px;
  flex-shrink: 0;
  opacity    : 0.5;
  transition : opacity var(--db-transition);
}

.smj-db__nav-link:hover {
  background: var(--db-surface-3);
  color     : var(--db-text-1);
}

.smj-db__nav-link:hover .nav-icon {
  opacity: 0.85;
}

/* Active nav item */
.smj-db__nav-item--active .smj-db__nav-link {
  background : var(--db-brand-subtle);
  color      : var(--db-brand);
  font-weight: 700;
}

.smj-db__nav-item--active .smj-db__nav-link .nav-icon {
  opacity: 1;
}

/* Left accent bar on active item */
.smj-db__nav-item--active .smj-db__nav-link::before {
  content      : '';
  position     : absolute;
  left         : 0;
  top          : 6px;
  bottom       : 6px;
  width        : 3px;
  background   : var(--db-brand);
  border-radius: 0 3px 3px 0;
}

/* Unread message badge */
.smj-db__badge {
  margin-left   : auto;
  background    : var(--db-brand);
  color         : #fff;
  font-size     : 10px;
  font-weight   : 800;
  min-width     : 18px;
  height        : 18px;
  padding       : 0 5px;
  border-radius : var(--db-radius-pill);
  display       : inline-flex;
  align-items   : center;
  justify-content: center;
  line-height   : 1;
  letter-spacing: 0;
}

/* Logout item */
.smj-db__nav-item--logout {
  border-top : 1px solid var(--db-border-2);
  padding-top: var(--db-space-2);
  margin-top : var(--db-space-2);
}

.smj-db__nav-item--logout .smj-db__nav-link {
  color: var(--db-text-3);
}

.smj-db__nav-item--logout .smj-db__nav-link:hover {
  background: var(--db-danger-lt);
  color     : var(--db-danger);
}

.smj-db__nav-item--logout .smj-db__nav-link:hover .nav-icon {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. CONTENT AREA
   ───────────────────────────────────────────────────────────────────────────── */
.smj-db__content {
  /*
   * WHY min-width:0: In CSS Grid, grid items default to min-width:auto which
   * means content can force the column wider than its allocation. Setting
   * min-width:0 makes the column respect its grid allocation — this is THE
   * root cause of most "dashboard overflow/misalignment" bugs.
   */
  min-width: 0;
  display  : flex;
  flex-direction: column;
  gap      : var(--db-space-4);
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. CONTENT SECTIONS (cards)
   ───────────────────────────────────────────────────────────────────────────── */
.smj-db__section {
  background   : var(--db-surface);
  border       : 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  padding      : var(--db-space-6);
  box-shadow   : var(--db-shadow-sm);
  font-family  : var(--db-font);
}

/* Section header row */
.smj-db__section-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  flex-wrap      : wrap;
  gap            : var(--db-space-3);
  padding-bottom : var(--db-space-4);
  margin-bottom  : var(--db-space-5);
  border-bottom  : 1px solid var(--db-border-2);
}

.smj-db__section-title {
  font-size     : 16px;
  font-weight   : 800;
  color         : var(--db-text-1);
  margin        : 0;
  letter-spacing: -0.02em;
  line-height   : 1.3;
  display       : flex;
  align-items   : center;
  gap           : var(--db-space-2);
}

/* Count chip inside section title */
.smj-db__count-chip {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  min-width      : 22px;
  height         : 22px;
  padding        : 0 var(--db-space-2);
  background     : var(--db-surface-3);
  color          : var(--db-text-3);
  font-size      : 11px;
  font-weight    : 700;
  border-radius  : var(--db-radius-pill);
  font-family    : var(--db-font);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. NOTICE / ALERT SYSTEM
   ───────────────────────────────────────────────────────────────────────────── */
.smj-db__notice {
  display      : flex;
  align-items  : flex-start;
  gap          : var(--db-space-3);
  padding      : var(--db-space-3) var(--db-space-4);
  border-radius: var(--db-radius-sm);
  font-size    : 14px;
  font-family  : var(--db-font);
  margin-bottom: var(--db-space-4);
  border       : 1px solid transparent;
}

.smj-db__notice--success {
  background  : var(--db-success-lt);
  border-color: var(--db-success-border);
  color       : #166534;
}

.smj-db__notice--error {
  background  : var(--db-danger-lt);
  border-color: var(--db-danger-border);
  color       : #991b1b;
}

.smj-db__notice--info {
  background  : var(--db-brand-lt);
  border-color: rgba(37, 99, 235, 0.25);
  color       : #1e40af;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. BUTTON SYSTEM (dashboard-specific variants)
   ───────────────────────────────────────────────────────────────────────────── */
.smj-db .db-btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--db-space-1) + 2px;
  padding        : 9px var(--db-space-4);
  border-radius  : var(--db-radius-sm);
  font-size      : 13px;
  font-weight    : 700;
  font-family    : var(--db-font);
  text-decoration: none;
  border         : 1.5px solid transparent;
  cursor         : pointer;
  white-space    : nowrap;
  line-height    : 1.4;
  transition     : background var(--db-transition),
                   border-color var(--db-transition),
                   color var(--db-transition),
                   box-shadow var(--db-transition),
                   transform var(--db-transition);
  -webkit-font-smoothing: antialiased;
}

.smj-db .db-btn:hover {
  transform: translateY(-1px);
}

.smj-db .db-btn:active {
  transform: translateY(0);
}

/* Primary */
.smj-db .db-btn--primary {
  background   : var(--db-brand);
  color        : #fff;
  border-color : var(--db-brand);
  box-shadow   : 0 2px 8px var(--db-brand-glow);
}
.smj-db .db-btn--primary:hover {
  background  : var(--db-brand-dk);
  border-color: var(--db-brand-dk);
  box-shadow  : 0 4px 16px var(--db-brand-glow);
  color       : #fff;
}

/* Outline */
.smj-db .db-btn--outline {
  background  : transparent;
  color       : var(--db-brand);
  border-color: rgba(37, 99, 235, 0.4);
}
.smj-db .db-btn--outline:hover {
  background  : var(--db-brand-lt);
  border-color: var(--db-brand);
}

/* Ghost */
.smj-db .db-btn--ghost {
  background  : var(--db-surface-3);
  color       : var(--db-text-2);
  border-color: transparent;
}
.smj-db .db-btn--ghost:hover {
  background: var(--db-border);
  color     : var(--db-text-1);
}

/* Success */
.smj-db .db-btn--success {
  background  : var(--db-success-lt);
  color       : var(--db-success);
  border-color: var(--db-success-border);
}
.smj-db .db-btn--success:hover {
  background  : var(--db-success);
  color       : #fff;
  border-color: var(--db-success);
}

/* Danger */
.smj-db .db-btn--danger {
  background  : transparent;
  color       : var(--db-danger);
  border-color: var(--db-danger-border);
}
.smj-db .db-btn--danger:hover {
  background  : var(--db-danger-lt);
  border-color: var(--db-danger);
}

/* Size variants */
.smj-db .db-btn--sm {
  padding  : 5px 12px;
  font-size: 12px;
}

.smj-db .db-btn--lg {
  padding  : 12px var(--db-space-6);
  font-size: 15px;
}

.smj-db .db-btn--full {
  width          : 100%;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. LISTING CARDS
   ───────────────────────────────────────────────────────────────────────────── */
.smj-db__listings {
  display       : flex;
  flex-direction: column;
  gap           : var(--db-space-3);
}

.smj-db__listing-card {
  display      : flex;
  background   : var(--db-surface);
  border       : 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  overflow     : hidden;
  box-shadow   : var(--db-shadow-xs);
  transition   : box-shadow var(--db-transition),
                 transform var(--db-transition),
                 border-color var(--db-transition);
  position     : relative;
}

.smj-db__listing-card:hover {
  box-shadow  : var(--db-shadow-md);
  transform   : translateY(-2px);
  border-color: rgba(37, 99, 235, 0.2);
}

/* Thumbnail */
.smj-db__listing-thumb {
  position   : relative;
  flex-shrink: 0;
  width      : 160px;
  background : var(--db-surface-3);
  overflow   : hidden;
}

.smj-db__listing-thumb img,
.smj-db__listing-thumb .wp-post-image {
  width     : 160px;
  height    : 100%;
  min-height: 130px;
  object-fit: cover;
  display   : block;
  transition: transform 0.35s var(--db-ease);
}

.smj-db__listing-card:hover .smj-db__listing-thumb img,
.smj-db__listing-card:hover .smj-db__listing-thumb .wp-post-image {
  transform: scale(1.05);
}

/* No image placeholder */
.smj-db__listing-nophoto {
  width          : 160px;
  min-height     : 130px;
  height         : 100%;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : var(--db-space-2);
  color          : var(--db-text-4);
  background     : var(--db-surface-3);
}

.smj-db__listing-nophoto .no-photo-icon {
  font-size: 28px;
  opacity  : 0.5;
}

.smj-db__listing-nophoto span {
  font-size     : 10px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family   : var(--db-font);
}

/* Featured badge on thumb */
.smj-db__feat-badge {
  position      : absolute;
  top           : 8px;
  left          : 8px;
  background    : var(--db-warning);
  color         : #fff;
  font-size     : 9px;
  font-weight   : 800;
  padding       : 2px 8px;
  border-radius : var(--db-radius-pill);
  line-height   : 1.6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family   : var(--db-font);
  box-shadow    : 0 1px 4px rgba(0,0,0,0.2);
}

/* Card body */
.smj-db__listing-body {
  flex          : 1;
  min-width     : 0;
  display       : flex;
  flex-direction: column;
  padding       : var(--db-space-4) var(--db-space-5);
}

/* Title row */
.smj-db__listing-title-row {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
  gap            : var(--db-space-3);
  margin-bottom  : var(--db-space-1);
}

.smj-db__listing-title {
  font-size     : 14px;
  font-weight   : 700;
  color         : var(--db-text-1);
  margin        : 0;
  flex          : 1;
  min-width     : 0;
  line-height   : 1.4;
  letter-spacing: -0.01em;
  font-family   : var(--db-font);
}

.smj-db__listing-title a {
  color          : inherit;
  text-decoration: none;
  display        : -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow       : hidden;
  transition     : color var(--db-transition);
}

.smj-db__listing-title a:hover {
  color: var(--db-brand);
}

/* Status badges */
.smj-db__status-badge {
  flex-shrink   : 0;
  font-size     : 10px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding       : 3px 10px;
  border-radius : var(--db-radius-pill);
  line-height   : 1.5;
  white-space   : nowrap;
  font-family   : var(--db-font);
}

.smj-db__status-badge--publish {
  background: var(--db-success-lt);
  color     : var(--db-success);
}

.smj-db__status-badge--pending {
  background: var(--db-warning-lt);
  color     : var(--db-warning);
}

.smj-db__status-badge--draft {
  background: var(--db-surface-3);
  color     : var(--db-text-3);
}

.smj-db__status-badge--sold {
  background: var(--db-danger-lt);
  color     : var(--db-danger);
}

/* Price */
.smj-db__listing-price {
  font-size     : 20px;
  font-weight   : 800;
  color         : var(--db-success);
  line-height   : 1;
  margin        : var(--db-space-1) 0 var(--db-space-2);
  letter-spacing: -0.02em;
  font-family   : var(--db-font);
}

/* Meta row */
.smj-db__listing-meta {
  display    : flex;
  flex-wrap  : wrap;
  gap        : var(--db-space-4);
  margin-bottom: var(--db-space-3);
}

.smj-db__listing-meta-item {
  display    : flex;
  align-items: center;
  gap        : 4px;
  font-size  : 11.5px;
  font-weight: 500;
  color      : var(--db-text-3);
  font-family: var(--db-font);
}

.smj-db__listing-meta-item--expiry {
  color: var(--db-warning);
}

/* Actions bar */
.smj-db__listing-actions {
  display    : flex;
  flex-wrap  : wrap;
  gap        : var(--db-space-2);
  margin-top : auto;
  padding-top: var(--db-space-3);
  border-top : 1px solid var(--db-border-2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. EMPTY STATE
   ───────────────────────────────────────────────────────────────────────────── */
.smj-db__empty {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  text-align    : center;
  padding       : var(--db-space-12) var(--db-space-8);
  color         : var(--db-text-3);
  font-family   : var(--db-font);
}

.smj-db__empty-icon {
  font-size    : 48px;
  margin-bottom: var(--db-space-4);
  opacity      : 0.35;
  line-height  : 1;
}

.smj-db__empty-title {
  font-size    : 16px;
  font-weight  : 700;
  color        : var(--db-text-2);
  margin       : 0 0 var(--db-space-2);
  font-family  : var(--db-font);
}

.smj-db__empty-desc {
  font-size    : 13.5px;
  color        : var(--db-text-3);
  margin       : 0 0 var(--db-space-6);
  max-width    : 360px;
  line-height  : 1.6;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. PROFILE SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.smj-db__profile-avatar-block {
  display      : flex;
  align-items  : center;
  gap          : var(--db-space-5);
  flex-wrap    : wrap;
  padding      : var(--db-space-5);
  background   : var(--db-surface-2);
  border-radius: var(--db-radius-md);
  border       : 1px solid var(--db-border);
  margin-bottom: var(--db-space-6);
}

.smj-db__profile-avatar-preview {
  flex-shrink: 0;
}

.smj-db__profile-avatar-preview img,
.smj-db__profile-avatar-preview .avatar {
  width        : 80px;
  height       : 80px;
  border-radius: 50%;
  object-fit   : cover;
  display      : block;
  border       : 3px solid var(--db-surface);
  box-shadow   : 0 0 0 3px var(--db-brand);
}

.smj-db__profile-avatar-info h4 {
  font-size  : 14px;
  font-weight: 700;
  color      : var(--db-text-1);
  margin     : 0 0 4px;
  font-family: var(--db-font);
}

.smj-db__profile-avatar-info p {
  font-size  : 12px;
  color      : var(--db-text-3);
  margin     : 0 0 var(--db-space-3);
  font-family: var(--db-font);
}

.smj-db__avatar-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--db-space-3);
  margin-top: var(--db-space-2);
}

.smj-db__avatar-choices label {
  display    : flex;
  align-items: center;
  gap        : var(--db-space-2);
  font-size  : 13px;
  font-weight: 500;
  color      : var(--db-text-2);
  cursor     : pointer;
  font-family: var(--db-font);
}

/* Profile form layout */
.smj-db__form-grid {
  display              : grid;
  grid-template-columns: repeat(2, 1fr);
  gap                  : var(--db-space-4) var(--db-space-5);
}

/* Form fields */
.smj-db__field {
  display       : flex;
  flex-direction: column;
  gap           : 5px;
}

.smj-db__field label {
  font-size  : 13px;
  font-weight: 600;
  color      : var(--db-text-2);
  font-family: var(--db-font);
}

.smj-db__field input[type="text"],
.smj-db__field input[type="email"],
.smj-db__field input[type="tel"],
.smj-db__field input[type="password"] {
  width        : 100%;
  padding      : 9px 13px;
  border       : 1.5px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  font-size    : 14px;
  font-family  : var(--db-font);
  color        : var(--db-text-1);
  background   : var(--db-surface);
  transition   : border-color var(--db-transition),
                 box-shadow var(--db-transition);
  box-sizing   : border-box;
  outline      : none;
}

.smj-db__field input:focus {
  border-color: var(--db-brand);
  box-shadow  : 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.smj-db__field input::placeholder {
  color: var(--db-text-4);
}

.smj-db__field small {
  font-size: 11.5px;
  color    : var(--db-text-3);
}

/* Form submit row */
.smj-db__form-submit {
  margin-top: var(--db-space-6);
  padding-top: var(--db-space-5);
  border-top: 1px solid var(--db-border-2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. MOBILE HAMBURGER TOGGLE (hidden on desktop)
   ───────────────────────────────────────────────────────────────────────────── */
.smj-db__mobile-header {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. RESPONSIVE — TABLET (640px–1024px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --db-sidebar-w: 220px;
    --db-gap: 16px;
  }

  .smj-db-fullwidth {
    padding: var(--db-space-4) var(--db-space-4) var(--db-space-8);
  }

  .smj-db__listing-thumb,
  .smj-db__listing-thumb img,
  .smj-db__listing-thumb .wp-post-image,
  .smj-db__listing-nophoto {
    width: 140px;
  }

  .smj-db__form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. RESPONSIVE — MOBILE (< 640px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Stack layout — sidebar above content */
  .smj-db {
    grid-template-columns: 1fr;
    gap                  : 0;
  }

  .smj-db-fullwidth {
    padding: 0 0 var(--db-space-8);
  }

  /* Sidebar becomes a flat top bar with horizontal scroll nav */
  .smj-db__nav {
    position     : relative;
    top          : 0;
    border-radius: 0;
    border       : none;
    border-bottom: 1px solid var(--db-border);
    box-shadow   : none;
  }

  /* Show mobile header */
  .smj-db__mobile-header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : var(--db-space-3) var(--db-space-4);
    background     : var(--db-brand);
    color          : #fff;
  }

  .smj-db__mobile-header .mobile-logo {
    font-size  : 15px;
    font-weight: 800;
    font-family: var(--db-font);
    letter-spacing: -0.02em;
  }

  /* Collapse user block on mobile */
  .smj-db__user-block {
    padding: var(--db-space-3) var(--db-space-4);
    background: var(--db-surface-2);
    border-bottom: 1px solid var(--db-border);
  }

  /* Horizontal scrolling nav on mobile */
  .smj-db__nav-list {
    display         : flex;
    flex-direction  : row;
    overflow-x      : auto;
    padding         : var(--db-space-2) var(--db-space-3);
    gap             : var(--db-space-1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width : none;
  }

  .smj-db__nav-list::-webkit-scrollbar {
    display: none;
  }

  .smj-db__nav-item {
    flex-shrink  : 0;
    margin-bottom: 0;
  }

  /* Compact nav link pills on mobile */
  .smj-db__nav-link {
    padding      : var(--db-space-2) var(--db-space-3);
    font-size    : 12px;
    border-radius: var(--db-radius-pill);
    white-space  : nowrap;
    gap          : var(--db-space-2);
  }

  .smj-db__nav-item--active .smj-db__nav-link::before {
    display: none;
  }

  .smj-db__nav-item--active .smj-db__nav-link {
    background: var(--db-brand);
    color     : #fff;
  }

  .smj-db__nav-item--active .smj-db__nav-link .nav-icon {
    opacity: 1;
  }

  .smj-db__nav-item--logout {
    border-top : none;
    padding-top: 0;
    margin-top : 0;
  }

  /* Content area */
  .smj-db__content {
    padding: var(--db-space-3);
    gap    : var(--db-space-3);
  }

  .smj-db__section {
    padding      : var(--db-space-4);
    border-radius: var(--db-radius-md);
  }

  /* Listing cards — stack vertically */
  .smj-db__listing-card {
    flex-direction: column;
  }

  .smj-db__listing-thumb,
  .smj-db__listing-thumb img,
  .smj-db__listing-thumb .wp-post-image {
    width     : 100%;
    height    : 180px;
    min-height: unset;
  }

  .smj-db__listing-nophoto {
    width     : 100%;
    height    : 140px;
    min-height: unset;
  }

  .smj-db__listing-body {
    padding: var(--db-space-3) var(--db-space-4) var(--db-space-4);
  }

  .smj-db__listing-price {
    font-size: 18px;
  }

  .smj-db__listing-title {
    font-size: 13.5px;
  }

  .smj-db__listing-title a {
    -webkit-line-clamp: 2;
  }

  /* Profile form — single column */
  .smj-db__form-grid {
    grid-template-columns: 1fr;
    gap                  : var(--db-space-3);
  }

  .smj-db__profile-avatar-block {
    flex-direction: column;
    text-align    : center;
    padding       : var(--db-space-4);
  }

  .smj-db__section-header {
    flex-direction: column;
    align-items   : flex-start;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────────────── */

/* Screen-reader only — not inline style — used for hidden file inputs */
.smj-db .smj-visually-hidden {
  position  : absolute;
  width     : 1px;
  height    : 1px;
  padding   : 0;
  margin    : -1px;
  overflow  : hidden;
  clip      : rect(0, 0, 0, 0);
  white-space: nowrap;
  border    : 0;
}

/* Filename label after file picker */
.smj-db .smj-filename-label {
  font-size   : 12px;
  color       : var(--db-text-3);
  margin-left : var(--db-space-2);
  font-family : var(--db-font);
  font-style  : italic;
}

/* Tab title line */
.smj-db__tab-heading {
  font-size     : 22px;
  font-weight   : 800;
  color         : var(--db-text-1);
  margin        : 0 0 var(--db-space-5);
  letter-spacing: -0.025em;
  font-family   : var(--db-font);
  line-height   : 1.2;
}

/* =============================================================================
   17. SIDEBAR NAV — SPACING + ALIGNMENT FIX
   Fixes: left-edge crowding, inconsistent item height, icon misalignment,
   active item visual weight discrepancy.
   All rules scoped to .smj-db__nav so zero bleed to other components.
   ============================================================================= */

/* Nav list: proper left+right breathing room */
.smj-db__nav .smj-db__nav-list {
  padding: 10px 10px 12px !important;
}

/* Every nav item: equal gap, no variation */
.smj-db__nav .smj-db__nav-item {
  margin-bottom: 3px !important;
}

/* Nav link: consistent height + padding for ALL items including active */
.smj-db__nav .smj-db__nav-link {
  display:         flex          !important;
  align-items:     center        !important;
  gap:             10px          !important;
  padding:         10px 14px     !important;  /* 10px top/bottom = consistent height */
  border-radius:   9px           !important;
  font-size:       13.5px        !important;
  font-weight:     500           !important;
  line-height:     1.4           !important;
  min-height:      40px          !important;  /* locks every item to same height */
  box-sizing:      border-box    !important;
  transition:      background 180ms ease,
                   color 180ms ease          !important;
}

/* Icon: full opacity, consistent 18×18, vertically centered */
.smj-db__nav .smj-db__nav-link .nav-icon {
  width:       18px  !important;
  height:      18px  !important;
  min-width:   18px  !important;
  flex-shrink: 0     !important;
  opacity:     0.55  !important;
  display:     block !important;
}

/* Hover: subtle highlight */
.smj-db__nav .smj-db__nav-link:hover {
  background: var(--db-surface-3) !important;
  color:      var(--db-text-1)    !important;
}

.smj-db__nav .smj-db__nav-link:hover .nav-icon {
  opacity: 0.85 !important;
}

/* Active item: same padding as all others — no size shift */
.smj-db__nav .smj-db__nav-item--active .smj-db__nav-link {
  background:  var(--db-brand-subtle) !important;
  color:       var(--db-brand)        !important;
  font-weight: 700                    !important;
  padding:     10px 14px              !important;  /* explicitly same — prevents any override */
}

.smj-db__nav .smj-db__nav-item--active .smj-db__nav-link .nav-icon {
  opacity: 1 !important;
}

/* Active left accent bar: vertically centered relative to 40px min-height */
.smj-db__nav .smj-db__nav-item--active .smj-db__nav-link::before {
  content:       ''           !important;
  position:      absolute     !important;
  left:          0            !important;
  top:           8px          !important;   /* 8px from top of 40px item = centered */
  bottom:        8px          !important;
  width:         3px          !important;
  background:    var(--db-brand)          !important;
  border-radius: 0 3px 3px 0  !important;
}

/* Logout separator: clean consistent gap */
.smj-db__nav .smj-db__nav-item--logout {
  border-top:  1px solid var(--db-border-2) !important;
  padding-top: 6px                          !important;
  margin-top:  6px                          !important;
}

.smj-db__nav .smj-db__nav-item--logout .smj-db__nav-link {
  color: var(--db-text-3) !important;
}

.smj-db__nav .smj-db__nav-item--logout .smj-db__nav-link:hover {
  background: var(--db-danger-lt) !important;
  color:      var(--db-danger)    !important;
}

/* Mobile: preserve horizontal scroll nav overrides from §15 */
@media (max-width: 640px) {
  .smj-db__nav .smj-db__nav-list {
    padding: var(--db-space-2) var(--db-space-3) !important;
  }
  .smj-db__nav .smj-db__nav-link {
    padding:    8px 12px  !important;
    min-height: unset     !important;
    font-size:  12px      !important;
    border-radius: 999px  !important;
  }
  .smj-db__nav .smj-db__nav-item--active .smj-db__nav-link::before {
    display: none !important;
  }
}

/* =============================================================================
   18. LAYOUT SPACING FIX v2
   
   Root cause of the two X-marked gaps in the screenshot:
   
   GAP 1 (left of sidebar): .smj-db-fullwidth had padding-left:24px which
   collapsed near-zero inside Elementor columns. Fix: 28px — enough breathing
   room without being excessive.
   
   GAP 2 (between sidebar and form): Two values were compounding:
     a) .smj-db grid gap: 24px  →  reduced to 16px
     b) .tmp-form-wrap padding-left: 56px  →  reduced to 20px inside dashboard
   Combined old dead space: ~80px. New: ~36px total — tight and correct.
   ============================================================================= */

/* ── Fix 1: Outer wrapper — 28px left/right from viewport edge ── */
.smj-db-fullwidth {
  padding-left:  28px !important;
  padding-right: 28px !important;
  padding-top:   28px !important;
}

/* Inner max-width: readable on large screens */
.smj-db-fullwidth > .smj-db {
  max-width: 1200px !important;
}

/* ── Fix 2: Reduce grid gap between sidebar and content ── */
/* 24px grid gap was too wide; 16px matches the card gaps used elsewhere */
.smj-db-fullwidth > .smj-db,
.smj-db {
  gap: 16px !important;
}

/* ── Fix 3: Post-Ad form — no wide side padding inside dashboard ── */
.smj-db__content .tmp-form-wrap {
  max-width:   100%       !important;  /* fill the content column cleanly */
  padding:     24px 20px 80px !important;  /* left/right 20px — not 56px */
  margin:      0          !important;
  box-sizing:  border-box !important;
}

/* Stepper + category picker inherit the tighter container naturally */
.smj-db__content .smj-pa-steps {
  max-width: 860px !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
}

.smj-db__content .tmp-cat-picker-grid,
.smj-db__content .tmp-listing-form-wrap {
  max-width: 100% !important;
}

/* ── Elementor: propagate same padding ── */
.elementor-widget-shortcode .smj-db-fullwidth,
.elementor-widget-container .smj-db-fullwidth {
  padding-left:  28px !important;
  padding-right: 28px !important;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  .smj-db-fullwidth {
    padding-left:  16px !important;
    padding-right: 16px !important;
    padding-top:   20px !important;
  }
  .smj-db__content .tmp-form-wrap {
    padding: 20px 16px 80px !important;
  }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .smj-db-fullwidth {
    padding-left:  0 !important;
    padding-right: 0 !important;
    padding-top:   0 !important;
  }
  .smj-db__content .tmp-form-wrap {
    padding: 16px 14px 80px !important;
  }
  .smj-db-fullwidth > .smj-db,
  .smj-db {
    gap: 0 !important;
  }
}