/* ==========================================
   GIFTNETAPP SELLER DASHBOARD
   Prefix: sdb- (Seller DashBoard)
   NO bare body/html/* selectors — fully scoped
   ========================================== */

.sdb-root {
  --sdb-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-family: var(--sdb-font);
  font-size: 14px;
  color: #111;
  background: #f9fafb;
  line-height: 1.5;
}

.sdb-root *, .sdb-root *::before, .sdb-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Splash ── */
.sdb-splash {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; height: 100vh; background: #f9fafb;
  font-family: var(--sdb-font); color: #6b7280; font-size: 15px;
}
.sdb-spinner {
  width: 40px; height: 40px;
  border: 4px solid #dcfce7; border-top-color: #16a34a;
  border-radius: 50%; animation: sdb-spin .8s linear infinite;
}
@keyframes sdb-spin { to { transform: rotate(360deg); } }

/* ── Layout ── */
.sdb-wrap { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ── */
.sdb-sidebar {
  display: flex; flex-direction: column;
  background: #111827; transition: width .25s ease;
  flex-shrink: 0; overflow: hidden;
}
.sdb-sidebar.open   { width: 230px; }
.sdb-sidebar.closed { width: 64px; }

.sdb-sb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 14px 14px; border-bottom: 1px solid #1f2937; min-height: 60px;
}
.sdb-sb-brand { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; color: #fff; }
.sdb-sb-toggle {
  background: #1f2937; border: none; border-radius: 8px;
  color: #9ca3af; cursor: pointer; padding: 5px;
  display: flex; align-items: center; transition: background .15s;
}
.sdb-sb-toggle:hover { background: #374151; color: #fff; }

.sdb-sb-seller {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 14px; border-bottom: 1px solid #1f2937;
}
.sdb-sb-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #f97316);
  color: #fff; font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sdb-sb-info { overflow: hidden; }
.sdb-sb-info strong { display: block; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdb-sb-id { display: block; font-size: 11px; color: #6b7280; margin-top: 2px; }
.sdb-sb-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; margin-top: 4px;
}
.sdb-sb-status.approved { background: #166534; color: #86efac; }
.sdb-sb-status.pending  { background: #92400e; color: #fcd34d; }

.sdb-sb-nav { flex: 1; padding: 8px; overflow-y: auto; }
.sdb-sb-nav::-webkit-scrollbar { width: 4px; }
.sdb-sb-nav::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }

.sdb-sb-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px; background: none; border: none; border-radius: 8px;
  color: #9ca3af; cursor: pointer; font-size: 13.5px; font-weight: 500;
  font-family: var(--sdb-font); transition: all .15s; text-align: left;
  margin-bottom: 2px; white-space: nowrap;
}
.sdb-sb-item:hover         { background: #1f2937; color: #fff; }
.sdb-sb-item.active        { background: #166534; color: #fff; }
.sdb-sb-item.active .sdb-sb-icon { color: #4ade80; }
.sdb-sb-item.logout:hover  { background: #7f1d1d; color: #fca5a5; }
.sdb-sb-icon  { display: flex; align-items: center; flex-shrink: 0; width: 22px; }
.sdb-sb-label { flex: 1; }
.sdb-sb-footer { padding: 8px 8px 16px; border-top: 1px solid #1f2937; }

/* ── Main ── */
.sdb-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f9fafb; }

.sdb-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px; background: #fff; border-bottom: 1px solid #e5e7eb; min-height: 68px;
}
.sdb-title { font-size: 20px; font-weight: 800; color: #111; }
.sdb-sub   { font-size: 13px; color: #6b7280; margin-top: 2px; }
.sdb-green { color: #16a34a; }

.sdb-hdr-right { display: flex; align-items: center; gap: 12px; }
.sdb-hdr-btn {
  position: relative; background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 10px; padding: 8px; cursor: pointer;
  display: flex; align-items: center; color: #374151; transition: all .15s;
}
.sdb-hdr-btn:hover { background: #f0fdf4; border-color: #16a34a; color: #16a34a; }
.sdb-notif-dot {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}
.sdb-hdr-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #f97316);
  color: #fff; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

.sdb-pending-notice {
  display: flex; align-items: center; gap: 8px;
  background: #fef3c7; border-bottom: 1px solid #fde68a;
  color: #92400e; padding: 10px 28px; font-size: 13px;
}

.sdb-body { flex: 1; overflow-y: auto; padding: 24px 28px; }
.sdb-body::-webkit-scrollbar { width: 6px; }
.sdb-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* ── Logout Modal ── */
.sdb-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 16px; backdrop-filter: blur(4px);
}
.sdb-logout-modal {
  background: #fff; border-radius: 20px; padding: 36px 32px;
  max-width: 420px; width: 92%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.2); animation: sdb-popIn .2s ease;
}
@keyframes sdb-popIn {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.sdb-lcm-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: #fff7ed; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.sdb-logout-modal h2 { font-size: 20px; font-weight: 800; color: #111; margin-bottom: 10px; }
.sdb-logout-modal p  { color: #6b7280; font-size: 14px; line-height: 1.6; }
.sdb-lcm-btns { display: flex; gap: 12px; margin-top: 24px; }
.sdb-lcm-stay {
  flex: 1; padding: 12px; border: 2px solid #e5e7eb; border-radius: 10px;
  background: #fff; color: #374151; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .15s; font-family: var(--sdb-font);
}
.sdb-lcm-stay:hover { border-color: #16a34a; color: #16a34a; }
.sdb-lcm-confirm {
  flex: 1; padding: 12px; border: none; border-radius: 10px;
  background: #ef4444; color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s; font-family: var(--sdb-font);
}
.sdb-lcm-confirm:hover { background: #dc2626; }

/* ── Tab content / Coming soon ── */
.sdb-tab-content { min-height: 400px; animation: sdb-fadeIn .25s ease; }
@keyframes sdb-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sdb-coming-soon {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 80px 24px; text-align: center;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
}
.sdb-coming-soon h2 { font-size: 20px; font-weight: 800; color: #111; }
.sdb-coming-soon p  { font-size: 14px; color: #6b7280; max-width: 380px; line-height: 1.6; }
.sdb-cs-hint        { color: #9ca3af !important; font-size: 13px !important; }

/* ==========================================
   SHARED — sub-component classes scoped
   under .sdb-root to avoid global conflicts
   ========================================== */

/* Spinner used inside tabs */
.sdb-root .spinner-ring {
  width: 40px; height: 40px; border: 4px solid #dcfce7;
  border-top-color: #16a34a; border-radius: 50%; animation: sdb-spin .8s linear infinite;
}
.sdb-root .tab-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: 60vh; color: #888; font-size: 15px;
}

/* Modal overlay (sub-components) */
.sdb-root .modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 16px; backdrop-filter: blur(4px);
}
.sdb-root .modal-box { background: #fff; border-radius: 16px; max-height: 90vh; overflow-y: auto; animation: sdb-popIn .2s ease; position: relative; }
.sdb-root .order-modal { width: 100%; max-width: 620px; }
.sdb-root .prod-modal  { width: 100%; max-width: 880px; }
.sdb-root .view-modal  { width: 100%; max-width: 680px; }
.sdb-root .modal-hdr { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 24px 16px; border-bottom: 1px solid #f3f4f6; position: sticky; top: 0; background: #fff; z-index: 2; }
.sdb-root .modal-hdr h2 { font-size: 17px; font-weight: 700; color: #111; }
.sdb-root .modal-close { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; color: #6b7280; cursor: pointer; padding: 4px; display: flex; align-items: center; transition: all .15s; }
.sdb-root .modal-close:hover { background: #fee2e2; color: #ef4444; border-color: #fecaca; }
.sdb-root .modal-body { padding: 20px 24px; }
.sdb-root .modal-section { margin-bottom: 22px; }
.sdb-root .modal-section h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; margin-bottom: 10px; }

/* Buttons */
.sdb-root .btn-primary { display: inline-flex; align-items: center; gap: 7px; background: #16a34a; color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s; font-family: var(--sdb-font); }
.sdb-root .btn-primary:hover    { background: #15803d; }
.sdb-root .btn-primary:disabled { background: #9ca3af; cursor: not-allowed; }
.sdb-root .btn-cancel { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: #6b7280; border: 2px solid #e5e7eb; border-radius: 10px; padding: 10px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: var(--sdb-font); }
.sdb-root .btn-cancel:hover { border-color: #9ca3af; color: #374151; }
.sdb-root .btn-save { display: inline-flex; align-items: center; gap: 7px; background: #16a34a; color: #fff; border: none; border-radius: 10px; padding: 11px 22px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; font-family: var(--sdb-font); }
.sdb-root .btn-save:hover    { background: #15803d; }
.sdb-root .btn-save:disabled { background: #9ca3af; cursor: not-allowed; }
.sdb-root .btn-refresh { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; padding: 7px 14px; font-size: 13px; color: #374151; cursor: pointer; font-weight: 500; transition: all .15s; font-family: var(--sdb-font); }
.sdb-root .btn-refresh:hover { background: #f0fdf4; border-color: #16a34a; color: #16a34a; }
.sdb-root .link-btn { background: none; border: none; color: #16a34a; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--sdb-font); }
.sdb-root .link-btn:hover { text-decoration: underline; }

/* Table action buttons */
.sdb-root .act-row { display: flex; gap: 6px; flex-wrap: wrap; }
.sdb-root .act-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; border: 1px solid #e5e7eb; background: #f9fafb; color: #374151; cursor: pointer; transition: all .15s; white-space: nowrap; font-family: var(--sdb-font); }
.sdb-root .act-btn:hover         { background: #f3f4f6; }
.sdb-root .act-btn.view          { color: #1d4ed8; border-color: #bfdbfe; }
.sdb-root .act-btn.view:hover    { background: #eff6ff; }
.sdb-root .act-btn.inv           { color: #16a34a; border-color: #bbf7d0; }
.sdb-root .act-btn.inv:hover     { background: #f0fdf4; }
.sdb-root .act-btn.confirm       { background: #f0fdf4; color: #16a34a; border-color: #86efac; }
.sdb-root .act-btn.confirm:hover { background: #dcfce7; }
.sdb-root .act-btn.ship          { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; }
.sdb-root .act-btn.ship:hover    { background: #dbeafe; }
.sdb-root .act-btn:disabled      { opacity: .5; cursor: not-allowed; }

/* Icon-only buttons */
.sdb-root .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e5e7eb; background: #f9fafb; cursor: pointer; transition: all .15s; color: #374151; }
.sdb-root .icon-btn.view:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.sdb-root .icon-btn.edit:hover { background: #f0fdf4; border-color: #86efac; color: #16a34a; }
.sdb-root .icon-btn.del:hover  { background: #fee2e2; border-color: #fca5a5; color: #ef4444; }

/* Export */
.sdb-root .export-group { display: flex; gap: 6px; flex-wrap: wrap; }
.sdb-root .exp-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 1px solid #e5e7eb; background: #fff; color: #374151; cursor: pointer; transition: all .15s; font-family: var(--sdb-font); }
.sdb-root .exp-btn.csv:hover   { background: #f0fdf4; color: #16a34a; border-color: #86efac; }
.sdb-root .exp-btn.excel:hover { background: #f0fdf4; color: #16a34a; border-color: #86efac; }
.sdb-root .exp-btn.pdf:hover   { background: #fef2f2; color: #ef4444; border-color: #fca5a5; }

/* Toolbar */
.sdb-root .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.sdb-root .search-box { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 8px 12px; flex: 1; min-width: 220px; max-width: 360px; transition: border-color .15s; }
.sdb-root .search-box:focus-within { border-color: #16a34a; }
.sdb-root .search-box input { border: none; outline: none; flex: 1; font-size: 13.5px; color: #111; background: transparent; font-family: var(--sdb-font); }
.sdb-root .search-box button { background: none; border: none; cursor: pointer; display: flex; }
.sdb-root .result-ct { font-size: 13px; color: #6b7280; white-space: nowrap; }

/* Table */
.sdb-root .tbl-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid #e5e7eb; }
.sdb-root .data-table { width: 100%; border-collapse: collapse; background: #fff; }
.sdb-root .data-table th { background: #f9fafb; padding: 11px 14px; text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #6b7280; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.sdb-root .data-table td { padding: 12px 14px; font-size: 13.5px; color: #374151; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.sdb-root .data-table tr:last-child td { border-bottom: none; }
.sdb-root .data-table tr:hover td { background: #f9fafb; }
.sdb-root .mono       { font-family: monospace; font-size: 12.5px; color: #374151; }
.sdb-root .muted      { color: #9ca3af; }
.sdb-root .bold-green { font-weight: 700; color: #16a34a; }
.sdb-root .status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Banners */
.sdb-root .ok-banner  { display: flex; align-items: center; gap: 8px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; color: #15803d; padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; font-weight: 500; }
.sdb-root .err-banner { display: flex; align-items: center; gap: 8px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; color: #b91c1c; padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; }
.sdb-root .alert-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.sdb-root .alert-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500; }
.sdb-root .alert-pill.red    { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.sdb-root .alert-pill.orange { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.sdb-root .alert-pill.green  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.sdb-root .info-box { display: flex; gap: 10px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 12px 16px; color: #92400e; font-size: 13px; line-height: 1.6; margin-bottom: 16px; }

/* Status tabs */
.sdb-root .status-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.sdb-root .stab { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1.5px solid #e5e7eb; background: #fff; font-size: 13px; font-weight: 500; color: #6b7280; cursor: pointer; transition: all .15s; font-family: var(--sdb-font); }
.sdb-root .stab:hover  { border-color: #16a34a; color: #16a34a; }
.sdb-root .stab.active { font-weight: 700; }
.sdb-root .stab-ct { background: #f3f4f6; color: #374151; padding: 1px 7px; border-radius: 20px; font-size: 11px; font-weight: 700; }

/* Stats */
.sdb-root .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.sdb-root .stat-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 18px 16px; cursor: pointer; transition: all .2s; }
.sdb-root .stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.sdb-root .sc-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sdb-root .sc-label { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.sdb-root .sc-value { font-size: 20px; font-weight: 800; }

/* Chart */
.sdb-root .chart-row { display: grid; grid-template-columns: 1fr 320px; gap: 14px; }
.sdb-root .chart-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 18px 20px; }
.sdb-root .chart-box-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sdb-root .chart-box-hdr h3 { font-size: 14px; font-weight: 700; color: #111; }
.sdb-root .live-badge { background: #16a34a; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.sdb-root .donut-wrap   { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sdb-root .donut-legend { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.sdb-root .dl-row   { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sdb-root .dl-dot   { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sdb-root .dl-label { flex: 1; color: #374151; }
.sdb-root .dl-val   { font-weight: 700; color: #111; }

/* Section card / quick actions / overview */
.sdb-root .section-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 18px 20px; }
.sdb-root .section-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sdb-root .section-hdr h3 { font-size: 14px; font-weight: 700; }
.sdb-root .quick-actions h3 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.sdb-root .qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.sdb-root .qa-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 18px 10px; cursor: pointer; transition: all .15s; font-size: 13px; font-weight: 500; font-family: var(--sdb-font); }
.sdb-root .qa-btn:hover { background: #f0fdf4; }
.sdb-root .qa-icon { font-size: 24px; }
.sdb-root .overview-wrap { display: flex; flex-direction: column; gap: 20px; }
.sdb-root .ov-topbar  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sdb-root .ov-updated { font-size: 12px; color: #9ca3af; flex: 1; }
.sdb-root .ov-error   { font-size: 12px; color: #ef4444; display: flex; align-items: center; gap: 4px; }

/* Empty state */
.sdb-root .empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 24px; text-align: center; color: #9ca3af; }
.sdb-root .empty-state h3 { font-size: 17px; font-weight: 700; color: #374151; }
.sdb-root .empty-state p  { font-size: 14px; max-width: 320px; }

/* Products grid */
.sdb-root .prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.sdb-root .prod-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; overflow: hidden; transition: all .2s; position: relative; }
.sdb-root .prod-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.09); }
.sdb-root .stk-badge, .sdb-root .ap-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; width: fit-content; }
.sdb-root .prod-badges { display: flex; flex-direction: column; gap: 5px; padding: 10px 10px 0; }
.sdb-root .prod-img-wrap { height: 150px; display: flex; align-items: center; justify-content: center; background: #f9fafb; margin: 8px 10px; border-radius: 10px; overflow: hidden; position: relative; }
.sdb-root .prod-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.sdb-root .sold-out-badge { position: absolute; inset: 0; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; letter-spacing: 1px; border-radius: 10px; }
.sdb-root .prod-body { padding: 0 12px 14px; }
.sdb-root .prod-body h4 { font-size: 13.5px; font-weight: 700; color: #111; margin-bottom: 4px; line-height: 1.3; }
.sdb-root .price-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.sdb-root .sp       { font-size: 16px; font-weight: 800; color: #16a34a; }
.sdb-root .sp.large { font-size: 20px; }
.sdb-root .mrp      { font-size: 12px; color: #9ca3af; text-decoration: line-through; }
.sdb-root .cat-tag  { font-size: 11.5px; color: #9ca3af; margin-bottom: 8px; }
.sdb-root .prod-act-row { display: flex; gap: 6px; }

/* Product form */
.sdb-root .prod-form { padding: 20px 24px; }
.sdb-root .pf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sdb-root .pf-col  { display: flex; flex-direction: column; gap: 14px; }
.sdb-root .pf-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #9ca3af; margin-bottom: -8px; }
.sdb-root .pf-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sdb-root .pf-group { display: flex; flex-direction: column; gap: 5px; }
.sdb-root .pf-group label { font-size: 12.5px; font-weight: 600; color: #374151; }
.sdb-root .pf-group input, .sdb-root .pf-group select, .sdb-root .pf-group textarea { border: 1.5px solid #e5e7eb; border-radius: 8px; padding: 9px 12px; font-size: 13.5px; color: #111; background: #fff; outline: none; transition: border-color .15s; resize: vertical; font-family: var(--sdb-font); }
.sdb-root .pf-group input:focus, .sdb-root .pf-group select:focus, .sdb-root .pf-group textarea:focus { border-color: #16a34a; }
.sdb-root .pf-submit { display: flex; gap: 10px; margin-top: 6px; }
.sdb-root .img-upload { height: 180px; border: 2px dashed #d1fae5; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; background: #f0fdf4; transition: all .15s; overflow: hidden; }
.sdb-root .img-upload:hover { border-color: #16a34a; }
.sdb-root .img-upload p    { font-size: 13px; color: #374151; font-weight: 500; }
.sdb-root .img-upload span { font-size: 11px; color: #9ca3af; }
.sdb-root .img-upload img  { width: 100%; height: 100%; object-fit: cover; }

/* Payout */
.sdb-root .payout-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; }
.sdb-root .pb-title { font-weight: 700; color: #15803d; margin-bottom: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.sdb-root .pb-row   { display: flex; justify-content: space-between; padding: 3px 0; color: #374151; }
.sdb-root .pb-row.total  { border-top: 1px solid #bbf7d0; padding-top: 6px; margin-top: 4px; font-weight: 700; }
.sdb-root .pb-row .green { color: #16a34a; }
.sdb-root .pb-row .red   { color: #ef4444; }
.sdb-root .pb-note { font-size: 11px; color: #9ca3af; margin-top: 8px; line-height: 1.5; }

/* View modal */
.sdb-root .vm-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px; }
.sdb-root .vm-img  { border-radius: 12px; overflow: hidden; background: #f0fdf4; height: 220px; display: flex; align-items: center; justify-content: center; }
.sdb-root .vm-img img { width: 100%; height: 100%; object-fit: cover; }
.sdb-root .vm-info { display: flex; flex-direction: column; gap: 8px; }
.sdb-root .vm-info h2 { font-size: 18px; font-weight: 800; }
.sdb-root .vm-meta { display: flex; gap: 16px; font-size: 13px; color: #6b7280; flex-wrap: wrap; }

/* Settings */
.sdb-root .set-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; }
.sdb-root .set-nav { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 8px; height: fit-content; }
.sdb-root .set-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px; border: none; background: none; color: #6b7280; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; text-align: left; margin-bottom: 2px; font-family: var(--sdb-font); }
.sdb-root .set-nav-item:hover  { background: #f0fdf4; color: #16a34a; }
.sdb-root .set-nav-item.active { background: #f0fdf4; color: #16a34a; font-weight: 700; }
.sdb-root .set-body { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 24px; }
.sdb-root .set-section h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; color: #111; margin-bottom: 6px; }
.sdb-root .set-desc { font-size: 13px; color: #6b7280; margin-bottom: 20px; line-height: 1.5; }
.sdb-root .set-form { display: flex; flex-direction: column; gap: 14px; }
.sdb-root .sf-group { display: flex; flex-direction: column; gap: 5px; }
.sdb-root .sf-group label { font-size: 13px; font-weight: 600; color: #374151; }
.sdb-root .sf-group input, .sdb-root .sf-group select, .sdb-root .sf-group textarea { border: 1.5px solid #e5e7eb; border-radius: 9px; padding: 10px 13px; font-size: 14px; color: #111; background: #fff; outline: none; transition: border-color .15s; resize: vertical; font-family: var(--sdb-font); }
.sdb-root .sf-group input:focus, .sdb-root .sf-group select:focus, .sdb-root .sf-group textarea:focus { border-color: #16a34a; }
.sdb-root .sf-row       { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sdb-root .sf-row.three { grid-template-columns: 1fr 1fr 1fr; }
.sdb-root .sf-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #374151; cursor: pointer; }
.sdb-root .sf-check input[type=checkbox] { width: 16px; height: 16px; accent-color: #16a34a; cursor: pointer; }
.sdb-root .sf-notice { display: flex; align-items: center; gap: 8px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px 14px; color: #15803d; font-size: 13px; margin-bottom: 12px; }
.sdb-root .sf-err    { display: flex; align-items: center; gap: 8px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 14px; color: #b91c1c; font-size: 13px; margin-bottom: 4px; }
.sdb-root .sf-ok     { display: flex; align-items: center; gap: 8px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px 14px; color: #15803d; font-size: 13px; margin-bottom: 4px; }
.sdb-root .eye-wrap { position: relative; }
.sdb-root .eye-wrap input { width: 100%; padding-right: 42px; }
.sdb-root .eye-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; display: flex; padding: 2px; }
.sdb-root .logo-row    { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.sdb-root .logo-circle { width: 80px; height: 80px; border-radius: 50%; background: #f0fdf4; border: 2px dashed #86efac; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0; transition: border-color .15s; }
.sdb-root .logo-circle:hover { border-color: #16a34a; }
.sdb-root .logo-edit-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.sdb-root .logo-circle:hover .logo-edit-overlay { opacity: 1; }
.sdb-root .logo-hint strong { display: block; font-size: 14px; color: #111; margin-bottom: 4px; }
.sdb-root .logo-hint p      { font-size: 12px; color: #9ca3af; }

/* Password strength */
.sdb-root .strength-wrap  { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: #f9fafb; border-radius: 8px; }
.sdb-root .strength-bar   { display: flex; gap: 4px; }
.sdb-root .strength-seg   { height: 4px; flex: 1; border-radius: 4px; transition: background .2s; }
.sdb-root .strength-label { font-size: 12px; font-weight: 600; }
.sdb-root .pwd-rules  { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sdb-root .pwd-rule      { font-size: 11.5px; padding: 2px 8px; border-radius: 20px; }
.sdb-root .pwd-rule.ok   { background: #dcfce7; color: #15803d; }
.sdb-root .pwd-rule.no   { background: #f3f4f6; color: #9ca3af; }
.sdb-root .match-ok   { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #16a34a; }
.sdb-root .match-fail { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #ef4444; }

/* Notifications toggles */
.sdb-root .notif-list { display: flex; flex-direction: column; }
.sdb-root .notif-row  { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #f3f4f6; }
.sdb-root .notif-row:last-child { border-bottom: none; }
.sdb-root .notif-txt strong { display: block; font-size: 14px; color: #111; }
.sdb-root .notif-txt p      { font-size: 12.5px; color: #9ca3af; margin-top: 2px; }
.sdb-root .toggle-sw { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.sdb-root .toggle-sw input { opacity: 0; width: 0; height: 0; }
.sdb-root .toggle-track { position: absolute; cursor: pointer; inset: 0; background: #d1d5db; border-radius: 24px; transition: background .2s; }
.sdb-root .toggle-track::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.sdb-root .toggle-sw input:checked + .toggle-track { background: #16a34a; }
.sdb-root .toggle-sw input:checked + .toggle-track::before { transform: translateX(20px); }

/* Support cards */
.sdb-root .support-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; margin-bottom: 8px; }
.sdb-root .sup-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 16px; text-align: center; }
.sdb-root .sup-card h4 { font-size: 14px; font-weight: 700; color: #111; margin: 10px 0 4px; }
.sdb-root .sup-card p  { font-size: 12.5px; color: #9ca3af; margin-bottom: 12px; }
.sdb-root .sup-icon    { display: flex; justify-content: center; }
.sdb-root .btn-sup { display: inline-block; padding: 8px 16px; background: #16a34a; color: #fff; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s; }
.sdb-root .btn-sup:hover { background: #15803d; }

/* Inventory */
.sdb-root .inv-summary-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }
.sdb-root .inv-summary-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; transition: all .15s; }
.sdb-root .inv-summary-card:hover { border-color: #16a34a; }
.sdb-root .isc-val   { display: block; font-size: 26px; font-weight: 800; }
.sdb-root .isc-label { display: block; font-size: 12px; color: #6b7280; margin-top: 4px; }

/* Analytics */
.sdb-root .anl-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.sdb-root .range-btns { display: flex; gap: 6px; }
.sdb-root .range-btn { padding: 7px 14px; border-radius: 8px; border: 1.5px solid #e5e7eb; background: #fff; font-size: 13px; font-weight: 500; color: #6b7280; cursor: pointer; transition: all .15s; font-family: var(--sdb-font); }
.sdb-root .range-btn:hover  { border-color: #16a34a; color: #16a34a; }
.sdb-root .range-btn.active { background: #16a34a; color: #fff; border-color: #16a34a; }
.sdb-root .kpi-row  { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 16px; }
.sdb-root .kpi-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; }
.sdb-root .kpi-label { font-size: 12px; color: #9ca3af; margin-bottom: 6px; }
.sdb-root .kpi-val   { font-size: 22px; font-weight: 800; color: #111; }
.sdb-root .kpi-trend { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-top: 4px; }
.sdb-root .kpi-trend.up { color: #16a34a; }
.sdb-root .kpi-trend.dn { color: #ef4444; }
.sdb-root .anl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sdb-root .hbar-list  { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.sdb-root .hbar-row   { display: flex; align-items: center; gap: 10px; }
.sdb-root .hbar-rank  { font-size: 12px; font-weight: 700; color: #f97316; width: 24px; flex-shrink: 0; }
.sdb-root .hbar-label { font-size: 12.5px; color: #374151; width: 110px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdb-root .hbar-track { flex: 1; height: 8px; background: #f3f4f6; border-radius: 8px; overflow: hidden; }
.sdb-root .hbar-fill  { height: 100%; border-radius: 8px; transition: width .4s ease; }
.sdb-root .hbar-val   { font-size: 12px; font-weight: 700; color: #374151; white-space: nowrap; }
.sdb-root .chart-empty { padding: 32px; text-align: center; color: #9ca3af; font-size: 13.5px; }

/* Order detail */
.sdb-root .info-list  { display: flex; flex-direction: column; gap: 8px; }
.sdb-root .info-row   { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #374151; }
.sdb-root .item-row   { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid #f3f4f6; }
.sdb-root .item-name  { flex: 1; font-size: 13.5px; color: #111; }
.sdb-root .item-qty   { font-size: 13px; color: #9ca3af; }
.sdb-root .item-price { font-weight: 700; color: #16a34a; font-size: 14px; }
.sdb-root .totals-box { margin-top: 12px; border-top: 2px solid #f3f4f6; padding-top: 10px; }
.sdb-root .tot-row    { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13.5px; color: #374151; }
.sdb-root .tot-row.grand { font-size: 16px; font-weight: 800; color: #16a34a; border-top: 1px solid #e5e7eb; padding-top: 8px; margin-top: 4px; }
.sdb-root .status-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sdb-root .status-upd-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 8px; border: 1.5px solid #e5e7eb; background: #fff; color: #6b7280; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: var(--sdb-font); }
.sdb-root .status-upd-btn:hover  { border-color: #9ca3af; }
.sdb-root .status-upd-btn.active { font-weight: 700; }

/* Customer cell */
.sdb-root .cust-cell  { display: flex; align-items: center; gap: 10px; }
.sdb-root .cust-av    { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #16a34a, #f97316); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sdb-root .cust-name  { font-weight: 600; font-size: 13.5px; color: #111; }
.sdb-root .cust-email { font-size: 12px; color: #9ca3af; }
.sdb-root .pay-badge  { display: inline-block; background: #f3f4f6; color: #374151; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }

/* ── Responsive ── */
@media (max-width: 900px) { .sdb-root .chart-row { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .sdb-body { padding: 16px; }
  .sdb-root .stat-grid { grid-template-columns: repeat(2,1fr); }
  .sdb-root .sf-row, .sdb-root .sf-row.three { grid-template-columns: 1fr; }
  .sdb-root .set-layout, .sdb-root .pf-cols, .sdb-root .pf-row { grid-template-columns: 1fr; }
  .sdb-root .inv-summary-row { grid-template-columns: repeat(2,1fr); }
  .sdb-root .anl-row, .sdb-root .vm-body { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .sdb-root .stat-grid { grid-template-columns: 1fr; }
}
/* ── Mobile overlay ── */
.sdb-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

/* ── Sidebar mobile: slides over content ── */
.sdb-sidebar.mobile {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  height: 100dvh; /* dynamic viewport height — fixes mobile browser bar */
  z-index: 999;
  transform: translateX(-100%);
  transition: transform 0.25s ease, width 0.25s ease;
  overflow-y: auto;
}
.sdb-sidebar.mobile.open {
  transform: translateX(0);
  width: 260px;
}
.sdb-sidebar.mobile.closed {
  transform: translateX(-100%);
}

/* ── Hamburger button — hidden on desktop ── */
.sdb-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 19px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-right: 12px;
}
.sdb-hamburger span {
  display: block;
  width: 100%;
  height: 2.5px;
  background: #374151;
  border-radius: 2px;
  transition: all 0.2s;
}
.sdb-hamburger:hover span { background: #16a34a; }

/* ── Layout fix: main fills full width on mobile ── */
@media (max-width: 768px) {
  /* Wrap no longer clips — main scrolls freely */
  .sdb-wrap {
    overflow: visible;
    height: auto;
    min-height: 100dvh;
  }

  /* Main takes full width since sidebar is overlaid */
  .sdb-main {
    width: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  /* Show hamburger, hide desktop toggle */
  .sdb-hamburger { display: flex; }
  .sdb-sb-toggle { display: none; }

  /* Header layout on mobile */
  .sdb-header {
    padding: 14px 16px;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .sdb-title { font-size: 16px; }
  .sdb-sub   { font-size: 11px; }

  /* Body padding */
  .sdb-body { padding: 14px 12px 80px; } /* extra bottom for mobile nav bars */

  /* Pending notice */
  .sdb-pending-notice { padding: 10px 14px; font-size: 7px; }

  /* Stat grid — 2 columns on mobile */
  .sdb-root .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sdb-root .sc-value  { font-size: 18px; }

  /* Chart row — stack vertically */
  .sdb-root .chart-row { grid-template-columns: 1fr; }

  /* Inventory summary — 2 cols */
  .sdb-root .inv-summary-row { grid-template-columns: repeat(2, 1fr); }

  /* Analytics row — stack */
  .sdb-root .anl-row { grid-template-columns: 1fr; }

  /* Settings layout — stack */
  .sdb-root .set-layout { grid-template-columns: 1fr; }
  .sdb-root .set-nav    { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
  .sdb-root .set-nav-item { width: auto; padding: 8px 12px; font-size: 12px; }

  /* Product form — stack */
  .sdb-root .pf-cols { grid-template-columns: 1fr; }
  .sdb-root .pf-row  { grid-template-columns: 1fr 1fr; }

  /* Settings form row — stack */
  .sdb-root .sf-row, .sdb-root .sf-row.three { grid-template-columns: 1fr; }

  /* Table — allow horizontal scroll */
  .sdb-root .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sdb-root .data-table { min-width: 600px; }

  /* Quick actions — 2 cols */
  .sdb-root .qa-grid { grid-template-columns: repeat(2, 1fr); }

  /* View modal body — stack */
  .sdb-root .vm-body { grid-template-columns: 1fr; padding: 16px; }

  /* Modal — full screen on mobile */
  .sdb-root .modal-overlay { padding: 0; align-items: flex-end; }
  .sdb-root .modal-box { border-radius: 20px 20px 0 0; max-height: 92vh; }
  .sdb-root .order-modal,
  .sdb-root .prod-modal,
  .sdb-root .view-modal { max-width: 100%; width: 100%; }

  /* KPI row — 2 cols */
  .sdb-root .kpi-row { grid-template-columns: repeat(2, 1fr); }

  /* Logout modal */
  .sdb-logout-modal { padding: 28px 20px; }
}

@media (max-width: 380px) {
  .sdb-root .stat-grid { grid-template-columns: 1fr; }
  .sdb-root .kpi-row   { grid-template-columns: 1fr; }
  .sdb-root .pf-row    { grid-template-columns: 1fr; }
  .sdb-body { padding: 12px 10px 80px; }
  .sdb-title { font-size: 14px; }
}

/* ── Desktop: sidebar is static, not fixed ── */
@media (min-width: 769px) {
  .sdb-wrap   { height: 100vh; overflow: hidden; }
  .sdb-main   { overflow: hidden; }
  .sdb-hamburger { display: none; }
  .sdb-sb-toggle { display: flex; }
}