/* frontend/public/css/dashboard-admin.css */

/* ========================================================================
   DASHBOARD ADMIN CSS - COMPLETE REDESIGN
   Matches Platform Premium Theme
   ======================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  /* Colors - Matching Platform Theme */
  --bg: #faf9f7;
  --bg-dark: #f5f3f0;
  --text-dark: #2e2a28;
  --text-soft: #5e5a58;
  --text-light: #8a8684;
  --accent: #b78c5a;
  --accent-light: #dab88f;
  --accent-dark: #9a7a4e;
  --accent-gradient: linear-gradient(135deg, #dab88f 0%, #b78c5a 100%);
  --accent-gradient-reverse: linear-gradient(135deg, #b78c5a 0%, #dab88f 100%);

  /* Cards */
  --card-bg: #ffffff;
  --card-border: #ece9e5;
  --card-shadow: 0 15px 30px -12px rgba(0, 0, 0, 0.1);
  --card-shadow-hover: 0 25px 40px -15px rgba(183, 140, 90, 0.2);

  /* Status Colors */
  --success: #10b981;
  --success-light: #e3f2e9;
  --warning: #f59e0b;
  --warning-light: #fef3e2;
  --danger: #ef4444;
  --danger-light: #fee2e2;
  --info: #2563eb;
  --info-light: #e1f0fa;
  --neutral: #94a3b8;
  --neutral-light: #f1f5f9;

  /* Borders */
  --border-light: #ece9e5;
  --border-medium: #ddd8d2;

  /* Typography */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing */
  --spacer: 8px;
  --touch-target: 44px;

  /* Layout */
  --admin-sidebar-width: 280px;
  --admin-header-height: 70px;
  --admin-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

  /* Z-index layers */
  --z-dropdown: 1000;
  --z-sticky: 100;
  --z-modal: 2000;
  --z-toast: 3000;
}

/* ========================================================================
   RESET & BASE
   ======================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-size: 16px;
}

/* Selection styling */
::selection {
  background: var(--accent);
  color: white;
  text-shadow: none;
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Smooth scrolling but respect user preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================================================
   TYPOGRAPHY - Premium
   ======================================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.section-title-serif {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 400;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  position: relative;
  display: inline-block;
}

.section-title-serif .dot {
  color: var(--accent);
  font-size: clamp(2.2rem, 6vw, 3rem);
  line-height: 0.8;
  display: inline-block;
  margin-left: 2px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.section-subtitle {
  color: var(--text-soft);
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
  font-weight: 300;
}

/* In dashboard-admin.css - Add these styles */

/* ========================================================================
   SECTION HEADER - Premium Redesign for Orders Sections
   ======================================================================== */

.orders-section-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  margin-top: 40px;
  position: relative;
}

.orders-section-header:first-of-type {
  margin-top: 0;
}

/* Header top row with title and view all */
.orders-section-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.orders-section-title-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.orders-section-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.orders-section-title::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.orders-section-total-badge {
  background: linear-gradient(135deg, #f2ebe3 0%, white 100%);
  border: 1px solid var(--accent-light);
  border-radius: 40px;
  padding: 4px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.orders-section-total-badge i {
  font-size: 0.75rem;
}

.orders-section-total-badge strong {
  font-size: 1rem;
  margin-right: 2px;
}

.orders-section-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  color: var(--text-dark);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.05);
}

.orders-section-view-all i {
  color: var(--accent);
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.orders-section-view-all:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

.orders-section-view-all:hover i {
  color: white;
  transform: translateX(4px);
}

/* Stats mini cards row */
.orders-section-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: white;
  padding: 12px 16px;
  border-radius: 60px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  width: fit-content;
  max-width: 100%;
}

.orders-stat-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--bg);
  border-radius: 40px;
  font-size: 0.85rem;
  color: var(--text-soft);
  transition: all 0.2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.orders-stat-mini:hover {
  background: white;
  border-color: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.02);
}

.orders-stat-mini i {
  font-size: 0.8rem;
}

.orders-stat-mini .stat-label {
  font-weight: 500;
}

.orders-stat-mini .stat-value {
  font-weight: 700;
  color: var(--text-dark);
  margin-left: 4px;
}

/* Individual stat colors */
.orders-stat-mini.pending i {
  color: #b45309;
}

.orders-stat-mini.quoted i {
  color: var(--accent);
}

.orders-stat-mini.approved i {
  color: #2f6e4a;
}

.orders-stat-mini.in-progress i {
  color: #1e4a6b;
}

.orders-stat-mini.completed i {
  color: #2f6e4a;
}

.orders-stat-mini.cancelled i {
  color: #ef4444;
}

.orders-stat-mini.shipped i {
  color: var(--accent);
}

/* Divider line for visual separation */
.orders-section-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--border-light),
    transparent
  );
  margin: 10px 0 5px 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .orders-section-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .orders-section-title-wrapper {
    width: 100%;
    justify-content: space-between;
  }

  .orders-section-stats {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 10px;
    border-radius: 30px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .orders-section-stats::-webkit-scrollbar {
    height: 3px;
  }

  .orders-section-stats::-webkit-scrollbar-track {
    background: var(--border-light);
    border-radius: 3px;
  }

  .orders-section-stats::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px;
  }

  .orders-stat-mini {
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .orders-section-title {
    font-size: 1.3rem;
  }

  .orders-section-total-badge {
    padding: 3px 12px;
    font-size: 0.8rem;
  }

  .orders-section-total-badge strong {
    font-size: 0.9rem;
  }

  .orders-section-view-all {
    padding: 6px 16px;
    font-size: 0.85rem;
  }

  .orders-stat-mini {
    padding: 4px 14px;
    font-size: 0.8rem;
  }
}
/* In dashboard-admin.css - Update the section-header styles */

/* ========================================================================
   SECTION HEADER - Left Aligned for All Sections
   ======================================================================== */

.section-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  gap: 20px;
  width: 100%;
  text-align: left;
}

.header-left {
  flex: 1;
  min-width: 0; /* Prevents flex items from overflowing */
}

.header-left h1,
.header-left h2,
.header-left .page-title-serif {
  margin: 0 0 8px 0;
  text-align: left;
}

.header-left p,
.header-left .page-subtitle {
  margin: 0;
  text-align: left;
}

.header-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

/* Page Title Serif - Left Aligned */
.page-title-serif {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 8px 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
  text-align: left;
}

.page-title-serif::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Page Subtitle - Left Aligned */
.page-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 8px;
  line-height: 1.5;
  text-align: left;
  max-width: 600px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .page-title-serif {
    font-size: 1.5rem;
  }

  .page-title-serif::after {
    width: 40px;
    bottom: -6px;
  }

  .page-subtitle {
    font-size: 0.85rem;
    margin-top: 6px;
  }
}

@media (max-width: 480px) {
  .section-header {
    margin-bottom: 15px;
  }

  .page-title-serif {
    font-size: 1.3rem;
  }

  .page-subtitle {
    font-size: 0.8rem;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;
  }

  .header-actions .btn-outline {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================================================
   ADMIN DASHBOARD LAYOUT
   ======================================================================== */
.admin-dashboard {
  display: flex;
  min-height: 100vh;
  position: relative;
  background: var(--bg);
  width: 100%;
  /* overflow-x handled by body rule — removing here so position:fixed sidebar works correctly */
}

/* ========================================================================
   SIDEBAR - Premium Redesign
   ======================================================================== */
.admin-sidebar {
  width: var(--admin-sidebar-width);
  background: linear-gradient(180deg, #fffcf8 0%, #faf7f2 100%);
  color: var(--text-dark);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: var(--z-sticky);
  transition: var(--admin-transition);
  box-shadow: 4px 0 24px rgba(183, 140, 90, 0.06);
  border-right: 1px solid rgba(183, 140, 90, 0.12);
  display: flex;
  flex-direction: column;
}

.admin-sidebar::-webkit-scrollbar {
  width: 3px;
}

.admin-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.admin-sidebar::-webkit-scrollbar-thumb {
  background: rgba(183, 140, 90, 0.25);
  border-radius: 4px;
}

.admin-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(183, 140, 90, 0.4);
}

/* Firefox scrollbar */
.admin-sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(183, 140, 90, 0.25) transparent;
}

.sidebar-header {
  padding: 28px 24px;
  border-bottom: 1px solid rgba(183, 140, 90, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, #fffcf8 0%, #faf7f2 100%);
  position: sticky;
  top: 0;
  z-index: 5;
}

.logo {
  text-decoration: none;
  color: var(--text-dark);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.02em;
}

.logo span {
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.admin-badge {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  font-size: 0.6rem;
  padding: 3px 10px;
  border-radius: 30px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-left: 4px;
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.25);
  -webkit-text-fill-color: white;
}

.sidebar-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-soft);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sidebar-close:hover {
  background: rgba(183, 140, 90, 0.08);
  color: var(--accent);
  transform: rotate(90deg);
}

/* Admin Profile */
.admin-profile {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(183, 140, 90, 0.1);
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(183, 140, 90, 0.04);
  margin: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(183, 140, 90, 0.08);
}

.profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -3px rgba(183, 140, 90, 0.3);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.profile-name {
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--text-dark);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.profile-role {
  font-size: 0.65rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navigation */
.sidebar-nav {
  flex: 1;
  padding: 8px 16px 16px;
}

/* Nav Items */
.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  color: var(--text-soft);
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  margin-bottom: 2px;
  position: relative;
  font-size: 0.875rem;
  font-weight: 450;
  border-left: 3px solid transparent;
  min-height: 46px;
  letter-spacing: -0.005em;
}

.nav-item i {
  width: 20px;
  font-size: 0.95rem;
  color: currentColor;
  transition: color 0.25s;
}

.nav-item span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item .badge {
  margin-left: auto;
  background: var(--accent);
  color: white;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 30px;
  min-width: 18px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(183, 140, 90, 0.2);
}

.nav-item:hover {
  background: rgba(183, 140, 90, 0.06);
  color: var(--text-dark);
  transform: translateX(2px);
}

.nav-item.active {
  background: linear-gradient(
    135deg,
    rgba(183, 140, 90, 0.1) 0%,
    rgba(218, 184, 143, 0.08) 100%
  );
  color: var(--accent-dark);
  border-left-color: var(--accent);
  font-weight: 550;
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.08);
}

.nav-item.active i {
  color: var(--accent);
}

/* Nav Sections (Dropdown) */
.nav-section {
  margin: 4px 0;
}

.nav-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  min-height: 48px;
  border-left: 3px solid transparent;
  font-size: 0.9rem;
  border-radius: 12px;
  position: relative;
  user-select: none;
}

.nav-section-header i:first-child {
  width: 20px;
  font-size: 1rem;
  color: currentColor;
}

.nav-section-header span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-icon {
  margin-left: auto;
  font-size: 0.8rem;
  transition: transform 0.3s ease;
  color: var(--text-soft);
}

.nav-section-header .dropdown-icon.rotated {
  transform: rotate(180deg);
}

.nav-section-header:hover {
  background: rgba(183, 140, 90, 0.06);
  color: var(--text-dark);
  transform: translateX(2px);
}

.nav-section-header.active {
  background: linear-gradient(
    135deg,
    rgba(183, 140, 90, 0.1) 0%,
    rgba(218, 184, 143, 0.08) 100%
  );
  color: var(--accent-dark);
  border-left-color: var(--accent);
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.08);
}

.nav-section-header.active .dropdown-icon {
  color: var(--accent);
}

/* Submenu */
.nav-submenu {
  display: none;
  padding-left: 16px;
  margin-left: 24px;
  border-left: 1px solid var(--border-light);
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.nav-submenu.expanded {
  display: block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-subitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: var(--text-soft);
  text-decoration: none;
  transition: all 0.2s;
  min-height: 40px;
  border-radius: 8px;
  font-size: 0.85rem;
  position: relative;
}

.nav-subitem i {
  width: 18px;
  font-size: 0.85rem;
  color: currentColor;
}

.nav-subitem span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-subitem .badge {
  margin-left: auto;
  background: var(--accent);
  color: white;
  font-size: 0.55rem;
  padding: 2px 5px;
  border-radius: 30px;
  min-width: 16px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-subitem:hover {
  background: rgba(183, 140, 90, 0.06);
  color: var(--text-dark);
}

.nav-subitem.active {
  color: var(--accent-dark);
  background: rgba(183, 140, 90, 0.08);
  font-weight: 550;
}

/* Nav Divider */
.nav-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(183, 140, 90, 0.15),
    transparent
  );
  margin: 12px 16px;
}

/* Logout nav item */
.nav-item#logoutBtn {
  color: var(--text-light);
  margin-top: 4px;
}

.nav-item#logoutBtn:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.05);
}

/* Sidebar Overlay (Mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: calc(var(--z-sticky) - 1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* ========================================================================
   MAIN CONTENT
   ======================================================================== */
.admin-main {
  flex: 1;
  margin-left: var(--admin-sidebar-width);
  min-height: 100vh;
  background: var(--bg);
  transition: var(--admin-transition);
  width: calc(100% - var(--admin-sidebar-width));
}

/* ========================================================================
   HEADER - Premium Redesign
   ======================================================================== */
.admin-header {
  height: var(--admin-header-height);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-light);
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) - 1);
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--text-dark);
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.mobile-menu-toggle:hover {
  background: var(--bg);
  color: var(--accent);
}

.page-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text-dark);
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Notifications */
.notifications-dropdown {
  position: relative;
}

.icon-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-soft);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s;
}

.icon-btn:hover {
  background: var(--bg);
  color: var(--text-dark);
}

.icon-btn .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--accent);
  color: white;
  font-size: 0.6rem;
  min-width: 18px;
  height: 18px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(183, 140, 90, 0.3);
}

.notifications-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  background: white;
  border-radius: 20px;
  box-shadow: var(--card-shadow-hover);
  border: 1px solid var(--border-light);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: var(--z-dropdown);
  overflow: hidden;
}

.notifications-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.btn-text {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 30px;
  transition: all 0.2s;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-text:hover {
  background: var(--bg);
  text-decoration: underline;
}

.notifications-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  margin-bottom: 4px;
}

.notification-item:hover {
  background: var(--bg);
  border-color: var(--border-light);
}

.notification-item.unread {
  background: #f2ebe3;
}

.notification-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1rem;
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.notification-body {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-bottom: 2px;
  line-height: 1.4;
}

.notification-time {
  font-size: 0.65rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 2px;
}

.unread-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  margin-top: 4px;
}

.empty-notifications {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-soft);
}

.empty-notifications i {
  font-size: 2rem;
  margin-bottom: 10px;
  opacity: 0.3;
}

/* Profile Dropdown */
.profile-dropdown {
  position: relative;
}

.profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 40px;
  transition: all 0.2s;
  min-height: 44px;
}

.profile-btn:hover {
  background: var(--bg);
}

.profile-avatar-small {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  overflow: hidden;
}

.profile-avatar-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: white;
  border-radius: 20px;
  box-shadow: var(--card-shadow-hover);
  border: 1px solid var(--border-light);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: var(--z-dropdown);
  overflow: hidden;
}

.profile-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 15px;
}

.profile-avatar-medium {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}

.profile-avatar-medium img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.profile-name-large {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-email {
  font-size: 0.8rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-divider {
  height: 1px;
  background: var(--border-light);
  margin: 8px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: var(--text-dark);
  text-decoration: none;
  transition: all 0.2s;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
}

.menu-item i {
  width: 18px;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.menu-item:hover {
  background: var(--bg);
  color: var(--accent);
}

.menu-item:hover i {
  color: var(--accent);
}

/* ========================================================================
   CONTENT AREA
   ======================================================================== */
.admin-content {
  padding: 30px;
  min-height: calc(100vh - var(--admin-header-height));
}

/* ========================================================================
   LOADING STATE
   ======================================================================== */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--text-soft);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================================================
   DASHBOARD CARDS - Premium Stats Grid
   ======================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 15px;
  transition: var(--admin-transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-gradient);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--accent-light);
}

.stat-card:hover::before {
  transform: scaleX(1);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    rgba(183, 140, 90, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.8rem;
  transition: all 0.3s ease;
}

.stat-card:hover .stat-icon {
  background: var(--accent);
  color: white;
  transform: scale(1.05);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-trend {
  font-size: 0.7rem;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 30px;
  background: var(--bg);
}

.stat-trend.positive {
  color: var(--success);
  background: var(--success-light);
}

.stat-trend.negative {
  color: var(--danger);
  background: var(--danger-light);
}

/* Charts Grid */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.chart-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.chart-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--accent-light);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-header h3 i {
  color: var(--accent);
  font-size: 0.9rem;
}

.chart-container {
  height: 300px;
  position: relative;
}

/* Quick Stats */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}

.quick-stat {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 15px;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.quick-stat:hover {
  transform: translateY(-2px);
  border-color: var(--accent-light);
  box-shadow: var(--card-shadow);
}

.quick-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.1rem;
}

.quick-stat-content {
  flex: 1;
}

.quick-stat-value {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.quick-stat-label {
  font-size: 0.7rem;
  color: var(--text-soft);
}

/* Recent Activity */
.activity-feed {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-light);
  margin-bottom: 30px;
  max-height: 400px; /* Limit the height */
  display: flex;
  flex-direction: column;
}

.feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-shrink: 0; /* Prevent header from shrinking */
}

.feed-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.feed-header h3 i {
  color: var(--accent);
  font-size: 0.9rem;
}

.feed-header .btn-text {
  padding: 6px 12px;
  font-size: 0.8rem;
  min-height: 36px;
}

/* Feed List - This becomes the vertical slider */
.feed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;

  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--border-light);
  -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar for webkit browsers */
.feed-list::-webkit-scrollbar {
  width: 4px;
}

.feed-list::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 4px;
}

.feed-list::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.feed-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

/* Activity Items - More Compact */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: all 0.2s;
  border: 1px solid transparent;
  background: var(--bg);
  flex-shrink: 0;
}

.activity-item:hover {
  background: white;
  border-color: var(--border-light);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.activity-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 0.8rem;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.activity-details {
  flex: 1;
  min-width: 0;
}

.activity-title {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--text-dark);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-description {
  font-size: 0.7rem;
  color: var(--text-soft);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-time {
  font-size: 0.6rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 4px;
}

.activity-amount {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.8rem;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Empty state styling */
.empty-notifications {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-soft);
}

.empty-notifications i {
  font-size: 2rem;
  margin-bottom: 10px;
  opacity: 0.3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .activity-feed {
    max-height: 350px;
    padding: 16px;
  }

  .activity-item {
    padding: 8px 10px;
  }
}

@media (max-width: 480px) {
  .activity-feed {
    max-height: 300px;
    padding: 14px;
  }

  .feed-header {
    margin-bottom: 12px;
  }

  .feed-header h3 {
    font-size: 0.9rem;
  }

  .activity-item {
    padding: 8px;
    gap: 8px;
  }

  .activity-icon {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }

  .activity-title {
    font-size: 0.75rem;
  }

  .activity-description {
    font-size: 0.65rem;
  }

  .activity-time {
    font-size: 0.55rem;
  }

  .activity-amount {
    font-size: 0.7rem;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .activity-feed {
    max-height: 250px;
    padding: 12px;
  }

  .activity-item {
    padding: 6px;
  }
}

/* ========================================================================
   TABLES - Premium Design
   ======================================================================== */
.table-container {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-light);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table th {
  text-align: left;
  padding: 16px;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-light);
  background: var(--bg);
  white-space: nowrap;
}

.data-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-dark);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr {
  transition: all 0.2s ease;
}

.data-table tbody tr:hover td {
  background: var(--bg);
  cursor: pointer;
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.status-badge.active,
.status-badge.approved,
.status-badge.completed,
.status-badge.published {
  background: var(--success-light);
  color: var(--success);
}

.status-badge.pending,
.status-badge.pending_quote,
.status-badge.awaiting {
  background: var(--warning-light);
  color: #b45309;
}

.status-badge.suspended,
.status-badge.rejected,
.status-badge.cancelled,
.status-badge.unpublished {
  background: var(--danger-light);
  color: var(--danger);
}

.status-badge.inactive,
.status-badge.draft {
  background: var(--neutral-light);
  color: var(--neutral);
}

.status-badge.quoted {
  background: #f2ebe3;
  color: var(--accent);
}

/* Action Buttons */
.action-btn {
  background: none;
  border: none;
  color: var(--text-soft);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  background: var(--bg);
  color: var(--accent);
}

.action-btn.danger:hover {
  color: var(--danger);
  background: var(--danger-light);
}

/* ========================================================================
   FILTERS BAR - Premium
   ======================================================================== */
.filters-bar {
  background: var(--card-bg);
  border-radius: 60px;
  padding: 10px 20px;
  margin-bottom: 20px;
  border: 1px solid var(--border-light);
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

/* Mobile - stack vertically */
@media (max-width: 768px) {
  .filters-bar {
    flex-direction: column;
    align-items: stretch;
    border-radius: 20px;
    padding: 16px;
  }
}

.search-wrapper {
  flex: 1;
  min-width: 250px;
  position: relative;
}

.search-wrapper i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.85rem;
  pointer-events: none;
  z-index: 1;
}

.search-wrapper input {
  width: 100%;
  padding: 12px 20px 12px 45px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.9rem;
  background: var(--bg);
  transition: all 0.2s;
  min-height: 44px;
}

.search-wrapper input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
  background: white;
}

.search-wrapper input::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
}

.filter-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .filter-group {
    flex-direction: column;
    width: 100%;
  }
}

.filter-select {
  padding: 12px 40px 12px 20px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.9rem;
  background: white;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e5a58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 14px;
  min-width: 140px;
  min-height: 44px;
}

@media (max-width: 768px) {
  .filter-select {
    width: 100%;
  }
}

.filter-select:hover {
  border-color: var(--accent);
}

.filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
}

.clear-filters-btn {
  padding: 12px 24px;
  border-radius: 40px;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  min-height: 44px;
  font-weight: 500;
}

.clear-filters-btn:hover {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 768px) {
  .clear-filters-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Active Filters Tags */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.filter-tag {
  background: linear-gradient(135deg, var(--bg) 0%, white 100%);
  border: 1px solid var(--accent-light);
  border-radius: 40px;
  padding: 4px 12px 4px 16px;
  font-size: 0.75rem;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: tagPop 0.3s ease;
}

.filter-tag i {
  color: var(--accent);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s;
  padding: 2px;
}

.filter-tag i:hover {
  color: var(--danger);
  transform: scale(1.2);
}

@keyframes tagPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========================================================================
   PAGINATION
   ======================================================================== */
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .pagination {
    flex-direction: column;
    align-items: center;
  }
}

.pagination-info {
  color: var(--text-soft);
  font-size: 0.85rem;
}

.pagination-controls {
  display: flex;
  gap: 5px;
}

.pagination-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-light);
  background: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(183, 140, 90, 0.2);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* ========================================================================
   EMPTY STATES
   ======================================================================== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--card-bg);
  border-radius: 20px;
  border: 1px solid var(--border-light);
}

.empty-state i {
  font-size: 3rem;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 1.2rem;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--text-soft);
  max-width: 400px;
  margin: 0 auto 20px;
  font-size: 0.9rem;
}

.empty-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .empty-actions {
    flex-direction: column;
    align-items: center;
  }

  .empty-actions .btn-primary,
  .empty-actions .btn-outline {
    width: 100%;
  }
}

/* ========================================================================
   MODALS - Premium
   ======================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  backdrop-filter: blur(4px);
  padding: 16px;
}

.modal-content {
  background: white;
  border-radius: 24px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: slideUp 0.3s ease;
  border: 1px solid var(--border-light);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
  border-radius: 24px 24px 0 0;
}

.modal-header h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  font-family: var(--font-serif);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--text-soft);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.modal-close:hover {
  background: var(--bg);
  color: var(--text-dark);
  transform: rotate(90deg);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  background: white;
  border-radius: 0 0 24px 24px;
}

@media (max-width: 480px) {
  .modal-footer {
    flex-direction: column;
  }

  .modal-footer button {
    width: 100%;
  }
}

/* ========================================================================
   BUTTONS - Premium
   ======================================================================== */
.btn-primary,
.btn-outline,
.btn-text,
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  border: none;
  font-size: 0.9rem;
  min-height: 44px;
  padding: 0.75rem 2rem;
  border-radius: 40px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-primary {
  background: var(--text-dark);
  color: white;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.1);
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--accent-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 25px -8px rgba(183, 140, 90, 0.3);
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--text-dark);
  color: var(--text-dark);
}

.btn-outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--text-dark);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
  z-index: -1;
}

.btn-outline:hover {
  color: white;
  border-color: var(--text-dark);
  transform: translateY(-3px);
  box-shadow: 0 15px 25px -8px rgba(0, 0, 0, 0.15);
}

.btn-outline:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-outline.danger {
  border-color: var(--danger);
  color: var(--danger);
}

.btn-outline.danger::before {
  background: var(--danger);
}

.btn-outline.danger:hover {
  color: white;
  border-color: var(--danger);
}

.btn-text {
  background: transparent;
  color: var(--accent);
  padding: 0.5rem 1rem;
  min-height: auto;
  border-radius: 0;
  border-bottom: 2px solid transparent;
}

.btn-text:hover {
  color: var(--text-dark);
  border-bottom-color: var(--accent);
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.8rem;
  min-height: 36px;
}

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.05);
}

.btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 20px -8px rgba(183, 140, 90, 0.3);
}

.btn-icon.danger:hover {
  background: var(--danger);
  border-color: var(--danger);
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
  .admin-sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }

  .admin-sidebar.active {
    transform: translateX(0);
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.15);
  }

  .sidebar-close {
    display: flex;
  }

  .admin-main {
    margin-left: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .charts-grid {
    grid-template-columns: 1fr;
  }

  .page-title {
    font-size: 1.1rem;
  }
}

/* Tablet Landscape (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-header {
    padding: 0 20px;
  }
}

/* Mobile (767px and below) */
@media (max-width: 767px) {
  .admin-sidebar {
    width: 85%;
    max-width: 320px;
  }

  .admin-content {
    padding: 12px;
    padding-bottom: 80px; /* Space for mobile bottom nav */
    overflow-x: hidden;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-icon {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }

  .stat-value {
    font-size: 1.4rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  .quick-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .quick-stat {
    padding: 12px;
  }

  .quick-stat-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .quick-stat-value {
    font-size: 0.9rem;
  }

  .quick-stat-label {
    font-size: 0.65rem;
  }

  .charts-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .chart-card {
    padding: 16px;
  }

  .chart-container {
    height: 250px;
  }

  .data-table th,
  .data-table td {
    padding: 12px;
    font-size: 0.8rem;
  }

  .data-table th {
    font-size: 0.7rem;
  }

  .modal-content {
    width: 95%;
  }

  .admin-header {
    padding: 0 15px;
  }

  .profile-name {
    display: none;
  }

  .notifications-panel {
    width: 300px;
    right: -70px;
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
  .admin-content {
    padding: 15px;
    padding-bottom: 70px;
  }

  .stats-grid {
    gap: 10px;
  }

  .stat-card {
    padding: 14px;
    gap: 10px;
  }

  .stat-icon {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
    border-radius: 14px;
  }

  .stat-value {
    font-size: 1.2rem;
  }

  .quick-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .quick-stat {
    padding: 10px;
  }

  .filters-bar {
    padding: 12px;
  }

  .search-wrapper {
    min-width: 100%;
  }

  .filter-select {
    width: 100%;
    font-size: 0.85rem;
  }

  .clear-filters-btn {
    width: 100%;
  }

  .pagination {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .pagination-controls {
    order: 2;
  }

  .pagination-info {
    order: 1;
    font-size: 0.8rem;
  }

  .empty-state {
    padding: 40px 15px;
  }

  .empty-state i {
    font-size: 2.5rem;
  }

  .empty-state h3 {
    font-size: 1rem;
  }

  .empty-state p {
    font-size: 0.8rem;
  }

  .btn-primary,
  .btn-outline {
    font-size: 0.85rem;
    padding: 0.6rem 1.5rem;
  }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
  .admin-content {
    padding: 12px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-icon {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }

  .stat-value {
    font-size: 1.1rem;
  }

  .quick-stat-icon {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .quick-stat-value {
    font-size: 0.85rem;
  }

  .data-table th,
  .data-table td {
    padding: 8px;
    font-size: 0.7rem;
  }

  .data-table th {
    font-size: 0.65rem;
  }

  .empty-state {
    padding: 30px 10px;
  }

  .empty-state i {
    font-size: 2rem;
  }
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-light);
  padding: 4px 0;
  z-index: 95;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
}

@media (max-width: 767px) {
  .mobile-bottom-nav {
    display: flex;
  }
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--text-soft);
  font-size: 0.6rem;
  padding: 6px 0;
  min-height: 48px;
  transition: all 0.2s ease;
}

.bottom-nav-item i {
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.bottom-nav-item span {
  font-size: 0.6rem;
}

.bottom-nav-item.active {
  color: var(--accent);
}

.bottom-nav-item:active {
  transform: scale(0.95);
}

.bottom-nav-item .badge {
  position: absolute;
  top: 2px;
  right: 15px;
  background: var(--accent);
  color: white;
  font-size: 0.55rem;
  min-width: 16px;
  height: 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================================================
   TOAST NOTIFICATIONS
   ======================================================================== */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 480px) {
  .toast-container {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
}

.toast-notification {
  padding: 15px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow-hover);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 350px;
  animation: slideInRight 0.3s ease;
  border-left: 4px solid var(--accent);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  font-size: 0.9rem;
}

@media (max-width: 480px) {
  .toast-notification {
    min-width: auto;
    max-width: 100%;
    width: 100%;
  }
}

.toast-notification.success {
  border-left-color: var(--success);
}

.toast-notification.error {
  border-left-color: var(--danger);
}

.toast-notification.info {
  border-left-color: var(--accent);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast-notification i {
  font-size: 1.1rem;
}

.toast-notification.success i {
  color: var(--success);
}

.toast-notification.error i {
  color: var(--danger);
}

.toast-notification.info i {
  color: var(--accent);
}

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-muted {
  color: var(--text-soft);
}

/* Spacing utilities */
.mt-1 {
  margin-top: calc(var(--spacer) * 1);
}
.mt-2 {
  margin-top: calc(var(--spacer) * 2);
}
.mt-3 {
  margin-top: calc(var(--spacer) * 3);
}
.mt-4 {
  margin-top: calc(var(--spacer) * 4);
}
.mt-5 {
  margin-top: calc(var(--spacer) * 5);
}

.mb-1 {
  margin-bottom: calc(var(--spacer) * 1);
}
.mb-2 {
  margin-bottom: calc(var(--spacer) * 2);
}
.mb-3 {
  margin-bottom: calc(var(--spacer) * 3);
}
.mb-4 {
  margin-bottom: calc(var(--spacer) * 4);
}
.mb-5 {
  margin-bottom: calc(var(--spacer) * 5);
}

.my-1 {
  margin-top: calc(var(--spacer) * 1);
  margin-bottom: calc(var(--spacer) * 1);
}
.my-2 {
  margin-top: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 2);
}
.my-3 {
  margin-top: calc(var(--spacer) * 3);
  margin-bottom: calc(var(--spacer) * 3);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.p-1 {
  padding: calc(var(--spacer) * 1);
}
.p-2 {
  padding: calc(var(--spacer) * 2);
}
.p-3 {
  padding: calc(var(--spacer) * 3);
}
.p-4 {
  padding: calc(var(--spacer) * 4);
}

.py-1 {
  padding-top: calc(var(--spacer) * 1);
  padding-bottom: calc(var(--spacer) * 1);
}
.py-2 {
  padding-top: calc(var(--spacer) * 2);
  padding-bottom: calc(var(--spacer) * 2);
}
.py-3 {
  padding-top: calc(var(--spacer) * 3);
  padding-bottom: calc(var(--spacer) * 3);
}

.px-1 {
  padding-left: calc(var(--spacer) * 1);
  padding-right: calc(var(--spacer) * 1);
}
.px-2 {
  padding-left: calc(var(--spacer) * 2);
  padding-right: calc(var(--spacer) * 2);
}
.px-3 {
  padding-left: calc(var(--spacer) * 3);
  padding-right: calc(var(--spacer) * 3);
}

/* ========================================================================
   ANIMATIONS
   ======================================================================== */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ========================================================================
   SCROLLBAR STYLING
   ======================================================================== */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg);
}

/* ========================================================================
   PRINT STYLES
   ======================================================================== */
@media print {
  .admin-sidebar,
  .admin-header,
  .mobile-bottom-nav,
  .icon-btn,
  .profile-btn,
  .btn-primary,
  .btn-outline,
  .btn-text,
  .btn-icon,
  .filters-bar,
  .pagination,
  .modal-close,
  .modal-footer {
    display: none !important;
  }

  .admin-main {
    margin-left: 0 !important;
    padding: 20px !important;
    width: 100% !important;
  }

  .admin-content {
    padding: 0 !important;
  }

  .stat-card,
  .chart-card,
  .activity-feed,
  .table-container {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #ddd;
    box-shadow: none;
  }

  body * {
    visibility: hidden;
  }

  .admin-main,
  .admin-main * {
    visibility: visible;
  }

  .admin-main {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/* ========================================================================
   TOUCH TARGETS
   ======================================================================== */
.nav-item,
.nav-section-header,
.nav-subitem,
.icon-btn,
.profile-btn,
.mobile-menu-toggle,
.sidebar-close,
.bottom-nav-item,
.btn-primary,
.btn-outline,
.btn-text,
.btn-icon,
.filter-tab,
.modal-close,
.pagination-btn,
.action-btn {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  -webkit-tap-highlight-color: transparent;
}

/* Prevent zoom on iOS */
input,
select,
textarea {
  font-size: 16px;
}

/* Smooth scrolling */
.admin-content {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ========================================================================
   ADMIN USER MANAGEMENT - PREMIUM REDESIGN
   ======================================================================== */

/* User Management Dashboard Container */
.user-management-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .user-management-dashboard {
    padding: 30px;
  }
}

/* ========================================================================
   SECTION HEADER
   ======================================================================== */
.user-management-dashboard .section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .user-management-dashboard .section-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
  }
}

.page-title-serif {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.page-title-serif::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.page-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 8px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .page-subtitle {
    font-size: 1rem;
  }
}

.header-actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

@media (min-width: 640px) {
  .header-actions {
    width: auto;
  }
}

.header-actions .btn-outline {
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  transition: all 0.3s ease;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.header-actions .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

/* ========================================================================
   STATS GRID MINIMAL - Premium Stats Cards
   ======================================================================== */
.stats-grid-minimal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

@media (min-width: 480px) {
  .stats-grid-minimal {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
  }
}

.stat-card-mini {
  background: white;
  border-radius: 20px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
}

.stat-card-mini::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card-mini:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(183, 140, 90, 0.15);
  border-color: var(--accent);
}

.stat-card-mini:hover::before {
  opacity: 1;
}

.stat-card-mini.all-users .stat-icon {
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
}

.stat-card-mini.customers .stat-icon {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.stat-card-mini.providers .stat-icon {
  background: rgba(183, 140, 90, 0.1);
  color: var(--accent);
}

.stat-card-mini.admins .stat-icon {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.stat-card-mini.pending .stat-icon {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.stat-card-mini .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.stat-card-mini:hover .stat-icon {
  transform: scale(1.05);
}

.stat-card-mini .stat-content {
  flex: 1;
  min-width: 0;
}

.stat-card-mini .stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
  margin-bottom: 2px;
}

.stat-card-mini .stat-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .stat-card-mini {
    padding: 14px;
  }

  .stat-card-mini .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .stat-card-mini .stat-value {
    font-size: 1.1rem;
  }

  .stat-card-mini .stat-label {
    font-size: 0.65rem;
  }
}

/* ========================================================================
   FILTERS BAR PREMIUM
   ======================================================================== */
.filters-bar-premium {
  background: white;
  border-radius: 60px;
  padding: 12px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: stretch;
  width: 100%;
}

@media (min-width: 768px) {
  .filters-bar-premium {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    border-radius: 60px;
  }
}

/* Search Wrapper Enhanced */
.search-wrapper-enhanced {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.search-wrapper-enhanced i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 1;
}

.search-wrapper-enhanced input {
  width: 100%;
  padding: 12px 20px 12px 45px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.9rem;
  background: var(--bg);
  transition: all 0.2s;
  min-height: 44px;
}

.search-wrapper-enhanced input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
  background: white;
}

.search-wrapper-enhanced input::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
}

/* Filter Group Enhanced */
.filter-group-enhanced {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .filter-group-enhanced {
    width: auto;
    gap: 12px;
  }
}

.filter-select-wrapper {
  position: relative;
  flex: 1;
  min-width: 120px;
}

@media (min-width: 768px) {
  .filter-select-wrapper {
    flex: 0 1 auto;
    min-width: 140px;
  }
}

.filter-select-enhanced {
  width: 100%;
  padding: 12px 35px 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  background: var(--bg);
  min-height: 44px;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e5a58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  transition: all 0.2s;
}

.filter-select-enhanced:hover {
  border-color: var(--accent);
}

.filter-select-enhanced:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
}

/* Filter Buttons */
.btn-primary.btn-sm {
  padding: 10px 20px;
  font-size: 0.85rem;
  min-height: 44px;
  border-radius: 40px;
  background: var(--text-dark);
  color: white;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.1);
}

.btn-primary.btn-sm:hover {
  background: #4a3f3a;
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.15);
}

