/* =====================================================
   ADMIN.CSS (CLEAN + CONSOLIDATED)
   - No duplicates
   - Single sticky stack (header + search/filters)
   - Keeps your existing layouts/styles
===================================================== */

/* ===============================
   BASE RESET
=============================== */
/*html,
body {
  overflow-x: hidden;
}
*/
body {
  margin: 0;
  padding: 0;
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
  background: #f5f6f8;
  color: #1f2933;
}

* {
  box-sizing: border-box;
}

/* ===============================
   GLOBAL TYPE + BUTTONS
=============================== */
h1 {
  font-size: 22px;
  margin: 0 0 20px;
}

h3 {
  margin: 0 0 12px;
}

button {
  -webkit-appearance: none;
  appearance: none;
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

/* Logout button */
#logoutBtn {
  background: #dc2626;
  color: #fff;
}

#logoutBtn:hover {
  background: #b91c1c;
}

/* ===============================
   STICKY STACK (HEADER + SEARCH)
   IMPORTANT: children are NOT sticky
=============================== */
.admin-sticky {
  position: sticky;
  top: 0;
  z-index: 5000;
  background: #f5f6f8;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* ===============================
   ADMIN TOP BAR
=============================== */
.admin-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 16px;

  padding: 16px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;

  margin: 0;
  position: static; /* not sticky */
}

/* Logo */
.admin-header {
  display: flex;
  align-items: center;
}

.admin-logo {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #111827;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}

.admin-logo .logo-dollar {
  color: #f28c28;
}
.admin-logo .logo-text {
  color: #fdf4e7;
}
.admin-logo .logo-four {
  color: #f28c28;
}

.admin-logo::after {
  content: '';
  display: block;
  height: 2px;
  background: #f28c28;
  border-radius: 1px;
  margin-top: 3px;
  width: 100%;
}

/* Title */
.admin-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.admin-top h1 {
  margin: 0;
  text-align: center;
  font-size: 20px;
  line-height: 1.2;
}

.admin-back {
  display: inline-block;
  font-size: 14px;
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #37415100;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  opacity: 0.85;
}

.admin-back:hover {
  text-decoration: underline;
  border: 1px solid #374151;
}

/* Special: logo-only pages */
.admin-top:has(.admin-header):not(:has(h1)):not(:has(#logoutBtn)) {
  grid-template-columns: auto;
  justify-content: flex-start;
}

/* ===============================
   SEARCH + FILTER BAR
=============================== */
.admin-search-bar,
.admin-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;

  padding: 12px 20px;
  margin: 0;
  background: #f5f6f8;
  border-bottom: 1px solid #e5e7eb;

  position: static;
}

.admin-search-bar input,
.admin-search-bar select,
.admin-filters input,
.admin-filters select {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  font-size: 14px;
}

.admin-filters input {
  flex: 1;
  min-width: 180px;
  max-width: 340px;
}

.filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Quick search links (Order ID + Email) */
.quick-search-id,
.quick-search-email {
  background: none;
  border: none;
  display: inline-block;
  padding: 0;
  margin: 0;
  transition:
    transform 0.15s ease,
    color 0.15s ease;

  font: inherit;
  font-weight: 600;
  color: #111827;

  cursor: pointer;
  text-decoration: none;
}

.quick-search-id:hover,
.quick-search-email:hover {
  text-decoration: underline;
  transform: scale(1.08);
  text-decoration: underline;
}

.quick-search-id {
  font-weight: 700;
}

.row-active {
  background: #eef2ff;
}

/* Autocomplete */
.autocomplete-wrapper {
  position: relative;
  width: 280px;
  flex-shrink: 0;
}

.autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

  max-height: 220px;
  overflow-y: auto;
  display: none;

  z-index: 6000;
}

.autocomplete-results div {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  color: #111827;
  transition: background 0.15s ease;
}

.autocomplete-results div:hover {
  background: #f3f4f6;
}

.autocomplete-results div.active {
  background: #e5e7eb;
}