.btn-outline.btn-sm {
  padding: 10px 20px;
  font-size: 0.85rem;
  min-height: 44px;
  border-radius: 40px;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  white-space: nowrap;
}

.btn-outline.btn-sm:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

/* ========================================================================
   ACTIVE FILTERS TAGS
   ======================================================================== */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 15px 0 10px;
  min-height: 30px;
}

.filter-tag {
  background: linear-gradient(135deg, var(--bg) 0%, white 100%);
  border: 1px solid var(--accent-light);
  border-radius: 40px;
  padding: 6px 14px 6px 16px;
  font-size: 0.8rem;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: tagPop 0.3s ease;
  font-weight: 500;
}

.filter-tag i {
  color: var(--accent);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  padding: 2px;
}

.filter-tag i:hover {
  color: var(--danger);
  transform: scale(1.2);
}

@keyframes tagPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========================================================================
   USER CELL - Avatar with Info
   ======================================================================== */
.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.user-avatar-wrapper.admin {
  background: linear-gradient(135deg, #ef4444, #991b1b);
}

.user-avatar-wrapper.provider {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

.user-avatar-wrapper.freelancer {
  background: linear-gradient(135deg, #10b981, #059669);
}

.user-avatar-wrapper.customer {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.user-avatar-wrapper.other {
  background: linear-gradient(135deg, #64748b, #475569);
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
}

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

.user-name {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-username {
  color: var(--text-soft);
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================================================
   CONTACT CELL
   ======================================================================== */
.contact-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.8rem;
}

.contact-item i {
  color: var(--accent);
  width: 16px;
  font-size: 0.7rem;
}

.contact-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* ========================================================================
   ROLE BADGE
   ======================================================================== */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.role-badge i {
  font-size: 0.7rem;
}

.role-badge.admin {
  background: #fee2e2;
  color: #991b1b;
}

.role-badge.provider {
  background: #f2ebe3;
  color: var(--accent);
}

.role-badge.freelancer {
  background: #e3f2e9;
  color: #2f6e4a;
}

.role-badge.customer {
  background: #e1f0fa;
  color: #1e4a6b;
}

.role-badge.other {
  background: #f1f5f9;
  color: #475569;
}

/* ========================================================================
   STATUS BADGE
   ======================================================================== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-badge.active {
  background: #e3f2e9;
  color: #2f6e4a;
}

.status-badge.active .status-dot {
  background: #2f6e4a;
  box-shadow: 0 0 0 2px rgba(47, 110, 74, 0.2);
}

.status-badge.pending {
  background: #fef3e2;
  color: #b45309;
}

.status-badge.pending .status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
  animation: pulse 2s infinite;
}

.status-badge.suspended {
  background: #fee2e2;
  color: #991b1b;
}

.status-badge.suspended .status-dot {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.status-badge.deleted {
  background: #f1f5f9;
  color: #64748b;
}

.status-badge.deleted .status-dot {
  background: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.2);
}

/* ========================================================================
   DATE CELL
   ======================================================================== */
.date-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.8rem;
  white-space: nowrap;
}

.date-cell i {
  color: var(--accent);
  font-size: 0.7rem;
}

/* ========================================================================
   EMPTY STATE TABLE
   ======================================================================== */
.empty-state-table {
  text-align: center;
  padding: 60px 20px;
  background: white;
}

.empty-illustration {
  width: 80px;
  height: 80px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--accent);
  font-size: 2rem;
}

.empty-state-table h4 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 8px;
  font-weight: 600;
}

.empty-state-table p {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin: 0;
}

/* ========================================================================
   PAGINATION PREMIUM
   ======================================================================== */
.pagination-premium {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
}

@media (min-width: 640px) {
  .pagination-premium {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }
}

.pagination-info {
  color: var(--text-soft);
  font-size: 0.85rem;
}

.pagination-info strong {
  color: var(--accent);
  font-weight: 600;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-light);
  background: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(183, 140, 90, 0.2);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-page {
  min-width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: white;
  color: var(--text-dark);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-page:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pagination-page.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 600;
}

.pagination-ellipsis {
  color: var(--text-soft);
  font-size: 0.85rem;
  padding: 0 2px;
}

/* ========================================================================
   ERROR STATE MODERN
   ======================================================================== */
.error-state-modern {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
  max-width: 500px;
  margin: 40px auto;
}

.error-state-modern i {
  font-size: 3rem;
  color: #ef4444;
  margin-bottom: 20px;
  opacity: 0.7;
}

.error-state-modern h3 {
  font-size: 1.3rem;
  color: var(--text-dark);
  margin-bottom: 10px;
  font-family: var(--font-serif);
}

.error-state-modern p {
  color: var(--text-soft);
  margin-bottom: 25px;
  font-size: 0.95rem;
}

.error-state-modern .btn-primary {
  padding: 12px 30px;
  font-size: 0.95rem;
}

/* ========================================================================
   MOBILE RESPONSIVE FIXES
   ======================================================================== */
@media (max-width: 640px) {
  .filters-bar-premium {
    padding: 15px;
    border-radius: 20px;
  }

  .filter-group-enhanced {
    flex-direction: column;
    width: 100%;
  }

  .filter-select-wrapper {
    width: 100%;
  }

  .btn-primary.btn-sm,
  .btn-outline.btn-sm {
    width: 100%;
    justify-content: center;
  }

  .table-header {
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination-pages {
    order: -1;
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .page-title-serif {
    font-size: 1.5rem;
  }

  .page-subtitle {
    font-size: 0.85rem;
  }

  .stats-grid-minimal {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .filter-tag {
    font-size: 0.7rem;
    padding: 4px 10px 4px 12px;
  }

  .table-header {
    padding: 12px;
  }

  .table-title {
    font-size: 0.9rem;
  }

  .table-count {
    font-size: 0.75rem;
    padding: 3px 8px;
  }

  .pagination-info {
    font-size: 0.75rem;
    text-align: center;
  }

  .pagination-btn {
    width: 36px;
    height: 36px;
  }

  .pagination-page {
    min-width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }
}

/* ========================================================================
   ANIMATIONS
   ======================================================================== */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@keyframes tagPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========================================================================
   USER DETAILS MODAL - PREMIUM REDESIGN
   ======================================================================== */

/* Modal Overlay */
.user-details-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
  animation: modalFadeIn 0.3s ease;
}

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

.user-details-modal .modal-content {
  background: white;
  border-radius: 32px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.3);
  animation: modalSlideUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  position: relative;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Header */
.user-details-modal .modal-header {
  padding: 24px 28px 20px 28px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-radius: 32px 32px 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.user-details-modal .modal-header h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.user-details-modal .modal-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--text-soft);
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  background: var(--bg);
}

.user-details-modal .modal-close:hover {
  background: #fee2e2;
  color: #ef4444;
  transform: rotate(90deg);
}

/* Modal Body */
.user-details-modal .modal-body {
  padding: 28px;
  flex: 1;
  overflow-y: auto;
  background: white;
}

/* User Profile Header */
.user-profile-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-radius: 24px;
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

.user-profile-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 4px 4px 0 0;
}

.user-avatar-large {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.2);
  border: 4px solid white;
}

.user-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar-large .avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  font-size: 2.5rem;
  font-weight: 600;
  text-transform: uppercase;
}

.user-info-large {
  flex: 1;
  min-width: 0;
}

.user-info-large h2 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 8px 0;
  line-height: 1.2;
  word-break: break-word;
}

.user-email {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-email i {
  color: var(--accent);
  font-size: 0.9rem;
}

.user-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.user-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 40px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
  background: var(--bg);
  color: var(--text-dark);
}

.user-role-badge.admin {
  background: #fee2e2;
  color: #991b1b;
}

.user-role-badge.provider {
  background: #f2ebe3;
  color: var(--accent);
}

.user-role-badge.freelancer {
  background: #e3f2e9;
  color: #2f6e4a;
}

.user-role-badge.customer {
  background: #e1f0fa;
  color: #1e4a6b;
}

.user-role-badge i {
  font-size: 0.75rem;
}

.user-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 40px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
}

.user-status-badge.active {
  background: #e3f2e9;
  color: #2f6e4a;
}

.user-status-badge.pending_verification {
  background: #fef3e2;
  color: #b45309;
  animation: pulse 2s infinite;
}

.user-status-badge.suspended {
  background: #fee2e2;
  color: #991b1b;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* User Tabs */
.user-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: white;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
}

.user-tabs::-webkit-scrollbar {
  display: none;
}

.user-tabs .tab-btn {
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-tabs .tab-btn i {
  font-size: 0.85rem;
  color: var(--text-soft);
  transition: color 0.2s;
}

.user-tabs .tab-btn:hover {
  color: var(--text-dark);
  background: var(--bg);
}

.user-tabs .tab-btn.active {
  background: var(--accent);
  color: white;
}

.user-tabs .tab-btn.active i {
  color: white;
}

/* Tab Content */
.tab-content {
  animation: tabFadeIn 0.3s ease;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 640px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.info-card {
  background: var(--bg);
  border-radius: 20px;
  padding: 20px;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.info-card:hover {
  background: white;
  border-color: var(--accent-light);
  box-shadow: 0 8px 20px -8px rgba(183, 140, 90, 0.1);
  transform: translateY(-2px);
}

.info-card h4 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  margin: 0 0 16px 0;
  color: var(--text-dark);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-card h4 i {
  color: var(--accent);
  font-size: 1rem;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-light);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 500;
}

.info-value {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.9rem;
  text-align: right;
  word-break: break-word;
  max-width: 60%;
}

/* Stats Grid Mini */
.stats-grid-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.stat-mini {
  background: white;
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
}

.stat-mini:hover {
  transform: translateY(-2px);
  border-color: var(--accent-light);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.1);
}

.stat-mini .stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  display: block;
  line-height: 1.2;
  margin-bottom: 4px;
}

.stat-mini .stat-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
}

/* Banking Info Card */
#bankingInfoCard {
  grid-column: span 2;
}

@media (max-width: 640px) {
  #bankingInfoCard {
    grid-column: span 1;
  }
}

.banking-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 8px;
}

.banking-verified-badge.verified {
  background: #e3f2e9;
  color: #2f6e4a;
}

.banking-verified-badge.not-verified {
  background: #fee2e2;
  color: #991b1b;
}

/* Mini Orders List */
.mini-orders-list,
.mini-bookings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

.mini-order-item,
.mini-booking-item {
  background: var(--bg);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
  cursor: pointer;
}

.mini-order-item:hover,
.mini-booking-item:hover {
  background: white;
  border-color: var(--accent-light);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.mini-order-header,
.mini-booking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mini-order-id {
  font-family: monospace;
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.8rem;
}

.mini-order-status {
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: capitalize;
}

.mini-order-status.completed {
  background: #e3f2e9;
  color: #2f6e4a;
}

.mini-order-status.pending {
  background: #fef3e2;
  color: #b45309;
}

.mini-order-status.in_progress {
  background: #e1f0fa;
  color: #1e4a6b;
}

.mini-order-status.cancelled {
  background: #fee2e2;
  color: #991b1b;
}

.mini-order-details,
.mini-booking-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--text-soft);
}

.mini-order-details span,
.mini-booking-details span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mini-order-details i,
.mini-booking-details i {
  color: var(--accent);
  font-size: 0.65rem;
}

/* Documents Grid */
.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.document-card {
  background: var(--bg);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
  position: relative;
}

.document-card:hover {
  background: white;
  border-color: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(183, 140, 90, 0.1);
}

.document-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.document-name {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.85rem;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-type {
  color: var(--text-soft);
  font-size: 0.7rem;
  margin-bottom: 12px;
  text-transform: capitalize;
}

.document-actions {
  display: flex;
  gap: 8px;
}

.document-actions .btn-text {
  padding: 4px 8px;
  font-size: 0.7rem;
  min-height: 32px;
}

/* Modal Footer */
.user-details-modal .modal-footer {
  padding: 20px 28px 28px 28px;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 16px;
  background: white;
  border-radius: 0 0 32px 32px;
}

@media (max-width: 640px) {
  .user-details-modal .modal-footer {
    flex-direction: column-reverse;
    padding: 20px;
    gap: 12px;
  }
}

.user-details-modal .btn-outline,
.user-details-modal .btn-primary {
  flex: 1;
  padding: 14px 24px;
  min-height: 52px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
}

.user-details-modal .btn-outline {
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
}

.user-details-modal .btn-outline:hover {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(183, 140, 90, 0.2);
}

.user-details-modal .btn-primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 8px 20px -5px rgba(183, 140, 90, 0.3);
}

.user-details-modal .btn-primary:hover:not(:disabled) {
  background: #9a7a4e;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px -8px rgba(183, 140, 90, 0.4);
}

.user-details-modal .btn-primary.danger {
  background: #ef4444;
  box-shadow: 0 8px 20px -5px rgba(239, 68, 68, 0.3);
}

.user-details-modal .btn-primary.danger:hover {
  background: #dc2626;
  box-shadow: 0 12px 25px -8px rgba(239, 68, 68, 0.4);
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .user-details-modal .modal-content {
    max-width: 100%;
    border-radius: 24px;
  }

  .user-details-modal .modal-header {
    padding: 20px;
  }

  .user-details-modal .modal-header h3 {
    font-size: 1.2rem;
  }

  .user-details-modal .modal-body {
    padding: 20px;
  }

  .user-profile-header {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
  }

  .user-avatar-large {
    width: 80px;
    height: 80px;
  }

  .user-avatar-large .avatar-fallback {
    font-size: 2rem;
  }

  .user-info-large h2 {
    font-size: 1.5rem;
  }

  .user-badges {
    justify-content: center;
  }

  .user-tabs {
    flex-wrap: wrap;
    white-space: normal;
  }

  .user-tabs .tab-btn {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }

  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .info-value {
    text-align: left;
    max-width: 100%;
    align-self: flex-start;
  }

  .documents-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .user-details-modal .modal-header {
    padding: 16px;
  }

  .user-details-modal .modal-close {
    width: 40px;
    height: 40px;
  }

  .user-details-modal .modal-body {
    padding: 16px;
  }

  .user-profile-header {
    padding: 16px 12px;
    gap: 16px;
  }

  .user-avatar-large {
    width: 70px;
    height: 70px;
  }

  .user-info-large h2 {
    font-size: 1.3rem;
    margin-bottom: 4px;
  }

  .user-email {
    font-size: 0.85rem;
    margin-bottom: 8px;
  }

  .user-role-badge,
  .user-status-badge {
    padding: 4px 12px;
    font-size: 0.7rem;
  }

  .user-tabs .tab-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .info-card {
    padding: 16px;
  }

  .info-card h4 {
    font-size: 1rem;
    margin-bottom: 12px;
  }

  .stats-grid-mini {
    grid-template-columns: 1fr;
  }

  .stat-mini {
    padding: 12px;
  }

  .stat-mini .stat-value {
    font-size: 1.2rem;
  }

  .documents-grid {
    gap: 12px;
  }

  .document-card {
    padding: 12px;
  }

  .document-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .user-details-modal .modal-footer {
    padding: 16px;
  }

  .user-details-modal .btn-outline,
  .user-details-modal .btn-primary {
    padding: 12px 20px;
    min-height: 48px;
    font-size: 0.9rem;
  }
}

/* Very Small Devices */
@media (max-width: 360px) {
  .user-details-modal .modal-header h3 {
    font-size: 1rem;
  }

  .user-avatar-large {
    width: 60px;
    height: 60px;
  }

  .user-info-large h2 {
    font-size: 1.1rem;
  }

  .user-email {
    font-size: 0.8rem;
  }

  .user-tabs .tab-btn {
    padding: 6px 10px;
    font-size: 0.7rem;
  }

  .info-card {
    padding: 12px;
  }

  .info-label {
    font-size: 0.75rem;
  }

  .info-value {
    font-size: 0.8rem;
  }
}

/* Loading State */
.user-details-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.user-details-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.user-details-loading p {
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* Scrollbar Styling */
.user-details-modal .modal-body::-webkit-scrollbar {
  width: 4px;
}

.user-details-modal .modal-body::-webkit-scrollbar-track {
  background: var(--bg);
}

.user-details-modal .modal-body::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.user-details-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

.mini-orders-list::-webkit-scrollbar,
.mini-bookings-list::-webkit-scrollbar {
  width: 3px;
}

.mini-orders-list::-webkit-scrollbar-track,
.mini-bookings-list::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 3px;
}

.mini-orders-list::-webkit-scrollbar-thumb,
.mini-bookings-list::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}
/* Mini Orders/Bookings List Styles */
.mini-orders-list,
.mini-bookings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

.mini-order-item,
.mini-booking-item {
  background: white;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mini-order-item:hover,
.mini-booking-item:hover {
  background: var(--bg);
  border-color: var(--accent-light);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.1);
}

.mini-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.order-title-group,
.booking-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-order-id {
  font-family: monospace;
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.8rem;
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 30px;
}

.order-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.order-type-badge.service {
  background: #f2ebe3;
  color: var(--accent);
}

.order-type-badge.product {
  background: #e1f0fa;
  color: #1e4a6b;
}

.custom-offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 600;
  background: #fef3e2;
  color: #b45309;
  border: 1px solid #fde6c9;
}

.custom-offer-badge i {
  font-size: 0.6rem;
}

.mini-order-status {
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.mini-order-status.pending {
  background: #fef3e2;
  color: #b45309;
}

.mini-order-status.quoted {
  background: #f2ebe3;
  color: var(--accent);
}

.mini-order-status.approved {
  background: #e3f2e9;
  color: #2f6e4a;
}

.mini-order-status.in-progress {
  background: #e1f0fa;
  color: #1e4a6b;
}

.mini-order-status.completed {
  background: #e3f2e9;
  color: #2f6e4a;
}

.mini-order-status.cancelled {
  background: #fee2e2;
  color: #991b1b;
}

.mini-order-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-title,
.booking-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-dark);
  font-weight: 500;
}

.order-title i,
.booking-title i {
  color: var(--accent);
  font-size: 0.75rem;
  width: 16px;
}

.order-title span,
.booking-title span {
  flex: 1;
  word-break: break-word;
}

.order-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.order-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 30px;
}

.order-meta-item i {
  color: var(--accent);
  font-size: 0.6rem;
}

.order-meta-item.amount {
  background: #f2ebe3;
  color: var(--accent);
  font-weight: 600;
}

.order-meta-item.amount i {
  color: var(--accent);
}

.booking-datetime {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg);
  border-radius: 12px;
  padding: 10px;
  margin-top: 4px;
}

.datetime-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-dark);
}

.datetime-row i {
  color: var(--accent);
  width: 16px;
  font-size: 0.7rem;
}

.proposed-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fef3e2;
  border-radius: 12px;
  padding: 8px 12px;
  margin-top: 4px;
}

.price-label {
  font-size: 0.7rem;
  color: #b45309;
}

.price-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: #b45309;
}

.booking-note-preview {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fef3e2;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 0.7rem;
  color: #b45309;
  font-style: italic;
  border-left: 3px solid #f59e0b;
}

.booking-note-preview i {
  color: #f59e0b;
  font-size: 0.65rem;
  margin-top: 2px;
}

.order-completed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: #2f6e4a;
  background: #e3f2e9;
  padding: 4px 10px;
  border-radius: 30px;
  width: fit-content;
}

.order-completed-badge i {
  font-size: 0.6rem;
  color: #2f6e4a;
}

.mini-order-footer {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
  display: flex;
  justify-content: flex-end;
}

.btn-text.btn-sm {
  padding: 6px 12px;
  font-size: 0.7rem;
  min-height: 32px;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-text.btn-sm:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-text.btn-sm i {
  font-size: 0.6rem;
}

/* Loading State */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-soft);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  background: var(--bg);
  border-radius: 16px;
  border: 1px dashed var(--border-light);
}

.empty-state i {
  font-size: 2.5rem;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: 16px;
}

.empty-state h4 {
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin: 0;
}

/* Error State */
.error-state {
  text-align: center;
  padding: 30px 20px;
  background: #fee2e2;
  border-radius: 16px;
  border: 1px solid #fecaca;
}

.error-state i {
  font-size: 2rem;
  color: #ef4444;
  margin-bottom: 12px;
}

.error-state p {
  color: #991b1b;
  margin-bottom: 12px;
  font-size: 0.85rem;
}

.error-state .btn-text {
  color: #991b1b;
  border-color: #991b1b;
}

.error-state .btn-text:hover {
  background: #991b1b;
  color: white;
}

/* Scrollbar Styling */
.mini-orders-list::-webkit-scrollbar,
.mini-bookings-list::-webkit-scrollbar {
  width: 3px;
}

.mini-orders-list::-webkit-scrollbar-track,
.mini-bookings-list::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 3px;
}

.mini-orders-list::-webkit-scrollbar-thumb,
.mini-bookings-list::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .mini-order-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .order-meta-row {
    flex-direction: column;
    gap: 6px;
  }

  .order-meta-item {
    width: fit-content;
  }

  .mini-order-footer {
    justify-content: center;
  }

  .btn-text.btn-sm {
    width: 100%;
    justify-content: center;
  }
}
/* Admin Detail Modal Styles */
.admin-detail-modal .modal-content {
  max-width: 900px;
}

.admin-detail-modal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-status-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-radius: 16px;
  margin-bottom: 8px;
}

.detail-status-banner.pending {
  background: #fef3e2;
  border-left: 4px solid #b45309;
}

.detail-status-banner.quoted {
  background: #f2ebe3;
  border-left: 4px solid var(--accent);
}

.detail-status-banner.approved {
  background: #e3f2e9;
  border-left: 4px solid #2f6e4a;
}

.detail-status-banner.in-progress {
  background: #e1f0fa;
  border-left: 4px solid #1e4a6b;
}

.detail-status-banner.completed {
  background: #e3f2e9;
  border-left: 4px solid #2f6e4a;
}

.detail-status-banner.cancelled {
  background: #fee2e2;
  border-left: 4px solid #991b1b;
}

.status-badge-large {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 40px;
  font-size: 1rem;
  font-weight: 600;
}

.order-id-display,
.booking-id-display {
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.5);
  padding: 6px 14px;
  border-radius: 30px;
}

.detail-section {
  margin-bottom: 8px;
}

.detail-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-section h4 i {
  color: var(--accent);
  font-size: 0.9rem;
}

.detail-grid.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .detail-grid.two-column {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.detail-card {
  background: var(--bg);
  border-radius: 16px;
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.detail-card-header {
  background: white;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.detail-card-header i {
  color: var(--accent);
  font-size: 0.85rem;
}

.detail-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-light);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row.highlight-row {
  background: #fef3e2;
  margin: 4px -8px;
  padding: 8px;
  border-radius: 8px;
  border-bottom: none;
}

.detail-label {
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 500;
}

.detail-value {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.85rem;
  text-align: right;
  word-break: break-word;
  max-width: 60%;
}

.detail-value.highlight {
  color: var(--accent);
  font-weight: 600;
}

.detail-value.amount {
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
}

.detail-value.note-text {
  text-align: left;
  max-width: 100%;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Timeline */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.timeline-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: white;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 4px;
  flex-shrink: 0;
}

.timeline-content {
  flex: 1;
}

.timeline-text {
  font-size: 0.9rem;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.timeline-date {
  font-size: 0.7rem;
  color: var(--text-soft);
}

/* Payments List */
.payments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payment-item {
  background: white;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.payment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}

.payment-type {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
  text-transform: capitalize;
}

.payment-status {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 30px;
  background: #f1f5f9;
  color: #64748b;
}

.payment-status.succeeded {
  background: #e3f2e9;
  color: #2f6e4a;
}

.payment-amount {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  min-width: 100px;
  text-align: right;
}

.payment-date {
  font-size: 0.7rem;
  color: var(--text-soft);
  min-width: 100px;
  text-align: right;
}

/* Zones */
.zones-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.zone-tag {
  background: var(--bg);
  border: 1px solid var(--border-light);
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.8rem;
  color: var(--text-dark);
}

/* Simple Info Fallback */
.simple-info {
  text-align: center;
  padding: 30px 20px;
}

.info-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--accent);
  font-size: 2rem;
}

.simple-info h4 {
  font-size: 1.2rem;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.simple-info p {
  color: var(--text-soft);
  margin-bottom: 5px;
  font-size: 0.95rem;
}

.simple-info .note {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 10px;
}

.order-id-full {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 8px 16px;
  border-radius: 30px;
  display: inline-block;
  margin-top: 15px;
}

/* Responsive */
@media (max-width: 640px) {
  .detail-status-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .payment-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .payment-amount,
  .payment-date {
    text-align: left;
    min-width: auto;
  }

  .detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .detail-value {
    text-align: left;
    max-width: 100%;
  }
}
/* Edit User Modal Styles */
.edit-user-modal .modal-content {
  max-width: 600px;
}

.edit-user-modal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

@media (max-width: 640px) {
  .edit-user-modal .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.edit-user-modal .form-group {
  margin-bottom: 15px;
}

.edit-user-modal .form-group.half {
  margin-bottom: 0;
}

.edit-user-modal label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.edit-user-modal .form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.2s;
  background: white;
}

.edit-user-modal .form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
}

.edit-user-modal .form-control:disabled {
  background: var(--bg);
  color: var(--text-soft);
  cursor: not-allowed;
}

.edit-user-modal .field-hint {
  display: block;
  font-size: 0.7rem;
  color: var(--text-soft);
  margin-top: 4px;
}

.edit-user-modal .modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

@media (max-width: 480px) {
  .edit-user-modal .modal-footer {
    flex-direction: column;
  }

  .edit-user-modal .modal-footer button {
    width: 100%;
  }
}
/* In dashboard-admin.css - Update the table-container-premium section */

/* ========================================================================
   TABLE CONTAINER PREMIUM - Full Width Design
   ======================================================================== */

.table-container-premium {
  background: white;
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  overflow: hidden;
  margin: 25px 0 30px;
  width: 100%;
  max-width: 100%;
}

/* Table Header */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
  gap: 12px;
}

.table-title {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-title i {
  color: var(--accent);
  font-size: 0.9rem;
}

.table-count {
  color: var(--text-soft);
  font-size: 0.85rem;
  background: var(--bg);
  padding: 4px 12px;
  border-radius: 30px;
  font-weight: 500;
  white-space: nowrap;
}

/* Table Responsive Container - Always scrollable horizontally if needed */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--border-light);
  transition: all 0.3s ease;
}

/* Custom scrollbar for webkit browsers */
.table-responsive::-webkit-scrollbar {
  height: 4px;
}

.table-responsive::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

/* Data Table Premium - Full width with minimum width for content */
.data-table-premium {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1000px; /* Forces horizontal scroll on smaller screens */
  font-size: 0.9rem;
}

/* Desktop - adjust min-width based on screen size */
@media (min-width: 1200px) {
  .data-table-premium {
    min-width: 1000px;
  }
}

@media (min-width: 1400px) {
  .data-table-premium {
    min-width: 1200px;
  }
}

/* Table Header Cells */
.data-table-premium thead tr {
  background: var(--bg);
}

.data-table-premium th {
  text-align: left;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border-bottom: 2px solid var(--border-light);
  position: relative;
}

/* Add subtle gradient to header */
.data-table-premium th::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.data-table-premium thead:hover th::after {
  opacity: 0.5;
}

/* Table Body Rows */
.data-table-premium tbody tr {
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}

.data-table-premium tbody tr:hover {
  background: linear-gradient(90deg, var(--bg) 0%, white 100%);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.data-table-premium tbody tr:active {
  transform: translateX(0);
  background: var(--bg);
}

.data-table-premium tbody tr:last-child {
  border-bottom: none;
}

/* Table Body Cells */
.data-table-premium td {
  padding: 16px 20px;
  color: var(--text-dark);
  font-size: 0.9rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

/* Add subtle border animation on hover */
.data-table-premium tbody tr:hover td::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent-light);
  opacity: 0.3;
}

/* User Cell - Avatar with Info */
.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.user-avatar-wrapper:hover {
  transform: scale(1.05);
}