/* Filters */
.admin-status-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

.filter-btn.active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.filter-btn.active[data-status='all'] {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

.filter-btn.active[data-status='Processing'] {
  background: #eef2ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

.filter-btn.active[data-status='Shipped'] {
  background: #ecfeff;
  color: #0f766e;
  border-color: #99f6e4;
}

.filter-btn.active[data-status='Delivered'] {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

.filter-btn.active[data-status='Cancelled'] {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

/* ===============================
   PAGE WRAPPER
=============================== */
.admin-page {
  padding: 0 20px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .admin-page {
    padding: 16px;
  }
}

/* ===============================
   TABLES (GENERAL)
=============================== */
.admin table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.admin th,
.admin td {
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  font-size: 14px;
}

.admin th {
  background: #f1f5f9;
  font-weight: 600;
}

/* horizontal scroll wrapper */
.admin-table-scroll {
  overflow-x: auto;
}

/* ===============================
   ADMIN ORDERS (table + links)
=============================== */
.admin-orders td:last-child a {
  color: #0f766e;
  font-weight: 600;
  text-decoration: none;
}

.admin-orders td:last-child a:hover {
  text-decoration: underline;
}

/* ===============================
   INLINE ORDER DETAILS (expand row)
=============================== */
/* container cell */
.order-details-row td {
  padding: 0;
  border-bottom: 1px solid #e5e7eb;
  overflow: visible; /* 🔥 THIS FIXES YOUR ISSUE */
}

/* wrapper controls height */
.inline-order-wrapper {
  height: 0;
  overflow: hidden;

  padding: 0 24px;
  padding-top: 0;
  padding-bottom: 0;

  transition:
    height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}
/* open state */
.order-details-row.open .inline-order-wrapper {
  opacity: 1;
  transform: translateY(0);
  padding: 16px 24px;
}
.inline-order-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 280px;
  text-align: right;
}

.inline-status-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Status action buttons (ONE definition only) */
.status-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.status-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

.status-btn.active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Specific hover tint */
.status-btn[data-status='Cancelled']:hover {
  background: #fef2f2;
  border-color: #fecaca;
}

.status-btn[data-status='Shipped']:hover {
  background: #ecfeff;
  border-color: #99f6e4;
}

.status-btn[data-status='Delivered']:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

/* ===============================
   PAGINATION
=============================== */
#pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

#pagination button,
#pagination a {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #ffffff;

  font-size: 14px;
  font-weight: 600;
  color: #1f2933;
  cursor: pointer;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

#pagination button:hover,
#pagination a:hover {
  background: #f1f5f9;
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

#pagination .active,
#pagination button.active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
  transform: none;
  box-shadow: none;
}

#pagination button.active {
  pointer-events: none;
}

/* ===============================
   STATUS BADGES
=============================== */
.status {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.status-processing {
  background: #eef2ff;
  color: #3730a3;
}

.status-shipped {
  background: #ecfeff;
  color: #0f766e;
}

.status-delivered {
  background: #f1f5f9;
  color: #475569;
}

.status-cancelled {
  background: #fef2f2;
  color: #991b1b;
}

.payment-status {
  font-weight: 600;
}

.payment-status.paid {
  color: #0a7c2f;
}

.payment-status.pending {
  color: #c97a00;
}

.payment-status.failed {
  color: #c40000;
}

.payment-status.refunded {
  color: #555;
}

/* ===============================
   ADMIN USERS TABLE
=============================== */
.admin-users-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

.admin-users-table th,
.admin-users-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
}

.admin-users-table thead th {
  background: #f1f5f9;
  font-weight: 600;
}

/* ===============================
   ADMIN ORDER DETAILS PAGE
=============================== */
.admin-order-details .order-box {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  margin-bottom: 24px;
  font-size: 14px;
  overflow-x: auto;
}

.admin-order-details .order-box h3 {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

/* Products table */
.admin-order-details .order-products {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
}

.admin-order-details .order-products th,
.admin-order-details .order-products td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  vertical-align: middle;
  white-space: nowrap;
}

.admin-order-details .order-products th {
  background: #f9fafb;
  font-weight: 600;
  color: #111827;
  text-align: left;
}

/* Product cell */
.admin-order-details .product-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-order-details .product-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}