.user-avatar-wrapper.admin {
  background: linear-gradient(135deg, #ef4444, #991b1b);
}

.user-avatar-wrapper.provider {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

.user-avatar-wrapper.freelancer {
  background: linear-gradient(135deg, #10b981, #059669);
}

.user-avatar-wrapper.customer {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.user-avatar-wrapper.other {
  background: linear-gradient(135deg, #64748b, #475569);
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
}

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

.user-name {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.user-username {
  color: var(--text-soft);
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* Contact Cell */
.contact-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.8rem;
  transition: color 0.2s ease;
}

.contact-item:hover {
  color: var(--accent);
}

.contact-item i {
  color: var(--accent);
  width: 16px;
  font-size: 0.7rem;
}

.contact-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* Role Badge */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.role-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.role-badge i {
  font-size: 0.7rem;
}

.role-badge.admin {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.role-badge.provider {
  background: #f2ebe3;
  color: var(--accent);
  border-color: #e8d9cc;
}

.role-badge.freelancer {
  background: #e3f2e9;
  color: #2f6e4a;
  border-color: #c8e6d9;
}

.role-badge.customer {
  background: #e1f0fa;
  color: #1e4a6b;
  border-color: #b8d9f0;
}

.role-badge.other {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

/* Status Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s infinite;
}

.status-badge.active {
  background: #e3f2e9;
  color: #2f6e4a;
}

.status-badge.active .status-dot {
  background: #2f6e4a;
  box-shadow: 0 0 0 2px rgba(47, 110, 74, 0.2);
}

.status-badge.pending,
.status-badge.pending_verification {
  background: #fef3e2;
  color: #b45309;
}

.status-badge.pending .status-dot,
.status-badge.pending_verification .status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
  animation: pulse 2s infinite;
}

.status-badge.suspended {
  background: #fee2e2;
  color: #991b1b;
}

.status-badge.suspended .status-dot {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.status-badge.deleted {
  background: #f1f5f9;
  color: #64748b;
}

.status-badge.deleted .status-dot {
  background: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.2);
}

/* Date Cell */
.date-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.8rem;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.date-cell:hover {
  color: var(--accent);
}

.date-cell i {
  color: var(--accent);
  font-size: 0.7rem;
}

/* Actions Cell */
.actions-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: white;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(183, 140, 90, 0.2);
  transform: translate(-50%, -50%);
  transition:
    width 0.3s,
    height 0.3s;
}

.action-btn:hover::before {
  width: 100%;
  height: 100%;
}

.action-btn:hover {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.action-btn.view:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.action-btn.edit:hover {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.action-btn.more:hover {
  background: var(--text-dark);
  color: white;
  border-color: var(--text-dark);
}

/* Empty State */
.empty-state-table {
  text-align: center;
  padding: 60px 20px;
  background: white;
}

.empty-illustration {
  width: 80px;
  height: 80px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--accent);
  font-size: 2rem;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.empty-state-table h4 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 8px;
  font-weight: 600;
}

.empty-state-table p {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin: 0;
}

/* Loading State */
.loading-state-table {
  text-align: center;
  padding: 40px 20px;
}

.loading-state-table .loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 12px;
}

.loading-state-table p {
  color: var(--text-soft);
  font-size: 0.85rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .table-header {
    padding: 16px 20px;
  }

  .table-title {
    font-size: 0.95rem;
  }

  .table-count {
    font-size: 0.8rem;
    padding: 3px 10px;
  }

  .data-table-premium td,
  .data-table-premium th {
    padding: 14px 16px;
  }

  .user-name {
    max-width: 150px;
  }

  .user-username {
    max-width: 150px;
  }

  .contact-item span {
    max-width: 120px;
  }

  .action-btn {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .table-header {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .table-title {
    font-size: 0.9rem;
  }

  .table-count {
    font-size: 0.75rem;
    padding: 3px 8px;
    align-self: flex-start;
  }

  .data-table-premium {
    min-width: 800px;
  }

  .data-table-premium td,
  .data-table-premium th {
    padding: 12px 14px;
  }

  .user-avatar-wrapper {
    width: 38px;
    height: 38px;
  }

  .user-name {
    max-width: 120px;
    font-size: 0.85rem;
  }

  .user-username {
    max-width: 120px;
    font-size: 0.65rem;
  }

  .contact-item {
    font-size: 0.7rem;
  }

  .contact-item span {
    max-width: 100px;
  }

  .role-badge {
    padding: 4px 10px;
    font-size: 0.7rem;
  }

  .status-badge {
    padding: 3px 10px;
    font-size: 0.65rem;
  }

  .stat-badge {
    padding: 3px 6px;
    font-size: 0.65rem;
  }

  .action-btn {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}

/* Very Small Mobile */
@media (max-width: 360px) {
  .table-header {
    padding: 12px 14px;
  }

  .data-table-premium td,
  .data-table-premium th {
    padding: 10px 12px;
  }

  .user-avatar-wrapper {
    width: 34px;
    height: 34px;
  }

  .user-name {
    max-width: 100px;
    font-size: 0.8rem;
  }

  .user-username {
    max-width: 100px;
    font-size: 0.6rem;
  }

  .contact-item {
    font-size: 0.65rem;
  }

  .contact-item i {
    width: 14px;
    font-size: 0.6rem;
  }

  .role-badge {
    padding: 3px 8px;
    font-size: 0.65rem;
    gap: 4px;
  }

  .status-badge {
    padding: 2px 8px;
    font-size: 0.6rem;
    gap: 4px;
  }

  .status-dot {
    width: 6px;
    height: 6px;
  }

  .date-cell {
    font-size: 0.7rem;
  }

  .stat-badge {
    padding: 2px 5px;
    font-size: 0.6rem;
  }

  .action-btn {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }
}

/* Animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================================================
   USER CELL - Enhanced
   ======================================================================== */

.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.user-avatar-wrapper:hover {
  transform: scale(1.05);
}

.user-avatar-wrapper.admin {
  background: linear-gradient(135deg, #ef4444, #991b1b);
}

.user-avatar-wrapper.provider {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

.user-avatar-wrapper.freelancer {
  background: linear-gradient(135deg, #10b981, #059669);
}

.user-avatar-wrapper.customer {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.user-avatar-wrapper.other {
  background: linear-gradient(135deg, #64748b, #475569);
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
}

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

.user-name {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-username {
  color: var(--text-soft);
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================================================
   CONTACT CELL - Enhanced
   ======================================================================== */

.contact-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.8rem;
  transition: color 0.2s ease;
}

.contact-item:hover {
  color: var(--accent);
}

.contact-item i {
  color: var(--accent);
  width: 16px;
  font-size: 0.7rem;
}

.contact-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* ========================================================================
   ROLE BADGE - Enhanced
   ======================================================================== */

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.role-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.role-badge i {
  font-size: 0.7rem;
}

.role-badge.admin {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.role-badge.admin i {
  color: #991b1b;
}

.role-badge.provider {
  background: #f2ebe3;
  color: var(--accent);
  border-color: #e8d9cc;
}

.role-badge.provider i {
  color: var(--accent);
}

.role-badge.freelancer {
  background: #e3f2e9;
  color: #2f6e4a;
  border-color: #c8e6d9;
}

.role-badge.freelancer i {
  color: #2f6e4a;
}

.role-badge.customer {
  background: #e1f0fa;
  color: #1e4a6b;
  border-color: #b8d9f0;
}

.role-badge.customer i {
  color: #1e4a6b;
}

.role-badge.other {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

/* ========================================================================
   STATUS BADGE - Enhanced
   ======================================================================== */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s infinite;
}

.status-badge.active {
  background: #e3f2e9;
  color: #2f6e4a;
}

.status-badge.active .status-dot {
  background: #2f6e4a;
  box-shadow: 0 0 0 2px rgba(47, 110, 74, 0.2);
}

.status-badge.pending,
.status-badge.pending_verification {
  background: #fef3e2;
  color: #b45309;
}

.status-badge.pending .status-dot,
.status-badge.pending_verification .status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
  animation: pulse 2s infinite;
}

.status-badge.suspended {
  background: #fee2e2;
  color: #991b1b;
}

.status-badge.suspended .status-dot {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.status-badge.deleted {
  background: #f1f5f9;
  color: #64748b;
}

.status-badge.deleted .status-dot {
  background: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.2);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

/* ========================================================================
   DATE CELL - Enhanced
   ======================================================================== */

.date-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.8rem;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.date-cell:hover {
  color: var(--accent);
}

.date-cell i {
  color: var(--accent);
  font-size: 0.7rem;
}

/* In dashboard-admin.css - Update stats cell for three items */

.stats-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 30px;
  background: var(--bg);
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.stat-badge i {
  font-size: 0.65rem;
}

.stat-badge span {
  font-weight: 600;
  margin-left: 2px;
}

/* Service Orders Badge - Blue */
.stat-badge:has(.fa-concierge-bell) {
  background: #e1f0fa;
  color: #1e4a6b;
}

.stat-badge:has(.fa-concierge-bell) i {
  color: #1e4a6b;
}

.stat-badge:has(.fa-concierge-bell) span {
  color: #1e4a6b;
}

/* Product Orders Badge - Purple/Accent */
.stat-badge:has(.fa-cube) {
  background: #f2ebe3;
  color: var(--accent);
}

.stat-badge:has(.fa-cube) i {
  color: var(--accent);
}

.stat-badge:has(.fa-cube) span {
  color: var(--accent);
}

/* Bookings Badge - Green */
.stat-badge:has(.fa-calendar-alt) {
  background: #e3f2e9;
  color: #2f6e4a;
}

.stat-badge:has(.fa-calendar-alt) i {
  color: #2f6e4a;
}

.stat-badge:has(.fa-calendar-alt) span {
  color: #2f6e4a;
}

/* Banking Verified Badge */
.stat-badge.verified {
  background: #e3f2e9;
  color: #2f6e4a;
  padding: 6px 8px;
}

.stat-badge.verified i {
  color: #2f6e4a;
}

/* Hover effects */
.stat-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .stat-badge {
    padding: 4px 8px;
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .stats-cell {
    gap: 4px;
  }

  .stat-badge {
    padding: 3px 6px;
    font-size: 0.65rem;
  }

  .stat-badge i {
    font-size: 0.6rem;
  }
}

/* ========================================================================
   ACTIONS CELL - Enhanced
   ======================================================================== */

.actions-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: white;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(183, 140, 90, 0.2);
  transform: translate(-50%, -50%);
  transition:
    width 0.3s,
    height 0.3s;
}

.action-btn:hover::before {
  width: 100%;
  height: 100%;
}

.action-btn:hover {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.action-btn.view:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.action-btn.edit:hover {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.action-btn.more:hover {
  background: var(--text-dark);
  color: white;
  border-color: var(--text-dark);
}

/* ========================================================================
   USER ACTIONS MODAL
   ======================================================================== */

.user-actions-modal .modal-content {
  max-width: 400px;
  animation: modalSlideUp 0.3s ease;
}

.user-actions-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-radius: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--border-light);
}

.action-user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.5rem;
  box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.1);
}

.action-user-avatar.admin {
  background: linear-gradient(135deg, #ef4444, #991b1b);
}

.action-user-avatar.provider {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

.action-user-avatar.freelancer {
  background: linear-gradient(135deg, #10b981, #059669);
}

.action-user-avatar.customer {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.action-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.action-user-avatar span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-user-info {
  flex: 1;
  min-width: 0;
}

.action-user-info h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-user-info p {
  font-size: 0.8rem;
  color: var(--text-soft);
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-user-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.actions-divider {
  height: 1px;
  background: var(--border-light);
  margin: 16px 0;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}

.action-modal-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  color: var(--text-dark);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  min-height: 80px;
}

.action-modal-btn i {
  font-size: 1.2rem;
  color: var(--accent);
  transition: all 0.2s ease;
}

.action-modal-btn span {
  text-align: center;
  line-height: 1.3;
}

.action-modal-btn:hover {
  background: var(--bg);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.1);
}

.action-modal-btn:hover i {
  transform: scale(1.1);
}

.action-modal-btn.view:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.action-modal-btn.view:hover i {
  color: white;
}

.action-modal-btn.edit:hover {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.action-modal-btn.edit:hover i {
  color: white;
}

.action-modal-btn.suspend:hover {
  background: #f59e0b;
  border-color: #f59e0b;
  color: white;
}

.action-modal-btn.suspend:hover i {
  color: white;
}

.action-modal-btn.activate:hover {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

.action-modal-btn.activate:hover i {
  color: white;
}

.action-modal-btn.approve:hover {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

.action-modal-btn.approve:hover i {
  color: white;
}

.action-modal-btn.reject:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
}

.action-modal-btn.reject:hover i {
  color: white;
}

.action-modal-btn.delete:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
}

.action-modal-btn.delete:hover i {
  color: white;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .actions-grid {
    grid-template-columns: 1fr;
  }

  .action-modal-btn {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 56px;
    padding: 12px 16px;
  }

  .action-modal-btn i {
    width: 24px;
    font-size: 1rem;
  }

  .action-user-avatar {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================================================
   EMPTY STATE TABLE - Enhanced
   ======================================================================== */

.empty-state-table {
  text-align: center;
  padding: 60px 20px;
  background: white;
}

.empty-illustration {
  width: 80px;
  height: 80px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--accent);
  font-size: 2rem;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.empty-state-table h4 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 8px;
  font-weight: 600;
}

.empty-state-table p {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin: 0;
}

/* ========================================================================
   LOADING STATE TABLE
   ======================================================================== */

.loading-state-table {
  text-align: center;
  padding: 40px 20px;
}

.loading-state-table .loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 12px;
}

.loading-state-table p {
  color: var(--text-soft);
  font-size: 0.85rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================================================
   MOBILE OPTIMIZATIONS
   ======================================================================== */

@media (max-width: 640px) {
  .table-header {
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .table-title {
    font-size: 0.9rem;
  }

  .table-count {
    font-size: 0.75rem;
    padding: 3px 8px;
  }

  .data-table-premium td,
  .data-table-premium th {
    padding: 12px 15px;
  }

  .user-avatar-wrapper {
    width: 38px;
    height: 38px;
  }

  .user-name {
    font-size: 0.85rem;
  }

  .user-username {
    font-size: 0.65rem;
  }

  .contact-item {
    font-size: 0.7rem;
  }

  .role-badge {
    padding: 4px 10px;
    font-size: 0.7rem;
  }

  .status-badge {
    padding: 3px 10px;
    font-size: 0.65rem;
  }

  .stat-badge {
    padding: 3px 6px;
    font-size: 0.65rem;
  }

  .action-btn {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .table-header {
    padding: 12px;
  }

  .data-table-premium td,
  .data-table-premium th {
    padding: 10px 12px;
  }

  .user-cell {
    gap: 8px;
  }

  .user-avatar-wrapper {
    width: 34px;
    height: 34px;
  }

  .user-name {
    font-size: 0.8rem;
  }

  .contact-item {
    font-size: 0.65rem;
  }

  .contact-item i {
    width: 14px;
    font-size: 0.6rem;
  }

  .role-badge {
    padding: 3px 8px;
    font-size: 0.65rem;
    gap: 4px;
  }

  .role-badge i {
    font-size: 0.6rem;
  }

  .status-badge {
    padding: 2px 8px;
    font-size: 0.6rem;
    gap: 4px;
  }

  .status-dot {
    width: 6px;
    height: 6px;
  }

  .date-cell {
    font-size: 0.7rem;
  }

  .date-cell i {
    font-size: 0.6rem;
  }

  .stat-badge {
    padding: 2px 5px;
    font-size: 0.6rem;
    gap: 3px;
  }

  .stat-badge i {
    font-size: 0.5rem;
  }

  .action-btn {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }

  .dropdown-menu {
    width: 180px;
  }

  .dropdown-item {
    padding: 10px 14px;
    font-size: 0.8rem;
  }
}

/* Very Small Devices */
@media (max-width: 360px) {
  .data-table-premium td,
  .data-table-premium th {
    padding: 8px 10px;
  }

  .user-avatar-wrapper {
    width: 30px;
    height: 30px;
  }

  .user-name {
    font-size: 0.75rem;
  }

  .user-username {
    font-size: 0.6rem;
  }

  .contact-item {
    font-size: 0.6rem;
  }

  .role-badge {
    padding: 2px 6px;
    font-size: 0.6rem;
  }

  .status-badge {
    padding: 2px 6px;
    font-size: 0.55rem;
  }

  .action-btn {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
  }
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

/* Tablet - 2x2 grid */
@media (min-width: 481px) and (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

/* Mobile - Horizontal slider/carousel */
@media (max-width: 480px) {
  .stats-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 12px;
    padding: 4px 4px 16px 4px;
    margin-bottom: 20px;
    grid-template-columns: unset; /* Remove grid */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--border-light);
  }

  .stats-grid::-webkit-scrollbar {
    height: 4px;
  }

  .stats-grid::-webkit-scrollbar-track {
    background: var(--border-light);
    border-radius: 4px;
  }

  .stats-grid::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
  }

  .stats-grid::-webkit-scrollbar-thumb:hover {
    background: var(--accent-light);
  }

  .stats-grid .stat-card {
    flex: 0 0 auto;
    width: 240px; /* Fixed width for cards */
    scroll-snap-align: start;
    margin-right: 0;
    min-height: 120px;
  }

  /* Optional: Add fade effect on edges to indicate more content */
  .stats-grid::after {
    content: "";
    flex: 0 0 8px;
  }
}

/* Small Mobile (360px and below) */
@media (max-width: 360px) {
  .stats-grid .stat-card {
    width: 200px; /* Slightly smaller on very small screens */
    padding: 12px;
  }

  .stats-grid .stat-icon {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }

  .stats-grid .stat-value {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .stats-grid .stat-card {
    padding: 12px 8px;
    flex-direction: column;
    text-align: center;
  }

  .stats-grid .stat-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
  }

  .stats-grid .stat-value {
    font-size: 1rem;
  }

  .stats-grid .stat-label {
    font-size: 0.65rem;
  }

  .stats-grid .stat-trend {
    display: none; /* Hide trend on small cards */
  }
}

/* Extra Small Mobile (320px) - Force 2 columns even on smallest screens */
@media (max-width: 320px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  .stats-grid .stat-card {
    padding: 10px;
  }

  .stats-grid .stat-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .stats-grid .stat-value {
    font-size: 0.9rem;
  }

  .stats-grid .stat-label {
    font-size: 0.6rem;
  }
}
.quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}

/* Tablet - 2x2 or 3x2 grid based on screen size */
@media (min-width: 481px) and (max-width: 1024px) {
  .quick-stats {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }
}

/* Mobile - Horizontal slider/carousel */
@media (max-width: 480px) {
  .quick-stats {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 4px 4px 16px 4px;
    margin-bottom: 20px;
    grid-template-columns: unset; /* Remove grid */

    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--border-light);
  }

  /* Custom scrollbar for webkit browsers */
  .quick-stats::-webkit-scrollbar {
    height: 4px;
  }

  .quick-stats::-webkit-scrollbar-track {
    background: var(--border-light);
    border-radius: 4px;
  }

  .quick-stats::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
  }

  .quick-stats::-webkit-scrollbar-thumb:hover {
    background: var(--accent-light);
  }

  .quick-stats .quick-stat {
    flex: 0 0 auto;
    width: 160px; /* Fixed width for cards */
    scroll-snap-align: start;
    margin-right: 0;
    padding: 14px;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    min-height: 80px;
  }

  .quick-stats .quick-stat:hover {
    transform: translateY(-2px);
    border-color: var(--accent-light);
    box-shadow: var(--card-shadow);
  }

  .quick-stats .quick-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  .quick-stats .quick-stat-content {
    flex: 1;
    min-width: 0;
  }

  .quick-stats .quick-stat-value {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 2px;
    font-size: 1rem;
  }

  .quick-stats .quick-stat-label {
    font-size: 0.65rem;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Optional: Add fade effect on edges to indicate more content */
  .quick-stats::after {
    content: "";
    flex: 0 0 8px;
  }
}

/* Small Mobile (360px and below) */
@media (max-width: 360px) {
  .quick-stats .quick-stat {
    width: 140px;
    padding: 12px;
  }

  .quick-stats .quick-stat-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .quick-stats .quick-stat-value {
    font-size: 0.9rem;
  }

  .quick-stats .quick-stat-label {
    font-size: 0.6rem;
  }
}
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

/* Tablet - stack vertically or 2 columns */
@media (min-width: 769px) and (max-width: 1024px) {
  .charts-grid {
    grid-template-columns: 1fr; /* Stack vertically on tablet */
    gap: 18px;
  }
}

/* Mobile - Horizontal slider/carousel */
@media (max-width: 768px) {
  .charts-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 16px;
    padding: 4px 4px 16px 4px;
    margin-bottom: 20px;
    grid-template-columns: unset; /* Remove grid */

    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--border-light);
  }

  /* Custom scrollbar for webkit browsers */
  .charts-grid::-webkit-scrollbar {
    height: 4px;
  }

  .charts-grid::-webkit-scrollbar-track {
    background: var(--border-light);
    border-radius: 4px;
  }

  .charts-grid::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
  }

  .charts-grid::-webkit-scrollbar-thumb:hover {
    background: var(--accent-light);
  }

  .charts-grid .chart-card {
    flex: 0 0 auto;
    width: 85vw; /* 85% of viewport width */
    max-width: 400px; /* Maximum width */
    scroll-snap-align: start;
    margin-right: 0;
    padding: 16px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-light);
    box-shadow: var(--card-shadow);
    min-height: 300px;
    display: flex;
    flex-direction: column;
  }

  .charts-grid .chart-card:hover {
    box-shadow: var(--card-shadow-hover);
    border-color: var(--accent-light);
  }

  .charts-grid .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-shrink: 0;
  }

  .charts-grid .chart-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
  }

  .charts-grid .chart-header h3 i {
    color: var(--accent);
    font-size: 0.85rem;
  }

  .charts-grid .chart-container {
    height: 250px;
    position: relative;
    flex: 1;
    width: 100%;
  }

  /* Optional: Add fade effect on edges to indicate more content */
  .charts-grid::after {
    content: "";
    flex: 0 0 8px;
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
  .charts-grid .chart-card {
    width: 90vw; /* 90% of viewport width */
    padding: 14px;
  }

  .charts-grid .chart-container {
    height: 220px;
  }

  .charts-grid .chart-header h3 {
    font-size: 0.9rem;
  }
}

/* Very Small Mobile (360px and below) */
@media (max-width: 360px) {
  .charts-grid .chart-card {
    width: 95vw; /* 95% of viewport width */
    padding: 12px;
  }

  .charts-grid .chart-container {
    height: 200px;
  }
}

/* Landscape mode on mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .charts-grid .chart-card {
    width: 60vw; /* Smaller in landscape */
    max-width: 350px;
  }

  .charts-grid .chart-container {
    height: 200px;
  }
}
.toast-container {
  position: fixed;
  top: 20px; /* Position from top */
  right: 20px; /* Position from right */
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
  width: 100%;
  pointer-events: none; /* Allow clicking through container */
}

.toast-notification {
  padding: 15px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow-hover);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 350px;
  width: 100%;
  animation: slideInRight 0.3s ease;
  border-left: 4px solid var(--accent);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.98);
  font-size: 0.9rem;
  pointer-events: auto; /* Make toasts clickable */
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

.toast-notification::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  animation: toastProgress 3s linear forwards;
}

@keyframes toastProgress {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

.toast-notification.success {
  border-left-color: var(--success);
}

.toast-notification.success::before {
  background: var(--success);
}

.toast-notification.error {
  border-left-color: var(--danger);
}

.toast-notification.error::before {
  background: var(--danger);
}

.toast-notification.info {
  border-left-color: var(--accent);
}

.toast-notification.info::before {
  background: var(--accent);
}

.toast-notification i {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.toast-notification.success i {
  color: var(--success);
}

.toast-notification.error i {
  color: var(--danger);
}

.toast-notification.info i {
  color: var(--accent);
}

.toast-notification .toast-message {
  flex: 1;
  word-break: break-word;
}

.toast-notification .toast-close {
  background: none;
  border: none;
  color: var(--text-soft);
  cursor: pointer;
  padding: 4px;
  font-size: 0.9rem;
  transition: all 0.2s;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-notification .toast-close:hover {
  background: var(--bg);
  color: var(--text-dark);
}

/* Slide in animation from right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide out animation for removal */
@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast-notification.removing {
  animation: slideOutRight 0.3s ease forwards;
}

/* Stack multiple toasts with spacing */
.toast-notification + .toast-notification {
  margin-top: 10px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .toast-container {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
    width: auto;
  }

  .toast-notification {
    min-width: auto;
    max-width: none;
    width: 100%;
    padding: 12px 16px;
    font-size: 0.85rem;
  }
}

/* For very small screens, take full width */
@media (max-width: 360px) {
  .toast-container {
    top: 5px;
    right: 5px;
    left: 5px;
  }

  .toast-notification {
    padding: 10px 14px;
    font-size: 0.8rem;
  }
}
.stats-grid-minimal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

/* Tablet - 2x2 grid */
@media (min-width: 481px) and (max-width: 768px) {
  .stats-grid-minimal {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
  }
}

/* Mobile - Horizontal slider/carousel */
@media (max-width: 480px) {
  .stats-grid-minimal {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 12px;
    padding: 4px 4px 16px 4px;
    margin-bottom: 20px;
    grid-template-columns: unset; /* Remove grid */

    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--border-light);
  }

  /* Custom scrollbar for webkit browsers */
  .stats-grid-minimal::-webkit-scrollbar {
    height: 4px;
  }

  .stats-grid-minimal::-webkit-scrollbar-track {
    background: var(--border-light);
    border-radius: 4px;
  }

  .stats-grid-minimal::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
  }

  .stats-grid-minimal::-webkit-scrollbar-thumb:hover {
    background: var(--accent-light);
  }

  .stats-grid-minimal .stat-card-mini {
    flex: 0 0 auto;
    width: 180px; /* Fixed width for cards */
    scroll-snap-align: start;
    margin-right: 0;
    background: white;
    border-radius: 20px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
    min-height: 90px;
  }

  .stats-grid-minimal .stat-card-mini::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .stats-grid-minimal .stat-card-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(183, 140, 90, 0.15);
    border-color: var(--accent);
  }

  .stats-grid-minimal .stat-card-mini:hover::before {
    opacity: 1;
  }

  .stats-grid-minimal .stat-card-mini .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
  }

  .stats-grid-minimal .stat-card-mini.all-users .stat-icon {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
  }

  .stats-grid-minimal .stat-card-mini.customers .stat-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
  }

  .stats-grid-minimal .stat-card-mini.providers .stat-icon {
    background: rgba(183, 140, 90, 0.1);
    color: var(--accent);
  }

  .stats-grid-minimal .stat-card-mini.admins .stat-icon {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
  }

  .stats-grid-minimal .stat-card-mini.pending .stat-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
  }

  .stats-grid-minimal .stat-card-mini:hover .stat-icon {
    transform: scale(1.05);
  }

  .stats-grid-minimal .stat-card-mini .stat-content {
    flex: 1;
    min-width: 0;
  }

  .stats-grid-minimal .stat-card-mini .stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    display: block;
    margin-bottom: 2px;
  }

  .stats-grid-minimal .stat-card-mini .stat-label {
    font-size: 0.7rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Optional: Add fade effect on edges to indicate more content */
  .stats-grid-minimal::after {
    content: "";
    flex: 0 0 8px;
  }
}

/* Small Mobile (360px and below) */
@media (max-width: 360px) {
  .stats-grid-minimal .stat-card-mini {
    width: 160px;
    padding: 14px;
  }

  .stats-grid-minimal .stat-card-mini .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .stats-grid-minimal .stat-card-mini .stat-value {
    font-size: 1.1rem;
  }

  .stats-grid-minimal .stat-card-mini .stat-label {
    font-size: 0.65rem;
  }
}

/* Very Small Mobile (320px and below) */
@media (max-width: 320px) {
  .stats-grid-minimal .stat-card-mini {
    width: 140px;
    padding: 12px;
    gap: 10px;
  }

  .stats-grid-minimal .stat-card-mini .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .stats-grid-minimal .stat-card-mini .stat-value {
    font-size: 1rem;
  }

  .stats-grid-minimal .stat-card-mini .stat-label {
    font-size: 0.6rem;
  }
}
/* In dashboard-admin.css - add this section for Orders Management */

/* ========================================================================
   ORDERS MANAGEMENT - Premium Design Matching Dashboard Theme
   ======================================================================== */

/* Orders Dashboard Container */
.orders-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .orders-dashboard {
    padding: 30px;
  }
}

/* Orders Header */
.orders-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

@media (min-width: 640px) {
  .orders-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
  }
}

.orders-title-section {
  flex: 1;
}

.orders-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 4px 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.orders-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.orders-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 12px;
  line-height: 1.5;
}

.orders-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.orders-actions .btn-outline {
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  transition: all 0.3s ease;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.orders-actions .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

/* Orders Stats Cards */
.orders-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.orders-stat-card {
  --orders-card-accent: var(--accent);
  --orders-card-accent-light: var(--accent-light);
  --orders-card-soft: rgba(183, 140, 90, 0.1);
  --orders-card-tint: #f2ebe3;
  --orders-card-hover-shadow: rgba(183, 140, 90, 0.15);

  background: white;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.orders-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--orders-card-accent),
    var(--orders-card-accent-light)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.orders-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px var(--orders-card-hover-shadow);
  border-color: var(--orders-card-accent);
}

.orders-stat-card:hover::before {
  opacity: 1;
}

.orders-stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    var(--orders-card-accent-light) 0%,
    var(--orders-card-soft) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orders-card-accent);
  font-size: 1.5rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.orders-stat-card:hover .orders-stat-icon {
  background: var(--orders-card-accent);
  color: white;
  transform: scale(1.05);
}

.orders-stat-card.services-card {
  --orders-card-accent: #16a34a;
  --orders-card-accent-light: #86efac;
  --orders-card-soft: rgba(22, 163, 74, 0.12);
  --orders-card-tint: #dcfce7;
  --orders-card-hover-shadow: rgba(22, 163, 74, 0.2);
}

.orders-stat-card.products-card {
  --orders-card-accent: #2563eb;
  --orders-card-accent-light: #93c5fd;
  --orders-card-soft: rgba(37, 99, 235, 0.12);
  --orders-card-tint: #dbeafe;
  --orders-card-hover-shadow: rgba(37, 99, 235, 0.2);
}

.orders-stat-content {
  flex: 1;
  min-width: 0;
}

.orders-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 2px;
}

.orders-stat-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
}

.orders-stat-trend {
  font-size: 0.65rem;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 30px;
  background: var(--bg);
}

.orders-stat-card .orders-stat-trend.view-all {
  background: var(--orders-card-tint);
  color: var(--orders-card-accent);
}

.orders-stat-trend.positive {
  color: var(--success);
  background: var(--success-light);
}

.orders-stat-trend.negative {
  color: var(--danger);
  background: var(--danger-light);
}

/* Orders Filters Bar */
.orders-filters-bar {
  background: white;
  border-radius: 60px;
  padding: 12px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: stretch;
  width: 100%;
}

@media (min-width: 768px) {
  .orders-filters-bar {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    border-radius: 60px;
  }
}

.orders-search-wrapper {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.orders-search-wrapper i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 1;
}

.orders-search-wrapper input {
  width: 100%;
  padding: 12px 20px 12px 45px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.9rem;
  background: var(--bg);
  transition: all 0.2s;
  min-height: 44px;
}

.orders-search-wrapper input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
  background: white;
}

.orders-search-wrapper input::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
}

.orders-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .orders-filter-group {
    width: auto;
    gap: 12px;
  }
}

.orders-filter-select-wrapper {
  position: relative;
  flex: 1;
  min-width: 120px;
}

@media (min-width: 768px) {
  .orders-filter-select-wrapper {
    flex: 0 1 auto;
    min-width: 140px;
  }
}

.orders-filter-select {
  width: 100%;
  padding: 12px 35px 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  background: var(--bg);
  min-height: 44px;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e5a58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  transition: all 0.2s;
}

.orders-filter-select:hover {
  border-color: var(--accent);
}

.orders-filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
}

.orders-btn-primary {
  padding: 12px 24px;
  border-radius: 40px;
  background: var(--text-dark);
  color: white;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  min-height: 44px;
  font-size: 0.9rem;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.1);
}

.orders-btn-primary:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

.orders-btn-outline {
  padding: 12px 24px;
  border-radius: 40px;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  min-height: 44px;
  font-size: 0.9rem;
}

.orders-btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

/* Orders Table Container */
/* In dashboard-admin.css - Update the orders-table-container section */

/* ========================================================================
   ORDERS TABLE CONTAINER - Full Width Premium Design
   ======================================================================== */

.orders-table-container {
  background: white;
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  overflow: hidden;
  margin: 25px 0 30px;
  width: 100%; /* Full width */
  max-width: 100%; /* Ensure it never exceeds parent width */
}

/* Table Header */
.orders-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
  gap: 12px;
}

.orders-table-title {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.orders-table-title i {
  color: var(--accent);
  font-size: 0.9rem;
}

.orders-table-count {
  color: var(--text-soft);
  font-size: 0.85rem;
  background: var(--bg);
  padding: 4px 12px;
  border-radius: 30px;
  font-weight: 500;
  white-space: nowrap;
}

/* Table Responsive Container - Always scrollable horizontally if needed */
.orders-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--border-light);
  transition: all 0.3s ease;
}

/* Custom scrollbar for webkit browsers */
.orders-table-responsive::-webkit-scrollbar {
  height: 4px;
}

.orders-table-responsive::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 4px;
}

.orders-table-responsive::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.orders-table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

/* Data Table - Full width with minimum width for content */
.orders-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 900px; /* Forces horizontal scroll on smaller screens */
  font-size: 0.9rem;
}

/* Desktop - adjust min-width based on screen size */
@media (min-width: 1200px) {
  .orders-data-table {
    min-width: 1000px;
  }
}

@media (min-width: 1400px) {
  .orders-data-table {
    min-width: 1200px;
  }
}

/* Table Header Cells */
.orders-data-table thead tr {
  background: var(--bg);
}

.orders-data-table th {
  text-align: left;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border-bottom: 2px solid var(--border-light);
  position: relative;
}

/* Add subtle gradient to header */
.orders-data-table th::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.orders-data-table thead:hover th::after {
  opacity: 0.5;
}

/* Table Body Rows */
.orders-data-table tbody tr {
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}

.orders-data-table tbody tr:hover {
  background: linear-gradient(90deg, var(--bg) 0%, white 100%);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.orders-data-table tbody tr:active {
  transform: translateX(0);
  background: var(--bg);
}

.orders-data-table tbody tr:last-child {
  border-bottom: none;
}

/* Table Body Cells */
.orders-data-table td {
  padding: 16px 20px;
  color: var(--text-dark);
  font-size: 0.9rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-light);
}

/* Add subtle border animation on hover */
.orders-data-table tbody tr:hover td::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent-light);
  opacity: 0.3;
}

/* Order ID Cell */
.order-id-cell {
  font-family: monospace;
  font-weight: 600;
  color: var(--accent);
  font-size: 0.85rem;
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 30px;
  display: inline-block;
}

/* Customer/Provider Info */
.order-party-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-party-name {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.order-party-email {
  font-size: 0.7rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* Listing Title */
.order-listing-title {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.order-listing-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 30px;
  margin-top: 4px;
  background: var(--bg);
  color: var(--text-soft);
  width: fit-content;
}

.order-listing-type.service {
  background: #f2ebe3;
  color: var(--accent);
}

.order-listing-type.product {
  background: #e1f0fa;
  color: #1e4a6b;
}

/* Quantity Cell */
.order-quantity {
  font-weight: 500;
  color: var(--text-dark);
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 20px;
  display: inline-block;
  font-size: 0.85rem;
}

/* Amount Cell */
.order-amount {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.95rem;
  white-space: nowrap;
}

.order-amount.text-muted {
  color: var(--text-soft);
  font-weight: 400;
}

/* Status Badge */
.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.order-status-badge i {
  font-size: 0.65rem;
}

/* Status colors */
.order-status-badge.pending_quote,
.order-status-badge.pending {
  background: var(--warning-light);
  color: #b45309;
  border-color: #fde6c9;
}

.order-status-badge.awaiting_deposit,
.order-status-badge.awaiting_visit,
.order-status-badge.awaiting_quote {
  background: var(--warning-light);
  color: #b45309;
  border-color: #fde6c9;
}

.order-status-badge.quoted {
  background: #f2ebe3;
  color: var(--accent);
  border-color: #e8d9cc;
}

.order-status-badge.approved,
.order-status-badge.accepted {
  background: #e3f2e9;
  color: #2f6e4a;
  border-color: #c8e6d9;
}

.order-status-badge.in_progress {
  background: #e1f0fa;
  color: #1e4a6b;
  border-color: #b8d9f0;
}

.order-status-badge.awaiting_final_payment {
  background: #fef3e2;
  color: #b45309;
  border-color: #fde6c9;
}

.order-status-badge.completed {
  background: #e3f2e9;
  color: #2f6e4a;
  border-color: #c8e6d9;
}

.order-status-badge.cancelled,
.order-status-badge.cancelled_with_fee {
  background: var(--danger-light);
  color: var(--danger);
  border-color: #fecaca;
}

.order-status-badge.rejected {
  background: var(--danger-light);
  color: var(--danger);
  border-color: #fecaca;
}

.order-status-badge.shipped {
  background: linear-gradient(135deg, #f2ebe3 0%, rgba(183, 140, 90, 0.1) 100%);
  color: var(--accent);
  border-color: #e8d9cc;
}

.order-status-badge.delivered {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}

/* Date Cell */
.order-date-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-date {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dark);
  font-size: 0.8rem;
  white-space: nowrap;
}

.order-date i {
  color: var(--accent);
  font-size: 0.65rem;
  width: 14px;
}

.order-time {
  font-size: 0.7rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.order-time i {
  color: var(--accent-light);
  font-size: 0.6rem;
  width: 14px;
}

/* Actions Cell */
.order-actions-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.order-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: white;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.order-action-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(183, 140, 90, 0.2);
  transform: translate(-50%, -50%);
  transition:
    width 0.3s,
    height 0.3s;
}

.order-action-btn:hover::before {
  width: 100%;
  height: 100%;
}

.order-action-btn:hover {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.order-action-btn.view:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Empty State */
.orders-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
}

.orders-empty-illustration {
  width: 80px;
  height: 80px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--accent);
  font-size: 2rem;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.orders-empty-state h4 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 8px;
  font-weight: 600;
}

.orders-empty-state p {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin: 0;
}

/* Loading State */
.orders-loading-state {
  text-align: center;
  padding: 40px 20px;
}

.orders-loading-state .loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 12px;
}