.admin-order-details .product-name {
  display: block;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status controls */
.admin-order-details .status-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-order-details select {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  font-size: 14px;
}

.admin-order-details #updateStatus {
  background: #0f766e;
  color: #ffffff;
  padding: 10px 14px;
}

.admin-order-details #updateStatus:hover {
  background: #0d5f59;
}

.admin-order-details #result {
  margin-top: 12px;
  font-weight: 600;
  font-size: 14px;
}

.admin-order-details #statusHistory {
  margin-top: 10px;
  padding-left: 18px;
}

.admin-order-details #statusHistory li {
  margin-bottom: 6px;
  font-size: 14px;
}

button:disabled,
select:disabled {
  background: #9ca3af !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 0.7;
  border-color: #9ca3af !important;
  pointer-events: none;
}

/* ===============================
   ADMIN SIGN IN
=============================== */
.admin-signin {
  min-height: 100vh;
  background: #f5f6f8;
}

.admin-signin .signin-wrapper {
  width: 100%;
  max-width: 380px;
  background: #ffffff;
  padding: 32px;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  margin: 82px auto 0;
}

.admin-signin h1 {
  margin-bottom: 24px;
}

.admin-signin form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-signin input {
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  font-size: 14px;
}

.admin-signin button {
  padding: 12px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  background: #374151;
  color: #ffffff;
  cursor: pointer;
}

.admin-signin button:hover {
  background: #1f2937;
}

.admin-signin #error {
  margin-top: 14px;
  font-size: 14px;
  color: #374151;
}

.admin-signin #error.error {
  color: #dc2626;
}

.admin-signin button.success {
  background: #ffffff;
  color: #16a34a;
  font-weight: 600;
  border: 1px solid black;
}

.admin-signin button:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

/* ===============================
   ADMIN DASHBOARD
=============================== */
.admin-dashboard {
  min-height: 100vh;
}

.admin-dashboard .dashboard-wrapper {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  padding: 32px;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  margin: 82px auto 0;
}

.admin-dashboard h1 {
  margin-bottom: 24px;
}

.admin-dashboard .dashboard-nav {
  list-style: none;
  padding: 0;
  margin-bottom: 24px;
}

.admin-dashboard .dashboard-nav li + li {
  margin-top: 12px;
}

.admin-dashboard .dashboard-nav a {
  display: block;
  padding: 14px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #1f2933;
  text-decoration: none;
  font-weight: 600;
}

.admin-dashboard .dashboard-nav a:hover {
  background: #e5e7eb;
}

.dash-badge {
  display: inline-block;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}

.dash-badge-secondary {
  font-weight: 700;
  color: #b45309;
}

.admin-dashboard .dashboard-nav li {
  font-size: 14px;
  color: #6b7280;
}

.dash-badge--hidden {
  display: none;
}