.orders-loading-state p {
  color: var(--text-soft);
  font-size: 0.85rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .orders-table-header {
    padding: 16px 20px;
  }

  .orders-table-title {
    font-size: 0.95rem;
  }

  .orders-table-count {
    font-size: 0.8rem;
    padding: 3px 10px;
  }

  .orders-data-table td,
  .orders-data-table th {
    padding: 14px 16px;
  }

  .order-party-name {
    max-width: 150px;
  }

  .order-party-email {
    max-width: 150px;
  }

  .order-listing-title {
    max-width: 200px;
  }

  .order-action-btn {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .orders-table-header {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .orders-table-title {
    font-size: 0.9rem;
  }

  .orders-table-count {
    font-size: 0.75rem;
    padding: 3px 8px;
    align-self: flex-start;
  }

  .orders-data-table {
    min-width: 800px; /* Ensure horizontal scroll on very small screens */
  }

  .orders-data-table td,
  .orders-data-table th {
    padding: 12px 14px;
  }

  .order-party-name {
    max-width: 120px;
    font-size: 0.85rem;
  }

  .order-party-email {
    max-width: 120px;
    font-size: 0.65rem;
  }

  .order-listing-title {
    max-width: 150px;
    font-size: 0.85rem;
  }

  .order-id-cell {
    font-size: 0.8rem;
    padding: 3px 6px;
  }

  .order-amount {
    font-size: 0.9rem;
  }

  .order-status-badge {
    padding: 4px 10px;
    font-size: 0.65rem;
  }

  .order-action-btn {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}

/* Very Small Mobile */
@media (max-width: 360px) {
  .orders-table-header {
    padding: 12px 14px;
  }

  .orders-data-table td,
  .orders-data-table th {
    padding: 10px 12px;
  }

  .order-party-name {
    max-width: 100px;
    font-size: 0.8rem;
  }

  .order-party-email {
    max-width: 100px;
    font-size: 0.6rem;
  }

  .order-listing-title {
    max-width: 120px;
    font-size: 0.8rem;
  }

  .order-id-cell {
    font-size: 0.75rem;
    padding: 2px 5px;
  }

  .order-amount {
    font-size: 0.85rem;
  }

  .order-status-badge {
    padding: 3px 8px;
    font-size: 0.6rem;
  }

  .order-action-btn {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }
}
/* ========================================================================
   ORDERS STATS GRID - Premium Slider Design
   ======================================================================== */

.orders-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}

/* Admin override: provider stylesheet is loaded later and sets 5 columns.
   Use higher specificity so the admin orders cards always occupy full row width. */
@media (min-width: 769px) {
  .admin-dashboard .orders-dashboard .orders-stats-grid {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
  }

  .admin-dashboard .orders-dashboard .orders-stats-grid .orders-stat-card {
    width: 100%;
    min-width: 0;
  }
}

/* Desktop: force cards to fill the full row width */
@media (min-width: 1025px) {
  .orders-stats-grid {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .orders-stats-grid .orders-stat-card {
    width: 100%;
    min-width: 0;
  }
}

/* Tablet - 3x3 or 4x2 grid based on screen size */
@media (min-width: 769px) and (max-width: 1024px) {
  .orders-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

/* Mobile - Horizontal slider/carousel */
@media (max-width: 768px) {
  .orders-stats-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 12px;
    padding: 4px 4px 16px 4px;
    margin-bottom: 20px;
    grid-template-columns: unset; /* Remove grid */

    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--border-light);
  }

  /* Custom scrollbar for webkit browsers */
  .orders-stats-grid::-webkit-scrollbar {
    height: 4px;
  }

  .orders-stats-grid::-webkit-scrollbar-track {
    background: var(--border-light);
    border-radius: 4px;
  }

  .orders-stats-grid::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
  }

  .orders-stats-grid::-webkit-scrollbar-thumb:hover {
    background: var(--accent-light);
  }

  .orders-stats-grid .orders-stat-card {
    flex: 0 0 auto;
    width: 200px; /* Fixed width for cards */
    scroll-snap-align: start;
    margin-right: 0;
    background: white;
    border-radius: 20px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--border-light);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
    min-height: 100px;
  }

  .orders-stats-grid .orders-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
      90deg,
      var(--orders-card-accent),
      var(--orders-card-accent-light)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .orders-stats-grid .orders-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px var(--orders-card-hover-shadow);
    border-color: var(--orders-card-accent);
  }

  .orders-stats-grid .orders-stat-card:hover::before {
    opacity: 1;
  }

  .orders-stats-grid .orders-stat-card.active-filter {
    border-color: var(--accent);
    background: #f2ebe3;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(183, 140, 90, 0.2);
  }

  .orders-stats-grid .orders-stat-card.active-filter .orders-stat-icon {
    background: var(--accent);
    color: white;
  }

  .orders-stats-grid .orders-stat-card.active-filter .orders-stat-icon i {
    color: white;
  }

  .orders-stats-grid .orders-stat-card[onclick] {
    cursor: pointer;
    position: relative;
  }

  .orders-stats-grid .orders-stat-card[onclick]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent var(--accent-light) transparent transparent;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .orders-stats-grid .orders-stat-card[onclick]:hover::after {
    opacity: 0.3;
  }

  .orders-stats-grid .orders-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(
      135deg,
      var(--accent-light) 0%,
      rgba(183, 140, 90, 0.1) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.4rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
  }

  .orders-stats-grid .orders-stat-card:hover .orders-stat-icon {
    transform: scale(1.05);
  }

  .orders-stats-grid .orders-stat-content {
    flex: 1;
    min-width: 0;
  }

  .orders-stats-grid .orders-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 2px;
    display: block;
  }

  .orders-stats-grid .orders-stat-label {
    font-size: 0.7rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
    margin-bottom: 4px;
  }

  .orders-stats-grid .orders-stat-trend {
    font-size: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 30px;
    background: var(--bg);
    white-space: nowrap;
  }

  /* Optional: Add fade effect on edges to indicate more content */
  .orders-stats-grid::after {
    content: "";
    flex: 0 0 8px;
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
  .orders-stats-grid .orders-stat-card {
    width: 180px;
    padding: 16px 14px;
  }

  .orders-stats-grid .orders-stat-icon {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    border-radius: 14px;
  }

  .orders-stats-grid .orders-stat-value {
    font-size: 1.2rem;
  }

  .orders-stats-grid .orders-stat-label {
    font-size: 0.65rem;
  }
}

/* Very Small Mobile (360px and below) */
@media (max-width: 360px) {
  .orders-stats-grid .orders-stat-card {
    width: 160px;
    padding: 14px 12px;
    gap: 10px;
  }

  .orders-stats-grid .orders-stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    border-radius: 12px;
  }

  .orders-stats-grid .orders-stat-value {
    font-size: 1.1rem;
  }

  .orders-stats-grid .orders-stat-label {
    font-size: 0.6rem;
  }

  .orders-stats-grid .orders-stat-trend {
    font-size: 0.55rem;
    padding: 2px 6px;
  }
}

/* Optional: Add navigation dots for the slider */
.orders-stats-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 16px;
}

.orders-stats-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-light);
  cursor: pointer;
  transition: all 0.2s ease;
}

.orders-stats-dot.active {
  width: 20px;
  border-radius: 10px;
  background: var(--accent);
}

@media (max-width: 768px) {
  .orders-stats-dots {
    display: flex;
  }
}
/* ========================================================================
   TRANSACTIONS LEDGER - Premium Design
   ======================================================================== */

.transactions-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .transactions-dashboard {
    padding: 30px;
  }
}

/* Header */
.transactions-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

@media (min-width: 640px) {
  .transactions-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
  }
}

.transactions-title-section {
  flex: 1;
}

.transactions-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 4px 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.transactions-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.transactions-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 12px;
  line-height: 1.5;
}

.transactions-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.transactions-actions .btn-outline {
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  transition: all 0.3s ease;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.transactions-actions .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

/* Stats Grid */
.transactions-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.transactions-stat-card {
  background: white;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.transactions-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.transactions-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(183, 140, 90, 0.15);
  border-color: var(--accent);
}

.transactions-stat-card:hover::before {
  opacity: 1;
}

.transactions-stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    rgba(183, 140, 90, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.5rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.transactions-stat-card:hover .transactions-stat-icon {
  background: var(--accent);
  color: white;
  transform: scale(1.05);
}

.transactions-stat-content {
  flex: 1;
  min-width: 0;
}

.transactions-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 2px;
}

.transactions-stat-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
}

.transactions-stat-trend {
  font-size: 0.65rem;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 30px;
  background: var(--bg);
}

.transactions-stat-trend.positive {
  color: var(--success);
  background: var(--success-light);
}

.transactions-stat-trend.negative {
  color: var(--danger);
  background: var(--danger-light);
}

/* Filters Bar */
.transactions-filters-bar {
  background: white;
  border-radius: 60px;
  padding: 12px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: stretch;
  width: 100%;
}

@media (min-width: 768px) {
  .transactions-filters-bar {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    border-radius: 60px;
  }
}

.transactions-search-wrapper {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.transactions-search-wrapper i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 1;
}

.transactions-search-wrapper input {
  width: 100%;
  padding: 12px 20px 12px 45px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.9rem;
  background: var(--bg);
  transition: all 0.2s;
  min-height: 44px;
}

.transactions-search-wrapper input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
  background: white;
}

.transactions-search-wrapper input::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
}

.transactions-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .transactions-filter-group {
    width: auto;
    gap: 12px;
  }
}

.transactions-filter-select-wrapper {
  position: relative;
  flex: 1;
  min-width: 120px;
}

@media (min-width: 768px) {
  .transactions-filter-select-wrapper {
    flex: 0 1 auto;
    min-width: 140px;
  }
}

.transactions-filter-select {
  width: 100%;
  padding: 12px 35px 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  background: var(--bg);
  min-height: 44px;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e5a58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  transition: all 0.2s;
}

.transactions-filter-select:hover {
  border-color: var(--accent);
}

.transactions-filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
}

.transactions-date-input {
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  background: var(--bg);
  min-height: 44px;
  font-size: 0.85rem;
  color: var(--text-dark);
  transition: all 0.2s;
}

.transactions-date-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
  background: white;
}

.transactions-btn-primary {
  padding: 12px 24px;
  border-radius: 40px;
  background: var(--text-dark);
  color: white;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  min-height: 44px;
  font-size: 0.9rem;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.1);
}

.transactions-btn-primary:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

.transactions-btn-outline {
  padding: 12px 24px;
  border-radius: 40px;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  min-height: 44px;
  font-size: 0.9rem;
}

.transactions-btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

/* Table Container */
.transactions-table-container {
  background: white;
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  overflow: hidden;
  margin: 25px 0 30px;
  width: 100%;
  max-width: 100%;
}

.transactions-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
  gap: 12px;
}

.transactions-table-title {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.transactions-table-title i {
  color: var(--accent);
  font-size: 0.9rem;
}

.transactions-table-count {
  color: var(--text-soft);
  font-size: 0.85rem;
  background: var(--bg);
  padding: 4px 12px;
  border-radius: 30px;
  font-weight: 500;
  white-space: nowrap;
}

/* Table Responsive */
.transactions-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--border-light);
  transition: all 0.3s ease;
}

.transactions-table-responsive::-webkit-scrollbar {
  height: 4px;
}

.transactions-table-responsive::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 4px;
}

.transactions-table-responsive::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.transactions-table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

/* Data Table */
.transactions-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1000px;
  font-size: 0.9rem;
}

.transactions-data-table thead tr {
  background: var(--bg);
}

.transactions-data-table th {
  text-align: left;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border-bottom: 2px solid var(--border-light);
  position: relative;
}

.transactions-data-table th::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.transactions-data-table thead:hover th::after {
  opacity: 0.5;
}

.transactions-data-table tbody tr {
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--border-light);
}

.transactions-data-table tbody tr:hover {
  background: linear-gradient(90deg, var(--bg) 0%, white 100%);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.transactions-data-table tbody tr:last-child {
  border-bottom: none;
}

.transactions-data-table td {
  padding: 16px 20px;
  color: var(--text-dark);
  font-size: 0.9rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-light);
}

/* Transaction Type Badge */
.transaction-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  border: 1px solid transparent;
}

.transaction-type i {
  font-size: 0.7rem;
}

.transaction-type.fee,
.transaction-type.platform_fee {
  background: var(--warning-light);
  color: #b45309;
  border-color: #fde6c9;
}

.transaction-type.hold {
  background: #e1f0fa;
  color: #1e4a6b;
  border-color: #b8d9f0;
}

.transaction-type.release {
  background: #e3f2e9;
  color: #2f6e4a;
  border-color: #c8e6d9;
}

.transaction-type.payout {
  background: #f2ebe3;
  color: var(--accent);
  border-color: #e8d9cc;
}

.transaction-type.rejection_fee {
  background: #fee2e2;
  color: var(--danger);
  border-color: #fecaca;
}

.transaction-type.refund {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}

/* Amount Cell */
.transaction-amount {
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

.transaction-amount.positive {
  color: var(--success);
}

.transaction-amount.negative {
  color: var(--danger);
}

/* Status Badge */
.transaction-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.transaction-status.completed,
.transaction-status.succeeded {
  background: #e3f2e9;
  color: #2f6e4a;
}

.transaction-status.pending {
  background: #fef3e2;
  color: #b45309;
}

.transaction-status.failed {
  background: #fee2e2;
  color: var(--danger);
}

/* Provider Cell */
.transaction-provider {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.transaction-provider-name {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.transaction-provider-email {
  font-size: 0.7rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* Order Reference */
.transaction-order-ref {
  font-family: monospace;
  font-weight: 600;
  color: var(--accent);
  font-size: 0.8rem;
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 30px;
  display: inline-block;
}

/* Date Cell */
.transaction-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.transaction-date-full {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dark);
  font-size: 0.8rem;
  white-space: nowrap;
}

.transaction-date-full i {
  color: var(--accent);
  font-size: 0.65rem;
  width: 14px;
}

.transaction-time {
  font-size: 0.7rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.transaction-time i {
  color: var(--accent-light);
  font-size: 0.6rem;
  width: 14px;
}

/* Empty State */
.transactions-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
}

.transactions-empty-illustration {
  width: 80px;
  height: 80px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--accent);
  font-size: 2rem;
  animation: float 3s ease-in-out infinite;
}

.transactions-empty-state h4 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 8px;
  font-weight: 600;
}

.transactions-empty-state p {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .transactions-filters-bar {
    padding: 15px;
    border-radius: 20px;
  }

  .transactions-filter-group {
    flex-direction: column;
    width: 100%;
  }

  .transactions-filter-select-wrapper {
    width: 100%;
  }

  .transactions-date-input {
    width: 100%;
  }

  .transactions-btn-primary,
  .transactions-btn-outline {
    width: 100%;
    justify-content: center;
  }

  .transactions-table-header {
    padding: 16px 20px;
  }

  .transactions-data-table td,
  .transactions-data-table th {
    padding: 14px 16px;
  }
}

@media (max-width: 480px) {
  .transactions-stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .transactions-table-header {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .transactions-data-table {
    min-width: 800px;
  }

  .transactions-data-table td,
  .transactions-data-table th {
    padding: 12px 14px;
  }

  .transaction-provider-name {
    max-width: 120px;
    font-size: 0.85rem;
  }

  .transaction-provider-email {
    max-width: 120px;
    font-size: 0.65rem;
  }

  .transaction-type {
    padding: 4px 10px;
    font-size: 0.7rem;
  }

  .transaction-amount {
    font-size: 0.9rem;
  }
}

/* Animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
/* ========================================================================
   PAYOUT MANAGEMENT - Premium Design
   ======================================================================== */

.payouts-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .payouts-dashboard {
    padding: 30px;
  }
}

/* Header */
.payouts-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

@media (min-width: 640px) {
  .payouts-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
  }
}

.payouts-title-section {
  flex: 1;
}

.payouts-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 4px 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.payouts-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.payouts-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 12px;
  line-height: 1.5;
}

.payouts-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.payouts-actions .btn-outline {
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  transition: all 0.3s ease;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.payouts-actions .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

/* Summary Cards */
.payouts-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.payouts-summary-card {
  background: white;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.payouts-summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.payouts-summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(183, 140, 90, 0.15);
  border-color: var(--accent);
}

.payouts-summary-card:hover::before {
  opacity: 1;
}

.payouts-summary-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    rgba(183, 140, 90, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.6rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.payouts-summary-card:hover .payouts-summary-icon {
  background: var(--accent);
  color: white;
  transform: scale(1.05);
}

.payouts-summary-content {
  flex: 1;
  min-width: 0;
}

.payouts-summary-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 4px;
}

.payouts-summary-label {
  font-size: 0.75rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

.payouts-summary-trend {
  font-size: 0.7rem;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 30px;
  background: var(--bg);
}

.payouts-summary-trend.warning {
  color: #b45309;
  background: #fef3e2;
}

.payouts-summary-trend.success {
  color: #2f6e4a;
  background: #e3f2e9;
}

/* Section Headers */
.payouts-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.payouts-section-header h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.payouts-section-header h2 i {
  color: var(--accent);
  font-size: 1.2rem;
}

.payouts-section-header .badge {
  background: var(--accent);
  color: white;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Pending Payouts Grid */
.pending-payouts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.payout-card {
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  position: relative;
}

.payout-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(183, 140, 90, 0.15);
  border-color: var(--accent);
}

.payout-card.pending {
  border-left: 4px solid #f59e0b;
}

.payout-card.processed {
  border-left: 4px solid var(--accent);
  opacity: 0.8;
}

.payout-card.completed {
  border-left: 4px solid #10b981;
}

.payout-card-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.provider-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.provider-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}

.provider-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.provider-details {
  min-width: 0;
}

.provider-name {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-email {
  color: var(--text-soft);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payout-amount {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.payout-amount small {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-soft);
  margin-left: 4px;
}

.payout-card-body {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-light);
}

.payout-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-light);
}

.payout-detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-label i {
  color: var(--accent);
  font-size: 0.75rem;
  width: 16px;
}

.detail-value {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.85rem;
  text-align: right;
  word-break: break-word;
  max-width: 60%;
}

.detail-value.highlight {
  color: var(--accent);
  font-size: 1rem;
}

.detail-value.warning {
  color: #b45309;
}

.detail-value.success {
  color: #2f6e4a;
}

.stripe-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #635bff;
  color: white;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
}

.stripe-badge i {
  font-size: 0.8rem;
}

.payout-notes {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 0.8rem;
  resize: vertical;
  min-height: 60px;
  margin: 10px 0 0 0;
  transition: all 0.2s;
}

.payout-notes:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
}

.payout-card-footer {
  padding: 16px 20px;
  background: var(--bg);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.payout-card-footer .btn-primary,
.payout-card-footer .btn-outline {
  flex: 1;
  min-width: 120px;
  padding: 10px 16px;
  font-size: 0.85rem;
}

/* Status Badges */
.payout-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.payout-status.pending {
  background: #fef3e2;
  color: #b45309;
}

.payout-status.processed {
  background: #f2ebe3;
  color: var(--accent);
}

.payout-status.completed {
  background: #e3f2e9;
  color: #2f6e4a;
}

.payout-status.failed {
  background: #fee2e2;
  color: #ef4444;
}

/* History Table */
.payouts-history-table-container {
  background: white;
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  overflow: hidden;
  margin: 25px 0 30px;
  width: 100%;
}

.payouts-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
  gap: 12px;
}

.payouts-history-title {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.payouts-history-title i {
  color: var(--accent);
  font-size: 0.9rem;
}

.payouts-history-count {
  color: var(--text-soft);
  font-size: 0.85rem;
  background: var(--bg);
  padding: 4px 12px;
  border-radius: 30px;
  font-weight: 500;
  white-space: nowrap;
}

.payouts-history-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--border-light);
}

.payouts-history-responsive::-webkit-scrollbar {
  height: 4px;
}

.payouts-history-responsive::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 4px;
}

.payouts-history-responsive::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.payouts-history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 800px;
  font-size: 0.9rem;
}

.payouts-history-table thead tr {
  background: var(--bg);
}

.payouts-history-table th {
  text-align: left;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border-bottom: 2px solid var(--border-light);
}

.payouts-history-table tbody tr {
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--border-light);
}

.payouts-history-table tbody tr:hover {
  background: var(--bg);
}

.payouts-history-table td {
  padding: 16px 20px;
  color: var(--text-dark);
  font-size: 0.9rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-light);
}

/* Amount cell */
.payout-amount-cell {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Date cell */
.payout-date-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.payout-date {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dark);
  font-size: 0.8rem;
  white-space: nowrap;
}

.payout-date i {
  color: var(--accent);
  font-size: 0.65rem;
  width: 14px;
}

/* Action button */
.payout-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: white;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.payout-action-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Empty State */
.payouts-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
}

.payouts-empty-illustration {
  width: 80px;
  height: 80px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--accent);
  font-size: 2rem;
  animation: float 3s ease-in-out infinite;
}

.payouts-empty-state h4 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 8px;
  font-weight: 600;
}

.payouts-empty-state p {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .pending-payouts-grid {
    grid-template-columns: 1fr;
  }

  .payout-card-footer {
    flex-direction: column;
  }

  .payout-card-footer .btn-primary,
  .payout-card-footer .btn-outline {
    width: 100%;
  }

  .payouts-history-header {
    padding: 16px 20px;
  }
}

@media (max-width: 480px) {
  .payouts-summary-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .payout-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .payout-amount {
    align-self: flex-start;
  }

  .payouts-history-table {
    min-width: 700px;
  }

  .payouts-history-table td,
  .payouts-history-table th {
    padding: 12px 16px;
  }
}
/* ========================================================================
   PAYOUT DETAILS MODAL - Premium Design
   ======================================================================== */

.payout-detail-modal .modal-content {
  max-width: 700px;
  border-radius: 28px;
  overflow: hidden;
}

.payout-detail-modal .modal-header {
  padding: 24px 28px;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payout-detail-modal .modal-header h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.payout-detail-modal .modal-header h3 i {
  color: var(--accent);
  font-size: 1.3rem;
}

.payout-detail-modal .modal-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg);
  border: none;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payout-detail-modal .modal-close:hover {
  background: #fee2e2;
  color: #ef4444;
  transform: rotate(90deg);
}

.payout-detail-modal .modal-body {
  padding: 28px;
  max-height: 70vh;
  overflow-y: auto;
}

/* Status Banner */
.payout-detail-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-radius: 16px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border: 1px solid var(--border-light);
}

.payout-detail-status.pending {
  border-left: 4px solid #f59e0b;
}

.payout-detail-status.processed {
  border-left: 4px solid var(--accent);
}

.payout-detail-status.completed {
  border-left: 4px solid #10b981;
}

.payout-detail-status.failed {
  border-left: 4px solid #ef4444;
}

.status-badge-large {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 40px;
  font-size: 1rem;
  font-weight: 600;
}

.status-badge-large.pending {
  background: #fef3e2;
  color: #b45309;
}

.status-badge-large.processed {
  background: #f2ebe3;
  color: var(--accent);
}

.status-badge-large.completed {
  background: #e3f2e9;
  color: #2f6e4a;
}

.status-badge-large.failed {
  background: #fee2e2;
  color: #ef4444;
}

.payout-id-display {
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--text-soft);
  background: white;
  padding: 6px 16px;
  border-radius: 30px;
  border: 1px solid var(--border-light);
}

/* Detail Grid */
.payout-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 640px) {
  .payout-detail-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.payout-detail-card {
  background: var(--bg);
  border-radius: 20px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all 0.2s ease;
}

.payout-detail-card:hover {
  background: white;
  border-color: var(--accent-light);
  box-shadow: 0 8px 20px -8px rgba(183, 140, 90, 0.1);
}

.payout-detail-card-header {
  background: white;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.95rem;
}

.payout-detail-card-header i {
  color: var(--accent);
  font-size: 0.9rem;
}

.payout-detail-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payout-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-light);
}

.payout-detail-row:last-child {
  border-bottom: none;
}

.payout-detail-label {
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.payout-detail-label i {
  color: var(--accent);
  font-size: 0.75rem;
  width: 16px;
}

.payout-detail-value {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.9rem;
  text-align: right;
  word-break: break-word;
  max-width: 60%;
}

.payout-detail-value.highlight {
  color: var(--accent);
  font-size: 1rem;
}

.payout-detail-value.warning {
  color: #b45309;
}

.payout-detail-value.success {
  color: #2f6e4a;
}

/* Provider Info */
.payout-detail-provider {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-radius: 16px;
  border: 1px solid var(--border-light);
}

.provider-avatar-large {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  flex-shrink: 0;
}

.provider-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.provider-info-large {
  flex: 1;
  min-width: 0;
}

.provider-info-large h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 4px 0;
}

.provider-info-large .provider-email {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.provider-info-large .provider-email i {
  color: var(--accent);
  font-size: 0.8rem;
}

.provider-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
}

.provider-badge.stripe {
  background: #635bff;
  color: white;
}

.provider-badge.banking {
  background: #e3f2e9;
  color: #2f6e4a;
}

.provider-badge i {
  font-size: 0.7rem;
}

/* Timeline */
.payout-timeline {
  margin-top: 24px;
  padding: 20px;
  background: var(--bg);
  border-radius: 16px;
  border: 1px solid var(--border-light);
}

.payout-timeline h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.payout-timeline h4 i {
  color: var(--accent);
  font-size: 0.9rem;
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 4px;
  flex-shrink: 0;
  position: relative;
}

.timeline-dot::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 30px;
  background: var(--border-light);
  left: 5px;
  top: 16px;
}

.timeline-item:last-child .timeline-dot::after {
  display: none;
}

.timeline-dot.pending {
  background: #f59e0b;
}

.timeline-dot.processed {
  background: var(--accent);
}

.timeline-dot.completed {
  background: #10b981;
}

.timeline-content {
  flex: 1;
}

.timeline-text {
  font-size: 0.9rem;
  color: var(--text-dark);
  margin-bottom: 4px;
  font-weight: 500;
}

.timeline-date {
  font-size: 0.7rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 4px;
}

.timeline-date i {
  color: var(--accent-light);
  font-size: 0.6rem;
}

/* Notes Section */
.payout-notes-section {
  margin-top: 20px;
  padding: 20px;
  background: var(--bg);
  border-radius: 16px;
  border: 1px solid var(--border-light);
}

.payout-notes-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.payout-notes-section h4 i {
  color: var(--accent);
  font-size: 0.9rem;
}

.payout-notes-content {
  background: white;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  font-size: 0.9rem;
  color: var(--text-dark);
  line-height: 1.6;
  min-height: 80px;
}

.payout-notes-content.empty {
  color: var(--text-soft);
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

/* Modal Footer */
.payout-detail-modal .modal-footer {
  padding: 20px 28px;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background: white;
}

.payout-detail-modal .btn-primary,
.payout-detail-modal .btn-outline {
  padding: 12px 24px;
  font-size: 0.9rem;
  min-height: 44px;
  border-radius: 40px;
}

@media (max-width: 480px) {
  .payout-detail-modal .modal-footer {
    flex-direction: column;
  }

  .payout-detail-modal .btn-primary,
  .payout-detail-modal .btn-outline {
    width: 100%;
  }
}

/* Loading State */
.payout-detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.payout-detail-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.payout-detail-loading p {
  color: var(--text-soft);
  font-size: 0.95rem;
}
/* ========================================================================
   REPORTS & ANALYTICS - Premium Design
   ======================================================================== */

.reports-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .reports-dashboard {
    padding: 30px;
  }
}

/* Header */
.reports-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

@media (min-width: 640px) {
  .reports-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
  }
}

.reports-title-section {
  flex: 1;
}

.reports-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 4px 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.reports-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.reports-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 12px;
  line-height: 1.5;
}

.reports-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.reports-period-selector {
  display: flex;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  padding: 4px;
  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.05);
}

.reports-period-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
}

.reports-period-btn:hover {
  color: var(--text-dark);
}

.reports-period-btn.active {
  background: var(--accent);
  color: white;
}

.reports-export-btn {
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  transition: all 0.3s ease;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.reports-export-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

/* Summary Cards */
.reports-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.reports-summary-card {
  background: white;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.reports-summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.reports-summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(183, 140, 90, 0.15);
  border-color: var(--accent);
}

.reports-summary-card:hover::before {
  opacity: 1;
}

.reports-summary-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    rgba(183, 140, 90, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.6rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.reports-summary-card:hover .reports-summary-icon {
  background: var(--accent);
  color: white;
  transform: scale(1.05);
}

.reports-summary-content {
  flex: 1;
  min-width: 0;
}

.reports-summary-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 4px;
}

.reports-summary-label {
  font-size: 0.75rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

.reports-summary-trend {
  font-size: 0.7rem;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 30px;
  background: var(--bg);
}

.reports-summary-trend.positive {
  color: var(--success);
  background: var(--success-light);
}

.reports-summary-trend.negative {
  color: var(--danger);
  background: var(--danger-light);
}

/* Charts Grid */
.reports-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .reports-charts-grid {
    grid-template-columns: 1fr;
  }
}

.reports-chart-card {
  background: white;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.reports-chart-card:hover {
  box-shadow: 0 16px 30px -12px rgba(183, 140, 90, 0.1);
  border-color: var(--accent-light);
}

.reports-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-light);
}

.reports-chart-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.reports-chart-header h3 i {
  color: var(--accent);
  font-size: 0.9rem;
}

.reports-chart-header .chart-legend {
  display: flex;
  gap: 15px;
  font-size: 0.75rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 4px;
}

.legend-color.fees {
  background: var(--accent);
}

.legend-color.releases {
  background: #10b981;
}

.legend-color.holds {
  background: #f59e0b;
}

.legend-color.users {
  background: #3b82f6;
}

.reports-chart-container {
  height: 300px;
  position: relative;
}

/* Tables Grid */
.reports-tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

@media (max-width: 768px) {
  .reports-tables-grid {
    grid-template-columns: 1fr;
  }
}

.reports-table-card {
  background: white;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
}

.reports-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-light);
}

.reports-table-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.reports-table-header h3 i {
  color: var(--accent);
  font-size: 0.9rem;
}

.reports-table-header .view-all-link {
  color: var(--accent);
  font-size: 0.8rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.reports-table-header .view-all-link:hover {
  text-decoration: underline;
}

.reports-mini-table {
  width: 100%;
  border-collapse: collapse;
}

.reports-mini-table th {
  text-align: left;
  padding: 10px 0;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-light);
}

.reports-mini-table td {
  padding: 12px 0;
  font-size: 0.85rem;
  color: var(--text-dark);
  border-bottom: 1px solid var(--border-light);
}

.reports-mini-table tr:last-child td {
  border-bottom: none;
}

.reports-mini-table .amount {
  font-weight: 600;
  color: var(--accent);
}

.reports-mini-table .badge {
  padding: 3px 8px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--bg);
  color: var(--text-soft);
}

.reports-mini-table .badge.service {
  background: #f2ebe3;
  color: var(--accent);
}

.reports-mini-table .badge.product {
  background: #e1f0fa;
  color: #1e4a6b;
}

/* Top Items Grid */
.reports-top-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.reports-top-card {
  background: white;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
}

.reports-top-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-light);
}

.reports-top-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    rgba(183, 140, 90, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.2rem;
}

.reports-top-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.reports-top-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reports-top-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

.reports-top-item:last-child {
  border-bottom: none;
}

.top-item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.top-item-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}

.top-item-details {
  min-width: 0;
}

.top-item-name {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.9rem;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-item-meta {
  font-size: 0.7rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-item-value {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Quick Stats */
.reports-quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin: 30px 0;
}

.reports-quick-stat {
  background: white;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
}

.reports-quick-stat:hover {
  transform: translateY(-2px);
  border-color: var(--accent-light);
  box-shadow: 0 8px 16px -8px rgba(183, 140, 90, 0.1);
}

.reports-quick-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.1rem;
}

.reports-quick-content {
  flex: 1;
}

.reports-quick-value {
  font-weight: 700;
  color: var(--text-dark);
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.reports-quick-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Loading State */
.reports-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--text-soft);
}

.reports-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .reports-period-selector {
    width: 100%;
    justify-content: center;
  }

  .reports-period-btn {
    flex: 1;
    text-align: center;
  }

  .reports-export-btn {
    width: 100%;
    justify-content: center;
  }

  .reports-chart-container {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .reports-summary-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .reports-chart-container {
    height: 220px;
  }

  .reports-top-grid {
    grid-template-columns: 1fr;
  }

  .reports-quick-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* Animations */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
/* ========================================================================
   CATEGORY MANAGEMENT - Premium Design
   ======================================================================== */

.categories-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .categories-dashboard {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .categories-dashboard {
    padding: 0;
  }
}

/* Header */
.categories-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

@media (min-width: 640px) {
  .categories-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
  }
}

.categories-title-section {
  flex: 1;
}

.categories-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 4px 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.categories-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.categories-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 12px;
  line-height: 1.5;
}

.categories-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.categories-actions .btn-primary {
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--text-dark);
  color: white;
  border: none;
  transition: all 0.3s ease;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.categories-actions .btn-primary:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

.categories-actions .btn-outline {
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  transition: all 0.3s ease;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.05);
}

.categories-actions .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

/* Filter Bar */
.categories-filter-bar {
  background: white;
  border-radius: 60px;
  padding: 12px 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: stretch;
  width: 100%;
}

@media (min-width: 768px) {
  .categories-filter-bar {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    border-radius: 60px;
  }
}

.categories-search-wrapper {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.categories-search-wrapper i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 1;
}

.categories-search-wrapper input {
  width: 100%;
  padding: 12px 20px 12px 45px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.9rem;
  background: var(--bg);
  transition: all 0.2s;
  min-height: 44px;
}

.categories-search-wrapper input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
  background: white;
}

.categories-search-wrapper input::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
}

.categories-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .categories-filter-group {
    width: auto;
    gap: 12px;
  }
}

.categories-filter-select-wrapper {
  position: relative;
  flex: 1;
  min-width: 120px;
}

@media (min-width: 768px) {
  .categories-filter-select-wrapper {
    flex: 0 1 auto;
    min-width: 140px;
  }
}