.vendor-card {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.actions button {
  margin-right: 10px;
  padding: 6px 10px;
  cursor: pointer;
}
@media (max-width: 768px) {
  h1 {
    font-size: 20px;
  }

  h3 {
    font-size: 16px;
  }

  .admin-signin .signin-wrapper,
  .admin-dashboard .dashboard-wrapper {
    margin-top: 24px;
  }

  .admin th,
  .admin td {
    padding: 10px;
    font-size: 13px;
  }

  /* Mobile: remove full-height layout — let page scroll naturally */
  body.admin-vendors,
  body.admin-users {
    height: auto;
    overflow: visible;
    display: block;
  }

  body.admin-vendors .admin-sticky,
  body.admin-users .admin-sticky {
    position: static;
  }

  body.admin-vendors .admin-table-scroll,
  body.admin-users .admin-table-scroll {
    flex: none;
    overflow-x: auto;
    overflow-y: visible;
  }

  body.admin-vendors #pagination,
  body.admin-users #pagination {
    padding: 14px 20px;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  /* ── Search + filter bars ── */
  .admin-search-bar,
  .admin-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 12px;
  }

  .admin-filters input,
  .admin-search-bar input {
    max-width: 100%;
    font-size: 16px; /* prevents iOS zoom */
  }

  .autocomplete-wrapper {
    width: 100%;
  }

  #orderSearch,
  #vendorSearch,
  #userSearch {
    width: 100%;
    font-size: 16px;
    padding: 12px;
  }

  /* ── Filter buttons: 2 per row ── */
  .admin-status-filters,
  .filter-tabs {
    gap: 6px;
  }

  .admin-status-filters .filter-btn,
  .filter-tabs .filter-btn {
    flex: 1 1 calc(50% - 3px);
    padding: 10px 4px;
    font-size: 13px;
    border-radius: 8px;
    text-align: center;
  }

  /* ── Table scroll container ── */
  .admin-table-scroll {
    overflow-x: auto;
  }

  /* ── Orders table ── */
  .admin-orders-table {
    min-width: 560px;
    width: 560px;
    table-layout: auto;
    font-size: 13px;
  }

  .admin-orders-table th,
  .admin-orders-table td {
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* ── Vendors table ── */
  .admin-vendors-table {
    min-width: 820px;
    font-size: 12px;
  }

  .admin-vendors-table th,
  .admin-vendors-table td {
    padding: 7px 9px;
    font-size: 12px;
  }

  /* ── Users table ── */
  .admin-users-table {
    min-width: 500px;
    font-size: 12px;
  }

  /* ── All table cells ── */
  .admin th,
  .admin td {
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* ── Status badges ── */
  .status {
    padding: 3px 8px;
    font-size: 12px;
  }

  /* ── Inline expand panel ── */
  .inline-order-wrapper {
    padding: 0 10px;
  }

  /* ── Pagination ── */
  #pagination {
    gap: 5px;
    margin-top: 14px;
  }

  #pagination button,
  #pagination a {
    min-width: 32px;
    height: 32px;
    font-size: 13px;
    padding: 0 6px;
  }
}

/* ===== REFUND MODAL ===== */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-card {
  background: #ffffff;
  padding: 28px;
  border-radius: 10px;
  width: 380px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

.modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.btn-danger {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-danger:hover {
  background: #c0392b;
}

.btn-secondary {
  background: #e5e5e5;
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  cursor: pointer;
}

/* ===============================
   ADMIN VENDORS
=============================== */
/* ===== PAGE ===== */

body {
  font-family: Arial, sans-serif;
  background: #f5f7fb;
  margin: 0;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
}

/* ===== LIST ===== */

#vendors-list {
  display: grid;
  gap: 16px;
}

/* ===== CARD ===== */

.vendor-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vendor-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* TOP ROW */

.vendor-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vendor-info h3 {
  margin: 0;
  font-size: 18px;
}

.vendor-card:hover {
  transform: translateY(-2px);
}

/* ===== HEADER ===== */

.vendor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vendor-header h3 {
  margin: 0;
  font-size: 18px;
}

/* ===== STATUS ===== */

.vendor-status {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
}

.status-pending {
  background: #fff3cd;
  color: #856404;
}

.status-approved {
  background: #d4edda;
  color: #155724;
}

.status-suspended {
  background: #f8d7da;
  color: #721c24;
}

/* ===== BODY ===== */

.vendor-email {
  margin: 4px 0 0;
  color: #666;
  font-size: 14px;
}

/* ===== ACTIONS ===== */

.vendor-actions {
  display: flex;
  justify-content: flex-end;
}

/* ===== BUTTONS ===== */

.btn {
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s;
}

.btn-approve {
  background: #28a745;
  color: white;
}

.btn-approve:hover {
  background: #218838;
}

.btn-suspend {
  background: #dc3545;
  color: white;
}

.btn-suspend:hover {
  background: #c82333;
}

#sellersSection {
  display: none;
}