.categories-filter-select {
  width: 100%;
  padding: 12px 35px 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  background: var(--bg);
  min-height: 44px;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e5a58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  transition: all 0.2s;
}

.categories-filter-select:hover {
  border-color: var(--accent);
}

.categories-filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
}

/* Stats Cards */
.categories-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 767px) {
  .categories-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }

  .categories-stat-card {
    padding: 14px;
    border-radius: 16px;
  }

  .categories-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 1rem;
  }

  .categories-stat-value {
    font-size: 1.2rem;
  }

  .categories-stat-label {
    font-size: 0.62rem;
  }
}

.categories-stat-card {
  background: white;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.categories-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.categories-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(183, 140, 90, 0.15);
  border-color: var(--accent);
}

.categories-stat-card:hover::before {
  opacity: 1;
}

.categories-stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    rgba(183, 140, 90, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.5rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.categories-stat-card:hover .categories-stat-icon {
  background: var(--accent);
  color: white;
  transform: scale(1.05);
}

.categories-stat-content {
  flex: 1;
  min-width: 0;
}

.categories-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 2px;
}

.categories-stat-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

/* Categories Grid */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.category-card {
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(183, 140, 90, 0.15);
  border-color: var(--accent);
}

.category-card.service {
  border-top: 4px solid var(--accent);
}

.category-card.product {
  border-top: 4px solid #3b82f6;
}

.category-card.both {
  border-top: 4px solid linear-gradient(90deg, var(--accent), #3b82f6);
}

.category-image {
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: var(--bg);
}

.category-image-placeholder {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg, var(--bg) 0%, white 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  font-size: 2rem;
  border-bottom: 1px solid var(--border-light);
}

.category-content {
  padding: 18px 20px;
  flex: 1;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.category-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.3;
}

.category-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.category-type-badge.service {
  background: #f2ebe3;
  color: var(--accent);
}

.category-type-badge.product {
  background: #e1f0fa;
  color: #1e4a6b;
}

.category-type-badge.both {
  background: linear-gradient(135deg, #f2ebe3 0%, #e1f0fa 100%);
  color: var(--text-dark);
}

.category-description {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin: 10px 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-meta {
  display: flex;
  gap: 15px;
  margin: 12px 0;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.category-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.category-meta i {
  color: var(--accent);
  font-size: 0.7rem;
}

.category-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: var(--bg);
  border-top: 1px solid var(--border-light);
}

.category-sort,
.category-drag-handle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.category-sort i {
  color: var(--accent);
  font-size: 0.7rem;
}

.category-actions {
  display: flex;
  gap: 8px;
}

.category-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: white;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.category-action-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
}

.category-action-btn.edit:hover {
  background: #3b82f6;
  border-color: #3b82f6;
}

.category-action-btn.delete:hover {
  background: #ef4444;
  border-color: #ef4444;
}

/* ========================================================================
   CATEGORY CARDS — Mobile Responsive
   ======================================================================== */

@media (max-width: 767px) {
  /* Two columns, flush with screen edges */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
    /* Pull the grid outside admin-content's 12px padding */
    margin-left: -12px;
    margin-right: -12px;
    width: calc(100% + 24px);
  }

  /* Cards fill their grid cell — override the fixed 200px width */
  .categories-grid .category-card-wrapper {
    width: 100% !important;
    min-width: 0 !important;
  }

  .category-card {
    min-width: 0;
    border-radius: 14px;
  }

  /* Reduce image banner height */
  .category-image,
  .category-image-placeholder {
    height: 90px;
  }

  .category-image-placeholder {
    font-size: 1.4rem;
  }

  /* Compact content area */
  .category-content {
    padding: 10px 12px;
  }

  .category-header {
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }

  .category-header h3 {
    font-size: 0.88rem;
    flex: 1 1 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .category-type-badge {
    font-size: 0.58rem;
    padding: 2px 7px;
  }

  .category-meta {
    gap: 6px;
    margin: 6px 0;
    font-size: 0.7rem;
    flex-wrap: wrap;
  }

  /* Compact footer */
  .category-footer {
    padding: 8px 10px;
    gap: 4px;
    flex-wrap: wrap;
  }

  .drag-order-label {
    display: none;
  }

  /* Tighter action buttons */
  .category-actions {
    gap: 4px;
  }

  .category-action-btn {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
  }
}

@media (max-width: 480px) {
  /* Extra-compact on very small screens */
  .categories-grid {
    gap: 10px;
    margin-top: 10px;
  }

  .category-image,
  .category-image-placeholder {
    height: 90px;
  }

  .category-image-placeholder {
    font-size: 1.3rem;
  }

  .category-content {
    padding: 12px 14px;
  }

  .category-header h3 {
    font-size: 0.92rem;
  }

  .category-type-badge {
    font-size: 0.6rem;
    padding: 3px 8px;
  }

  .category-meta {
    font-size: 0.7rem;
    gap: 8px;
  }

  .category-footer {
    padding: 8px 14px;
  }

  .category-action-btn {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }
}

/* Category Modal */
.category-modal .modal-content {
  max-width: 500px;
}

.category-form .form-group {
  margin-bottom: 20px;
}

.category-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.category-form .form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 0.9rem;
  transition: all 0.2s;
  background: white;
}

.category-form .form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
}

.category-form .form-control.error {
  border-color: var(--danger);
}

.category-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

@media (max-width: 480px) {
  .category-form .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.category-form .field-hint {
  display: block;
  font-size: 0.7rem;
  color: var(--text-soft);
  margin-top: 4px;
}

.category-form .error-message {
  color: var(--danger);
  font-size: 0.8rem;
  margin-top: 4px;
}

/* Image Upload */
.category-image-upload {
  border: 2px dashed var(--border-light);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 15px;
}

.category-image-upload:hover {
  border-color: var(--accent);
  background: var(--bg);
}

.category-image-upload i {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 10px;
}

.category-image-upload p {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin: 0;
}

.category-image-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 15px;
}

.category-image-preview img {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
}

.category-image-preview .remove-image {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.category-image-preview .remove-image:hover {
  background: #ef4444;
  transform: scale(1.1);
}

/* Empty State */
.categories-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
  grid-column: 1 / -1;
}

.categories-empty-illustration {
  width: 80px;
  height: 80px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--accent);
  font-size: 2rem;
  animation: float 3s ease-in-out infinite;
}

.categories-empty-state h4 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 8px;
  font-weight: 600;
}

.categories-empty-state p {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin: 0 0 20px 0;
}

/* Loading State */
.categories-loading {
  text-align: center;
  padding: 60px 20px;
  grid-column: 1 / -1;
}

.categories-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

.categories-loading p {
  color: var(--text-soft);
  font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .categories-filter-bar {
    padding: 15px;
    border-radius: 20px;
  }

  .categories-filter-group {
    flex-direction: column;
    width: 100%;
  }

  .categories-filter-select-wrapper {
    width: 100%;
  }

  .categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .categories-stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .categories-grid {
    grid-template-columns: 1fr;
  }

  .category-header {
    flex-direction: column;
    gap: 8px;
  }

  .category-type-badge {
    align-self: flex-start;
  }

  .category-footer {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .category-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Animations */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
/* ========================================================================
   LISTINGS MODERATION - Premium Design
   ======================================================================== */

.listings-moderation-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .listings-moderation-dashboard {
    padding: 30px;
  }
}

/* Header */
.listings-moderation-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

@media (min-width: 640px) {
  .listings-moderation-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
  }
}

.listings-moderation-title-section {
  flex: 1;
}

.listings-moderation-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 4px 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.listings-moderation-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.listings-moderation-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 12px;
  line-height: 1.5;
}

.listings-moderation-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.listings-moderation-actions .btn-outline {
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  transition: all 0.3s ease;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.listings-moderation-actions .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

/* Stats Cards */
.listings-moderation-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.listings-moderation-stat-card {
  background: white;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.listings-moderation-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.listings-moderation-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(183, 140, 90, 0.15);
  border-color: var(--accent);
}

.listings-moderation-stat-card:hover::before {
  opacity: 1;
}

.listings-moderation-stat-card.active-filter {
  border-color: var(--accent);
  background: #f2ebe3;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(183, 140, 90, 0.2);
}

.listings-moderation-stat-card.active-filter .listings-moderation-stat-icon {
  background: var(--accent);
  color: white;
}

.listings-moderation-stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    rgba(183, 140, 90, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.5rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.listings-moderation-stat-card:hover .listings-moderation-stat-icon {
  background: var(--accent);
  color: white;
  transform: scale(1.05);
}

.listings-moderation-stat-content {
  flex: 1;
  min-width: 0;
}

.listings-moderation-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 2px;
}

.listings-moderation-stat-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

/* Filters Bar */
.listings-moderation-filters-bar {
  background: white;
  border-radius: 60px;
  padding: 12px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: stretch;
  width: 100%;
}

@media (min-width: 768px) {
  .listings-moderation-filters-bar {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    border-radius: 60px;
  }
}

.listings-moderation-search-wrapper {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.listings-moderation-search-wrapper i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 1;
}

.listings-moderation-search-wrapper input {
  width: 100%;
  padding: 12px 20px 12px 45px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.9rem;
  background: var(--bg);
  transition: all 0.2s;
  min-height: 44px;
}

.listings-moderation-search-wrapper input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
  background: white;
}

.listings-moderation-search-wrapper input::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
}

.listings-moderation-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .listings-moderation-filter-group {
    width: auto;
    gap: 12px;
  }
}

.listings-moderation-filter-select-wrapper {
  position: relative;
  flex: 1;
  min-width: 120px;
}

@media (min-width: 768px) {
  .listings-moderation-filter-select-wrapper {
    flex: 0 1 auto;
    min-width: 140px;
  }
}

.listings-moderation-filter-select {
  width: 100%;
  padding: 12px 35px 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  background: var(--bg);
  min-height: 44px;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e5a58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  transition: all 0.2s;
}

.listings-moderation-filter-select:hover {
  border-color: var(--accent);
}

.listings-moderation-filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
}

.listings-moderation-btn-primary {
  padding: 12px 24px;
  border-radius: 40px;
  background: var(--text-dark);
  color: white;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  min-height: 44px;
  font-size: 0.9rem;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.1);
}

.listings-moderation-btn-primary:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

.listings-moderation-btn-outline {
  padding: 12px 24px;
  border-radius: 40px;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  min-height: 44px;
  font-size: 0.9rem;
}

.listings-moderation-btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

/* Active Filters Tags */
.listings-moderation-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 20px;
}

.listings-moderation-filter-tag {
  background: linear-gradient(135deg, var(--bg) 0%, white 100%);
  border: 1px solid var(--accent-light);
  border-radius: 40px;
  padding: 6px 14px 6px 16px;
  font-size: 0.8rem;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: tagPop 0.3s ease;
  font-weight: 500;
}

.listings-moderation-filter-tag i {
  color: var(--accent);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  padding: 2px;
}

.listings-moderation-filter-tag i:hover {
  color: var(--danger);
  transform: scale(1.2);
}

/* Listings Grid */
.listings-moderation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .listings-moderation-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.listing-moderation-card {
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
}

.listing-moderation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(183, 140, 90, 0.15);
  border-color: var(--accent);
}

.listing-moderation-card.service {
  border-top: 4px solid var(--accent);
}

.listing-moderation-card.product {
  border-top: 4px solid #3b82f6;
}

.listing-moderation-media {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--bg);
}

.listing-moderation-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.listing-moderation-card:hover .listing-moderation-media img {
  transform: scale(1.05);
}

.listing-moderation-media .no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg) 0%, white 100%);
  color: var(--text-soft);
  font-size: 3rem;
}

.listing-moderation-type-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.listing-moderation-type-badge.service {
  color: var(--accent);
}

.listing-moderation-type-badge.product {
  color: #3b82f6;
}

.listing-moderation-content {
  padding: 20px;
  flex: 1;
}

.listing-moderation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 10px;
}

.listing-moderation-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.3;
  flex: 1;
}

.listing-moderation-price {
  font-weight: 700;
  color: var(--accent);
  font-size: 1rem;
  white-space: nowrap;
  background: #f2ebe3;
  padding: 4px 10px;
  border-radius: 30px;
}

.listing-moderation-description {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin: 12px 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing-moderation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 15px 0;
  font-size: 0.8rem;
  color: var(--text-soft);
  padding: 12px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.listing-moderation-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.listing-moderation-meta i {
  color: var(--accent);
  font-size: 0.75rem;
  width: 16px;
}

.listing-moderation-provider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
}

.provider-avatar-small {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.provider-avatar-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.provider-info-small {
  flex: 1;
  min-width: 0;
}

.provider-name {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.85rem;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-business {
  font-size: 0.7rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-moderation-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--bg);
  border-radius: 30px;
  font-size: 0.7rem;
  color: var(--text-soft);
  margin-bottom: 15px;
}

.listing-moderation-category i {
  color: var(--accent);
  font-size: 0.65rem;
}

.listing-moderation-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border-light);
}

.listing-moderation-actions .btn-primary,
.listing-moderation-actions .btn-outline {
  flex: 1;
  padding: 10px 16px;
  font-size: 0.8rem;
  min-height: 40px;
}

.listing-moderation-actions .btn-primary {
  background: var(--accent);
  color: white;
}

.listing-moderation-actions .btn-primary:hover {
  background: #9a7a4e;
}

.listing-moderation-actions .btn-outline.danger {
  border-color: var(--danger);
  color: var(--danger);
}

.listing-moderation-actions .btn-outline.danger:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

/* Rejection Notes */
.listing-moderation-rejection-notes {
  margin-top: 15px;
  padding: 12px;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 12px;
  display: none;
}

.listing-moderation-rejection-notes textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #feb2b2;
  border-radius: 8px;
  font-size: 0.8rem;
  resize: vertical;
  min-height: 60px;
  margin-bottom: 10px;
  background: white;
}

.listing-moderation-rejection-notes textarea:focus {
  outline: none;
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.rejection-actions {
  display: flex;
  gap: 8px;
}

.rejection-actions .btn-primary.danger {
  background: var(--danger);
  color: white;
  flex: 1;
}

.rejection-actions .btn-outline {
  flex: 1;
}

/* Empty State */
.listings-moderation-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
  grid-column: 1 / -1;
}

.listings-moderation-empty-illustration {
  width: 80px;
  height: 80px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--accent);
  font-size: 2rem;
  animation: float 3s ease-in-out infinite;
}

.listings-moderation-empty-state h4 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 8px;
  font-weight: 600;
}

.listings-moderation-empty-state p {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin: 0;
}

/* Loading State */
.listings-moderation-loading {
  text-align: center;
  padding: 60px 20px;
  grid-column: 1 / -1;
}

.listings-moderation-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

.listings-moderation-loading p {
  color: var(--text-soft);
  font-size: 0.9rem;
}

/* Detail Modal */
.listing-detail-modal .modal-content {
  max-width: 800px;
}

.listing-detail-header {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-radius: 16px;
  border: 1px solid var(--border-light);
}

.listing-detail-image {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
}

.listing-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-detail-image .no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  font-size: 2rem;
}

.listing-detail-info {
  flex: 1;
  min-width: 0;
}

.listing-detail-info h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 8px 0;
}

.listing-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 12px 0;
}

.listing-detail-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.listing-detail-meta i {
  color: var(--accent);
  font-size: 0.8rem;
  width: 16px;
}

.listing-detail-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 8px;
}

.listing-detail-section {
  margin-bottom: 24px;
}

.listing-detail-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.listing-detail-section h4 i {
  color: var(--accent);
  font-size: 0.9rem;
}

.listing-detail-description {
  background: var(--bg);
  padding: 16px;
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--text-dark);
  line-height: 1.6;
  border: 1px solid var(--border-light);
}

.listing-detail-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.listing-detail-media-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.2s ease;
}

.listing-detail-media-item:hover {
  transform: scale(1.05);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.1);
}

.listing-detail-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Animations */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes tagPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .listings-moderation-filters-bar {
    padding: 15px;
    border-radius: 20px;
  }

  .listings-moderation-filter-group {
    flex-direction: column;
    width: 100%;
  }

  .listings-moderation-filter-select-wrapper {
    width: 100%;
  }

  .listings-moderation-btn-primary,
  .listings-moderation-btn-outline {
    width: 100%;
    justify-content: center;
  }

  .listing-detail-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .listing-detail-meta {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .listings-moderation-stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .listing-moderation-actions {
    flex-direction: column;
  }

  .listing-moderation-actions .btn-primary,
  .listing-moderation-actions .btn-outline {
    width: 100%;
  }
}
/* ========================================================================
   SYSTEM SETTINGS - Premium Design
   ======================================================================== */

.settings-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .settings-dashboard {
    padding: 30px;
  }
}

/* Header */
.settings-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

@media (min-width: 640px) {
  .settings-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
  }
}

.settings-title-section {
  flex: 1;
}

.settings-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 4px 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.settings-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.settings-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 12px;
  line-height: 1.5;
}

.settings-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-actions .btn-outline {
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  transition: all 0.3s ease;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.settings-actions .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

/* Settings Grid */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Settings Card */
.settings-card {
  background: white;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.settings-card:hover {
  box-shadow: 0 16px 30px -12px rgba(183, 140, 90, 0.1);
  border-color: var(--accent-light);
}

.settings-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.settings-card-header i {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    rgba(183, 140, 90, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.2rem;
}

.settings-card-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  flex: 1;
}

.settings-card-header .badge {
  background: var(--accent);
  color: white;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Setting Rows */
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
  gap: 20px;
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-row label {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.9rem;
  min-width: 140px;
}

.setting-row .value {
  color: var(--text-soft);
  font-size: 0.9rem;
}

.setting-row .form-control {
  width: 200px;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 0.9rem;
  transition: all 0.2s;
  background: var(--bg);
  color: var(--text-dark);
}

.setting-row .form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
  background: white;
}

.setting-row .form-control[type="number"] {
  width: 120px;
}

.setting-row textarea.form-control {
  width: 300px;
  resize: vertical;
  min-height: 80px;
  font-family: monospace;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .setting-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .setting-row .form-control,
  .setting-row textarea.form-control {
    width: 100%;
  }
}

/* Toggle Switch */
.setting-row.toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-light);
  transition: 0.3s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input:checked + .slider {
  background-color: var(--accent);
}

input:checked + .slider:before {
  transform: translateX(24px);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--accent);
}

/* Field Hint */
.field-hint {
  display: block;
  font-size: 0.7rem;
  color: var(--text-soft);
  margin-top: 4px;
  margin-left: 2px;
}

/* Settings Actions Footer */
.settings-actions-footer {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

.settings-actions-footer .btn-primary,
.settings-actions-footer .btn-outline {
  padding: 12px 28px;
  font-size: 0.95rem;
  min-height: 48px;
}

@media (max-width: 480px) {
  .settings-actions-footer {
    flex-direction: column;
  }

  .settings-actions-footer button {
    width: 100%;
  }
}

/* Info Cards */
.settings-info-card {
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-radius: 20px;
  padding: 20px;
  border: 1px solid var(--border-light);
  margin-top: 20px;
}

.settings-info-card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-info-card h4 i {
  color: var(--accent);
  font-size: 0.9rem;
}

.settings-info-card p {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.settings-info-card .info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-light);
}

.settings-info-card .info-row:last-child {
  border-bottom: none;
}

.settings-info-card .info-label {
  color: var(--text-soft);
  font-size: 0.8rem;
}

.settings-info-card .info-value {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.85rem;
}

/* Loading State */
.settings-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--text-soft);
}

.settings-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

/* Error State */
.settings-error {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
}

.settings-error i {
  font-size: 3rem;
  color: var(--danger);
  margin-bottom: 20px;
}

.settings-error h3 {
  font-size: 1.3rem;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.settings-error p {
  color: var(--text-soft);
  margin-bottom: 25px;
}

/* Success Message */
.settings-success-message {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--success);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10000;
  animation: slideInRight 0.3s ease;
}

.settings-success-message i {
  font-size: 1.2rem;
}

.settings-success-message.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ========================================================================
   BROADCAST MODAL - PREMIUM DESIGN
   ======================================================================== */

.broadcast-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
  animation: broadcastFadeIn 0.3s ease;
}

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

.broadcast-content {
  background: white;
  border-radius: 32px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.3);
  animation: broadcastSlideUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
}

@keyframes broadcastSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Header */
.broadcast-header {
  padding: 24px 28px 20px 28px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-radius: 32px 32px 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.broadcast-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.broadcast-title i {
  color: var(--accent);
  font-size: 1.5rem;
  background: rgba(183, 140, 90, 0.1);
  padding: 10px;
  border-radius: 50%;
}

.broadcast-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--text-soft);
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  background: var(--bg);
}

.broadcast-close:hover {
  background: #fee2e2;
  color: #ef4444;
  transform: rotate(90deg);
}

/* Modal Body */
.broadcast-body {
  padding: 28px;
  flex: 1;
  overflow-y: auto;
  background: white;
}

/* Intro Section */
.broadcast-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f2ebe3 0%, white 100%);
  border-radius: 20px;
  margin-bottom: 24px;
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

.broadcast-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

.intro-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    var(--accent) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.3);
}

.intro-text h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 4px 0;
}

.intro-text p {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
}

/* Form Sections */
.broadcast-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-section {
  background: var(--bg);
  border-radius: 20px;
  padding: 20px;
  border: 1px solid var(--border-light);
}

.broadcast-group {
  margin-bottom: 20px;
}

.broadcast-group:last-child {
  margin-bottom: 0;
}

.broadcast-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.broadcast-group label i {
  color: var(--accent);
  font-size: 0.85rem;
}

.required {
  color: #ef4444;
  margin-left: 2px;
}

/* Form Inputs */
.broadcast-input,
.broadcast-select,
.broadcast-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 0.9rem;
  transition: all 0.2s;
  background: white;
  font-family: var(--font-sans);
}

.broadcast-input:focus,
.broadcast-select:focus,
.broadcast-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
}

.broadcast-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Character Counter */
.char-counter {
  text-align: right;
  font-size: 0.7rem;
  color: var(--text-soft);
  margin-top: 4px;
}

.char-counter span {
  font-weight: 600;
  color: var(--accent);
}

/* Target Selector */
.target-selector {
  background: white;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--border-light);
}

.target-option {
  margin-bottom: 10px;
}

.target-option.all-users {
  background: linear-gradient(135deg, #f2ebe3 0%, white 100%);
  border-radius: 12px;
  padding: 4px;
}

.target-option input[type="checkbox"] {
  display: none;
}

.target-option label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  margin: 0;
  border: 1px solid transparent;
}

.target-option.all-users label {
  background: white;
  border-color: var(--accent-light);
}

.target-option label i {
  width: 20px;
  font-size: 1rem;
  color: var(--accent);
}

.target-option label span {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-dark);
}

.target-option input[type="checkbox"]:checked + label {
  background: var(--accent);
  border-color: var(--accent);
}

.target-option input[type="checkbox"]:checked + label i,
.target-option input[type="checkbox"]:checked + label span {
  color: white;
}

.target-option.all-users input[type="checkbox"]:checked + label {
  background: var(--accent);
}

.target-divider {
  text-align: center;
  margin: 16px 0;
  position: relative;
}

.target-divider span {
  background: white;
  padding: 0 12px;
  color: var(--text-soft);
  font-size: 0.8rem;
  position: relative;
  z-index: 2;
}

.target-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-light);
  z-index: 1;
}

.target-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .target-grid {
    grid-template-columns: 1fr;
  }
}

.target-option.customers label i {
  color: #3b82f6;
}

.target-option.providers label i {
  color: var(--accent);
}

.target-option.freelancers label i {
  color: #10b981;
}

.target-option.manufacturers label i {
  color: #8b5cf6;
}

.target-option.companies label i {
  color: #f59e0b;
}

.target-option input[type="checkbox"]:checked + label i {
  color: white;
}

/* Preview Section */
.preview-section {
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-radius: 20px;
  padding: 20px;
  border: 1px solid var(--border-light);
  margin-top: 8px;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--text-dark);
  font-weight: 500;
}

.preview-header i {
  color: var(--accent);
  font-size: 1rem;
}

.preview-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 16px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.2s;
}

.preview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(183, 140, 90, 0.1);
  border-color: var(--accent-light);
}

.preview-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    var(--accent) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.preview-content {
  flex: 1;
  min-width: 0;
}

.preview-title {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-message {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin-bottom: 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preview-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.7rem;
}

.preview-type {
  color: var(--accent);
  background: #f2ebe3;
  padding: 2px 8px;
  border-radius: 30px;
  font-weight: 500;
}

.preview-time {
  color: var(--text-soft);
}

/* Modal Footer */
.broadcast-footer {
  padding: 20px 28px 28px 28px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border-radius: 0 0 32px 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 0.85rem;
  background: var(--bg);
  padding: 8px 16px;
  border-radius: 40px;
}

.footer-stats i {
  color: var(--accent);
}

.footer-stats strong {
  color: var(--accent);
  font-weight: 600;
}

.footer-actions {
  display: flex;
  gap: 12px;
}

/* Buttons */
.broadcast-footer .btn-outline,
.broadcast-footer .btn-primary {
  padding: 12px 24px;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.broadcast-footer .btn-outline {
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
}

.broadcast-footer .btn-outline:hover {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.broadcast-footer .btn-primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.3);
}

.broadcast-footer .btn-primary:hover {
  background: #9a7a4e;
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -8px rgba(183, 140, 90, 0.4);
}

.broadcast-footer .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ========================================================================
   RESPONSIVE DESIGN
   ======================================================================== */

@media (max-width: 640px) {
  .broadcast-content {
    max-width: 100%;
    border-radius: 24px;
  }

  .broadcast-header {
    padding: 20px;
  }

  .broadcast-title {
    font-size: 1.2rem;
  }

  .broadcast-title i {
    font-size: 1.2rem;
    padding: 8px;
  }

  .broadcast-body {
    padding: 20px;
  }

  .broadcast-intro {
    padding: 12px 16px;
  }

  .intro-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .intro-text h4 {
    font-size: 0.9rem;
  }

  .intro-text p {
    font-size: 0.8rem;
  }

  .form-section {
    padding: 16px;
  }

  .preview-card {
    padding: 12px;
    gap: 12px;
  }

  .preview-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .preview-title {
    font-size: 0.9rem;
  }

  .preview-message {
    font-size: 0.8rem;
  }

  .broadcast-footer {
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
  }

  .footer-stats {
    justify-content: center;
  }

  .footer-actions {
    flex-direction: column-reverse;
  }

  .footer-actions button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .broadcast-header {
    padding: 16px;
  }

  .broadcast-close {
    width: 40px;
    height: 40px;
  }

  .broadcast-body {
    padding: 16px;
  }

  .broadcast-intro {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .target-grid {
    grid-template-columns: 1fr;
  }

  .preview-card {
    flex-direction: column;
    text-align: center;
  }

  .preview-icon {
    margin: 0 auto;
  }

  .preview-meta {
    justify-content: center;
  }
}

/* ========================================================================
   ANIMATIONS
   ======================================================================== */

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.broadcast-title i {
  animation: pulse 2s ease-in-out infinite;
}
/* ========================================================================
   SUBCATEGORIES CONTAINER - Row Layout (Horizontal)
   ======================================================================== */

/* Subcategories Container - Now horizontal scrolling row */
.subcategories-container {
  display: none;
  margin: 15px 0 10px 30px;
  padding: 5px 0 10px 0;
  position: relative;
  animation: slideDown 0.25s ease;
  transition: all 0.2s ease;
  width: 100%;
}

.subcategories-container.expanded {
  display: block;
}

/* Horizontal scrollable row for subcategory cards */
.subcategories-row {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 12px;
  padding: 8px 4px 15px 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--border-light);
  width: 100%;
  position: relative;
}

/* Custom scrollbar for webkit browsers */
.subcategories-row::-webkit-scrollbar {
  height: 4px;
}

.subcategories-row::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 4px;
}

.subcategories-row::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.subcategories-row::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dark);
}

/* Subcategory Card Wrapper - Now horizontal cards */
.category-card-wrapper {
  position: relative;
  flex: 0 0 auto;
  width: 280px; /* Fixed width for cards */
  scroll-snap-align: start;
  margin-bottom: 0;
  transition: all 0.2s ease;
}

/* Category Card - Redesigned for horizontal layout */
.category-card[data-level="1"],
.category-card[data-level="2"],
.category-card[data-level="3"] {
  margin-left: 0 !important;
  border-left: 3px solid var(--accent-light) !important;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(183, 140, 90, 0.02), white);
  padding: 16px;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.08);
  transform: scale(1);
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-left-width: 3px !important;
}

.category-card[data-level="2"] {
  background: linear-gradient(135deg, rgba(183, 140, 90, 0.04), white);
}

.category-card[data-level="3"] {
  background: linear-gradient(135deg, rgba(183, 140, 90, 0.06), white);
}

/* Hover effect for horizontal cards */
.category-card[data-level="1"]:hover,
.category-card[data-level="2"]:hover,
.category-card[data-level="3"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -12px rgba(183, 140, 90, 0.2);
  border-left-color: var(--accent);
  border-color: var(--accent-light);
  background: white;
}

/* Card content layout */
.category-card[data-level="1"] .category-content,
.category-card[data-level="2"] .category-content,
.category-card[data-level="3"] .category-content {
  padding: 0;
  flex: 1;
}

/* Header with title and type badge */
.category-card[data-level="1"] .category-header,
.category-card[data-level="2"] .category-header,
.category-card[data-level="3"] .category-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 8px;
}

.category-card[data-level="1"] h3,
.category-card[data-level="2"] h3,
.category-card[data-level="3"] h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Type badge positioning */
.category-card[data-level="1"] .category-type-badge,
.category-card[data-level="2"] .category-type-badge,
.category-card[data-level="3"] .category-type-badge {
  font-size: 0.6rem;
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Meta information - compact */
.category-card[data-level="1"] .category-meta,
.category-card[data-level="2"] .category-meta,
.category-card[data-level="3"] .category-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
  font-size: 0.7rem;
  color: var(--text-soft);
}

.category-card[data-level="1"] .category-meta span,
.category-card[data-level="2"] .category-meta span,
.category-card[data-level="3"] .category-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Description - truncated */
.category-card[data-level="1"] .category-description,
.category-card[data-level="2"] .category-description,
.category-card[data-level="3"] .category-description {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin: 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer with actions */
.category-card[data-level="1"] .category-footer,
.category-card[data-level="2"] .category-footer,
.category-card[data-level="3"] .category-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--border-light);
}

.category-card[data-level="1"] .category-sort,
.category-card[data-level="2"] .category-sort,
.category-card[data-level="3"] .category-sort {
  font-size: 0.65rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 4px;
}

.category-card[data-level="1"] .category-sort i,
.category-card[data-level="2"] .category-sort i,
.category-card[data-level="3"] .category-sort i {
  color: var(--accent);
  font-size: 0.6rem;
}

/* Action buttons - compact */
.category-card[data-level="1"] .category-actions,
.category-card[data-level="2"] .category-actions,
.category-card[data-level="3"] .category-actions {
  display: flex;
  gap: 4px;
}

.category-card[data-level="1"] .category-action-btn,
.category-card[data-level="2"] .category-action-btn,
.category-card[data-level="3"] .category-action-btn {
  width: 30px;
  height: 30px;
  font-size: 0.75rem;
  border-radius: 8px;
  background: white;
}

/* Image styling for horizontal cards */
.category-card[data-level="1"] .category-image,
.category-card[data-level="2"] .category-image,
.category-card[data-level="3"] .category-image {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  margin-right: 12px;
  float: left;
  shape-outside: circle();
}

.category-card[data-level="1"] .category-image-placeholder,
.category-card[data-level="2"] .category-image-placeholder,
.category-card[data-level="3"] .category-image-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  font-size: 1.5rem;
  float: left;
  margin-right: 12px;
}

/* Clear float after image */
.category-card[data-level="1"]::after,
.category-card[data-level="2"]::after,
.category-card[data-level="3"]::after {
  content: "";
  display: table;
  clear: both;
}

/* Expand badge */
.category-card[data-level="1"] .expand-badge,
.category-card[data-level="2"] .expand-badge,
.category-card[data-level="3"] .expand-badge {
  min-width: 16px;
  height: 16px;
  font-size: 0.55rem;
  top: -4px;
  right: -4px;
}

/* Collapsed indicator - now also horizontal */
.subcategories-collapsed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 10px 45px;
  padding: 6px 16px;
  background: var(--bg);
  border-radius: 30px;
  font-size: 0.75rem;
  color: var(--accent);
  cursor: pointer;
  width: fit-content;
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px -3px rgba(0, 0, 0, 0.05);
}

.subcategories-collapsed:hover {
  background: white;
  border-color: var(--accent);
  transform: translateX(5px);
  box-shadow: 0 4px 10px -5px rgba(183, 140, 90, 0.15);
}

.subcategories-collapsed i {
  font-size: 0.65rem;
  animation: subtleBounce 2s infinite;
}

@keyframes subtleBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2px);
  }
}

/* Hierarchy indicator - adjusted for horizontal */
.hierarchy-indicator {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  opacity: 0.2;
  font-size: 0.9rem;
  z-index: 1;
}

/* Child count badge */
.child-count-badge {
  min-width: 20px;
  height: 20px;
  font-size: 0.65rem;
  padding: 0 5px;
  margin-left: 5px;
}

/* ========================================================================
   RESPONSIVE BREAKPOINTS
   ======================================================================== */

/* Large Desktop - 4 cards per view */
@media (min-width: 1400px) {
  .category-card-wrapper {
    width: 320px;
  }
}

/* Desktop - 3-4 cards per view */
@media (min-width: 1025px) and (max-width: 1399px) {
  .category-card-wrapper {
    width: 280px;
  }
}

/* Tablet Landscape - 3 cards per view */
@media (min-width: 769px) and (max-width: 1024px) {
  .subcategories-container {
    margin-left: 20px;
  }

  .category-card-wrapper {
    width: 260px;
  }

  .category-card[data-level="1"] .category-image,
  .category-card[data-level="2"] .category-image,
  .category-card[level="3"] .category-image {
    width: 50px;
    height: 50px;
  }

  .category-card[data-level="1"] .category-image-placeholder,
  .category-card[data-level="2"] .category-image-placeholder,
  .category-card[level="3"] .category-image-placeholder {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
  }

  .category-card[data-level="1"] h3,
  .category-card[data-level="2"] h3,
  .category-card[data-level="3"] h3 {
    font-size: 0.9rem;
  }
}