/* ===========================
   USER STATUS PILLS
=========================== */
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}
.status-pill.active {
  background: #dcfce7;
  color: #15803d;
}
.status-pill.inactive {
  background: #f3f4f6;
  color: #6b7280;
}
.status-pill.banned {
  background: #fee2e2;
  color: #b91c1c;
}

/* ===============================
   ADMIN VENDORS TABLE
=============================== */
.admin-vendors-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.admin-vendors-table th,
.admin-vendors-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
}

.admin-vendors-table thead th {
  background: #f1f5f9;
  font-weight: 600;
}

/* ===============================
   VENDORS + USERS: FULL-HEIGHT LAYOUT
   Table fills remaining viewport on desktop; sticky thead works within its scroll box.
=============================== */
body.admin-vendors,
body.admin-users {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

body.admin-vendors .admin-sticky,
body.admin-users .admin-sticky {
  flex-shrink: 0;
}

body.admin-vendors .admin-table-scroll,
body.admin-users .admin-table-scroll {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

body.admin-vendors #pagination,
body.admin-users #pagination {
  flex-shrink: 0;
  padding: 10px 0;
  background: #f5f6f8;
}

/* Sticky column headers within the table's own scroll box (desktop only) */
body.admin-vendors .admin-vendors-table thead th,
body.admin-users .admin-users-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f1f5f9;
  box-shadow: 0 1px 0 #e5e7eb;
}

/* ===============================
   LANDSCAPE PHONES
   Very short viewport — remove all sticky, let page scroll freely.
=============================== */
@media (max-height: 500px) and (orientation: landscape) {
  body.admin-vendors,
  body.admin-users {
    height: auto;
    overflow: visible;
    display: block;
  }

  body.admin-vendors .admin-sticky,
  body.admin-users .admin-sticky {
    position: static;
  }

  body.admin-vendors .admin-table-scroll,
  body.admin-users .admin-table-scroll {
    flex: none;
    overflow-x: auto;
    overflow-y: visible;
  }

  body.admin-vendors #pagination,
  body.admin-users #pagination {
    padding: 12px 16px;
    margin-bottom: 16px;
  }

  .admin-top {
    padding: 6px 14px;
    gap: 6px;
  }

  .admin-filters,
  .admin-search-bar {
    padding: 6px 14px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .admin-filters input,
  .admin-search-bar input {
    max-width: 220px;
  }
}

/* ======================================================
   CHARGEBACK BADGE
====================================================== */

.dispute-badge {
  display: inline-block;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

/* ======================================================
   ADMIN PAYOUT PANEL
====================================================== */

.admin-payout-panel {
  margin: 16px 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

.admin-payout-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
}

.admin-payout-badge {
  background: #ef4444;
  color: #fff;
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 0.75rem;
  font-weight: 700;
  display: none;
}

.admin-payout-body {
  display: none;
  padding: 0 18px 16px;
}

.admin-payout-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  margin-top: 12px;
}

.admin-payout-table th {
  text-align: left;
  padding: 6px 8px;
  color: #6b7280;
  font-size: 0.75rem;
  text-transform: uppercase;
  border-bottom: 2px solid #e5e7eb;
}

.admin-payout-table td {
  padding: 8px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.admin-payout-table .payout-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.admin-payout-table .payout-ref-input {
  border: 1px solid #d1d5db;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 0.82rem;
  width: 140px;
}

.btn-payout-paid {
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-payout-paid:hover {
  background: #15803d;
}

.btn-payout-reject {
  background: #fff;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-payout-reject:hover {
  background: #fee2e2;
}

.admin-payout-empty {
  padding: 16px 8px;
  color: #9ca3af;
  text-align: center;
}

/* ── Generic admin toolbar ── */
.admin-toolbar {
  padding: 8px 16px 4px;
  display: flex;
  gap: 8px;
}
.admin-toolbar-btn {
  padding: 5px 13px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.admin-toolbar-btn:hover {
  border-color: #0b6b6a;
  color: #0b6b6a;
}