/* Tablet Portrait - 2.5 cards per view */
@media (min-width: 481px) and (max-width: 768px) {
  .subcategories-container {
    margin-left: 15px;
  }

  .subcategories-row {
    gap: 10px;
    padding-bottom: 12px;
  }

  .category-card-wrapper {
    width: 240px;
  }

  .category-card[data-level="1"],
  .category-card[data-level="2"],
  .category-card[data-level="3"] {
    padding: 14px;
  }

  .category-card[data-level="1"] .category-image,
  .category-card[data-level="2"] .category-image,
  .category-card[data-level="3"] .category-image {
    width: 45px;
    height: 45px;
  }

  .category-card[data-level="1"] .category-image-placeholder,
  .category-card[data-level="2"] .category-image-placeholder,
  .category-card[data-level="3"] .category-image-placeholder {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
  }

  .category-card[data-level="1"] h3,
  .category-card[data-level="2"] h3,
  .category-card[data-level="3"] h3 {
    font-size: 0.85rem;
  }

  .category-card[data-level="1"] .category-meta span,
  .category-card[data-level="2"] .category-meta span,
  .category-card[data-level="3"] .category-meta span {
    padding: 3px 6px;
    font-size: 0.65rem;
  }

  .subcategories-collapsed {
    margin-left: 30px;
    font-size: 0.7rem;
    padding: 5px 14px;
  }
}

/* Mobile - 2 cards per view with horizontal scroll */
@media (max-width: 480px) {
  .subcategories-container {
    margin-left: 10px;
  }

  .subcategories-row {
    gap: 8px;
    padding-bottom: 12px;
  }

  .category-card-wrapper {
    width: 200px;
  }

  .category-card[data-level="1"],
  .category-card[data-level="2"],
  .category-card[data-level="3"] {
    padding: 12px;
  }

  .category-card[data-level="1"] .category-image,
  .category-card[data-level="2"] .category-image,
  .category-card[data-level="3"] .category-image {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-right: 8px;
  }

  .category-card[data-level="1"] .category-image-placeholder,
  .category-card[data-level="2"] .category-image-placeholder,
  .category-card[data-level="3"] .category-image-placeholder {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    border-radius: 10px;
    margin-right: 8px;
  }

  .category-card[data-level="1"] h3,
  .category-card[data-level="2"] h3,
  .category-card[data-level="3"] h3 {
    font-size: 0.8rem;
  }

  .category-card[data-level="1"] .category-type-badge,
  .category-card[data-level="2"] .category-type-badge,
  .category-card[data-level="3"] .category-type-badge {
    font-size: 0.55rem;
    padding: 2px 6px;
  }

  .category-card[data-level="1"] .category-meta,
  .category-card[data-level="2"] .category-meta,
  .category-card[data-level="3"] .category-meta {
    margin: 6px 0;
  }

  .category-card[data-level="1"] .category-meta span,
  .category-card[data-level="2"] .category-meta span,
  .category-card[data-level="3"] .category-meta span {
    padding: 2px 5px;
    font-size: 0.6rem;
  }

  .category-card[data-level="1"] .category-footer,
  .category-card[data-level="2"] .category-footer,
  .category-card[data-level="3"] .category-footer {
    padding: 6px 0 0 0;
  }

  .category-card[data-level="1"] .category-action-btn,
  .category-card[data-level="2"] .category-action-btn,
  .category-card[data-level="3"] .category-action-btn {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
  }

  .subcategories-collapsed {
    margin-left: 20px;
    font-size: 0.65rem;
    padding: 4px 12px;
  }
}

/* Small Mobile - 1.5 cards per view */
@media (max-width: 360px) {
  .category-card-wrapper {
    width: 180px;
  }

  .category-card[data-level="1"],
  .category-card[data-level="2"],
  .category-card[data-level="3"] {
    padding: 10px;
  }

  .category-card[data-level="1"] .category-image,
  .category-card[data-level="2"] .category-image,
  .category-card[data-level="3"] .category-image {
    width: 35px;
    height: 35px;
  }

  .category-card[data-level="1"] .category-image-placeholder,
  .category-card[data-level="2"] .category-image-placeholder,
  .category-card[data-level="3"] .category-image-placeholder {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }

  .category-card[data-level="1"] h3,
  .category-card[data-level="2"] h3,
  .category-card[data-level="3"] h3 {
    font-size: 0.75rem;
  }

  .category-card[data-level="1"] .category-meta span,
  .category-card[data-level="2"] .category-meta span,
  .category-card[data-level="3"] .category-meta span {
    font-size: 0.55rem;
    padding: 2px 4px;
  }

  .category-card[data-level="1"] .category-action-btn,
  .category-card[data-level="2"] .category-action-btn,
  .category-card[data-level="3"] .category-action-btn {
    width: 26px;
    height: 26px;
    font-size: 0.65rem;
  }
}

/* ========================================================================
   MAIN CATEGORIES GRID - Desktop sizes unchanged, smaller on mobile
   ======================================================================== */

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* Main Category Cards (Top Level) - Desktop sizes */
.category-card:not([data-level="1"]):not([data-level="2"]):not(
    [data-level="3"]
  ) {
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
}

.category-card:not([data-level="1"]):not([data-level="2"]):not([data-level="3"])
  .category-image {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.category-card:not([data-level="1"]):not([data-level="2"]):not([data-level="3"])
  .category-image-placeholder {
  width: 100%;
  height: 140px;
  font-size: 2rem;
}

.category-card:not([data-level="1"]):not([data-level="2"]):not([data-level="3"])
  .category-content {
  padding: 18px 20px;
  flex: 1;
}

.category-card:not([data-level="1"]):not([data-level="2"]):not([data-level="3"])
  h3 {
  font-size: 1.1rem;
}

.category-card:not([data-level="1"]):not([data-level="2"]):not([data-level="3"])
  .category-footer {
  padding: 15px 20px;
}

/* ========================================================================
   SUBCATEGORIES - Desktop sizes unchanged
   ======================================================================== */

.subcategories-container {
  display: none;
  margin: 15px 0 10px 30px;
  padding: 5px 0 10px 0;
  position: relative;
  animation: slideDown 0.25s ease;
  width: 100%;
}

.subcategories-container.expanded {
  display: block;
}

.subcategories-row {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 12px;
  padding: 8px 4px 15px 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  width: 100%;
}

.category-card-wrapper {
  position: relative;
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
}

.category-card[data-level="1"],
.category-card[data-level="2"],
.category-card[data-level="3"] {
  margin-left: 0 !important;
  border-left: 3px solid var(--accent-light) !important;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(183, 140, 90, 0.02), white);
  padding: 16px;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  border-left-width: 3px !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.category-card[data-level="1"] .category-image,
.category-card[data-level="2"] .category-image,
.category-card[data-level="3"] .category-image {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  float: left;
  margin-right: 12px;
}

.category-card[data-level="1"] .category-image-placeholder,
.category-card[data-level="2"] .category-image-placeholder,
.category-card[data-level="3"] .category-image-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  float: left;
  margin-right: 12px;
  font-size: 1.5rem;
}

.category-card[data-level="1"] h3,
.category-card[data-level="2"] h3,
.category-card[data-level="3"] h3 {
  font-size: 0.95rem;
}

/* ========================================================================
   SMALLER SCREENS ONLY - Tablet and Mobile
   ======================================================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  /* Main categories - smaller on tablet */
  .categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-image,
  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-image-placeholder {
    height: 110px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-content {
    padding: 14px 16px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    h3 {
    font-size: 1rem;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-footer {
    padding: 12px 16px;
  }

  /* Subcategories - smaller on tablet */
  .subcategories-container {
    margin-left: 20px;
  }

  .category-card-wrapper {
    width: 240px;
  }

  .category-card[data-level="1"],
  .category-card[data-level="2"],
  .category-card[data-level="3"] {
    padding: 14px;
  }

  .category-card[data-level="1"] .category-image,
  .category-card[data-level="2"] .category-image,
  .category-card[data-level="3"] .category-image,
  .category-card[data-level="1"] .category-image-placeholder,
  .category-card[data-level="2"] .category-image-placeholder,
  .category-card[data-level="3"] .category-image-placeholder {
    width: 50px;
    height: 50px;
  }

  .category-card[data-level="1"] h3,
  .category-card[data-level="2"] h3,
  .category-card[data-level="3"] h3 {
    font-size: 0.9rem;
  }
}

/* Mobile (480px - 768px) */
@media (max-width: 768px) {
  /* Main categories - 2 columns, full viewport width */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-image,
  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-image-placeholder {
    height: 90px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-content {
    padding: 10px 12px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    h3 {
    font-size: 0.9rem;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-type-badge {
    font-size: 0.6rem;
    padding: 3px 6px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-meta {
    font-size: 0.7rem;
    margin: 6px 0;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-footer {
    padding: 8px 12px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-action-btn {
    width: 30px;
    height: 30px;
  }

  /* Subcategories - smaller on mobile */
  .subcategories-container {
    margin-left: 15px;
  }

  .subcategories-row {
    gap: 10px;
    padding-bottom: 12px;
  }

  .category-card-wrapper {
    width: 200px;
  }

  .category-card[data-level="1"],
  .category-card[data-level="2"],
  .category-card[data-level="3"] {
    padding: 12px;
  }

  .category-card[data-level="1"] .category-image,
  .category-card[data-level="2"] .category-image,
  .category-card[data-level="3"] .category-image,
  .category-card[data-level="1"] .category-image-placeholder,
  .category-card[data-level="2"] .category-image-placeholder,
  .category-card[data-level="3"] .category-image-placeholder {
    width: 40px;
    height: 40px;
  }

  .category-card[data-level="1"] h3,
  .category-card[data-level="2"] h3,
  .category-card[data-level="3"] h3 {
    font-size: 0.85rem;
  }

  .category-card[data-level="1"] .category-meta span,
  .category-card[data-level="2"] .category-meta span,
  .category-card[data-level="3"] .category-meta span {
    font-size: 0.65rem;
    padding: 2px 5px;
  }

  .category-card[data-level="1"] .category-action-btn,
  .category-card[data-level="2"] .category-action-btn,
  .category-card[data-level="3"] .category-action-btn {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
  }

  .subcategories-collapsed {
    margin-left: 30px;
    font-size: 0.7rem;
    padding: 4px 12px;
  }
}

/* Small Mobile (below 480px) */
@media (max-width: 480px) {
  /* Main categories - single column */
  .categories-grid {
    gap: 8px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-image,
  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-image-placeholder {
    height: 70px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-content {
    padding: 8px 10px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    h3 {
    font-size: 0.8rem;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-type-badge {
    font-size: 0.55rem;
    padding: 2px 5px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-meta {
    font-size: 0.65rem;
    margin: 4px 0;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-meta
    span {
    padding: 2px 5px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-footer {
    padding: 6px 10px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-action-btn {
    width: 28px;
    height: 28px;
  }

  /* Subcategories - even smaller */
  .subcategories-container {
    margin-left: 10px;
  }

  .category-card-wrapper {
    width: 170px;
  }

  .category-card[data-level="1"],
  .category-card[data-level="2"],
  .category-card[data-level="3"] {
    padding: 10px;
  }

  .category-card[data-level="1"] .category-image,
  .category-card[data-level="2"] .category-image,
  .category-card[data-level="3"] .category-image,
  .category-card[data-level="1"] .category-image-placeholder,
  .category-card[data-level="2"] .category-image-placeholder,
  .category-card[data-level="3"] .category-image-placeholder {
    width: 35px;
    height: 35px;
    margin-right: 8px;
  }

  .category-card[data-level="1"] h3,
  .category-card[data-level="2"] h3,
  .category-card[data-level="3"] h3 {
    font-size: 0.8rem;
  }

  .category-card[data-level="1"] .category-meta span,
  .category-card[data-level="2"] .category-meta span,
  .category-card[data-level="3"] .category-meta span {
    font-size: 0.6rem;
  }

  .subcategories-collapsed {
    margin-left: 25px;
    font-size: 0.65rem;
    padding: 3px 10px;
  }
}

/* Extra Small Mobile (below 360px) */
@media (max-width: 360px) {
  /* Main categories - smallest */
  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-image,
  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-image-placeholder {
    height: 60px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-content {
    padding: 6px 8px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    h3 {
    font-size: 0.7rem;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .category-action-btn {
    width: 26px;
    height: 26px;
    font-size: 0.65rem;
  }

  /* Subcategories - smallest */
  .category-card-wrapper {
    width: 150px;
  }

  .category-card[data-level="1"] .category-image,
  .category-card[data-level="2"] .category-image,
  .category-card[data-level="3"] .category-image,
  .category-card[data-level="1"] .category-image-placeholder,
  .category-card[data-level="2"] .category-image-placeholder,
  .category-card[data-level="3"] .category-image-placeholder {
    width: 30px;
    height: 30px;
    margin-right: 6px;
  }

  .category-card[data-level="1"] h3,
  .category-card[data-level="2"] h3,
  .category-card[data-level="3"] h3 {
    font-size: 0.7rem;
  }

  .category-card[data-level="1"] .category-action-btn,
  .category-card[data-level="2"] .category-action-btn,
  .category-card[data-level="3"] .category-action-btn {
    width: 24px;
    height: 24px;
    font-size: 0.6rem;
  }
}
/* ========================================================================
   EXPAND BADGE - Simple spacing fix
   ======================================================================== */

.category-action-btn.expand {
  position: relative;
  overflow: visible;
}

/* Add gap between button and badge */
.expand-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  background: var(--accent);
  color: white;
  font-size: 0.6rem;
  font-weight: 600;
  border-radius: 18px;
  padding: 0 6px;
  box-shadow: 0 2px 5px rgba(183, 140, 90, 0.3);
  border: 1px solid white;
  gap: 3px; /* This adds space between items inside the badge */
}

/* If badge contains both icon and text */
.expand-badge i {
  margin-right: 2px;
  font-size: 0.5rem;
}

/* Main category cards - larger badge */
.category-card:not([data-level="1"]):not([data-level="2"]):not([data-level="3"])
  .expand-badge {
  min-width: 20px;
  height: 20px;
  font-size: 0.65rem;
  top: -7px;
  right: -7px;
  padding: 0 7px;
}

/* Subcategory cards - smaller badge */
.category-card[data-level="1"] .expand-badge,
.category-card[data-level="2"] .expand-badge,
.category-card[data-level="3"] .expand-badge {
  min-width: 16px;
  height: 16px;
  font-size: 0.55rem;
  top: -5px;
  right: -5px;
  padding: 0 5px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .expand-badge {
    top: -5px;
    right: -5px;
    gap: 2px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .expand-badge {
    min-width: 18px;
    height: 18px;
    font-size: 0.6rem;
    top: -6px;
    right: -6px;
  }
}

@media (max-width: 480px) {
  .expand-badge {
    top: -4px;
    right: -4px;
    gap: 1px;
  }

  .category-card:not([data-level="1"]):not([data-level="2"]):not(
      [data-level="3"]
    )
    .expand-badge {
    min-width: 16px;
    height: 16px;
    font-size: 0.55rem;
  }
}
/* ========================================================================
   READ-ONLY TYPE DISPLAY FOR SUBCATEGORIES
   ======================================================================== */

.readonly-type-display {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  flex-wrap: wrap;
}

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 40px;
  font-size: 0.9rem;
  font-weight: 500;
  background: white;
  border: 2px solid;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.type-badge.service {
  border-color: var(--accent);
  color: var(--accent);
  background: linear-gradient(
    135deg,
    rgba(183, 140, 90, 0.1) 0%,
    transparent 100%
  );
}

.type-badge.product {
  border-color: #3b82f6;
  color: #1e4a6b;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.1) 0%,
    transparent 100%
  );
}

.type-badge i {
  font-size: 1rem;
}

.inherited-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 30px;
  background: var(--bg);
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--border-light);
}

.inherited-badge i {
  color: var(--accent);
  font-size: 0.75rem;
}

.field-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(183, 140, 90, 0.05);
  border-radius: 30px;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  font-size: 0.8rem;
}

.field-info i {
  color: var(--accent);
  font-size: 0.9rem;
}

.restrictions-card {
  margin-top: 20px;
  background: linear-gradient(135deg, white 0%, var(--bg) 100%);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.restrictions-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(183, 140, 90, 0.05);
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
  color: var(--text-dark);
}

.restrictions-header i {
  color: var(--accent);
}

.restrictions-content {
  padding: 12px 16px;
}

.restrictions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.restrictions-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.restrictions-list li i {
  font-size: 1rem;
  flex-shrink: 0;
}

.restrictions-list li i.fa-check-circle {
  color: #10b981;
}

.restrictions-list li i.fa-info-circle {
  color: var(--accent);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .readonly-type-display {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .type-badge {
    width: 100%;
    justify-content: center;
  }

  .inherited-badge {
    width: 100%;
    justify-content: center;
  }

  .field-info {
    padding: 8px;
    text-align: center;
    justify-content: center;
  }
}
/* ========================================================================
   EDIT CATEGORY MODAL - Subcategory Specific Styles
   ======================================================================== */

/* Parent Info Card */
.parent-info-card {
  background: linear-gradient(135deg, #f2ebe3 0%, white 100%);
  border-radius: 16px;
  border: 1px solid var(--accent-light);
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: 0 4px 12px -4px rgba(183, 140, 90, 0.1);
}

.parent-info-header {
  background: rgba(183, 140, 90, 0.1);
  padding: 12px 16px;
  border-bottom: 1px solid var(--accent-light);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--accent);
  font-size: 0.9rem;
}

.parent-info-header i {
  font-size: 0.9rem;
}

.parent-info-content {
  padding: 16px;
}

.parent-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-light);
}

.parent-info-row:last-child {
  border-bottom: none;
}

.parent-info-label {
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 500;
}

.parent-info-value {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.parent-info-warning {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fef3e2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b45309;
  font-size: 0.8rem;
  border-left: 3px solid #f59e0b;
}

.parent-info-warning i {
  color: #f59e0b;
  font-size: 0.9rem;
}

/* Type Hint */
.type-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  background: #f2ebe3;
  border-radius: 20px;
  color: var(--accent);
  font-size: 0.7rem;
}

.type-hint i {
  font-size: 0.7rem;
}

.type-hint.warning {
  background: #fee2e2;
  color: #ef4444;
}

.type-hint.warning i {
  color: #ef4444;
}

/* Readonly Parent Field */
.readonly-parent-field {
  position: relative;
  width: 100%;
}

.readonly-parent-field input {
  background: var(--bg) !important;
  color: var(--text-soft) !important;
  cursor: not-allowed;
  padding-right: 90px;
}

.readonly-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--accent);
  color: white;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  pointer-events: none;
}

/* Restrictions Card */
.restrictions-card {
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-radius: 16px;
  border: 1px solid var(--border-light);
  margin-top: 24px;
  overflow: hidden;
}

.restrictions-header {
  background: var(--bg);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.restrictions-header i {
  color: var(--accent);
  font-size: 0.9rem;
}

.restrictions-content {
  padding: 16px;
}

.restrictions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.restrictions-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-light);
  color: var(--text-soft);
  font-size: 0.85rem;
}

.restrictions-list li:last-child {
  border-bottom: none;
}

.restrictions-list li i {
  color: #10b981;
  font-size: 0.8rem;
  width: 18px;
}

/* Category Type Badge Small */
.category-type-badge-small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
}

.category-type-badge-small.service {
  background: #f2ebe3;
  color: var(--accent);
}

.category-type-badge-small.product {
  background: #e1f0fa;
  color: #1e4a6b;
}

.category-type-badge-small.both {
  background: linear-gradient(135deg, #f2ebe3 0%, #e1f0fa 100%);
  color: var(--text-dark);
}

/* Responsive */
@media (max-width: 768px) {
  .parent-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .parent-info-value {
    align-self: flex-start;
  }

  .readonly-parent-field input {
    padding-right: 80px;
    font-size: 0.8rem;
  }

  .readonly-badge {
    font-size: 0.55rem;
    padding: 2px 6px;
  }

  .restrictions-list li {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .parent-info-header,
  .restrictions-header {
    padding: 10px 12px;
    font-size: 0.8rem;
  }

  .parent-info-content,
  .restrictions-content {
    padding: 12px;
  }

  .parent-info-label,
  .parent-info-value {
    font-size: 0.75rem;
  }

  .type-hint {
    font-size: 0.65rem;
    padding: 4px 8px;
  }

  .restrictions-list li {
    font-size: 0.7rem;
    padding: 6px 0;
  }
}
/* ========================================================================
   CATEGORY IMAGE UPLOAD - Premium Design
   ======================================================================== */

/* Image Upload Area */
.category-image-upload {
  border: 2px dashed var(--border-light);
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  margin-bottom: 15px;
  background: linear-gradient(135deg, var(--bg) 0%, white 100%);
  position: relative;
  overflow: hidden;
}

.category-image-upload::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(183, 140, 90, 0.1) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  transition:
    width 0.6s ease,
    height 0.6s ease;
  z-index: 0;
  pointer-events: none;
}

.category-image-upload:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, white 0%, var(--bg) 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -8px rgba(183, 140, 90, 0.2);
}

.category-image-upload:hover::before {
  width: 300px;
  height: 300px;
}

.category-image-upload i {
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    var(--accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 8px rgba(183, 140, 90, 0.2));
}

.category-image-upload:hover i {
  transform: scale(1.1) translateY(-2px);
  filter: drop-shadow(0 6px 12px rgba(183, 140, 90, 0.3));
}

.category-image-upload p {
  color: var(--text-dark);
  font-size: 1rem;
  margin: 0 0 8px 0;
  position: relative;
  z-index: 1;
  font-weight: 500;
}

.category-image-upload .field-hint {
  color: var(--text-soft);
  font-size: 0.75rem;
  display: block;
  margin-top: 8px;
  position: relative;
  z-index: 1;
  opacity: 0.8;
}

/* Image Preview */
.category-image-preview {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 15px;
  border: 2px solid var(--border-light);
  background: linear-gradient(135deg, var(--bg) 0%, white 100%);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.1);
  animation: previewFadeIn 0.3s ease;
}

@keyframes previewFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.category-image-preview img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.category-image-preview:hover img {
  transform: scale(1.02);
}

/* Remove Image Button */
.category-image-preview .remove-image {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.category-image-preview .remove-image:hover {
  background: #ef4444;
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
}

.category-image-preview .remove-image i {
  font-size: 1rem;
  color: white;
}

/* Image Preview with Overlay */
.category-image-preview::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.02) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.category-image-preview:hover::after {
  opacity: 1;
}

/* File Input Styling (hidden) */
input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Drag & Drop Active State */
.category-image-upload.drag-active {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(183, 140, 90, 0.05) 0%, white 100%);
  transform: scale(1.01);
  box-shadow: 0 15px 30px -10px rgba(183, 140, 90, 0.3);
}

.category-image-upload.drag-active i {
  transform: scale(1.1);
  color: var(--accent);
}

/* Error State */
.category-image-upload.error {
  border-color: #ef4444;
  background: #fee2e2;
}

.category-image-upload.error i {
  color: #ef4444;
}

/* Success State */
.category-image-upload.success {
  border-color: #10b981;
  background: #e3f2e9;
}

.category-image-upload.success i {
  color: #10b981;
}

/* Loading State */
.category-image-upload.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.category-image-upload.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 2;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Design */

/* Tablet */
@media (max-width: 1024px) {
  .category-image-upload {
    padding: 25px 15px;
  }

  .category-image-upload i {
    font-size: 2.2rem;
  }

  .category-image-upload p {
    font-size: 0.95rem;
  }

  .category-image-preview img {
    max-height: 180px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .category-image-upload {
    padding: 20px 15px;
    border-radius: 16px;
  }

  .category-image-upload i {
    font-size: 2rem;
    margin-bottom: 10px;
  }

  .category-image-upload p {
    font-size: 0.9rem;
  }

  .category-image-upload .field-hint {
    font-size: 0.7rem;
  }

  .category-image-preview .remove-image {
    width: 32px;
    height: 32px;
    top: 8px;
    right: 8px;
  }

  .category-image-preview .remove-image i {
    font-size: 0.9rem;
  }

  .category-image-preview img {
    max-height: 150px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .category-image-upload {
    padding: 15px 12px;
  }

  .category-image-upload i {
    font-size: 1.8rem;
    margin-bottom: 8px;
  }

  .category-image-upload p {
    font-size: 0.85rem;
  }

  .category-image-upload .field-hint {
    font-size: 0.65rem;
  }

  .category-image-preview .remove-image {
    width: 28px;
    height: 28px;
  }

  .category-image-preview .remove-image i {
    font-size: 0.8rem;
  }

  .category-image-preview img {
    max-height: 120px;
  }
}

/* Extra Small Mobile */
@media (max-width: 360px) {
  .category-image-upload {
    padding: 12px 10px;
  }

  .category-image-upload i {
    font-size: 1.6rem;
  }

  .category-image-upload p {
    font-size: 0.8rem;
  }

  .category-image-preview .remove-image {
    width: 24px;
    height: 24px;
  }

  .category-image-preview img {
    max-height: 100px;
  }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .category-image-upload {
    border-width: 1.5px;
  }

  .category-image-preview img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .category-image-upload {
    padding: 25px 15px;
  }

  .category-image-upload:active {
    background: linear-gradient(135deg, rgba(183, 140, 90, 0.1) 0%, white 100%);
    transform: scale(0.98);
  }

  .category-image-preview .remove-image {
    width: 44px;
    height: 44px;
    opacity: 1;
    background: rgba(239, 68, 68, 0.95);
  }
}

/* Print Styles */
@media print {
  .category-image-upload {
    border: 1px solid #000;
    background: none;
    page-break-inside: avoid;
  }

  .category-image-upload i,
  .category-image-upload .field-hint,
  .category-image-preview .remove-image {
    display: none;
  }

  .category-image-preview {
    border: 1px solid #000;
    box-shadow: none;
  }
}
/* ========================================================================
   ENHANCED CATEGORY MODAL - Fixed overlay issues with premium design
   ======================================================================== */

/* Modal overlay - fixed positioning with proper z-index */
.modal-overlay.category-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000; /* Very high z-index to ensure it's above everything */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalFadeIn 0.3s ease;
  margin: 0;
  box-sizing: border-box;
}

/* Ensure no other elements interfere */
.modal-overlay.category-modal * {
  box-sizing: border-box;
}

/* Fade in animation */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal content - premium design */
.modal-overlay.category-modal .modal-content {
  background: white;
  border-radius: 32px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.3);
  animation: modalZoom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
}

/* Modal zoom animation */
@keyframes modalZoom {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Modal header - sticky */
.modal-overlay.category-modal .modal-header {
  padding: 24px 28px 20px 28px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #f8fafc 0%, white 100%);
  border-radius: 32px 32px 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

.modal-overlay.category-modal .modal-header h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.modal-overlay.category-modal .modal-header h3 i {
  color: var(--accent);
  font-size: 1.3rem;
  background: none;
  -webkit-text-fill-color: var(--accent);
}

.modal-overlay.category-modal .modal-close {
  background: var(--bg);
  border: none;
  font-size: 1.3rem;
  color: var(--text-soft);
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid var(--border-light);
}

.modal-overlay.category-modal .modal-close:hover {
  background: #fee2e2;
  color: #ef4444;
  transform: rotate(90deg);
  border-color: #fee2e2;
}

/* Modal body - scrollable */
.modal-overlay.category-modal .modal-body {
  padding: 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  background: white;
}

/* Custom scrollbar for modal body */
.modal-overlay.category-modal .modal-body::-webkit-scrollbar {
  width: 4px;
}

.modal-overlay.category-modal .modal-body::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 4px;
}

.modal-overlay.category-modal .modal-body::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.modal-overlay.category-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

/* Modal footer - sticky */
.modal-overlay.category-modal .modal-footer {
  padding: 20px 28px 28px 28px;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background: white;
  border-radius: 0 0 32px 32px;
  position: sticky;
  bottom: 0;
  z-index: 10;
  flex-shrink: 0;
}

/* Form elements inside modal */
.modal-overlay.category-modal .form-group {
  margin-bottom: 20px;
}

.modal-overlay.category-modal label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.modal-overlay.category-modal .form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  background: white;
}

.modal-overlay.category-modal .form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
}

.modal-overlay.category-modal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

@media (max-width: 640px) {
  .modal-overlay.category-modal .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Field hint text */
.modal-overlay.category-modal .field-hint {
  display: block;
  font-size: 0.7rem;
  color: var(--text-soft);
  margin-top: 4px;
}

/* Error message */
.modal-overlay.category-modal .error-message {
  color: #ef4444;
  font-size: 0.8rem;
  margin-top: 4px;
  display: none;
  background: #fee2e2;
  padding: 6px 12px;
  border-radius: 8px;
  border-left: 3px solid #ef4444;
}

/* Required field indicator */
.modal-overlay.category-modal .required {
  color: #ef4444;
  margin-left: 2px;
}

/* Loading indicator */
.modal-overlay.category-modal .loading-indicator {
  background: var(--bg);
  border-radius: 12px;
  padding: 15px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.modal-overlay.category-modal .loading-spinner-small {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .modal-overlay.category-modal .modal-content {
    max-width: 90%;
    border-radius: 24px;
  }

  .modal-overlay.category-modal .modal-header {
    padding: 20px;
  }

  .modal-overlay.category-modal .modal-header h3 {
    font-size: 1.2rem;
  }

  .modal-overlay.category-modal .modal-close {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .modal-overlay.category-modal .modal-body {
    padding: 20px;
  }

  .modal-overlay.category-modal .modal-footer {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .modal-overlay.category-modal .modal-content {
    max-width: 95%;
    border-radius: 20px;
  }

  .modal-overlay.category-modal .modal-header {
    padding: 16px;
  }

  .modal-overlay.category-modal .modal-header h3 {
    font-size: 1rem;
  }

  .modal-overlay.category-modal .modal-close {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .modal-overlay.category-modal .modal-body {
    padding: 16px;
  }

  .modal-overlay.category-modal .modal-footer {
    padding: 16px;
    flex-direction: column;
  }

  .modal-overlay.category-modal .modal-footer button {
    width: 100%;
  }

  .modal-overlay.category-modal .form-control {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
}

/* Very small devices */
@media (max-width: 360px) {
  .modal-overlay.category-modal .modal-header {
    padding: 14px;
  }

  .modal-overlay.category-modal .modal-body {
    padding: 14px;
  }

  .modal-overlay.category-modal .modal-footer {
    padding: 14px;
  }

  .modal-overlay.category-modal label {
    font-size: 0.8rem;
  }

  .modal-overlay.category-modal .form-control {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .modal-overlay.category-modal .modal-content {
    border-width: 0.5px;
  }
}

/* Ensure modal stays above all other elements */
.modal-overlay.category-modal {
  isolation: isolate;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
  position: relative;
  height: 100%;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .modal-overlay.category-modal .modal-close {
    width: 48px;
    height: 48px;
  }

  .modal-overlay.category-modal .form-control {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .modal-overlay.category-modal .modal-footer button {
    min-height: 48px;
  }
}

/* Print styles */
@media print {
  .modal-overlay.category-modal {
    display: none !important;
  }
}
/* Force dropdown options to be visible */
select.form-control {
  appearance: menulist !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #e2e8f0 !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border-radius: 8px !important;
  min-height: 40px !important;
}

select.form-control option {
  background-color: #ffffff !important;
  color: #333333 !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
}

/* Ensure modal doesn't interfere */
.modal-content {
  z-index: 1000 !important;
  overflow: visible !important;
}

.modal-body {
  overflow: visible !important;
}

.category-selection-two-step {
  overflow: visible !important;
}
/* Add to dashboard-admin.css - Fix Broadcast Modal Scrolling */

/* ========================================================================
   BROADCAST MODAL - SCROLLING FIX
   ======================================================================== */

.broadcast-modal .modal-content {
  max-height: 90vh; /* Ensure modal doesn't exceed viewport height */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Hide overflow on the modal itself */
}

.broadcast-modal .modal-header {
  flex-shrink: 0; /* Prevent header from shrinking */
}

.broadcast-modal .modal-body {
  flex: 1; /* Take up remaining space */
  overflow-y: auto !important; /* Force vertical scrolling */
  max-height: calc(90vh - 140px); /* Account for header and footer */
  padding: 24px 28px;

  /* Custom scrollbar styling to match theme */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--border-light);
}

/* Custom scrollbar for webkit browsers */
.broadcast-modal .modal-body::-webkit-scrollbar {
  width: 4px;
}

.broadcast-modal .modal-body::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 4px;
}

.broadcast-modal .modal-body::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.broadcast-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

.broadcast-modal .modal-footer {
  flex-shrink: 0; /* Prevent footer from shrinking */
}

/* Ensure the broadcast content wrapper also scrolls if needed */
.broadcast-content-wrapper {
  height: 100%;
  overflow-y: auto;
}

/* Fix for the intro section to ensure it stays at top when scrolling */
.broadcast-intro {
  margin-bottom: 24px;
  flex-shrink: 0;
}

/* Ensure form sections scroll properly */
.broadcast-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .broadcast-modal .modal-body {
    padding: 20px;
    max-height: calc(90vh - 120px);
  }
}

@media (max-width: 480px) {
  .broadcast-modal .modal-body {
    padding: 16px;
    max-height: calc(90vh - 110px);
  }
}
/* ========================================================================
   MODAL OVERLAY - FIXED SCROLLING & BACKGROUND FREEZE
   ======================================================================== */

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden !important;
  position: relative;
  height: 100%;
  width: 100%;
  padding-right: 0 !important; /* Prevent layout shift */
}

/* Ensure modal overlay covers everything properly */
.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  margin: 0 !important;
  overflow-y: auto !important; /* Allow modal content to scroll */
  animation: modalFadeIn 0.3s ease;
}

/* Modal content should be scrollable inside */
.modal-overlay .modal-content {
  max-height: 90vh;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  position: relative;
  width: 100%;
  margin: auto !important;
  background: white;
  border-radius: 32px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.3);
  animation: modalSlideUp 0.4s ease;
}

/* Ensure modal body itself scrolls properly */
.modal-overlay .modal-body {
  overflow-y: auto !important;
  max-height: calc(90vh - 140px); /* Account for header and footer */
  padding: 24px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--border-light);
}

/* Custom scrollbar for webkit browsers */
.modal-overlay .modal-body::-webkit-scrollbar {
  width: 4px;
}

.modal-overlay .modal-body::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 4px;
}

.modal-overlay .modal-body::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.modal-overlay .modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

/* Modal header and footer should not scroll */
.modal-overlay .modal-header,
.modal-overlay .modal-footer {
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 10;
}

/* Ensure modal content is properly contained */
.modal-overlay .modal-content {
  display: flex;
  flex-direction: column;
  overflow: hidden !important; /* Hide overflow on modal container */
}

/* Animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .modal-overlay .modal-content {
    max-width: 95%;
    border-radius: 24px;
  }

  .modal-overlay .modal-body {
    padding: 20px;
    max-height: calc(90vh - 120px);
  }
}

@media (max-width: 480px) {
  .modal-overlay .modal-content {
    max-width: 100%;
    border-radius: 20px;
  }

  .modal-overlay .modal-body {
    padding: 16px;
    max-height: calc(90vh - 110px);
  }
}

/* Add to dashboard-admin.css - REPLACE the entire admin messages section */

/* ========================================================================
   ADMIN MESSAGES - EXACT MATCH TO PROVIDER DASHBOARD
   Using the exact same class names as dashboard-provider.css
   ======================================================================== */

/* Main Container */
.messages-dashboard-compact {
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border-radius: 24px;
  overflow: hidden;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  border: 1px solid var(--border-light);
}

@media (max-width: 768px) {
  .messages-dashboard-compact {
    height: calc(100vh - 100px);
    border-radius: 16px;
  }
}

/* Header */
.messages-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 768px) {
  .messages-header-compact {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

.header-left .page-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-dark);
}

/* Filter Chips */
.filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .filter-chips {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    white-space: nowrap;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filter-chips::-webkit-scrollbar {
    display: none;
  }
}

.filter-chip {
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-soft);
  background: var(--bg);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .filter-chip {
    flex: 0 0 auto;
    padding: 5px 12px;
    font-size: 0.7rem;
  }
}

.filter-chip:hover {
  background: white;
  border-color: var(--accent);
  color: var(--accent);
}

.filter-chip.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Header Right */
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 768px) {
  .header-right {
    width: 100%;
  }
}

.search-box-compact {
  position: relative;
  width: 220px;
}

@media (max-width: 768px) {
  .search-box-compact {
    flex: 1;
  }
}

.search-box-compact i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.75rem;
  pointer-events: none;
}

.search-box-compact input {
  width: 100%;
  padding: 8px 8px 8px 30px;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.8rem;
  background: var(--bg);
  min-height: 36px;
  transition: all 0.2s;
}

.search-box-compact input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
  background: white;
}

/* Messages Container */
.messages-container-compact {
  display: flex;
  flex: 1;
  min-height: 0;
  background: white;
  overflow: hidden;
}

@media (max-width: 768px) {
  .messages-container-compact {
    flex-direction: column;
  }
}

/* Conversations Sidebar */
.conversations-sidebar-compact {
  width: 320px;
  border-right: 1px solid var(--border-light);
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (max-width: 768px) {
  .conversations-sidebar-compact {
    width: 100%;
    display: block;
  }

  .conversations-sidebar-compact.hide-mobile {
    display: none;
  }
}

.conversations-header-compact {
  padding: 15px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
}

.conversations-header-compact h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}

.conversation-count {
  background: var(--bg);
  color: var(--text-soft);
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 30px;
  font-weight: normal;
}

.conversations-actions {
  display: flex;
  gap: 4px;
}

.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}

/* Conversations List */
.conversations-list-compact {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

/* Conversation Item */
.conversation-item-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  margin-bottom: 4px;
  border: 1px solid transparent;
}

.conversation-item-compact:hover {
  background: var(--bg);
  border-color: var(--border-light);
}

.conversation-item-compact.active {
  background: #f2ebe3;
  border-color: var(--accent);
}

/* Archived conversation styling */
.conversation-item-compact.archived {
  opacity: 0.65;
}

.conversation-item-compact.archived:hover {
  opacity: 1;
}

.archived-badge {
  background: rgba(120, 120, 140, 0.1) !important;
  color: #78788c !important;
  font-size: 0.7rem !important;
}

/* Conversation hover action buttons */
.conversation-actions-hover {
  display: none;
  gap: 4px;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: inherit;
  padding-left: 8px;
}

.conversation-item-compact {
  position: relative;
}

.conversation-item-compact:hover .conversation-actions-hover {
  display: flex;
}

.conversation-item-compact:hover .unread-badge-compact {
  display: none;
}

.conversation-item-compact:hover .conversation-time {
  display: none;
}

.conv-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: white;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.78rem;
}

.conv-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(183, 140, 90, 0.06);
  transform: scale(1.08);
}

.conv-action-btn.delete-conv-btn:hover {
  border-color: #e74c3c;
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.06);
}

/* Thread header danger icon */
.btn-danger-icon {
  color: var(--text-soft) !important;
  transition: all 0.2s ease !important;
}

.btn-danger-icon:hover {
  color: #e74c3c !important;
  background: rgba(231, 76, 60, 0.08) !important;
}

.conversation-item-compact.unread {
  background: #f8fafc;
}

/* Conversation Avatar */
.conversation-avatar-compact {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.2);
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .conversation-avatar-compact {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }
}

/* Conversation Info */
.conversation-info-compact {
  flex: 1;
  min-width: 0;
}

.conversation-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  gap: 6px;
}

.conversation-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.conversation-time {
  font-size: 0.6rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 30px;
  white-space: nowrap;
}

.conversation-last-message {
  font-size: 0.7rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  line-height: 1.4;
}

.conversation-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.status-indicator {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.status-indicator.requests {
  background: #fef3e2;
  color: #b45309;
}

.status-indicator.processing {
  background: #e1f0fa;
  color: #1e4a6b;
}

.status-indicator.pending {
  background: #fef3e2;
  color: #b45309;
}

.status-indicator.completed {
  background: #e3f2e9;
  color: #2f6e4a;
}

.status-indicator.canceled {
  background: #fee2e2;
  color: #991b1b;
}

.unread-badge-compact {
  background: var(--accent);
  color: white;
  min-width: 18px;
  height: 18px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 600;
  padding: 0 4px;
  margin-left: auto;
  box-shadow: 0 2px 4px rgba(183, 140, 90, 0.3);
}

/* Message Thread */
.message-thread-compact {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  min-width: 0;
}

@media (max-width: 768px) {
  .message-thread-compact {
    display: none;
  }

  .message-thread-compact.active-mobile {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: white;
    animation: slideInMobile 0.3s ease;
  }
}

@keyframes slideInMobile {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Thread Placeholder */
.thread-placeholder-compact {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  padding: 30px;
  background: linear-gradient(135deg, #faf9f7 0%, #f5f3f0 100%);
  text-align: center;
}

.placeholder-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--accent);
  font-size: 2rem;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05);
}

.thread-placeholder-compact h3 {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.thread-placeholder-compact p {
  margin-bottom: 20px;
  font-size: 0.85rem;
  max-width: 300px;
}

/* Thread Header */
.thread-header-compact {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  min-height: 64px;
}

.back-btn-compact {
  display: none;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--text-soft);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

@media (max-width: 768px) {
  .back-btn-compact {
    display: flex;
  }
}

.back-btn-compact:hover {
  background: var(--bg);
  color: var(--accent);
}

.thread-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.thread-user-info .user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1rem;
  background: white;
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.2);
}

.user-details-compact {
  flex: 1;
  min-width: 0;
}

.user-details-compact h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.user-status {
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-status.online {
  color: #10b981;
}

.user-status.online::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  animation: blink 2s infinite;
}

.user-status.offline {
  color: var(--text-soft);
}

.user-status-row .status-badge {
  padding: 2px 8px;
  font-size: 0.6rem;
  border-radius: 30px;
  background: var(--bg);
  color: var(--text-soft);
}

.user-status-row .status-badge.pending {
  background: #fef3e2;
  color: #b45309;
}

.user-status-row .status-badge.processing {
  background: #e1f0fa;
  color: #1e4a6b;
}

.user-status-row .status-badge.completed {
  background: #e3f2e9;
  color: #2f6e4a;
}

.thread-actions-compact {
  display: flex;
  gap: 4px;
}

.thread-actions-compact .btn-icon {
  width: 36px;
  height: 36px;
  font-size: 0.85rem;
}

/* Messages List */
.messages-list-compact {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f8fafc;
}

/* Date Divider */
.date-divider {
  text-align: center;
  margin: 8px 0;
  color: var(--text-soft);
  font-size: 0.65rem;
  position: relative;
}

.date-divider span {
  background: white;
  padding: 4px 12px;
  border-radius: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  display: inline-block;
  border: 1px solid var(--border-light);
}

/* Message Item */
.message-item-compact {
  display: flex;
  margin-bottom: 2px;
  animation: fadeIn 0.3s ease;
}

.message-item-compact.sent {
  justify-content: flex-end;
}

.message-bubble-compact {
  max-width: 60%;
  padding: 10px 14px;
  border-radius: 18px;
  position: relative;
  word-wrap: break-word;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s;
}

@media (max-width: 768px) {
  .message-bubble-compact {
    max-width: 75%;
  }
}

.message-bubble-compact:hover {
  transform: scale(1.01);
}

.message-item-compact.received .message-bubble-compact {
  background: white;
  color: var(--text-dark);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border-light);
}

.message-item-compact.sent .message-bubble-compact {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  border-bottom-right-radius: 4px;
}

.message-text {
  line-height: 1.5;
  margin-bottom: 4px;
  font-size: 0.8rem;
}

.message-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  font-size: 0.55rem;
  opacity: 0.8;
}

.message-item-compact.sent .message-footer {
  color: rgba(255, 255, 255, 0.9);
}

.message-time {
  font-size: 0.55rem;
}

.message-status {
  font-size: 0.6rem;
}

/* Message Attachments */
.message-attachment {
  margin-top: 6px;
  border-radius: 10px;
  overflow: hidden;
}

.message-attachment.image img {
  max-width: 100%;
  max-height: 150px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-attachment.image img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.message-attachment.file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-wrap: wrap;
}

.message-item-compact.sent .message-attachment.file {
  background: rgba(255, 255, 255, 0.15);
}

.message-attachment.file i {
  font-size: 1.2rem;
  color: inherit;
}

.file-info {
  flex: 1;
  min-width: 100px;
}

.file-name {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-size {
  font-size: 0.6rem;
  opacity: 0.7;
}

/* Typing Indicator */
.typing-indicator-compact {
  padding: 8px 16px;
  color: var(--text-soft);
  font-size: 0.7rem;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(183, 140, 90, 0.05),
    transparent
  );
}

.typing-dots {
  display: flex;
  gap: 2px;
}

.typing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: typingBounce 1.4s infinite;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Message Input */
.message-input-container-compact {
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
  background: white;
}

.input-wrapper-compact {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 30px;
  padding: 4px 4px 4px 12px;
  transition: all 0.2s;
}

.input-wrapper-compact:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
  background: white;
}

.input-wrapper-compact textarea {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: transparent;
  font-size: 0.8rem;
  resize: none;
  max-height: 80px;
  line-height: 1.5;
  outline: none;
}

.input-actions-compact {
  display: flex;
  gap: 2px;
  padding: 2px;
}

.input-actions-compact .btn-icon {
  width: 36px;
  height: 36px;
  font-size: 0.85rem;
  background: transparent;
  border: none;
  color: var(--text-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.input-actions-compact .btn-icon:hover {
  background: var(--bg);
  color: var(--accent);
}

.send-btn {
  background: var(--accent) !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(183, 140, 90, 0.3);
}

.send-btn:hover {
  background: var(--accent-light) !important;
  transform: scale(1.05);
}

/* Attachment Preview */
.attachment-preview-area {
  margin-top: 10px;
  padding: 10px;
  background: var(--bg);
  border-radius: 16px;
  animation: slideUp 0.3s ease;
}

.attachment-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  flex-wrap: wrap;
}

.attachment-preview img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.attachment-preview i {
  font-size: 1.5rem;
  color: var(--accent);
}

.preview-info {
  flex: 1;
  min-width: 120px;
}

.preview-info .file-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-info .file-size {
  font-size: 0.65rem;
  color: var(--text-soft);
}

.remove-attachment {
  background: #fee2e2;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ef4444;
  transition: all 0.2s;
  font-size: 0.75rem;
}

.remove-attachment:hover {
  background: #ef4444;
  color: white;
  transform: scale(1.1);
}

/* No Conversations */
.no-conversations-compact {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-soft);
  background: white;
  border-radius: 16px;
  margin: 10px;
}

.no-conversations-compact i {
  font-size: 2.5rem;
  margin-bottom: 15px;
  opacity: 0.3;
  color: var(--accent);
}

.no-conversations-compact h3 {
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.no-conversations-compact p {
  margin-bottom: 15px;
  font-size: 0.8rem;
}

.no-conversations-compact .btn-text {
  color: var(--accent);
  font-weight: 500;
  font-size: 0.8rem;
  padding: 8px 16px;
  background: var(--bg);
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* No Messages */
.no-messages {
  text-align: center;
  padding: 30px;
  color: var(--text-soft);
  font-style: italic;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 30px;
  margin: 20px 0;
  font-size: 0.8rem;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .conversation-avatar-compact {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  .conversation-name {
    font-size: 0.8rem;
    max-width: 100px;
  }

  .conversation-last-message {
    font-size: 0.65rem;
    max-width: 140px;
  }

  .user-status-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .message-bubble-compact {
    max-width: 85%;
  }

  .input-actions-compact .btn-icon {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 480px) {
  .conversation-avatar-compact {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
    border-radius: 10px;
  }

  .conversation-name {
    font-size: 0.75rem;
    max-width: 90px;
  }

  .conversation-last-message {
    max-width: 120px;
    font-size: 0.6rem;
  }

  .conversation-time {
    font-size: 0.55rem;
    padding: 1px 4px;
  }

  .status-indicator {
    font-size: 0.5rem;
    padding: 2px 5px;
  }

  .message-bubble-compact {
    max-width: 90%;
    padding: 8px 10px;
  }

  .message-text {
    font-size: 0.7rem;
  }

  .input-actions-compact .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }
}

/* Very Small Mobile */
@media (max-width: 360px) {
  .conversation-avatar-compact {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .conversation-name {
    font-size: 0.7rem;
    max-width: 80px;
  }

  .conversation-last-message {
    max-width: 100px;
    font-size: 0.55rem;
  }

  .message-bubble-compact {
    max-width: 95%;
    padding: 6px 8px;
  }

  .input-actions-compact .btn-icon {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
  }

  .thread-header-compact {
    padding: 8px 10px;
  }

  .back-btn-compact {
    width: 32px;
    height: 32px;
  }
}

/* Scrollbar Styling */
.conversations-list-compact::-webkit-scrollbar,
.messages-list-compact::-webkit-scrollbar {
  width: 4px;
}

.conversations-list-compact::-webkit-scrollbar-track,
.messages-list-compact::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 4px;
}

.conversations-list-compact::-webkit-scrollbar-thumb,
.messages-list-compact::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.conversations-list-compact::-webkit-scrollbar-thumb:hover,
.messages-list-compact::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

/* Firefox scrollbar support */
.conversations-list-compact,
.messages-list-compact {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg);
}

/* Touch-friendly targets */
.conversation-item-compact,
.filter-chip,
.btn-icon,
.send-btn,
.back-btn-compact,
.thread-actions-compact .btn-icon,
.input-actions-compact .btn-icon,
.remove-attachment {
  min-height: 44px;
  min-width: 44px;
  -webkit-tap-highlight-color: transparent;
}

/* ========================================================================
   ADMIN HEADER - EXACT MATCH TO PROVIDER DASHBOARD
   ======================================================================== */

.dashboard-header {
  background: var(--card-bg);
  padding: calc(var(--spacer) * 2) calc(var(--spacer) * 4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95);
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .dashboard-header {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  }
}

@media (max-width: 480px) {
  .dashboard-header {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  }
}

/* Header Left */
.header-left-enhanced {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle-enhanced {
  display: none;
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--text-dark);
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.mobile-menu-toggle-enhanced:hover {
  background: var(--bg);
  color: var(--accent);
}

@media (max-width: 768px) {
  .mobile-menu-toggle-enhanced {
    display: flex;
  }
}

/* Page Title */
.page-title-enhanced {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

@media (max-width: 768px) {
  .page-title-enhanced {
    font-size: 1.2rem;
    max-width: 150px;
  }
}

@media (max-width: 480px) {
  .page-title-enhanced {
    font-size: 1rem;
    max-width: 120px;
  }
}

/* Header Right */
.header-right-enhanced {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .header-right-enhanced {
    gap: calc(var(--spacer));
  }
}

/* Notifications Dropdown */
.notifications-dropdown-enhanced {
  position: relative;
}

.icon-btn-enhanced {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-soft);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s;
}

.icon-btn-enhanced:hover {
  background: var(--bg);
  color: var(--text-dark);
}

@media (max-width: 768px) {
  .icon-btn-enhanced {
    min-width: 40px;
    min-height: 40px;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .icon-btn-enhanced {
    min-width: 38px;
    min-height: 38px;
    font-size: 1rem;
  }
}

.icon-btn-enhanced .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--accent);
  color: white;
  font-size: 0.6rem;
  min-width: 18px;
  height: 18px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(183, 140, 90, 0.3);
}

/* Notifications Panel */
.notifications-panel-enhanced {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  background: white;
  border-radius: 20px;
  box-shadow: var(--shadow-hover);
  border: 1px solid var(--border-light);
  display: none;
  z-index: 1000;
  overflow: hidden;
}

.notifications-panel-enhanced.active {
  display: block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .notifications-panel-enhanced {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 80vh;
  }
}

.panel-header-enhanced {
  padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header-enhanced h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.btn-text-enhanced {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
  padding: calc(var(--spacer)) calc(var(--spacer) * 1.5);
  border-radius: 30px;
  transition: all 0.2s;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
}

.btn-text-enhanced:hover {
  background: var(--bg);
  text-decoration: underline;
}

.notifications-list-enhanced {
  max-height: 400px;
  overflow-y: auto;
}

.notification-item-enhanced {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.notification-item-enhanced:hover {
  background: var(--bg);
}

.notification-item-enhanced.unread {
  background: #f2ebe3;
}

.notification-item-enhanced.unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.notification-icon-enhanced {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1rem;
  flex-shrink: 0;
}

.notification-content-enhanced {
  flex: 1;
  min-width: 0;
}

.notification-title-enhanced {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  font-size: 0.85rem;
}

.notification-body-enhanced {
  color: var(--text-soft);
  font-size: 0.75rem;
  margin-bottom: 2px;
  line-height: 1.4;
}

.notification-time-enhanced {
  font-size: 0.65rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 2px;
}

.empty-notifications-enhanced {
  text-align: center;
  padding: calc(var(--spacer) * 4);
  color: var(--text-soft);
}

.empty-notifications-enhanced i {
  font-size: 2rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  opacity: 0.3;
}

/* Profile Dropdown */
.profile-dropdown-enhanced {
  position: relative;
}

.profile-btn-enhanced {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  background: none;
  border: none;
  cursor: pointer;
  padding: calc(var(--spacer));
  border-radius: 40px;
  transition: all 0.2s;
  min-height: 44px;
}

.profile-btn-enhanced:hover {
  background: var(--bg);
}

.profile-avatar-enhanced {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.profile-avatar-enhanced img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: none;
}

.profile-avatar-fallback-enhanced {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .profile-avatar-enhanced {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .profile-avatar-fallback-enhanced {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .profile-avatar-enhanced {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }
}

.profile-name-enhanced {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

@media (max-width: 768px) {
  .profile-name-enhanced {
    display: none;
  }
}

/* Profile Menu */
.profile-menu-enhanced {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: white;
  border-radius: 20px;
  box-shadow:
    0 20px 50px -12px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(183, 140, 90, 0.08);
  border: 1px solid rgba(183, 140, 90, 0.1);
  display: none;
  z-index: 1000;
  overflow: hidden;
}

.profile-menu-enhanced.active {
  display: block;
  animation: profileDropdownIn 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes profileDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 480px) {
  .profile-menu-enhanced {
    width: 260px;
    right: -10px;
  }
}

.profile-header-enhanced {
  padding: calc(var(--spacer) * 3);
  display: flex;
  gap: calc(var(--spacer) * 2);
  align-items: center;
  border-bottom: 1px solid var(--border-light);
}

.profile-info-enhanced {
  flex: 1;
  min-width: 0;
}

.profile-name-large-enhanced {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-email-enhanced {
  font-size: 0.8rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-avatar-large-enhanced {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.profile-avatar-large-enhanced img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.profile-large-fallback-enhanced {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
}

.menu-divider-enhanced {
  height: 1px;
  background: var(--border-light);
  margin: calc(var(--spacer)) 0;
}

.menu-item-enhanced {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
  color: var(--text-dark);
  text-decoration: none;
  transition: all 0.2s;
  width: 100%;
  border: none;
  background: none;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}

.menu-item-enhanced i {
  width: 20px;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.menu-item-enhanced:hover {
  background: rgba(183, 140, 90, 0.06);
}

.menu-item-enhanced:active {
  background: rgba(183, 140, 90, 0.1);
}

/* Logout button in dropdown */
#profileLogoutBtn {
  color: var(--text-soft);
}

#profileLogoutBtn:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.05);
}

#profileLogoutBtn:hover i {
  color: var(--danger);
}

/* ========================================================================
   SIDEBAR OVERLAY - EXACT MATCH TO PROVIDER DASHBOARD
   ======================================================================== */

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  z-index: 199;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* ========================================================================
   ADMIN SIDEBAR - EXACT MATCH TO PROVIDER DASHBOARD
   ======================================================================== */

.admin-sidebar {
  width: 280px;
  background: var(--card-bg);
  border-right: 1px solid var(--border-light);
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 200;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}

/* Desktop */
@media (min-width: 1025px) {
  .admin-sidebar {
    transform: translateX(0);
  }

  .sidebar-close {
    display: none;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .admin-sidebar {
    width: 260px;
    transform: translateX(-100%);
    box-shadow: none;
  }

  .admin-sidebar.active {
    transform: translateX(0);
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.15);
  }

  .sidebar-close {
    display: flex;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .admin-sidebar {
    width: 85%;
    max-width: 320px;
    transform: translateX(-100%);
    box-shadow: none;
  }

  .admin-sidebar.active {
    transform: translateX(0);
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.2);
  }

  .sidebar-close {
    display: flex;
  }
}

/* Sidebar Header */
.sidebar-header {
  padding: calc(var(--spacer) * 2.5) calc(var(--spacer) * 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
  background: var(--card-bg);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.sidebar-header .logo {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-dark);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.sidebar-header .logo span {
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.admin-badge {
  background: var(--accent);
  color: white;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 30px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 4px;
}

.sidebar-close {
  display: none;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-soft);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.sidebar-close:hover {
  background: var(--bg);
  color: var(--accent);
}

/* Admin Profile in Sidebar */
.admin-profile {
  padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg);
}

.profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.3);
  text-transform: uppercase;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

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

.profile-name {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-role {
  font-size: 0.7rem;
  color: var(--text-soft);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile Responsive Sidebar Adjustments */
@media (max-width: 767px) {
  .sidebar-header {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 1.5);
  }

  .sidebar-header .logo {
    font-size: 1.1rem;
  }

  .admin-profile {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 1.5);
    gap: calc(var(--spacer));
  }

  .profile-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
  }

  .profile-name {
    font-size: 0.85rem;
  }

  .profile-role {
    font-size: 0.6rem;
  }
}

@media (max-width: 480px) {
  .sidebar-header {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.2);
  }

  .sidebar-header .logo {
    font-size: 1rem;
  }

  .sidebar-close {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  .admin-profile {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.2);
  }

  .profile-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  .profile-name {
    font-size: 0.8rem;
  }
}

/* Scrollbar Styling */
.admin-sidebar::-webkit-scrollbar {
  width: 3px;
}

.admin-sidebar::-webkit-scrollbar-track {
  background: var(--bg);
}

.admin-sidebar::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}

.admin-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

.admin-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg);
}

/* ========================================================================
   SELECTION CARDS - For Financial and Content Sections
   ======================================================================== */

.selection-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
  animation: fadeIn 0.3s ease;
}

@media (min-width: 768px) {
  .selection-dashboard {
    padding: 30px;
  }
}

/* Selection Header */
.selection-header {
  margin-bottom: 40px;
}

.back-to-main-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  color: var(--text-dark);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 20px;
}

.back-to-main-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.2);
}

.back-to-main-btn i {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.back-to-main-btn:hover i {
  transform: translateX(-3px);
}

.selection-title-section {
  text-align: left;
}

.selection-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 8px 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.selection-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.selection-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 12px;
  line-height: 1.5;
}

/* Selection Grid */
.selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .selection-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Selection Card */
.selection-card {
  background: white;
  border-radius: 24px;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
}

.selection-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.selection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -12px rgba(183, 140, 90, 0.2);
  border-color: var(--accent);
}

.selection-card:hover::before {
  opacity: 1;
}

.selection-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    rgba(183, 140, 90, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.6rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.selection-card:hover .selection-card-icon {
  background: var(--accent);
  color: white;
  transform: scale(1.05);
}

.selection-card-content {
  flex: 1;
  min-width: 0;
}

.selection-card-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 6px 0;
}

.selection-card-content p {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.5;
}

.selection-card-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.selection-card:hover .selection-card-arrow {
  background: var(--accent);
  color: white;
  transform: translateX(4px);
}

/* Active selection card state */
.selection-card-active {
  border-color: var(--accent);
  background: linear-gradient(
    135deg,
    rgba(183, 140, 90, 0.04),
    rgba(183, 140, 90, 0.08)
  );
  box-shadow: 0 4px 16px rgba(183, 140, 90, 0.15);
  transform: translateY(-2px);
}

.selection-card-active::before {
  opacity: 1;
}

.selection-card-active .selection-card-icon {
  background: linear-gradient(135deg, var(--accent), #c9a066);
  color: white;
}

.selection-card-active .selection-card-arrow {
  background: var(--accent);
  color: white;
}

/* Inline content area below selection cards */
.selection-inline-content {
  display: none;
  margin-top: 30px;
  padding-top: 0;
  border-top: none;
}

.selection-inline-content.inline-visible {
  display: block;
  animation: inlineSlideExpand 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.selection-inline-content.inline-visible.inline-expanded {
  animation: none;
  opacity: 1;
  max-height: none;
  overflow: visible;
}

.selection-inline-content.inline-collapsing {
  overflow: hidden;
  animation: inlineSlideCollapse 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes inlineSlideExpand {
  0% {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(-12px);
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
    max-height: 9999px;
    overflow: visible;
    transform: translateY(0);
  }
}

@keyframes inlineSlideCollapse {
  0% {
    opacity: 1;
    max-height: 9999px;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    max-height: 0;
    transform: translateY(-12px);
  }
}

/* Hide redundant back buttons when content is displayed inline */
.selection-inline-content .back-button-container {
  display: none !important;
}

/* Inline content wrapper styling */
.selection-inline-content .transactions-dashboard,
.selection-inline-content .payouts-dashboard,
.selection-inline-content .reports-dashboard,
.selection-inline-content .categories-section,
.selection-inline-content .listings-moderation-section,
.selection-inline-content .listings-mod-section {
  padding-top: 0;
}

/* Connector line from active card to inline content */
.selection-inline-content::before {
  content: "";
  display: block;
  width: 2px;
  height: 24px;
  background: linear-gradient(180deg, var(--accent), transparent);
  margin: 0 auto 0;
  opacity: 0;
  animation: connectorFadeIn 0.4s 0.2s ease forwards;
}

@keyframes connectorFadeIn {
  0% {
    opacity: 0;
    height: 0;
  }
  100% {
    opacity: 1;
    height: 24px;
  }
}

/* Inline content inner panel */
.selection-inline-content > *:not(.loading-state)::before {
  content: none;
}

/* Active card enhanced state with downward arrow indicator */
.selection-card-active .selection-card-arrow {
  background: var(--accent);
  color: white;
  transform: rotate(90deg);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.selection-card-active:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(183, 140, 90, 0.15);
}

/* Subtle pulse on active card icon */
.selection-card-active .selection-card-icon {
  animation: activePulse 2.5s ease-in-out infinite;
}

@keyframes activePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(183, 140, 90, 0.2);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(183, 140, 90, 0);
  }
}

/* Loading state inside inline content */
.selection-inline-content .loading-state {
  padding: 48px 24px;
  text-align: center;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(183, 140, 90, 0.03),
    rgba(183, 140, 90, 0.06)
  );
  border: 1px dashed rgba(183, 140, 90, 0.2);
}

/* Collapse button styling */
.inline-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 1.5px solid var(--border-light);
  border-radius: 12px;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 16px;
}

.inline-collapse-btn:hover {
  background: rgba(183, 140, 90, 0.06);
  border-color: var(--accent);
  color: var(--accent);
}

.inline-collapse-btn i {
  font-size: 0.75rem;
  transition: transform 0.25s ease;
}

.inline-collapse-btn:hover i {
  transform: translateY(-2px);
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .selection-card {
    padding: 20px;
    gap: 15px;
  }

  .selection-card-icon {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
    border-radius: 14px;
  }

  .selection-card-content h3 {
    font-size: 1rem;
  }

  .selection-card-content p {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .selection-header {
    margin-bottom: 25px;
  }

  .back-to-main-btn {
    padding: 8px 16px;
    font-size: 0.8rem;
    margin-bottom: 15px;
  }

  .selection-title {
    font-size: 1.4rem;
  }

  .selection-subtitle {
    font-size: 0.85rem;
  }

  .selection-card {
    padding: 16px;
    gap: 12px;
  }

  .selection-card-icon {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }

  .selection-card-content h3 {
    font-size: 0.95rem;
  }

  .selection-card-content p {
    font-size: 0.75rem;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Add/update in dashboard-admin.css */

.back-to-dashboard-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  color: var(--text-dark);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 20px;
}

.back-to-dashboard-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.2);
}

.back-to-dashboard-btn i {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.back-to-dashboard-btn:hover i {
  transform: translateX(-3px);
}

/* Add to dashboard-admin.css */

.back-button-container {
  margin-bottom: 20px;
}

.back-to-financial-btn,
.back-to-content-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  color: var(--text-dark);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.back-to-financial-btn:hover,
.back-to-content-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.2);
}

.back-to-financial-btn i,
.back-to-content-btn i {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.back-to-financial-btn:hover i,
.back-to-content-btn:hover i {
  transform: translateX(-3px);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .back-to-financial-btn,
  .back-to-content-btn {
    padding: 8px 16px;
    font-size: 0.8rem;
    margin-bottom: 5px;
  }
}

@media (max-width: 480px) {
  .back-to-financial-btn,
  .back-to-content-btn {
    padding: 8px 14px;
    font-size: 0.75rem;
    width: 100%;
    justify-content: center;
  }

  .back-button-container {
    margin-bottom: 15px;
  }
}

/* Add to dashboard-admin.css */

.subcategories-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.subcategories-header h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.subcategories-header h4 i {
  color: var(--accent);
}

.subcategories-list {
  max-height: 440px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg);
}

.empty-subcategories {
  text-align: center;
  padding: 20px;
  color: var(--text-soft);
}

.empty-subcategories i {
  font-size: 1.6rem;
  margin-bottom: 8px;
  opacity: 0.3;
  color: var(--accent);
}

.empty-subcategories p {
  font-size: 0.82rem;
  margin: 0;
}

.subcategory-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-light);
  background: white;
}

.subcategory-item:last-child {
  border-bottom: none;
}

.subcategory-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.subcategory-name {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.84rem;
}

.subcategory-type-badge {
  font-size: 0.6rem;
  padding: 2px 8px;
  border-radius: 30px;
  font-weight: 600;
  text-transform: uppercase;
}

.subcategory-type-badge.service {
  background: #f2ebe3;
  color: var(--accent);
}

.subcategory-type-badge.product {
  background: #e1f0fa;
  color: #1e4a6b;
}

.subcategory-type-badge.both {
  background: linear-gradient(135deg, #f2ebe3 0%, #e1f0fa 100%);
  color: var(--text-dark);
}

.subcategory-sort {
  font-size: 0.65rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 20px;
}

.subcategory-actions {
  display: flex;
  gap: 4px;
}

.subcategory-actions .btn-icon.btn-sm {
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
}

/* Remove the old subcategories container from main view */
.subcategories-container {
  display: none !important;
}

/* Mobile responsive — stay horizontal, no wrapping */
@media (max-width: 480px) {
  .subcategories-list .subcategory-item {
    padding: 7px 8px;
    gap: 6px;
  }

  .subcategories-list .subcategory-info {
    gap: 4px;
  }

  .subcategories-list .subcategory-name {
    font-size: 0.78rem;
  }

  .subcategories-list .subcategory-sort {
    font-size: 0.6rem;
  }

  .subcategories-list .subcategory-role-chips .role-chip {
    font-size: 0.6rem;
    padding: 2px 7px;
  }
}

/* Add to dashboard-admin.css */

.subcategories-option {
  margin: 20px 0 10px 0;
  padding: 15px;
  background: var(--bg);
  border-radius: 12px;
  border: 1px solid var(--border-light);
}

.subcategories-option .checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.subcategories-option .checkbox-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.subcategories-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.subcategories-header h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.subcategories-header h4 i {
  color: var(--accent);
}

.subcategories-list {
  max-height: 440px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg);
}

.empty-subcategories {
  text-align: center;
  padding: 20px;
  color: var(--text-soft);
}

.empty-subcategories i {
  font-size: 1.6rem;
  margin-bottom: 8px;
  opacity: 0.3;
  color: var(--accent);
}

.empty-subcategories p {
  font-size: 0.82rem;
  margin: 0;
}

.subcategory-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-light);
  background: white;
}

.subcategory-item:last-child {
  border-bottom: none;
}

.subcategory-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.subcategory-name {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.84rem;
}

.subcategory-type-badge {
  font-size: 0.6rem;
  padding: 2px 8px;
  border-radius: 30px;
  font-weight: 600;
  text-transform: uppercase;
}

.subcategory-type-badge.service {
  background: #f2ebe3;
  color: var(--accent);
}

.subcategory-type-badge.product {
  background: #e1f0fa;
  color: #1e4a6b;
}

.subcategory-type-badge.both {
  background: linear-gradient(135deg, #f2ebe3 0%, #e1f0fa 100%);
  color: var(--text-dark);
}

.subcategory-sort {
  font-size: 0.65rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 20px;
}

.subcategory-actions {
  display: flex;
  gap: 4px;
}

.subcategory-actions .btn-icon.btn-sm {
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
}

/* Mobile responsive — stay horizontal, no wrapping */
@media (max-width: 480px) {
  .subcategories-list .subcategory-item {
    padding: 7px 8px;
    gap: 6px;
  }

  .subcategories-list .subcategory-info {
    gap: 4px;
  }

  .subcategories-list .subcategory-name {
    font-size: 0.78rem;
  }

  .subcategories-list .subcategory-sort {
    font-size: 0.6rem;
  }

  .subcategories-list .subcategory-role-chips .role-chip {
    font-size: 0.6rem;
    padding: 2px 7px;
  }
}

.form-divider {
  height: 1px;
  background: var(--border-light);
  margin: 20px 0;
}

/* ========================================================================
   WISHLIST SECTION STYLES
   ======================================================================== */

.wishlist-dashboard-enhanced {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  animation: fadeIn 0.4s ease;
}

@media (min-width: 768px) {
  .wishlist-dashboard-enhanced {
    padding: 30px;
  }
}

.wishlist-header-enhanced {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 20px;
}

.wishlist-header-enhanced .page-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  margin: 0 0 5px 0;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wishlist-header-enhanced .page-subtitle {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin: 0;
}

.wishlist-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.stat-card-mini {
  background: white;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
  cursor: pointer;
}

.stat-card-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(183, 140, 90, 0.15);
  border-color: var(--accent);
}

.stat-card-mini .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.stat-card-mini.all .stat-icon {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.stat-card-mini.products .stat-icon {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.stat-card-mini.services .stat-icon {
  background: rgba(183, 140, 90, 0.1);
  color: var(--accent);
}

.stat-card-mini .stat-content {
  flex: 1;
  min-width: 0;
}

.stat-card-mini .stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
}

.stat-card-mini .stat-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
}

.wishlist-section {
  margin-bottom: 40px;
}

.wishlist-section .section-title-serif {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--border-light);
}

.wishlist-section.products-section .section-title-serif i {
  color: #3b82f6;
}

.wishlist-section.services-section .section-title-serif i {
  color: var(--accent);
}

.wishlist-section .section-badge {
  margin-left: auto;
  background: var(--accent);
  color: white;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 600;
}

.wishlist-grid-enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.wishlist-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  cursor: pointer;
}

.wishlist-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
}

.wishlist-card-image {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.wishlist-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.wishlist-card:hover .wishlist-card-image img {
  transform: scale(1.05);
}

.remove-wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #ef4444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 5;
  opacity: 0;
  transform: scale(0.8);
}

.wishlist-card:hover .remove-wishlist-btn {
  opacity: 1;
  transform: scale(1);
}

.remove-wishlist-btn:hover {
  background: #ef4444;
  color: white;
  transform: scale(1.1) !important;
}

.item-type-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.item-type-badge.product {
  background: #3b82f6;
  color: white;
}

.item-type-badge.service {
  background: var(--accent);
  color: white;
}

.wishlist-card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wishlist-item-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wishlist-item-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.provider-info-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed var(--border-light);
  border-bottom: 1px dashed var(--border-light);
  font-size: 0.85rem;
  color: var(--text-soft);
}

.provider-info-mini i {
  color: var(--accent);
}

.wishlist-card-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.wishlist-card-actions .btn-outline,
.wishlist-card-actions .btn-primary {
  flex: 1;
  padding: 10px 8px;
  font-size: 0.8rem;
  border-radius: 40px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 40px;
}

.wishlist-card-actions .btn-outline {
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
}

.wishlist-card-actions .btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #f2ebe3;
}

.wishlist-card-actions .btn-primary {
  background: var(--accent);
  border: none;
  color: white;
}

.wishlist-card-actions .btn-primary:hover {
  background: #9a7a4e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.2);
}

.wishlist-card.product-card {
  border-left: 3px solid #3b82f6;
}

.wishlist-card.product-card .wishlist-item-price {
  color: #3b82f6;
}

.wishlist-card.service-card {
  border-left: 3px solid var(--accent);
}

.empty-wishlist-enhanced {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 30px;
  border: 2px dashed var(--border-light);
  margin-top: 20px;
}

.empty-illustration i {
  font-size: 4rem;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: 20px;
}

.empty-wishlist-enhanced h3 {
  font-size: 1.5rem;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.empty-wishlist-enhanced p {
  color: var(--text-soft);
  margin-bottom: 25px;
}

.empty-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.wishlist-dashboard-enhanced .error-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
  margin: 40px 0;
}

.wishlist-dashboard-enhanced .error-state i {
  font-size: 3rem;
  color: #ef4444;
  margin-bottom: 20px;
}

.wishlist-dashboard-enhanced .error-state h3 {
  font-size: 1.2rem;
  color: var(--text-dark);
  margin-bottom: 10px;
  font-weight: 500;
}

.wishlist-dashboard-enhanced .error-state p {
  color: var(--text-soft);
  margin-bottom: 25px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.wishlist-dashboard-enhanced .error-state .btn-primary {
  padding: 12px 30px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 40px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.wishlist-dashboard-enhanced .error-state .btn-primary:hover {
  background: #9a7a4e;
}

.wishlist-dashboard-enhanced .loading-state {
  text-align: center;
  padding: 60px 20px;
}

.wishlist-dashboard-enhanced .loading-state .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .wishlist-header-enhanced {
    flex-direction: column;
    align-items: flex-start;
  }

  .wishlist-grid-enhanced {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .wishlist-card-actions {
    flex-direction: column;
  }

  .empty-actions {
    flex-direction: column;
    align-items: center;
  }

  .empty-actions a {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .wishlist-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   DRAG-AND-DROP — Category & Subcategory Reordering
   ============================================================ */

/* ── Category drag handle (replaces old .category-sort) ─── */
.category-drag-handle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-soft);
  cursor: grab;
  padding: 4px 8px;
  border-radius: 8px;
  transition:
    background 0.18s,
    color 0.18s,
    transform 0.15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.category-drag-handle:hover {
  background: rgba(183, 140, 90, 0.1);
  color: var(--accent);
  transform: scale(1.05);
}

.category-drag-handle:active {
  cursor: grabbing;
}

.category-drag-handle i {
  font-size: 0.8rem;
  color: var(--accent);
  opacity: 0.7;
}

.category-drag-handle:hover i {
  opacity: 1;
}

.drag-order-label {
  font-size: 0.65rem;
  letter-spacing: 0.02em;
}

/* Subtle "grab me" nudge — pulsing dots on first load */
@keyframes drag-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

.categories-grid:not(.has-been-dragged) .category-drag-handle i {
  animation: drag-pulse 2.4s ease-in-out infinite;
}

.categories-grid.has-been-dragged .category-drag-handle i {
  animation: none;
}

/* ── SortableJS ghost/chosen/active states — category cards ─ */
.category-drag-ghost {
  opacity: 0.4;
  background: rgba(183, 140, 90, 0.06) !important;
  border: 2px dashed var(--accent) !important;
  border-radius: 24px !important;
  transform: scale(0.98);
}

.category-drag-chosen {
  box-shadow: 0 20px 48px -10px rgba(183, 140, 90, 0.28) !important;
  border-color: var(--accent) !important;
}

.category-drag-active {
  opacity: 0.92;
  cursor: grabbing !important;
  z-index: 9999;
  transform: rotate(1.2deg) scale(1.02);
  box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.22) !important;
  transition:
    transform 0.12s,
    box-shadow 0.12s !important;
}

/* body flag while dragging — prevent text selection everywhere */
body.is-dragging-category,
body.is-dragging-subcat {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing !important;
}

/* Smooth row transitions when items reorder */
.category-card-wrapper {
  transition: transform 0.18s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Subcategory drag handle (inside modal list) ─────────── */
.subcategory-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  cursor: grab;
  border-radius: 6px;
  color: var(--text-muted, #bbb);
  font-size: 0.8rem;
  transition:
    background 0.15s,
    color 0.15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.subcategory-drag-handle:hover {
  background: rgba(183, 140, 90, 0.1);
  color: var(--accent);
}

.subcategory-drag-handle:active {
  cursor: grabbing;
}

/* ── SortableJS ghost/chosen/active states — subcategory rows */
.subcat-drag-ghost {
  opacity: 0.35;
  background: rgba(183, 140, 90, 0.05) !important;
  border: 1.5px dashed var(--accent) !important;
}

.subcat-drag-chosen {
  box-shadow: 0 8px 24px -6px rgba(183, 140, 90, 0.2) !important;
}

.subcat-drag-active {
  opacity: 0.9;
  cursor: grabbing !important;
  z-index: 9999;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18) !important;
}

/* keep subcategory rows as flex so drag handle doesn't break layout */
.subcategory-item {
  gap: 10px;
}

/* ── Drag-hint banner inside the category management header ─ */
.category-drag-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-soft);
  background: rgba(183, 140, 90, 0.06);
  border: 1px dashed rgba(183, 140, 90, 0.3);
  border-radius: 20px;
  padding: 5px 12px;
  margin-left: auto;
  white-space: nowrap;
}

.category-drag-hint i {
  color: var(--accent);
  font-size: 0.7rem;
}

/* ========================================================================
   TEAM MANAGEMENT
   ======================================================================== */

/* Permission checkbox grid */
.perm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 480px) {
  .perm-grid {
    grid-template-columns: 1fr;
  }
}

.perm-checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.2s;
  background: white;
  min-height: 44px;
}

.perm-checkbox-item:hover {
  border-color: var(--accent-light);
  background: rgba(183, 140, 90, 0.03);
}

.perm-checkbox-item:has(input:checked) {
  border-color: var(--accent);
  background: rgba(183, 140, 90, 0.06);
}

.perm-checkbox-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.perm-checkbox-label {
  font-size: 0.85rem;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.perm-checkbox-label i {
  width: 16px;
  color: var(--text-soft);
  font-size: 0.82rem;
}

.perm-checkbox-item:has(input:checked) .perm-checkbox-label i {
  color: var(--accent);
}

/* Role badges for team management table */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.role-super_admin {
  background: linear-gradient(
    135deg,
    rgba(183, 140, 90, 0.15),
    rgba(218, 184, 143, 0.1)
  );
  color: var(--accent-dark);
}

.role-moderator {
  background: rgba(37, 99, 235, 0.08);
  color: var(--info);
}

.role-support {
  background: rgba(16, 185, 129, 0.08);
  color: var(--success);
}

.role-analyst {
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning);
}

.role-custom {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-soft);
}

/* Small icon buttons for table actions */
.btn-icon-sm {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: white;
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: all 0.2s;
  min-width: 36px;
  flex-shrink: 0;
}

.btn-icon-sm:hover {
  background: var(--bg);
  border-color: var(--accent-light);
  color: var(--accent);
  transform: translateY(-1px);
}

.btn-icon-sm[style*="color:var(--danger)"]:hover {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
}

/* Team table horizontal scroll */
.team-table-desktop .table-container-premium {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.team-table-desktop .data-table-premium {
  min-width: 720px;
}

/* Team empty state */
.team-empty-state {
  text-align: center;
  padding: 60px 24px;
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
}

.team-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgba(183, 140, 90, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.team-empty-icon i {
  font-size: 2rem;
  color: var(--accent-light);
}

.team-empty-state h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: var(--text-dark);
}

.team-empty-state p {
  color: var(--text-soft);
  margin-bottom: 24px;
  font-size: 0.9rem;
}

/* Mobile card view — hidden on desktop */
.team-cards-mobile {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-table-desktop {
  display: none;
}

@media (min-width: 768px) {
  .team-cards-mobile {
    display: none;
  }
  .team-table-desktop {
    display: block;
  }
}

/* Team member card (mobile) */
.team-member-card {
  background: white;
  border-radius: 18px;
  border: 1px solid var(--border-light);
  padding: 16px;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
}

.team-member-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.team-member-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.team-member-info {
  min-width: 0;
  flex: 1;
}

.team-member-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-member-email {
  font-size: 0.78rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-member-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.team-member-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.team-member-title {
  font-size: 0.78rem;
  color: var(--text-soft);
}

.team-member-perms {
  font-size: 0.78rem;
  color: var(--text-light);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.team-member-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  justify-content: flex-end;
}

/* ========================================================================
 * Category provider-role checkbox group (Add/Edit Category & Subcategory modals)
 * Card-style selectable chips with a single check icon when active.
 * ======================================================================== */
.role-checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.role-checkbox-group .role-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border-light, #e5e7eb);
  border-radius: 12px;
  background: var(--bg, #fff);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text, #1f1f1f);
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

.role-checkbox-group .role-checkbox:hover:not(.disabled) {
  border-color: var(--accent, #b78c5a);
  background: rgba(183, 140, 90, 0.04);
}

.role-checkbox-group .role-checkbox:active:not(.disabled) {
  transform: scale(0.98);
}

/* Hide the native checkbox; we draw our own indicator */
.role-checkbox-group .role-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Square indicator (empty by default) */
.role-checkbox-group .role-checkbox::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--border-light, #d1d5db);
  background: var(--bg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  font-size: 0.72rem;
  color: #fff;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

/* Checked state: fill + draw checkmark inside ::before */
.role-checkbox-group .role-checkbox:has(input:checked) {
  border-color: var(--accent, #b78c5a);
  background: rgba(183, 140, 90, 0.08);
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.12);
}

.role-checkbox-group .role-checkbox:has(input:checked)::before {
  content: "\f00c";
  background: var(--accent, #b78c5a);
  border-color: var(--accent, #b78c5a);
}

.role-checkbox-group .role-checkbox.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bg-soft, #f9fafb);
}

.role-checkbox-group .role-checkbox.disabled:hover {
  border-color: var(--border-light, #e5e7eb);
  background: var(--bg-soft, #f9fafb);
}

/* ========================================================================
 * Subcategories popup — single-line rows with thumb + inline role chips
 * ======================================================================== */
.subcategory-thumb-wrap {
  flex: 0 0 auto;
}

.subcategory-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  border: 1px solid var(--border-light, #e5e7eb);
  background: var(--bg-soft, #f3f4f6);
}

.subcategory-thumb-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--bg-soft, #f3f4f6);
  border: 1px dashed var(--border-light, #d1d5db);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light, #9ca3af);
  font-size: 0.85rem;
}

/* Force every subcategory row onto a single line: drag | thumb | info | actions */
.subcategories-list .subcategory-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  flex-wrap: nowrap;
}

.subcategories-list .subcategory-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.subcategories-list .subcategory-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

.subcategories-list .subcategory-sort {
  color: var(--text-soft, #6b7280);
  font-size: 0.78rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Chips sit inline beside the sort number on the same row */
.subcategories-list .subcategory-role-chips {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  flex: 0 0 auto;
  overflow: visible;
}

.subcategories-list .subcategory-role-chips .role-chip {
  white-space: normal;
  overflow: visible;
  max-width: none;
}

.subcategories-list .subcategory-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* ── Subcategories modal — mobile overrides ──────────────────────────────── */
@media (max-width: 600px) {
  /* Compact modal shell */
  .category-modal .modal-content {
    width: 96vw;
    max-width: 96vw;
    border-radius: 20px;
  }

  .category-modal .modal-header {
    padding: 12px 14px;
    gap: 8px;
  }

  .category-modal .modal-header h3 {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
  }

  .category-modal .modal-body {
    padding: 0;
  }

  /* ── Row layout: [drag][thumb][info][actions] — nowrap row ── */
  .subcategories-list .subcategory-item {
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 10px 12px;
    gap: 8px;
  }

  .subcategories-list .subcategory-drag-handle {
    align-self: center;
  }

  /* ── Info: name on its own line, badges below ── */
  .subcategories-list .subcategory-info {
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    overflow: visible;
  }

  .subcategories-list .subcategory-name {
    flex: 0 0 100%;   /* own full-width line */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82rem;
    min-width: 0;
  }

  /* type-badge, chips, sort share the second line */
  .subcategories-list .subcategory-type-badge {
    font-size: 0.58rem;
    padding: 2px 6px;
    flex: 0 0 auto;
  }

  .subcategories-list .subcategory-role-chips {
    flex-wrap: wrap;
    gap: 3px;
    flex: 0 0 auto;
  }

  .subcategories-list .subcategory-role-chips .role-chip {
    font-size: 0.6rem;
    padding: 1px 7px;
  }

  .subcategories-list .subcategory-sort {
    font-size: 0.62rem;
    flex: 0 0 auto;
  }

  /* Actions: top-right, not pulling to the end of a wrapped row */
  .subcategories-list .subcategory-actions {
    align-self: flex-start;
    margin-left: 0;
    gap: 4px;
  }

  .subcategories-list .subcategory-actions .btn-icon.btn-sm {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
  }

  /* Thumb size */
  .subcategory-thumb-wrap {
    flex: 0 0 30px;
    align-self: flex-start;
    margin-top: 2px;
  }

  .subcategory-thumb,
  .subcategory-thumb-placeholder {
    width: 30px;
    height: 30px;
    border-radius: 6px;
  }

  /* ── Inline add form: 2-row layout on mobile ── */
  .subcategory-inline-form {
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* Photo stays small, top-left */
  .subcategory-inline-form .inline-photo-wrap {
    flex: 0 0 36px;
  }

  .subcategory-inline-form .inline-photo-trigger,
  .subcategory-inline-form .inline-photo-preview {
    width: 36px;
    height: 36px;
  }

  /* Body takes the remaining first row beside photo, wraps its rows */
  .subcategory-inline-form .inline-body {
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Row 1: name input — full width of body */
  .subcategory-inline-form .inline-row-1 {
    display: flex;
    flex: 0 0 100%;
  }

  /* Row 2: badge + select + sort — full width of body */
  .subcategory-inline-form .inline-row-2 {
    display: flex;
    flex: 0 0 100%;
    gap: 6px;
    align-items: center;
  }

  /* Role dropdown fills remaining row-2 space */
  .subcategory-inline-form .inline-role {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
  }

  /* Smaller sort input */
  .subcategory-inline-form .inline-sort {
    flex: 0 0 50px;
    width: 50px;
  }

  /* Actions stay aligned to the right of photo, top of form */
  .subcategory-inline-form .inline-actions {
    flex: 0 0 auto;
    flex-direction: row;
    align-self: flex-start;
    gap: 4px;
  }

  /* Footer: keep Close + Add on the same row, don't stretch the + button */
  .category-modal .modal-footer {
    flex-direction: row !important;
    align-items: center;
    padding: 12px 14px;
    gap: 10px;
  }

  .category-modal .modal-footer button {
    width: auto !important;
  }

  .category-modal .modal-footer .btn-outline {
    flex: 1 1 auto;
  }

  .category-modal .modal-footer .btn-add-subcat {
    flex: 0 0 auto;
    width: 40px !important;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Shared role-chip style — used in popup AND elsewhere */
.role-chip {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--accent, #b78c5a);
  border: 1px solid rgba(183, 140, 90, 0.4);
  border-radius: 999px;
  background: rgba(183, 140, 90, 0.08);
  line-height: 1.4;
}

/* ── Inline add-subcategory form row ─────────────────────────────────────── */
.subcategory-inline-form {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(183, 140, 90, 0.05);
  border-top: 2px solid var(--accent, #b78c5a);
}

/* Photo upload square */
.inline-photo-wrap {
  flex: 0 0 44px;
  position: relative;
}

.inline-photo-trigger {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 2px dashed var(--border-light, #d1d5db);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light, #9ca3af);
  background: var(--bg-soft, #f3f4f6);
  font-size: 0.9rem;
  transition: border-color 0.15s, color 0.15s;
}

.inline-photo-trigger:hover {
  border-color: var(--accent, #b78c5a);
  color: var(--accent, #b78c5a);
}

.inline-photo-preview {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-light, #e5e7eb);
  display: block;
}

.inline-photo-remove {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

/* Single-row body */
.inline-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.inline-row-1,
.inline-row-2 {
  display: contents;
}

.subcategory-inline-form input,
.subcategory-inline-form select {
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.8rem;
  background: white;
  color: var(--text-dark);
  outline: none;
  font-family: inherit;
}

.subcategory-inline-form input:focus,
.subcategory-inline-form select:focus {
  border-color: var(--accent, #b78c5a);
  box-shadow: 0 0 0 2px rgba(183, 140, 90, 0.15);
}

.subcategory-inline-form .inline-name {
  flex: 1 1 auto;
  min-width: 0;
}

.subcategory-inline-form .inline-type-badge {
  flex: 0 0 auto;
  font-size: 0.62rem;
  padding: 2px 7px;
  border-radius: 30px;
  font-weight: 600;
  text-transform: uppercase;
  background: #e1f0fa;
  color: #1e4a6b;
  white-space: nowrap;
}

.subcategory-inline-form .inline-role {
  flex: 1 1 auto;
  min-width: 0;
}

.subcategory-inline-form .inline-sort {
  flex: 0 0 62px;
  width: 62px;
}

/* Save / Cancel on the same line */
.inline-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-self: center;
}

.subcategory-inline-form .inline-save,
.subcategory-inline-form .inline-cancel {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

.subcategory-inline-form .inline-save {
  background: var(--accent, #b78c5a);
  color: white;
}

.subcategory-inline-form .inline-cancel {
  background: var(--bg-soft, #f3f4f6);
  color: var(--text-soft, #6b7280);
  border: 1px solid var(--border-light, #e5e7eb);
}

.subcategory-inline-form .inline-save:hover { opacity: 0.85; }
.subcategory-inline-form .inline-cancel:hover { background: var(--border-light, #e5e7eb); }
.subcategory-inline-form .inline-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* "+" button in modal footer */
.btn-add-subcat {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--accent, #b78c5a);
  background: transparent;
  color: var(--accent, #b78c5a);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.btn-add-subcat:hover,
.btn-add-subcat.active {
  background: var(--accent, #b78c5a);
  color: white;
}

/* ── Inline subcategory add row ──────────────────────────────────────────── */
.subcategory-inline-add {
  background: #fafaf8;
  border: 1px dashed var(--accent, #b78c5a);
  border-radius: 10px;
  padding: 6px 10px;
  gap: 8px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 4px;
}

.subcategory-inline-add .inline-sub-name {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.85rem;
  outline: none;
  background: white;
}

.subcategory-inline-add .inline-sub-name:focus {
  border-color: var(--accent, #b78c5a);
  box-shadow: 0 0 0 2px rgba(183,140,90,0.15);
}

.subcategory-inline-add .inline-sub-role {
  flex: 0 0 auto;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 0.8rem;
  outline: none;
  background: white;
  max-width: 160px;
}

.subcategory-inline-add .inline-sub-sort {
  flex: 0 0 56px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 0.85rem;
  outline: none;
  background: white;
  width: 56px;
  text-align: center;
}

.subcategory-inline-add .inline-sub-save,
.subcategory-inline-add .inline-sub-cancel {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: background 0.15s, color 0.15s;
}

.subcategory-inline-add .inline-sub-save {
  background: var(--accent, #b78c5a);
  color: white;
}

.subcategory-inline-add .inline-sub-save:hover {
  background: #9a7448;
}

.subcategory-inline-add .inline-sub-cancel {
  background: #f3f4f6;
  color: #6b7280;
}

.subcategory-inline-add .inline-sub-cancel:hover {
  background: #fee2e2;
  color: #ef4444;
}

.subcategory-inline-add .subcategory-inline-img {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 0.8rem;
}

.subcategory-role-badge {
  flex: 0 0 auto;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 12px;
  background: #e0e7ff;
  color: #3730a3;
  white-space: nowrap;
}

/* ============================================================
   ADVERTISEMENT BANNERS SECTION
   ============================================================ */

.adv-dashboard {
  padding: 0;
}

.adv-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.adv-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px;
}

.adv-subtitle {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0;
}

/* Tabs */
.adv-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.adv-tabs::-webkit-scrollbar { display: none; }

.adv-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  margin-bottom: -2px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s;
}

.adv-tab.active,
.adv-tab:hover {
  color: #1a1a2e;
  border-bottom-color: #1a1a2e;
}

/* Grid */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.adv-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #9ca3af;
}

.adv-empty i {
  font-size: 2.5rem;
  margin-bottom: 12px;
  display: block;
}

/* Cards */
.adv-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow 0.2s;
}

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

.adv-card-img {
  position: relative;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.adv-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adv-card-no-img {
  color: rgba(0,0,0,.25);
  font-size: 2.5rem;
}

.adv-card-page-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
}

.adv-badge-products  { color: #0d6efd; }
.adv-badge-services  { color: #198754; }
.adv-badge-creators  { color: #9c27b0; }
.adv-badge-portfolio { color: #e65100; }
.adv-badge-home      { color: #c62828; }

.adv-card-body {
  padding: 14px 16px;
  flex: 1;
}

.adv-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.adv-card-tag {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

.adv-card-order {
  font-size: 0.72rem;
  color: #9ca3af;
}

.adv-card-headline {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
  line-height: 1.3;
}

.adv-card-copy {
  font-size: 0.82rem;
  color: #6b7280;
  margin: 0 0 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.adv-card-cta {
  font-size: 0.78rem;
  color: #1a1a2e;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.adv-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid #f3f4f6;
  background: #fafafa;
  gap: 10px;
}

/* Toggle switch */
.adv-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.adv-toggle-input {
  display: none;
}

.adv-toggle-slider {
  width: 38px;
  height: 22px;
  background: #d1d5db;
  border-radius: 11px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.adv-toggle-slider::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.adv-toggle-input:checked + .adv-toggle-slider {
  background: #22c55e;
}

.adv-toggle-input:checked + .adv-toggle-slider::after {
  left: 19px;
}

.adv-toggle-label {
  font-size: 0.78rem;
  color: #6b7280;
}

.adv-card-btns {
  display: flex;
  gap: 6px;
}

.adv-btn-edit,
.adv-btn-delete {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.adv-btn-edit:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.adv-btn-delete:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

/* Modal */
.adv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.adv-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.adv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f3f4f6;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.adv-modal-header h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.adv-modal-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #9ca3af;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.adv-modal-close:hover {
  background: #f3f4f6;
  color: #374151;
}

/* Form */
.adv-form {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adv-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.adv-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex-direction: unset;
}

.adv-form-row label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
}

.adv-hint {
  font-weight: 400;
  color: #9ca3af;
}

.adv-form-row input[type="text"],
.adv-form-row input[type="number"],
.adv-form-row select,
.adv-form-row textarea {
  padding: 9px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #111827;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
  font-family: inherit;
}

.adv-form-row input:focus,
.adv-form-row select:focus,
.adv-form-row textarea:focus {
  outline: none;
  border-color: #1a1a2e;
}

.adv-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adv-color-row input[type="color"] {
  width: 40px;
  height: 38px;
  padding: 2px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.adv-color-row input[type="text"] {
  flex: 1;
}

/* Upload area */
.adv-upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
  padding: 12px;
}

.adv-upload-area:hover {
  border-color: #1a1a2e;
  background: #f9fafb;
}

.adv-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #9ca3af;
  font-size: 0.88rem;
}

.adv-upload-placeholder i {
  font-size: 2rem;
}

/* Form actions */
.adv-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

@media (max-width: 600px) {
  .adv-form-row-2 {
    grid-template-columns: 1fr;
  }
  .adv-grid {
    grid-template-columns: 1fr;
  }
  .adv-header {
    flex-direction: column;
  }
}


/* ============================================================
   BANNER EDITOR (Canva-style full-screen)
   ============================================================ */

.be-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #0f1117;
  display: flex;
  flex-direction: column;
}

.be-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── Top bar ── */
.be-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 52px;
  background: #1a1d26;
  border-bottom: 1px solid #2e3248;
  flex-shrink: 0;
}

.be-back-btn {
  background: none;
  border: 1px solid #3a3f58;
  color: #9ba3c0;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.be-back-btn:hover { color: #fff; border-color: #6b7280; }

.be-tb-mid {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* View toggle group: Desktop / Mobile */
.be-vbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 34px;
  background: #1e2235;
  border: 1px solid #2e3450;
  border-radius: 8px;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.be-vbtn i { font-size: 0.82rem; }
.be-vbtn:hover {
  background: #2a2f45;
  border-color: #3d4460;
  color: #c9d1e0;
}
.be-vbtn.active {
  background: #3b4fd8;
  border-color: #3b4fd8;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(59,79,216,0.35);
}

/* Divider between the two view buttons and the copy button */
.be-tb-mid-sep {
  width: 1px;
  height: 20px;
  background: #2e3450;
  margin: 0 2px;
}

/* Copy button — subtler, outlined */
.be-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 34px;
  background: transparent;
  border: 1px dashed #3d4460;
  border-radius: 8px;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.be-copy-btn:hover {
  background: #2a2f45;
  border-color: #5a6080;
  border-style: solid;
  color: #c9d1e0;
}

.be-tb-end {
  display: flex;
  align-items: center;
  gap: 10px;
}

.be-tb-field {
  display: flex;
  align-items: center;
  gap: 6px;
}
.be-tb-field label {
  font-size: 0.75rem;
  color: #6b7280;
  white-space: nowrap;
}
.be-tb-field select,
.be-tb-field input[type="number"] {
  background: #2a2f45;
  border: 1px solid #3a3f58;
  color: #e5e7eb;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  height: 30px;
}

.be-active-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #9ba3c0;
  cursor: pointer;
  white-space: nowrap;
}
.be-active-lbl input { accent-color: #4f46e5; }

.be-save-btn {
  background: #4f46e5;
  color: #fff;
  border: none;
  padding: 7px 18px;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.be-save-btn:hover { background: #4338ca; }
.be-save-btn:disabled { opacity: 0.6; cursor: wait; }

/* ── Body ── */
.be-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Left panel ── */
.be-left {
  width: 220px;
  min-width: 220px;
  background: #1a1d26;
  border-right: 1px solid #2e3248;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.be-panel-sec {
  padding: 14px 14px 10px;
}

.be-panel-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #4b5280;
  margin-bottom: 10px;
}

.be-panel-divider {
  height: 1px;
  background: #2e3248;
  margin: 0;
}

/* Layers list */
.be-layers {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.be-layer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  color: #9ba3c0;
  font-size: 0.82rem;
  transition: background 0.12s, color 0.12s;
}
.be-layer:hover { background: #252a3d; color: #e5e7eb; }
.be-layer.be-layer-sel { background: #2d3250; color: #a5b4fc; }

.be-vis-lbl {
  cursor: pointer;
  color: inherit;
  display: flex;
}
.be-vis-lbl input { display: none; }
.be-layer-ico { font-size: 0.7rem; opacity: 0.6; }
.be-layer-name { flex: 1; }
.be-add-btns {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.be-add-el-btn {
  flex: 1;
  padding: 7px 4px;
  background: #252a3d;
  border: 1px dashed #3d4460;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.be-add-el-btn:hover { background: #2d3348; color: #e5e7eb; }

/* Background tabs */
.be-bgtabs {
  display: flex;
  gap: 2px;
  background: #252a3d;
  border-radius: 7px;
  padding: 3px;
  margin-bottom: 12px;
}
.be-bgtab {
  flex: 1;
  background: none;
  border: none;
  color: #6b7280;
  padding: 5px 0;
  border-radius: 5px;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.be-bgtab.active { background: #3a3f58; color: #e5e7eb; }

/* BG controls */
.be-bg-body { display: flex; flex-direction: column; gap: 10px; }

.be-ctrl label {
  display: block;
  font-size: 0.72rem;
  color: #6b7280;
  margin-bottom: 5px;
}
.be-cr {
  display: flex;
  align-items: center;
  gap: 6px;
}
.be-cr input[type="color"] {
  width: 34px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #3a3f58;
  padding: 2px;
  background: #252a3d;
  cursor: pointer;
  flex-shrink: 0;
}
.be-cr input[type="text"],
.be-bg-body input[type="text"],
.be-bg-body input[type="range"],
.be-bg-body select {
  flex: 1;
  background: #252a3d;
  border: 1px solid #3a3f58;
  color: #e5e7eb;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  height: 30px;
  width: 100%;
  box-sizing: border-box;
}
.be-bg-body input[type="range"] {
  padding: 0;
  height: 20px;
  accent-color: #4f46e5;
}

.be-img-drop {
  border: 2px dashed #3a3f58;
  border-radius: 8px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s;
}
.be-img-drop:hover { border-color: #6b7280; }
.be-img-thumb { width: 100%; height: 70px; object-fit: cover; }
.be-img-ph { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #4b5280; font-size: 0.75rem; }
.be-img-ph i { font-size: 1.4rem; }

/* ── Center canvas area ── */
.be-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  background: #0f1117;
  min-width: 0;
  overflow: hidden;
}

.be-scaler-wrap {
  position: relative;
  box-shadow: 0 0 0 1px #2e3248, 0 8px 40px rgba(0,0,0,0.6);
  border-radius: 4px;
  overflow: hidden;
}

.be-canvas {
  position: relative;
  overflow: hidden;
  transform-origin: top left;
  background: #1a1a2e;
}

.be-canvas-hint {
  font-size: 0.72rem;
  color: #4b5280;
  text-align: center;
}

/* Canvas elements */
.be-el {
  outline: none;
}
.be-el-sel {
  outline: 2px solid #4f46e5 !important;
  outline-offset: 2px;
}
.be-el:hover { outline: 1px dashed #6b7280; outline-offset: 2px; }
.be-el-sel:hover { outline: 2px solid #4f46e5; }

/* ── Right panel ── */
.be-right {
  width: 240px;
  min-width: 240px;
  background: #1a1d26;
  border-left: 1px solid #2e3248;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  padding: 14px;
}

#beRpTitle {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #4b5280;
  margin-bottom: 14px;
}

.be-no-sel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 10px;
  color: #4b5280;
  text-align: center;
  font-size: 0.82rem;
}
.be-no-sel i { font-size: 1.6rem; }

/* Props */
.be-prop {
  margin-bottom: 14px;
}
.be-prop label {
  display: block;
  font-size: 0.72rem;
  color: #6b7280;
  margin-bottom: 5px;
}
.be-prop textarea,
.be-prop input[type="text"],
.be-prop select {
  width: 100%;
  background: #252a3d;
  border: 1px solid #3a3f58;
  color: #e5e7eb;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
}
.be-prop textarea { min-height: 60px; }
.be-prop input[type="range"] {
  width: 100%;
  accent-color: #4f46e5;
  height: 18px;
}

.be-btn-row {
  display: flex;
  gap: 4px;
}
.be-sb {
  flex: 1;
  height: 30px;
  background: #252a3d;
  border: 1px solid #3a3f58;
  color: #6b7280;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.12s;
}
.be-sb:hover { background: #3a3f58; color: #e5e7eb; }
.be-sb.be-sb-on { background: #4f46e5; border-color: #4f46e5; color: #fff; }

.be-prop-del { margin-top: 6px; padding-top: 12px; border-top: 1px solid #2e3248; }
.be-del-btn {
  width: 100%;
  background: none;
  border: 1px solid #4b5280;
  color: #9ba3c0;
  padding: 7px;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.12s;
}
.be-del-btn:hover { border-color: #dc2626; color: #dc2626; background: #1a0a0a; }