/* ========================================================================
   DASHBOARD CUSTOMER/PROVIDER CSS
   Designers Puzzle Platform
   FULLY RESPONSIVE - All viewports (360px to desktop)
   ======================================================================== */

/* ========================================================================
   SECTION 1: CSS VARIABLES & GLOBAL STYLES
   ======================================================================== */

:root {
  /* Colors - Preserved from your design */
  --bg: #faf9f7;
  --text-dark: #2e2a28;
  --text-soft: #5e5a58;
  --accent: #b78c5a;
  --accent-light: #dab88f;
  --card-bg: #ffffff;
  --shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 20px 30px -12px rgba(0, 0, 0, 0.1);
  --border-light: #ece9e5;
  --font-serif: "Times New Roman", Georgia, serif;
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --spacer: 8px;
  --touch-target: 44px;

  /* 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;

  /* Z-index scale (audit L5) — single source of truth for layering */
  --z-base: 1;
  --z-sidebar: 100;
  --z-sticky: 200;
  --z-dropdown: 500;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

/* ========================================================================
   SECTION 2: LAYOUT & CONTAINERS - FULLY RESPONSIVE
   ======================================================================== */

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

/* Main Content Area with max-width constraint */
.dashboard-content,
.overview-dashboard,
.earnings-dashboard,
.bookings-dashboard,
.orders-dashboard,
.calendar-dashboard,
.availability-dashboard,
.messages-dashboard,
.profile-dashboard,
.portfolio-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: calc(var(--spacer) * 3);
}

/* Tablet Landscape (1024px - 1280px) */
@media (min-width: 1024px) and (max-width: 1280px) {
  .dashboard-content,
  .overview-dashboard,
  .earnings-dashboard,
  .bookings-dashboard,
  .orders-dashboard,
  .calendar-dashboard,
  .availability-dashboard,
  .messages-dashboard,
  .profile-dashboard,
  .portfolio-dashboard {
    padding: calc(var(--spacer) * 3.5);
  }
}

/* Tablet Portrait (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-content,
  .overview-dashboard,
  .earnings-dashboard,
  .bookings-dashboard,
  .orders-dashboard,
  .calendar-dashboard,
  .availability-dashboard,
  .messages-dashboard,
  .profile-dashboard,
  .portfolio-dashboard {
    padding: calc(var(--spacer) * 2.5);
  }
}

/* Mobile Landscape (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .dashboard-content,
  .overview-dashboard,
  .earnings-dashboard,
  .bookings-dashboard,
  .orders-dashboard,
  .calendar-dashboard,
  .availability-dashboard,
  .messages-dashboard,
  .profile-dashboard,
  .portfolio-dashboard {
    padding: calc(var(--spacer) * 2);
  }
}

/* Mobile Portrait (360px - 479px) */
@media (min-width: 360px) and (max-width: 479px) {
  .dashboard-content,
  .overview-dashboard,
  .earnings-dashboard,
  .bookings-dashboard,
  .orders-dashboard,
  .calendar-dashboard,
  .availability-dashboard,
  .messages-dashboard,
  .profile-dashboard,
  .portfolio-dashboard {
    padding: calc(var(--spacer) * 1.5);
  }
}

/* Small Mobile (below 360px) */
@media (max-width: 359px) {
  .dashboard-content,
  .overview-dashboard,
  .earnings-dashboard,
  .bookings-dashboard,
  .orders-dashboard,
  .calendar-dashboard,
  .availability-dashboard,
  .messages-dashboard,
  .profile-dashboard,
  .portfolio-dashboard {
    padding: calc(var(--spacer) * 1.2);
  }
}

/* ========================================================================
   SECTION 3: SIDEBAR & HEADER - FULLY RESPONSIVE
   ======================================================================== */

/* frontend/public/css/dashboard-provider.css - Complete Responsive Sidebar */

/* ========================================================================
   DASHBOARD SIDEBAR - COMPLETE RESPONSIVE DESIGN
   ======================================================================== */

/* Base Sidebar Styles */
.dashboard-sidebar {
  width: 280px;
  background: var(--card-bg);
  border-right: 1px solid var(--border-light);
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: var(--z-sidebar, 200);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}

/* Audit L6 — collapse the sidebar off-canvas on small phones (≤480px). The
   JS toggles the .active class (see dashboard-provider.js handleMobileMenu),
   so we key the visible state off that class. */
@media (max-width: 480px) {
  .dashboard-sidebar {
    width: min(280px, 85vw);
    transform: translateX(-100%);
  }
  .dashboard-sidebar.active {
    transform: translateX(0);
  }
  .dashboard-main {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* Main Content Area — offset from the fixed sidebar */
.dashboard-main {
  margin-left: 280px;
  min-height: 100vh;
  width: calc(100% - 280px);
}

/* 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;
}

.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);
}

/* Sidebar User Section */
.sidebar-user {
  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);
}

.user-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;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: fill;
}

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

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

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

.user-level {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 30px;
  background: var(--accent-light);
  color: var(--text-dark);
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar Navigation */
.sidebar-nav {
  flex: 1;
  padding: calc(var(--spacer) * 1.5) 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Nav Items */
.nav-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  color: var(--text-soft);
  text-decoration: none;
  transition: all 0.2s;
  min-height: 48px;
  border-left: 3px solid transparent;
  font-size: 0.9rem;
  position: relative;
  white-space: nowrap;
}

.nav-item i {
  width: 20px;
  font-size: 1rem;
  color: currentColor;
  flex-shrink: 0;
}

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

.nav-item .badge {
  margin-left: auto;
  background: var(--accent);
  color: white;
  padding: 2px 6px;
  border-radius: 30px;
  font-size: 0.6rem;
  min-width: 18px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-item:hover {
  background: var(--bg);
  color: var(--text-dark);
}

.nav-item.active {
  background: #f2ebe3;
  color: var(--accent);
  border-left-color: var(--accent);
}

/* Nav Sections (Dropdown) */
.nav-section {
  margin: calc(var(--spacer) * 0.5) 0;
}

.nav-section-header {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  min-height: 48px;
  border-left: 3px solid transparent;
  position: relative;
  white-space: nowrap;
}

.nav-section-header i:first-child {
  width: 20px;
  font-size: 1rem;
  flex-shrink: 0;
}

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

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

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

.nav-section-header:hover {
  background: var(--bg);
  color: var(--text-dark);
}

.nav-section-header.active {
  background: #f2ebe3;
  color: var(--accent);
  border-left-color: var(--accent);
}

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

/* Submenu */
.nav-submenu {
  display: none;
  padding-left: calc(var(--spacer) * 2);
  margin-left: calc(var(--spacer) * 2.5);
  border-left: 1px solid var(--border-light);
  margin-bottom: calc(var(--spacer) * 0.5);
  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: calc(var(--spacer) * 1.2);
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  color: var(--text-soft);
  text-decoration: none;
  transition: all 0.2s;
  min-height: 40px;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.nav-subitem i {
  width: 18px;
  font-size: 0.85rem;
  flex-shrink: 0;
}

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

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

.nav-subitem:hover {
  background: var(--bg);
  color: var(--text-dark);
}

.nav-subitem.active {
  color: var(--accent);
  background: #f2ebe3;
}

/* Nav Divider */
.nav-divider {
  height: 1px;
  background: var(--border-light);
  margin: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
}

/* 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(2px);
  z-index: 199;
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

/* ========================================================================
   DESKTOP (1025px and above)
   ======================================================================== */
@media (min-width: 1025px) {
  .dashboard-sidebar {
    transform: translateX(0);
  }

  .sidebar-close {
    display: none;
  }

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

  .sidebar-overlay {
    display: none !important;
  }

  /* Hover tooltips for truncated text */
  .nav-item:hover span,
  .nav-section-header:hover span,
  .nav-subitem:hover span {
    position: relative;
  }

  .nav-item:hover span::after,
  .nav-section-header:hover span::after,
  .nav-subitem:hover span::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-dark);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: var(--z-tooltip, 1000);
    margin-left: 8px;
  }
}

/* ========================================================================
   TABLET LANDSCAPE (768px - 1024px)
   ======================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .dashboard-sidebar {
    width: 260px;
    transform: translateX(-100%);
    box-shadow: none;
  }

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

  .sidebar-close {
    display: flex;
  }

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

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

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

  /* Adjust header for tablet */
  .dashboard-header {
    padding-left: calc(var(--spacer) * 3);
  }

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

  /* Smaller sidebar items */
  .nav-item,
  .nav-section-header {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
    font-size: 0.85rem;
    min-height: 44px;
  }

  .nav-subitem {
    padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.2);
    font-size: 0.8rem;
    min-height: 38px;
  }

  .user-avatar {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .user-name {
    font-size: 0.9rem;
  }

  .user-role {
    font-size: 0.65rem;
  }
}

/* ========================================================================
   MOBILE PORTRAIT & LANDSCAPE (up to 767px)
   ======================================================================== */
@media (max-width: 767px) {
  .dashboard-sidebar {
    width: 85%;
    max-width: 320px;
    transform: translateX(-100%);
    box-shadow: none;
  }

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

  .sidebar-close {
    display: flex;
    font-size: 1.3rem;
  }

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

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

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

  /* Header adjustments */
  .dashboard-header {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: calc(var(--spacer) * 0.8);
  }

  .page-title {
    font-size: 1.1rem;
    max-width: 150px;
  }

  /* Hide desktop search on mobile */
  .search-container {
    display: none;
  }

  .mobile-search {
    display: block;
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  }

  /* Bottom navigation for mobile */
  .mobile-bottom-nav {
    display: flex;
    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: calc(var(--spacer) * 0.5) 0;
    z-index: 90;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03);
  }

  .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: calc(var(--spacer) * 0.5) 0;
    min-height: 48px;
    transition: all 0.2s;
  }

  .bottom-nav-item i {
    font-size: 1.2rem;
    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);
  }

  /* Sidebar content adjustments for mobile */
  .sidebar-header {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 1.5);
  }

  .sidebar-header .logo {
    font-size: 1.1rem;
  }

  .sidebar-user {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 1.5);
    gap: calc(var(--spacer));
  }

  .user-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
  }

  .user-name {
    font-size: 0.85rem;
  }

  .user-role {
    font-size: 0.6rem;
  }

  .user-level {
    font-size: 0.55rem;
    padding: 1px 6px;
  }

  /* Navigation items */
  .nav-item,
  .nav-section-header {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
    font-size: 0.85rem;
    min-height: 44px;
  }

  .nav-item i,
  .nav-section-header i:first-child {
    width: 18px;
    font-size: 0.9rem;
  }

  .nav-submenu {
    padding-left: calc(var(--spacer) * 1.5);
    margin-left: calc(var(--spacer) * 2);
  }

  .nav-subitem {
    padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.2);
    font-size: 0.8rem;
    min-height: 40px;
  }

  .nav-subitem i {
    width: 16px;
    font-size: 0.8rem;
  }

  .nav-divider {
    margin: calc(var(--spacer)) calc(var(--spacer) * 1.5);
  }

  /* Badge adjustments */
  .nav-item .badge,
  .nav-subitem .badge {
    font-size: 0.55rem;
    padding: 1px 4px;
    min-width: 16px;
    height: 16px;
  }
}

/* ========================================================================
   SMALL MOBILE (up to 480px)
   ======================================================================== */
@media (max-width: 480px) {
  .dashboard-sidebar {
    width: 90%;
    max-width: 280px;
  }

  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .page-title {
    font-size: 1rem;
    max-width: 120px;
  }

  .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;
  }

  .sidebar-user {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.2);
  }

  .user-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

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

  .user-role {
    font-size: 0.55rem;
  }

  .user-level {
    font-size: 0.5rem;
    padding: 1px 4px;
  }

  .nav-item,
  .nav-section-header {
    padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.2);
    font-size: 0.8rem;
    min-height: 40px;
  }

  .nav-item i,
  .nav-section-header i:first-child {
    width: 16px;
    font-size: 0.85rem;
  }

  .nav-section-header .dropdown-icon {
    font-size: 0.7rem;
  }

  .nav-subitem {
    padding: calc(var(--spacer) * 0.8) calc(var(--spacer));
    font-size: 0.75rem;
    min-height: 36px;
  }

  .nav-subitem i {
    width: 14px;
    font-size: 0.75rem;
  }

  .nav-divider {
    margin: calc(var(--spacer) * 0.8) calc(var(--spacer) * 1.2);
  }

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

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

  /* Touch targets */
  .nav-item,
  .nav-section-header,
  .nav-subitem,
  .mobile-menu-toggle,
  .sidebar-close,
  .bottom-nav-item {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ========================================================================
   EXTRA SMALL MOBILE (up to 360px)
   ======================================================================== */
@media (max-width: 360px) {
  .dashboard-sidebar {
    width: 100%;
    max-width: none;
  }

  .page-title {
    max-width: 100px;
    font-size: 0.95rem;
  }

  .mobile-menu-toggle {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }

  .sidebar-header .logo {
    font-size: 0.95rem;
  }

  .user-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .user-name {
    font-size: 0.75rem;
  }

  .nav-item,
  .nav-section-header {
    font-size: 0.75rem;
    padding: calc(var(--spacer) * 0.8) calc(var(--spacer));
  }

  .nav-subitem {
    font-size: 0.7rem;
  }

  .bottom-nav-item i {
    font-size: 1rem;
  }

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

/* ========================================================================
   LANDSCAPE ORIENTATION (Mobile)
   ======================================================================== */
@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .dashboard-sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sidebar-user {
    padding: calc(var(--spacer)) calc(var(--spacer) * 1.5);
  }

  .user-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: calc(var(--spacer));
    flex-wrap: wrap;
  }

  .user-name {
    font-size: 0.8rem;
    margin-bottom: 0;
  }

  .user-role,
  .user-level {
    font-size: 0.6rem;
  }

  .nav-item,
  .nav-section-header {
    padding: calc(var(--spacer) * 0.8) calc(var(--spacer) * 1.2);
    min-height: 36px;
  }

  .nav-subitem {
    padding: calc(var(--spacer) * 0.6) calc(var(--spacer));
    min-height: 32px;
  }

  .mobile-bottom-nav {
    display: none;
  }

  .dashboard-main {
    padding-bottom: 0;
  }
}

/* ========================================================================
   SAFE AREA INSETS (Modern Mobile Devices)
   ======================================================================== */
@supports (padding: max(0px)) {
  .dashboard-sidebar {
    padding-top: max(env(safe-area-inset-top), 0px);
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
  }

  .sidebar-header {
    padding-top: max(env(safe-area-inset-top), calc(var(--spacer) * 2));
  }

  .mobile-bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom), calc(var(--spacer) * 0.5));
  }
}

/* ========================================================================
   SCROLLBAR STYLING (Webkit)
   ======================================================================== */
.dashboard-sidebar::-webkit-scrollbar {
  width: 3px;
}

.dashboard-sidebar::-webkit-scrollbar-track {
  background: var(--bg);
}

.dashboard-sidebar::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}

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

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

/* ========================================================================
   TOUCH OPTIMIZATIONS
   ======================================================================== */
@media (hover: none) and (pointer: coarse) {
  .nav-item:active,
  .nav-section-header:active,
  .nav-subitem:active,
  .sidebar-close:active,
  .mobile-menu-toggle:active {
    background: var(--bg);
    transform: scale(0.98);
  }

  .nav-item.active:active,
  .nav-section-header.active:active,
  .nav-subitem.active:active {
    background: #e8d9cc;
  }
}

/* ========================================================================
   SECTION 4: BUTTONS & INTERACTIVE ELEMENTS - FULLY RESPONSIVE
   ======================================================================== */

/* Base Button Styles */
.btn-primary,
.btn-outline {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 3);
  border-radius: 40px;
  font-size: 0.85rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer));
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
  font-weight: 500;
  width: auto;
}

/* Tablet */
@media (min-width: 768px) {
  .btn-primary,
  .btn-outline {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 4);
    font-size: 0.9rem;
    min-height: 44px;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .btn-primary,
  .btn-outline {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 5);
    font-size: 0.95rem;
    min-height: 48px;
  }
}

/* Full width on mobile when needed */
@media (max-width: 480px) {
  .btn-primary.full-width-mobile,
  .btn-outline.full-width-mobile {
    width: 100%;
  }
}

.btn-primary {
  background: var(--text-dark);
  color: #fff;
  margin: 0;
}

.btn-primary:hover {
  background: #4a3f3a;
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .btn-primary:hover {
    transform: translateY(-2px);
  }
}

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

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

.btn-outline:hover {
  background: var(--text-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .btn-outline:hover {
    transform: translateY(-2px);
  }
}

/* Small Button Variant */
.btn-outline.small,
.btn-outline.btn-sm {
  padding: calc(var(--spacer) * 0.8) calc(var(--spacer) * 1.5);
  font-size: 0.75rem;
  min-height: 32px;
  gap: calc(var(--spacer) * 0.5);
}

@media (min-width: 768px) {
  .btn-outline.small,
  .btn-outline.btn-sm {
    padding: calc(var(--spacer)) calc(var(--spacer) * 2);
    font-size: 0.8rem;
    min-height: 36px;
  }
}

@media (min-width: 1025px) {
  .btn-outline.small,
  .btn-outline.btn-sm {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2.5);
    font-size: 0.85rem;
    min-height: 40px;
  }
}

/* Danger Button Variant */
.btn-outline.danger {
  color: var(--danger);
  border-color: var(--danger);
}

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

/* Text Button */
.btn-text {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
  padding: calc(var(--spacer) * 0.8) calc(var(--spacer) * 1.5);
  border-radius: 30px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
  min-height: 36px;
  text-decoration: none;
  font-weight: 500;
}

@media (min-width: 768px) {
  .btn-text {
    font-size: 0.85rem;
    padding: calc(var(--spacer)) calc(var(--spacer) * 2);
    min-height: 40px;
  }
}

@media (min-width: 1025px) {
  .btn-text {
    font-size: 0.9rem;
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2.5);
    min-height: 44px;
  }
}

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

/* Icon Button */
.btn-icon {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 36px;
  min-height: 36px;
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .btn-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 1rem;
  }
}

@media (min-width: 1025px) {
  .btn-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.1rem;
  }
}

.btn-icon:hover {
  background: var(--bg);
  color: var(--accent);
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .btn-icon:hover {
    transform: scale(1.1);
  }
}

.btn-icon:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-icon .fa-spinner {
  animation: spin 1s linear infinite;
}

/* Button Groups for mobile */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer));
  width: 100%;
}

@media (max-width: 480px) {
  .btn-group.vertical-mobile {
    flex-direction: column;
  }

  .btn-group.vertical-mobile .btn-primary,
  .btn-group.vertical-mobile .btn-outline {
    width: 100%;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ========================================================================
   SECTION 5: STATUS BADGES - FULLY RESPONSIVE
   ======================================================================== */

.status-badge {
  padding: 3px 8px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: capitalize;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .status-badge {
    padding: 4px 10px;
    font-size: 0.7rem;
    gap: 4px;
  }
}

@media (min-width: 1025px) {
  .status-badge {
    padding: 4px 12px;
    font-size: 0.75rem;
  }
}

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

@media (min-width: 768px) {
  .status-badge i {
    font-size: 0.65rem;
  }
}

@media (min-width: 1025px) {
  .status-badge i {
    font-size: 0.7rem;
  }
}

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

.status-badge.quoted {
  background: var(--neutral-light);
  color: #4b5563;
}

.status-badge.approved {
  background: var(--success-light);
  color: #2f6e4a;
}

.status-badge.in_progress {
  background: var(--info-light);
  color: #1e4a6b;
}

.status-badge.completed {
  background: var(--success-light);
  color: #2f6e4a;
}

.status-badge.cancelled {
  background: var(--danger-light);
  color: #aa4a44;
}

.status-badge.rejected {
  background: var(--danger-light);
  color: #aa4a44;
}

.status-badge.confirmed {
  background: var(--success-light);
  color: #2f6e4a;
}

/* Booking Statuses (on cards) */
.booking-card.pending .booking-status {
  background: var(--warning-light);
  color: #b45309;
}

.booking-card.confirmed .booking-status {
  background: var(--success-light);
  color: #2f6e4a;
}

.booking-card.rejected .booking-status {
  background: var(--danger-light);
  color: #aa4a44;
}

.booking-card.cancelled .booking-status {
  background: var(--neutral-light);
  color: var(--text-soft);
}

.booking-card.completed .booking-status {
  background: var(--success-light);
  color: #2f6e4a;
}

/* Listing Statuses */
.status-badge.published {
  background: var(--success-light);
  color: #2f6e4a;
}

.status-badge.unpublished {
  background: var(--danger-light);
  color: #aa4a44;
}

/* ========================================================================
   SECTION 6: LOADING STATES & SKELETONS - FULLY RESPONSIVE
   ======================================================================== */

.loading-state {
  text-align: center;
  padding: calc(var(--spacer) * 6);
  color: var(--text-soft);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .loading-state {
    padding: calc(var(--spacer) * 8);
  }
}

@media (min-width: 1025px) {
  .loading-state {
    padding: calc(var(--spacer) * 10);
  }
}

.loading-spinner {
  display: inline-block;
  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: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .loading-spinner {
    width: 36px;
    height: 36px;
    border-width: 2.5px;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1025px) {
  .loading-spinner {
    width: 40px;
    height: 40px;
    border-width: 3px;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Overview Loading - Responsive */
.overview-loading {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .overview-loading {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .overview-loading {
    padding: calc(var(--spacer) * 4);
  }
}

.welcome-skeleton {
  margin-bottom: calc(var(--spacer) * 4);
}

@media (min-width: 768px) {
  .welcome-skeleton {
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .welcome-skeleton {
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.stats-grid-skeleton {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
}

@media (min-width: 480px) {
  .stats-grid-skeleton {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .stats-grid-skeleton {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .stats-grid-skeleton {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.stat-card-skeleton {
  height: 100px;
  border-radius: 16px;
}

@media (min-width: 768px) {
  .stat-card-skeleton {
    height: 120px;
  }
}

@media (min-width: 1025px) {
  .stat-card-skeleton {
    height: 140px;
  }
}

.charts-skeleton {
  margin-top: calc(var(--spacer) * 3);
  height: 200px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@media (min-width: 768px) {
  .charts-skeleton {
    height: 250px;
    margin-top: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .charts-skeleton {
    height: 300px;
  }
}

/* Bookings Loading - Responsive */
.bookings-loading {
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .bookings-loading {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .bookings-loading {
    padding: calc(var(--spacer) * 4);
  }
}

.bookings-header-skeleton {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 768px) {
  .bookings-header-skeleton {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.bookings-header-skeleton > div {
  height: 40px;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .bookings-header-skeleton > div:first-child {
    width: 200px;
  }

  .bookings-header-skeleton > div:last-child {
    width: 250px;
  }
}

/* Orders Loading - Responsive */
.orders-loading {
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .orders-loading {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .orders-loading {
    padding: calc(var(--spacer) * 4);
  }
}

.orders-header-skeleton {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 768px) {
  .orders-header-skeleton {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.orders-header-skeleton > div {
  height: 40px;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .orders-header-skeleton > div:first-child {
    width: 200px;
  }

  .orders-header-skeleton > div:last-child {
    width: 300px;
  }
}

/* Earnings Loading - Responsive */
.earnings-loading {
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .earnings-loading {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .earnings-loading {
    padding: calc(var(--spacer) * 4);
  }
}

.earnings-header-skeleton {
  height: 60px;
  width: 200px;
  margin-bottom: calc(var(--spacer) * 3);
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .earnings-header-skeleton {
    height: 70px;
    width: 250px;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .earnings-header-skeleton {
    height: 80px;
    width: 300px;
  }
}

/* Chart Skeleton */
.chart-skeleton {
  height: 200px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-top: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .chart-skeleton {
    height: 250px;
  }
}

@media (min-width: 1025px) {
  .chart-skeleton {
    height: 300px;
  }
}

/* Skeleton Cards for Grid Layouts */
.skeleton-card {
  height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
}

/* Responsive skeleton grids */
.skeleton-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .skeleton-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .skeleton-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacer) * 3);
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .skeleton-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 4);
    padding: calc(var(--spacer) * 4);
  }
}

/* ========================================================================
   SECTION 7: TOAST NOTIFICATIONS - FULLY RESPONSIVE
   ======================================================================== */

.toast-notification {
  position: fixed;
  top: 10px;
  right: 10px;
  left: 10px;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: var(--shadow-hover);
  z-index: var(--z-toast, 1100);
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: none;
  border-left: 4px solid;
  animation: slideDown 0.3s ease forwards;
  font-size: 0.9rem;
}

@media (min-width: 480px) {
  .toast-notification {
    top: 20px;
    right: 20px;
    left: auto;
    width: auto;
    min-width: 280px;
    max-width: 350px;
    transform: translateX(400px);
    opacity: 1;
    transition: transform 0.3s ease;
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
    font-size: 0.95rem;
  }
}

.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

@media (min-width: 480px) {
  .toast-notification.show {
    transform: translateX(0);
  }
}

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

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

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

/* Toast animation for mobile */
@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ========================================================================
   SECTION 8: MODALS & OVERLAYS - FULLY RESPONSIVE
   ======================================================================== */

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  padding: calc(var(--spacer));
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: var(--card-bg);
  border-radius: 24px;
  width: 95%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-hover);
  animation: slideUp 0.3s ease;
  position: relative;
}

@media (min-width: 480px) {
  .modal-content {
    width: 90%;
    border-radius: 28px;
  }
}

@media (min-width: 768px) {
  .modal-content {
    border-radius: 32px;
  }
}

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

@media (min-width: 480px) {
  .modal-header {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .modal-header {
    padding: calc(var(--spacer) * 4);
  }
}

.modal-header h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0;
  padding-right: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .modal-header h3 {
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .modal-header h3 {
    font-size: 1.4rem;
  }
}

@media (min-width: 1025px) {
  .modal-header h3 {
    font-size: 1.5rem;
  }
}

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

@media (min-width: 480px) {
  .modal-close {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
}

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

.modal-body {
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .modal-body {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .modal-body {
    padding: calc(var(--spacer) * 4);
  }
}

.modal-footer {
  padding: calc(var(--spacer) * 2);
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
  position: sticky;
  bottom: 0;
  background: var(--card-bg);
  border-radius: 0 0 24px 24px;
}

@media (min-width: 480px) {
  .modal-footer {
    flex-direction: row;
    justify-content: flex-end;
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .modal-footer {
    padding: calc(var(--spacer) * 4);
  }
}

/* Modal Footer Buttons Responsive */
.modal-footer .btn-primary,
.modal-footer .btn-outline {
  width: 100%;
  margin: 0;
}

@media (min-width: 480px) {
  .modal-footer .btn-primary,
  .modal-footer .btn-outline {
    width: auto;
    min-width: 120px;
  }
}

/* Booking Modal */
.booking-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

@media (min-width: 480px) {
  .booking-modal {
    align-items: center;
  }
}

.booking-modal .modal-content {
  background: var(--card-bg);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  margin: 0;
  animation: slideUp 0.3s ease;
}

@media (min-width: 480px) {
  .booking-modal .modal-content {
    border-radius: 24px;
    width: 90%;
    margin: auto;
  }
}

.booking-modal .modal-header {
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .booking-modal .modal-header {
    padding: calc(var(--spacer) * 3);
  }
}

.booking-modal .modal-body {
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .booking-modal .modal-body {
    padding: calc(var(--spacer) * 3);
  }
}

.booking-modal .modal-footer {
  padding: calc(var(--spacer) * 2);
  flex-direction: column;
}

@media (min-width: 480px) {
  .booking-modal .modal-footer {
    padding: calc(var(--spacer) * 3);
    flex-direction: row;
  }
}

/* Lightbox Modal */
.lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: var(--z-modal, 1000);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
  padding: calc(var(--spacer) * 2);
}

.lightbox-content {
  position: relative;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
  }
}

.lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
  .lightbox-content img {
    max-height: 90vh;
  }
}

.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10;
}

@media (min-width: 768px) {
  .lightbox-close {
    top: -40px;
    right: -40px;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.lightbox-prev,
.lightbox-next {
  display: none;
}

@media (min-width: 768px) {
  .lightbox-prev,
  .lightbox-next {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }

  .lightbox-prev {
    left: 20px;
  }

  .lightbox-next {
    right: 20px;
  }

  .lightbox-prev:hover,
  .lightbox-next:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
  }
}

@media (min-width: 1025px) {
  .lightbox-prev {
    left: -60px;
  }

  .lightbox-next {
    right: -60px;
  }
}

/* ========================================================================
   LISTING FORM MODAL (PRODUCTS/SERVICES) - BUTTONS OUTSIDE CARD
   ======================================================================== */

/* Listing Modal Content */
.listing-modal {
  background: var(--card-bg);
  border-radius: 24px;
  width: 95%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-hover);
  animation: slideUp 0.3s ease;
  display: flex;
  flex-direction: column;
}

@media (min-width: 480px) {
  .listing-modal {
    width: 90%;
  }
}

@media (min-width: 768px) {
  .listing-modal {
    border-radius: 32px;
  }
}

/* Modal Header */
.listing-modal .modal-header {
  padding: calc(var(--spacer) * 2);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card-bg);
  border-radius: 24px 24px 0 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

@media (min-width: 480px) {
  .listing-modal .modal-header {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .listing-modal .modal-header {
    padding: calc(var(--spacer) * 3);
  }
}

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

@media (min-width: 480px) {
  .listing-modal .modal-header h3 {
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .listing-modal .modal-header h3 {
    font-size: 1.4rem;
  }
}

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

.listing-modal .modal-close:hover {
  background: var(--bg);
  color: var(--text-dark);
}

/* Modal Body - Scrollable Form Content */
.listing-modal .modal-body {
  padding: calc(var(--spacer) * 2);
  overflow-y: auto;
  flex: 1;
}

@media (min-width: 480px) {
  .listing-modal .modal-body {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .listing-modal .modal-body {
    padding: calc(var(--spacer) * 3);
  }
}

/* Listing Form */
.listing-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
}

/* Form Groups */
.listing-form .form-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.8);
}

.listing-form label {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.listing-form label .required {
  color: var(--danger);
  margin-left: 2px;
}

/* Form Inputs */
.listing-form input[type="text"],
.listing-form input[type="number"],
.listing-form input[type="url"],
.listing-form select,
.listing-form textarea {
  width: 100%;
  padding: calc(var(--spacer) * 1.5);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 0.9rem;
  transition: all 0.2s;
  background: var(--bg);
  min-height: 44px;
  font-family: var(--font-sans);
}

@media (min-width: 768px) {
  .listing-form input[type="text"],
  .listing-form input[type="number"],
  .listing-form input[type="url"],
  .listing-form select,
  .listing-form textarea {
    padding: calc(var(--spacer) * 2);
    font-size: 0.95rem;
    min-height: 48px;
  }
}

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

.listing-form input.error,
.listing-form select.error,
.listing-form textarea.error {
  border-color: var(--danger);
}

.listing-form textarea {
  resize: vertical;
  min-height: 100px;
}

/* Form Row (for side-by-side inputs) */
.listing-form .form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .listing-form .form-row {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacer) * 2);
  }
}

/* Error Messages */
.listing-form .error-message {
  color: var(--danger);
  font-size: 0.75rem;
  margin-top: 2px;
}

/* Upload Area for Images */
.listing-form .upload-area {
  border: 2px dashed var(--border-light);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg);
  margin-bottom: calc(var(--spacer));
}

@media (min-width: 768px) {
  .listing-form .upload-area {
    padding: calc(var(--spacer) * 3);
  }
}

.listing-form .upload-area:hover,
.listing-form .upload-area.dragover {
  border-color: var(--accent);
  background: var(--bg);
}

.listing-form .upload-area i {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: calc(var(--spacer));
}

.listing-form .upload-area p {
  margin-bottom: calc(var(--spacer) * 0.5);
  color: var(--text-dark);
  font-size: 0.9rem;
}

.listing-form .upload-area small {
  color: var(--text-soft);
  font-size: 0.8rem;
}

/* Image Preview Grid */
.listing-form .image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: calc(var(--spacer));
  margin-top: calc(var(--spacer));
}

@media (min-width: 480px) {
  .listing-form .image-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: calc(var(--spacer) * 1.5);
  }
}

/* Image Preview Items */
.listing-form .image-preview {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--border-light);
  transition: all 0.2s;
}

.listing-form .image-preview:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow);
}

.listing-form .image-preview.uploaded {
  border-color: var(--success);
}

.listing-form .image-preview.primary {
  border-color: var(--accent);
  border-width: 3px;
}

.listing-form .image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-form .image-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  gap: 4px;
}

.listing-form .image-preview:hover .image-preview-overlay {
  opacity: 1;
}

.listing-form .image-preview-overlay .btn-icon {
  background: white;
  color: var(--text-dark);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .listing-form .image-preview-overlay .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
}

.listing-form .image-preview-overlay .btn-icon:hover {
  background: var(--accent);
  color: white;
  transform: scale(1.1);
}

.listing-form .image-preview-overlay .btn-icon.delete:hover {
  background: var(--danger);
}

/* Primary Badge */
.listing-form .primary-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--accent);
  color: white;
  padding: 2px 6px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 600;
  z-index: 2;
}

@media (min-width: 768px) {
  .listing-form .primary-badge {
    padding: 2px 8px;
    font-size: 0.65rem;
  }
}

/* Image Filename */
.listing-form .image-filename {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.55rem;
  padding: 2px 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .listing-form .image-filename {
    font-size: 0.6rem;
    padding: 2px 6px;
  }
}

/* Upload Progress */
.listing-form .upload-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border-light);
}

.listing-form .progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width 0.2s;
}

/* Currency Select */
.listing-form select {
  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 calc(var(--spacer) * 1.5) center;
  background-size: 14px;
  padding-right: calc(var(--spacer) * 4);
}

/* ========================================================================
   MODAL FOOTER - BUTTONS OUTSIDE CARD
   ======================================================================== */

.listing-modal .modal-footer {
  padding: calc(var(--spacer) * 2);
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
  background: var(--bg);
  border-radius: 0 0 24px 24px;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.02);
  width: 100%;
}

@media (min-width: 480px) {
  .listing-modal .modal-footer {
    flex-direction: row;
    justify-content: flex-end;
    gap: calc(var(--spacer) * 1.5);
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .listing-modal .modal-footer {
    padding: calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 2);
    border-radius: 0 0 32px 32px;
  }
}

/* Footer Buttons */
.listing-modal .modal-footer .btn-outline,
.listing-modal .modal-footer .btn-primary {
  width: 100%;
  min-height: 48px;
  padding: calc(var(--spacer) * 1.5);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer));
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
  margin: 0;
  line-height: 1.4;
}

@media (min-width: 480px) {
  .listing-modal .modal-footer .btn-outline,
  .listing-modal .modal-footer .btn-primary {
    width: auto;
    min-width: 120px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .listing-modal .modal-footer .btn-outline,
  .listing-modal .modal-footer .btn-primary {
    min-width: 140px;
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 4);
    font-size: 1rem;
  }
}

/* Cancel Button */
.listing-modal .modal-footer .btn-outline {
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-dark);
}

.listing-modal .modal-footer .btn-outline:hover {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

@media (min-width: 768px) {
  .listing-modal .modal-footer .btn-outline:hover {
    transform: translateY(-2px);
  }
}

/* Save/Submit Button */
.listing-modal .modal-footer .btn-primary {
  background: var(--text-dark);
  color: white;
}

.listing-modal .modal-footer .btn-primary:hover {
  background: #4a3f3a;
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .listing-modal .modal-footer .btn-primary:hover {
    transform: translateY(-2px);
  }
}

/* Button loading state */
.listing-modal .modal-footer .btn-primary:disabled,
.listing-modal .modal-footer .btn-outline:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.listing-modal .modal-footer .btn-primary .fa-spinner,
.listing-modal .modal-footer .btn-outline .fa-spinner {
  animation: spin 1s linear infinite;
}

/* Mobile specific button layout */
@media (max-width: 479px) {
  .listing-modal .modal-footer {
    padding: calc(var(--spacer) * 1.5);
    gap: calc(var(--spacer) * 1.2);
    flex-direction: column-reverse;
  }

  .listing-modal .modal-footer .btn-outline,
  .listing-modal .modal-footer .btn-primary {
    min-height: 52px;
    font-size: 1rem;
    padding: calc(var(--spacer) * 1.5);
    width: 100%;
  }

  /* Make the primary button more prominent */
  .listing-modal .modal-footer .btn-primary {
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

/* Very small screens */
@media (max-width: 359px) {
  .listing-modal .modal-footer {
    padding: calc(var(--spacer) * 1.2);
    gap: calc(var(--spacer));
  }

  .listing-modal .modal-footer .btn-outline,
  .listing-modal .modal-footer .btn-primary {
    min-height: 48px;
    font-size: 0.9rem;
    padding: calc(var(--spacer) * 1.2);
  }
}

/* Tablet specific adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
  .listing-modal .modal-footer .btn-outline,
  .listing-modal .modal-footer .btn-primary {
    min-width: 130px;
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 3);
  }
}

/* Active states for mobile */
.listing-modal .modal-footer .btn-outline:active,
.listing-modal .modal-footer .btn-primary:active {
  transform: scale(0.98);
}

/* Focus states for accessibility */
.listing-modal .modal-footer .btn-outline:focus-visible,
.listing-modal .modal-footer .btn-primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ========================================================================
   ANIMATIONS
   ======================================================================== */

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

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ========================================================================
   RESPONSIVE ADJUSTMENTS FOR DIFFERENT SCREEN SIZES
   ======================================================================== */

/* Small tablets */
@media (min-width: 640px) and (max-width: 767px) {
  .listing-modal {
    max-width: 90%;
  }

  .listing-modal .modal-footer {
    padding: calc(var(--spacer) * 2);
  }

  .listing-modal .modal-footer .btn-outline,
  .listing-modal .modal-footer .btn-primary {
    min-width: 110px;
  }
}

/* Landscape mode on mobile */
@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .listing-modal {
    max-height: 85vh;
  }

  .listing-modal .modal-body {
    max-height: calc(85vh - 120px);
  }

  .listing-form .form-row {
    grid-template-columns: 1fr 1fr;
  }

  .listing-modal .modal-footer {
    padding: calc(var(--spacer) * 1.5);
  }
}

/* Ensure modal doesn't overflow on very tall screens */
@media (min-height: 1000px) {
  .listing-modal {
    max-height: 80vh;
  }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  .listing-modal {
    background: var(--card-bg);
  }

  .listing-form input,
  .listing-form select,
  .listing-form textarea {
    background: var(--bg);
    color: var(--text-dark);
  }
}

/* ========================================================================
   SECTION 9: ANIMATIONS - KEPT AS IS
   ======================================================================== */

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

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

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

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

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(183, 140, 90, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(183, 140, 90, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(183, 140, 90, 0);
  }
}

/* ========================================================================
   SECTION 10: OVERVIEW DASHBOARD - FULLY RESPONSIVE
   ======================================================================== */

/* Welcome Section */
.welcome-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 3);
  margin-bottom: calc(var(--spacer) * 4);
}

@media (min-width: 768px) {
  .welcome-section {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .welcome-section {
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.welcome-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 0.5);
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

@media (min-width: 480px) {
  .welcome-title {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  .welcome-title {
    font-size: 2.2rem;
  }
}

@media (min-width: 1025px) {
  .welcome-title {
    font-size: 2.4rem;
  }
}

.welcome-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
}

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

@media (min-width: 1025px) {
  .welcome-subtitle {
    font-size: 1.1rem;
  }
}

.quote-card {
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    var(--accent) 100%
  );
  padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
  border-radius: 16px;
  color: white;
  width: 100%;
  position: relative;
  overflow: hidden;
}

@media (min-width: 480px) {
  .quote-card {
    max-width: 350px;
    padding: calc(var(--spacer) * 2.5) calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .quote-card {
    max-width: 400px;
    padding: calc(var(--spacer) * 3) calc(var(--spacer) * 4);
    border-radius: 20px;
  }
}

.quote-card i {
  font-size: 1.2rem;
  opacity: 0.3;
  margin-bottom: calc(var(--spacer) * 0.5);
}

@media (min-width: 768px) {
  .quote-card i {
    font-size: 1.5rem;
    margin-bottom: calc(var(--spacer));
  }
}

.quote-card p {
  font-style: italic;
  margin-bottom: calc(var(--spacer) * 0.5);
  line-height: 1.5;
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .quote-card p {
    font-size: 1rem;
    margin-bottom: calc(var(--spacer));
  }
}

.quote-card span {
  font-size: 0.8rem;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .quote-card span {
    font-size: 0.9rem;
  }
}

.quote-card::after {
  content: "✦";
  position: absolute;
  bottom: -15px;
  right: -15px;
  font-size: 6rem;
  opacity: 0.1;
  color: white;
}

@media (min-width: 768px) {
  .quote-card::after {
    bottom: -20px;
    right: -20px;
    font-size: 8rem;
  }
}

/* Quick Actions */
.quick-actions {
  display: flex;
  gap: calc(var(--spacer));
  margin-bottom: calc(var(--spacer) * 4);
  flex-wrap: wrap;
  overflow-x: auto;
  padding-bottom: calc(var(--spacer));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.quick-actions::-webkit-scrollbar {
  display: none;
}

@media (min-width: 480px) {
  .quick-actions {
    gap: calc(var(--spacer) * 1.5);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 768px) {
  .quick-actions {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: calc(var(--spacer) * 2);
  }
}

.action-btn {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  color: var(--text-dark);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  white-space: nowrap;
  min-height: 44px;
}

@media (min-width: 480px) {
  .action-btn {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.85rem;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .action-btn {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
    font-size: 0.9rem;
  }
}

@media (min-width: 1025px) {
  .action-btn {
    font-size: 0.95rem;
  }
}

.action-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .action-btn:hover {
    transform: translateY(-2px);
  }
}

.action-btn i {
  font-size: 0.9rem;
}

@media (min-width: 480px) {
  .action-btn i {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  .action-btn i {
    font-size: 1.1rem;
  }
}

.action-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: white;
  font-size: 0.6rem;
  padding: 2px 5px;
  border-radius: 16px;
  min-width: 18px;
  text-align: center;
}

@media (min-width: 768px) {
  .action-badge {
    top: -8px;
    right: -8px;
    font-size: 0.7rem;
    padding: 2px 6px;
    min-width: 20px;
  }
}

/* Modern Stats Grid */
.stats-grid-modern {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
}

@media (min-width: 480px) {
  .stats-grid-modern {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .stats-grid-modern {
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .stats-grid-modern {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.stat-card-modern {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2.5);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

@media (min-width: 480px) {
  .stat-card-modern {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .stat-card-modern {
    border-radius: 20px;
    padding: calc(var(--spacer) * 3.5);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1025px) {
  .stat-card-modern {
    border-radius: 24px;
    padding: calc(var(--spacer) * 4);
    gap: calc(var(--spacer) * 3);
  }
}

.stat-card-modern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.stat-card-modern:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .stat-card-modern:hover {
    transform: translateY(-4px);
  }
}

.stat-card-modern:hover::before {
  transform: translateX(100%);
}

.stat-card-modern.bookings .stat-icon-wrapper {
  background: #fef3e2;
  color: #b45309;
}

.stat-card-modern.orders .stat-icon-wrapper {
  background: #e3f2e9;
  color: #2f6e4a;
}

.stat-card-modern.messages .stat-icon-wrapper {
  background: #e1f0fa;
  color: #1e4a6b;
}

.stat-card-modern.earnings .stat-icon-wrapper {
  background: #f2ebe3;
  color: var(--accent);
}

.stat-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .stat-icon-wrapper {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
}

@media (min-width: 768px) {
  .stat-icon-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.6rem;
  }
}

@media (min-width: 1025px) {
  .stat-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    font-size: 1.8rem;
  }
}

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

.stat-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: calc(var(--spacer) * 0.5);
}

@media (min-width: 480px) {
  .stat-label {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .stat-label {
    font-size: 0.8rem;
    margin-bottom: calc(var(--spacer) * 0.8);
  }
}

@media (min-width: 1025px) {
  .stat-label {
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacer));
  }
}

.stat-value-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  margin-bottom: 2px;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .stat-value-row {
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .stat-value-row {
    gap: calc(var(--spacer) * 2);
  }
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
}

@media (min-width: 480px) {
  .stat-value {
    font-size: 1.6rem;
  }
}

@media (min-width: 768px) {
  .stat-value {
    font-size: 1.8rem;
  }
}

@media (min-width: 1025px) {
  .stat-value {
    font-size: 2rem;
  }
}

.stat-trend {
  font-size: 0.65rem;
  padding: 3px 6px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .stat-trend {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
}

@media (min-width: 768px) {
  .stat-trend {
    font-size: 0.75rem;
    padding: 4px 8px;
  }
}

@media (min-width: 1025px) {
  .stat-trend {
    font-size: 0.8rem;
    padding: 4px 8px;
  }
}

.stat-trend.positive {
  background: #e3f2e9;
  color: #2f6e4a;
}

.stat-trend.warning {
  background: #fef3e2;
  color: #b45309;
}

.stat-trend.neutral {
  background: var(--bg);
  color: var(--text-soft);
}

.stat-subtitle {
  font-size: 0.7rem;
  color: var(--text-soft);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .stat-subtitle {
    font-size: 0.75rem;
  }
}

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

@media (min-width: 1025px) {
  .stat-subtitle {
    font-size: 0.85rem;
  }
}

/* Performance Section */
.performance-section {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 3);
  margin-bottom: calc(var(--spacer) * 4);
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .performance-section {
    padding: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .performance-section {
    border-radius: 22px;
    padding: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .performance-section {
    border-radius: 24px;
    padding: calc(var(--spacer) * 5);
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.performance-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 480px) {
  .performance-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .performance-header {
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.performance-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
}

@media (min-width: 480px) {
  .performance-header h2 {
    font-size: 1.2rem;
  }
}

@media (min-width: 768px) {
  .performance-header h2 {
    font-size: 1.3rem;
  }
}

.period-select {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  border: 1px solid var(--border-light);
  border-radius: 30px;
  background: var(--bg);
  color: var(--text-dark);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 40px;
  width: 100%;
}

@media (min-width: 480px) {
  .period-select {
    width: auto;
    min-width: 140px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .period-select {
    min-width: 160px;
    font-size: 0.9rem;
    min-height: 44px;
  }
}

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

.metrics-grid-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .metrics-grid-compact {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .metrics-grid-compact {
    gap: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .metrics-grid-compact {
    grid-template-columns: repeat(4, 1fr);
  }
}

.metric-compact {
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 16px;
}

@media (min-width: 768px) {
  .metric-compact {
    padding: calc(var(--spacer) * 2);
  }
}

.metric-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  display: block;
  margin-bottom: calc(var(--spacer) * 0.5);
}

@media (min-width: 768px) {
  .metric-label {
    font-size: 0.75rem;
    margin-bottom: calc(var(--spacer) * 0.8);
  }
}

@media (min-width: 1025px) {
  .metric-label {
    font-size: 0.8rem;
  }
}

.metric-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  display: block;
  margin-bottom: calc(var(--spacer) * 0.5);
}

@media (min-width: 480px) {
  .metric-value {
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .metric-value {
    font-size: 1.4rem;
  }
}

@media (min-width: 1025px) {
  .metric-value {
    font-size: 1.5rem;
  }
}

.rating-display {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  margin-bottom: calc(var(--spacer) * 0.5);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .rating-display {
    gap: calc(var(--spacer) * 1.5);
  }
}

.stars {
  color: #fbbf24;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .stars {
    font-size: 0.9rem;
  }
}

.stars i {
  margin-right: 1px;
}

.progress-bar {
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
  margin-top: calc(var(--spacer) * 0.5);
}

@media (min-width: 768px) {
  .progress-bar {
    height: 6px;
    border-radius: 3px;
  }
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

@media (min-width: 768px) {
  .progress-fill {
    border-radius: 3px;
  }
}

.metric-trend {
  font-size: 0.7rem;
  color: var(--text-soft);
  display: inline-block;
  margin-top: 2px;
}

@media (min-width: 768px) {
  .metric-trend {
    font-size: 0.75rem;
  }
}

.metric-trend.positive {
  color: #10b981;
}

/* Insights Grid */
.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 3);
  margin-bottom: calc(var(--spacer) * 4);
}

@media (min-width: 768px) {
  .insights-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .insights-grid {
    margin-bottom: calc(var(--spacer) * 6);
  }
}

/* Activity Feed */
.activity-feed {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 3);
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .activity-feed {
    padding: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .activity-feed {
    border-radius: 22px;
    padding: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .activity-feed {
    border-radius: 24px;
    padding: calc(var(--spacer) * 5);
  }
}

.feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 2);
  flex-wrap: wrap;
  gap: calc(var(--spacer));
}

@media (min-width: 768px) {
  .feed-header {
    margin-bottom: calc(var(--spacer) * 3);
  }
}

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

@media (min-width: 768px) {
  .feed-header h3 {
    font-size: 1.1rem;
  }
}

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

@media (min-width: 768px) {
  .feed-header h3 i {
    font-size: 1.1rem;
  }
}

.view-all {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
  transition: all 0.2s;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 calc(var(--spacer));
}

@media (min-width: 768px) {
  .view-all {
    font-size: 0.9rem;
    min-height: 44px;
  }
}

.view-all:hover {
  text-decoration: underline;
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .feed-list {
    gap: calc(var(--spacer) * 2);
  }
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 14px;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

@media (min-width: 480px) {
  .activity-item {
    padding: calc(var(--spacer) * 2);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .activity-item {
    border-radius: 16px;
    padding: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 3);
  }
}

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

.activity-item.unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

@media (min-width: 768px) {
  .activity-item.unread::before {
    width: 4px;
  }
}

.activity-item:hover {
  transform: translateX(2px);
}

@media (min-width: 768px) {
  .activity-item:hover {
    transform: translateX(4px);
  }
}

.activity-icon {
  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;
}

@media (min-width: 480px) {
  .activity-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 1.05rem;
  }
}

@media (min-width: 768px) {
  .activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.1rem;
  }
}

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

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

@media (min-width: 480px) {
  .activity-title {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .activity-title {
    font-size: 0.95rem;
    margin-bottom: 3px;
  }
}

@media (min-width: 1025px) {
  .activity-title {
    font-size: 1rem;
  }
}

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

@media (min-width: 480px) {
  .activity-description {
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .activity-description {
    font-size: 0.85rem;
    margin-bottom: 3px;
  }
}

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

@media (min-width: 480px) {
  .activity-time {
    font-size: 0.7rem;
  }
}

@media (min-width: 768px) {
  .activity-time {
    font-size: 0.75rem;
  }
}

.activity-amount {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.8rem;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .activity-amount {
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .activity-amount {
    font-size: 0.9rem;
  }
}

.activity-empty {
  text-align: center;
  padding: calc(var(--spacer) * 4);
  color: var(--text-soft);
}

@media (min-width: 768px) {
  .activity-empty {
    padding: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .activity-empty {
    padding: calc(var(--spacer) * 6);
  }
}

.activity-empty i {
  font-size: 2.5rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  opacity: 0.3;
}

@media (min-width: 768px) {
  .activity-empty i {
    font-size: 3rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

/* Insights Panel */
.insights-panel {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 3);
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .insights-panel {
    padding: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .insights-panel {
    border-radius: 22px;
    padding: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .insights-panel {
    border-radius: 24px;
    padding: calc(var(--spacer) * 5);
  }
}

.insights-panel h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
}

@media (min-width: 768px) {
  .insights-panel h3 {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1025px) {
  .insights-panel h3 {
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.insights-panel h3 i {
  color: var(--accent);
  font-size: 1rem;
}

@media (min-width: 768px) {
  .insights-panel h3 i {
    font-size: 1.1rem;
  }
}

.insights-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .insights-list {
    gap: calc(var(--spacer) * 2);
  }
}

.insight-item {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

@media (min-width: 480px) {
  .insight-item {
    padding: calc(var(--spacer) * 2);
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .insight-item {
    border-radius: 16px;
    padding: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 2.5);
  }
}

.insight-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

@media (min-width: 768px) {
  .insight-item:hover {
    transform: translateY(-2px);
  }
}

.insight-icon {
  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;
}

@media (min-width: 480px) {
  .insight-icon {
    width: 38px;
    height: 38px;
    font-size: 1.05rem;
  }
}

@media (min-width: 768px) {
  .insight-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.1rem;
  }
}

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

.insight-content h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .insight-content h4 {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .insight-content h4 {
    font-size: 0.95rem;
    margin-bottom: 3px;
  }
}

.insight-content p {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .insight-content p {
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .insight-content p {
    font-size: 0.85rem;
    margin-bottom: 3px;
  }
}

.insight-action {
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 500;
}

@media (min-width: 480px) {
  .insight-action {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .insight-action {
    font-size: 0.8rem;
  }
}

/* Schedule Panel */
.schedule-panel {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 3);
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .schedule-panel {
    padding: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .schedule-panel {
    border-radius: 22px;
    padding: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .schedule-panel {
    border-radius: 24px;
    padding: calc(var(--spacer) * 5);
  }
}

.schedule-panel h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
}

@media (min-width: 768px) {
  .schedule-panel h3 {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1025px) {
  .schedule-panel h3 {
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.schedule-panel h3 i {
  color: var(--accent);
  font-size: 1rem;
}

@media (min-width: 768px) {
  .schedule-panel h3 i {
    font-size: 1.1rem;
  }
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .schedule-list {
    gap: calc(var(--spacer) * 2);
  }
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 14px;
  transition: all 0.2s;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .schedule-item {
    padding: calc(var(--spacer) * 2);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .schedule-item {
    border-radius: 16px;
    padding: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 3);
    flex-wrap: nowrap;
  }
}

.schedule-item:hover {
  transform: translateX(2px);
}

@media (min-width: 768px) {
  .schedule-item:hover {
    transform: translateX(4px);
  }
}

.schedule-time {
  min-width: 70px;
}

@media (min-width: 480px) {
  .schedule-time {
    min-width: 75px;
  }
}

@media (min-width: 768px) {
  .schedule-time {
    min-width: 80px;
  }
}

.time-badge {
  background: var(--card-bg);
  padding: 3px 6px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-dark);
  display: inline-block;
}

@media (min-width: 480px) {
  .time-badge {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .time-badge {
    font-size: 0.8rem;
  }
}

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

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

@media (min-width: 480px) {
  .schedule-title {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .schedule-title {
    font-size: 0.95rem;
  }
}

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

@media (min-width: 480px) {
  .schedule-client {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .schedule-client {
    font-size: 0.8rem;
  }
}

.schedule-status {
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 20px;
  font-weight: 500;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .schedule-status {
    font-size: 0.65rem;
    padding: 2px 8px;
  }
}

@media (min-width: 768px) {
  .schedule-status {
    font-size: 0.7rem;
    padding: 2px 8px;
  }
}

.schedule-status.upcoming {
  background: #e3f2e9;
  color: #2f6e4a;
}

.schedule-status.scheduled {
  background: var(--bg);
  color: var(--text-soft);
}

.schedule-empty {
  text-align: center;
  padding: calc(var(--spacer) * 3);
  color: var(--text-soft);
}

@media (min-width: 768px) {
  .schedule-empty {
    padding: calc(var(--spacer) * 4);
  }
}

.schedule-empty i {
  font-size: 2rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  opacity: 0.3;
}

@media (min-width: 768px) {
  .schedule-empty i {
    font-size: 2.5rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.schedule-note {
  display: block;
  margin-top: calc(var(--spacer) * 0.5);
  font-size: 0.7rem;
  color: var(--accent);
}

@media (min-width: 768px) {
  .schedule-note {
    margin-top: calc(var(--spacer));
    font-size: 0.8rem;
  }
}

/* Bottom Stats */
.bottom-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--spacer) * 2);
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 3);
  box-shadow: var(--shadow);
  margin-top: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .bottom-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 2.5);
    padding: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .bottom-stats {
    border-radius: 22px;
    padding: calc(var(--spacer) * 4);
    gap: calc(var(--spacer) * 3);
    margin-top: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .bottom-stats {
    border-radius: 24px;
    padding: calc(var(--spacer) * 5);
    gap: calc(var(--spacer) * 4);
    margin-top: calc(var(--spacer) * 4);
  }
}

.bottom-stat-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .bottom-stat-item {
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .bottom-stat-item {
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1025px) {
  .bottom-stat-item {
    gap: calc(var(--spacer) * 3);
  }
}

.bottom-stat-item i {
  font-size: 1.4rem;
  color: var(--accent);
  opacity: 0.5;
}

@media (min-width: 480px) {
  .bottom-stat-item i {
    font-size: 1.6rem;
  }
}

@media (min-width: 768px) {
  .bottom-stat-item i {
    font-size: 1.8rem;
  }
}

@media (min-width: 1025px) {
  .bottom-stat-item i {
    font-size: 2rem;
  }
}

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

.bottom-stat-label {
  font-size: 0.65rem;
  color: var(--text-soft);
  display: block;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .bottom-stat-label {
    font-size: 0.7rem;
  }
}

@media (min-width: 768px) {
  .bottom-stat-label {
    font-size: 0.75rem;
  }
}

@media (min-width: 1025px) {
  .bottom-stat-label {
    font-size: 0.8rem;
  }
}

.bottom-stat-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .bottom-stat-value {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  .bottom-stat-value {
    font-size: 1.1rem;
  }
}

@media (min-width: 1025px) {
  .bottom-stat-value {
    font-size: 1.2rem;
  }
}

/* Error State Modern */
.error-state-modern {
  text-align: center;
  padding: calc(var(--spacer) * 5);
  background: var(--card-bg);
  border-radius: 20px;
  box-shadow: var(--shadow);
  margin: calc(var(--spacer) * 2) auto;
  max-width: 500px;
}

@media (min-width: 480px) {
  .error-state-modern {
    padding: calc(var(--spacer) * 6);
    border-radius: 22px;
  }
}

@media (min-width: 768px) {
  .error-state-modern {
    padding: calc(var(--spacer) * 8);
    border-radius: 24px;
    margin: calc(var(--spacer) * 3) auto;
    max-width: 600px;
  }
}

@media (min-width: 1025px) {
  .error-state-modern {
    padding: calc(var(--spacer) * 10);
    margin: calc(var(--spacer) * 4) auto;
    max-width: 700px;
  }
}

.error-state-modern i {
  font-size: 3rem;
  color: #ef4444;
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .error-state-modern i {
    font-size: 3.5rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .error-state-modern i {
    font-size: 4rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .error-state-modern i {
    font-size: 4.5rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.error-state-modern h3 {
  font-size: 1.2rem;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .error-state-modern h3 {
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .error-state-modern h3 {
    font-size: 1.4rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 1025px) {
  .error-state-modern h3 {
    font-size: 1.5rem;
  }
}

.error-state-modern p {
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 2);
  font-size: 0.9rem;
}

@media (min-width: 480px) {
  .error-state-modern p {
    font-size: 0.95rem;
  }
}

@media (min-width: 768px) {
  .error-state-modern p {
    font-size: 1rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

/* ========================================================================
   OVERVIEW DASHBOARD - FULLY RESPONSIVE TEXT FIXES
   ======================================================================== */

.overview-dashboard {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .overview-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

/* ========================================================================
   WELCOME SECTION - TEXT FIXES
   ======================================================================== */

.welcome-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2.5);
  margin-bottom: calc(var(--spacer) * 4);
  width: 100%;
}

@media (min-width: 640px) {
  .welcome-section {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 4);
  }
}

.welcome-text {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.welcome-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 0.8);
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
  word-break: break-word;
}

@media (min-width: 480px) {
  .welcome-title {
    font-size: 1.8rem;
  }
}

@media (min-width: 768px) {
  .welcome-title {
    font-size: 2rem;
    margin-bottom: calc(var(--spacer));
  }
}

@media (min-width: 1025px) {
  .welcome-title {
    font-size: 2.2rem;
  }
}

.welcome-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  word-break: break-word;
}

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

/* Quote Card */
.quote-card {
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    var(--accent) 100%
  );
  padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2.5);
  border-radius: 16px;
  color: white;
  width: 100%;
  position: relative;
  overflow: hidden;
}

@media (min-width: 480px) {
  .quote-card {
    max-width: 350px;
    padding: calc(var(--spacer) * 2.5) calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .quote-card {
    max-width: 400px;
    padding: calc(var(--spacer) * 3) calc(var(--spacer) * 4);
    border-radius: 20px;
  }
}

.quote-card i {
  font-size: 1.2rem;
  opacity: 0.3;
  margin-bottom: calc(var(--spacer) * 0.8);
}

.quote-card p {
  font-style: italic;
  margin-bottom: calc(var(--spacer) * 0.8);
  line-height: 1.5;
  font-size: 0.9rem;
  word-break: break-word;
}

@media (min-width: 768px) {
  .quote-card p {
    font-size: 1rem;
  }
}

.quote-card span {
  font-size: 0.8rem;
  opacity: 0.9;
  display: block;
  word-break: break-word;
}

/* ========================================================================
   QUICK ACTIONS - TEXT FIXES
   ======================================================================== */

.quick-actions {
  display: flex;
  gap: calc(var(--spacer) * 1);
  margin-bottom: calc(var(--spacer) * 4);
  flex-wrap: wrap;
  overflow-x: auto;
  padding-bottom: calc(var(--spacer) * 0.5);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
}

.quick-actions::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .quick-actions {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: calc(var(--spacer) * 1.5);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.action-btn {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.8);
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.8);
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  color: var(--text-dark);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  white-space: nowrap;
  min-height: 44px;
  flex: 0 0 auto;
}

@media (min-width: 480px) {
  .action-btn {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.2);
    font-size: 0.85rem;
    gap: calc(var(--spacer));
  }
}

@media (min-width: 640px) {
  .action-btn {
    flex: 0 1 auto;
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .action-btn {
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 2.5);
    font-size: 0.9rem;
  }
}

.action-btn i {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.action-btn span {
  white-space: nowrap;
}

.action-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: white;
  font-size: 0.6rem;
  padding: 2px 5px;
  border-radius: 16px;
  min-width: 18px;
  text-align: center;
  font-weight: 600;
}

/* ========================================================================
   STATS GRID MODERN - TEXT FIXES
   ======================================================================== */

.stats-grid-modern {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
  width: 100%;
}

@media (min-width: 480px) {
  .stats-grid-modern {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1025px) {
  .stats-grid-modern {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.stat-card-modern {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2.5);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
}

@media (min-width: 768px) {
  .stat-card-modern {
    padding: calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 2.5);
  }
}

.stat-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .stat-icon-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.6rem;
  }
}

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

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

@media (min-width: 480px) {
  .stat-label {
    font-size: 0.75rem;
    letter-spacing: 0.4px;
  }
}

@media (min-width: 768px) {
  .stat-label {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
  }
}

.stat-value-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1);
  margin-bottom: 2px;
  flex-wrap: wrap;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .stat-value {
    font-size: 1.6rem;
  }
}

@media (min-width: 768px) {
  .stat-value {
    font-size: 1.8rem;
  }
}

.stat-trend {
  font-size: 0.65rem;
  padding: 3px 6px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .stat-trend {
    font-size: 0.7rem;
    padding: 4px 8px;
  }
}

.stat-subtitle {
  font-size: 0.7rem;
  color: var(--text-soft);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* ========================================================================
   PERFORMANCE SECTION - TEXT FIXES
   ======================================================================== */

.performance-section {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2.5);
  margin-bottom: calc(var(--spacer) * 4);
  box-shadow: var(--shadow);
  width: 100%;
}

@media (min-width: 768px) {
  .performance-section {
    padding: calc(var(--spacer) * 3);
    border-radius: 24px;
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.performance-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 2.5);
}

@media (min-width: 480px) {
  .performance-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 2);
  }
}

.performance-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  word-break: break-word;
}

@media (min-width: 768px) {
  .performance-header h2 {
    font-size: 1.2rem;
  }
}

.period-select {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  border: 1px solid var(--border-light);
  border-radius: 30px;
  background: var(--bg);
  color: var(--text-dark);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .period-select {
    width: auto;
    min-width: 140px;
    font-size: 0.85rem;
  }
}

/* Metrics Grid */
.metrics-grid-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .metrics-grid-compact {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .metrics-grid-compact {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 3);
  }
}

.metric-compact {
  padding: calc(var(--spacer) * 1.8);
  background: var(--bg);
  border-radius: 16px;
  width: 100%;
}

@media (min-width: 768px) {
  .metric-compact {
    padding: calc(var(--spacer) * 2);
  }
}

.metric-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  display: block;
  margin-bottom: calc(var(--spacer) * 0.5);
  word-break: break-word;
}

@media (min-width: 768px) {
  .metric-label {
    font-size: 0.75rem;
  }
}

.metric-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  display: block;
  margin-bottom: calc(var(--spacer) * 0.5);
  word-break: break-word;
}

@media (min-width: 768px) {
  .metric-value {
    font-size: 1.3rem;
  }
}

.rating-display {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1);
  margin-bottom: calc(var(--spacer) * 0.5);
  flex-wrap: wrap;
}

.stars {
  color: #fbbf24;
  font-size: 0.8rem;
  white-space: nowrap;
}

.metric-trend {
  font-size: 0.65rem;
  color: var(--text-soft);
  display: inline-block;
  margin-top: 2px;
  word-break: break-word;
}

/* ========================================================================
   INSIGHTS GRID - TEXT FIXES
   ======================================================================== */

.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2.5);
  margin-bottom: calc(var(--spacer) * 4);
  width: 100%;
}

@media (min-width: 768px) {
  .insights-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: calc(var(--spacer) * 3);
  }
}

/* Activity Feed */
.activity-feed,
.insights-panel,
.schedule-panel {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  width: 100%;
  overflow: hidden;
}

@media (min-width: 768px) {
  .activity-feed,
  .insights-panel,
  .schedule-panel {
    padding: calc(var(--spacer) * 2.5);
  }
}

.feed-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1);
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .feed-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 2);
  }
}

.feed-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  word-break: break-word;
}

.feed-header h3 i {
  color: var(--accent);
  flex-shrink: 0;
}

.view-all {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
  transition: all 0.2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 calc(var(--spacer));
  white-space: nowrap;
}

/* Activity Items */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 14px;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  width: 100%;
}

@media (min-width: 768px) {
  .activity-item {
    padding: calc(var(--spacer) * 2);
    gap: calc(var(--spacer) * 2);
  }
}

.activity-icon {
  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;
}

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

.activity-title {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  font-size: 0.85rem;
  word-break: break-word;
  line-height: 1.4;
}

.activity-description {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-bottom: 2px;
  word-break: break-word;
  line-height: 1.4;
}

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

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

/* Empty State */
.activity-empty {
  text-align: center;
  padding: calc(var(--spacer) * 3);
  color: var(--text-soft);
  width: 100%;
}

.activity-empty i {
  font-size: 2rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  opacity: 0.3;
}

.activity-empty p {
  word-break: break-word;
  font-size: 0.85rem;
}

/* ========================================================================
   INSIGHTS ITEMS - TEXT FIXES
   ======================================================================== */

.insights-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
}

.insight-item {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

@media (min-width: 768px) {
  .insight-item {
    padding: calc(var(--spacer) * 2);
    gap: calc(var(--spacer) * 2);
  }
}

.insight-icon {
  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;
}

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

.insight-content h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  word-break: break-word;
  line-height: 1.4;
}

.insight-content p {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-bottom: 2px;
  word-break: break-word;
  line-height: 1.4;
}

.insight-action {
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 500;
  display: inline-block;
  word-break: break-word;
}

/* ========================================================================
   SCHEDULE PANEL - TEXT FIXES
   ======================================================================== */

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 14px;
  transition: all 0.2s;
  width: 100%;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .schedule-item {
    flex-wrap: nowrap;
    gap: calc(var(--spacer) * 2);
  }
}

.schedule-time {
  min-width: 70px;
  flex-shrink: 0;
}

.time-badge {
  background: var(--card-bg);
  padding: 3px 6px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-dark);
  display: inline-block;
  white-space: nowrap;
}

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

.schedule-title {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.85rem;
  margin-bottom: 2px;
  word-break: break-word;
  line-height: 1.4;
}

.schedule-client {
  font-size: 0.7rem;
  color: var(--text-soft);
  word-break: break-word;
  line-height: 1.4;
}

.schedule-status {
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 20px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ========================================================================
   BOTTOM STATS - TEXT FIXES
   ======================================================================== */

.bottom-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--spacer) * 1.5);
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  margin-top: calc(var(--spacer) * 2);
  width: 100%;
}

@media (min-width: 480px) {
  .bottom-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2.5);
  }
}

.bottom-stat-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.2);
  min-width: 0;
}

.bottom-stat-item i {
  font-size: 1.4rem;
  color: var(--accent);
  opacity: 0.5;
  flex-shrink: 0;
}

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

.bottom-stat-label {
  font-size: 0.65rem;
  color: var(--text-soft);
  display: block;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .bottom-stat-label {
    font-size: 0.7rem;
  }
}

.bottom-stat-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .bottom-stat-value {
    font-size: 1rem;
  }
}

/* ========================================================================
   VERY SMALL MOBILE SCREENS - ADDITIONAL FIXES
   ======================================================================== */

@media (max-width: 380px) {
  .stat-card-modern {
    padding: calc(var(--spacer) * 2);
    gap: calc(var(--spacer) * 1.5);
  }

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

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

  .stat-trend {
    font-size: 0.6rem;
    padding: 2px 4px;
  }

  .stat-subtitle {
    font-size: 0.65rem;
  }

  .metric-compact {
    padding: calc(var(--spacer) * 1.5);
  }

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

  .activity-item {
    flex-wrap: wrap;
  }

  .activity-amount {
    margin-left: 0;
    padding-left: 0;
    width: 100%;
    text-align: right;
  }

  .bottom-stat-item {
    flex-direction: column;
    text-align: center;
    gap: calc(var(--spacer) * 0.5);
  }

  .bottom-stat-item i {
    font-size: 1.2rem;
  }

  .bottom-stat-label,
  .bottom-stat-value {
    white-space: normal;
    text-align: center;
    word-break: break-word;
  }
}

/* ========================================================================
   EXTREMELY SMALL SCREENS - ULTIMATE FIXES
   ======================================================================== */

@media (max-width: 320px) {
  .welcome-title {
    font-size: 1.4rem;
  }

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

  .stat-card-modern {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .stat-value-row {
    justify-content: center;
  }

  .metrics-grid-compact {
    grid-template-columns: 1fr;
  }

  .insight-item {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .insight-icon {
    margin-bottom: calc(var(--spacer));
  }

  .schedule-item {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .schedule-time {
    margin-bottom: calc(var(--spacer));
  }

  .schedule-status {
    margin-top: calc(var(--spacer));
  }

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

/* ========================================================================
   LANDSCAPE ORIENTATION FIXES
   ======================================================================== */

@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .welcome-section {
    flex-direction: row;
    align-items: center;
  }

  .quick-actions {
    flex-wrap: wrap;
    overflow-x: visible;
  }

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

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

  .bottom-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================================================================
   TEXT WRAPPING UTILITIES
   ======================================================================== */

.overview-dashboard * {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Ensure all containers respect boundaries */
.overview-dashboard,
.welcome-section,
.stats-grid-modern,
.performance-section,
.insights-grid,
.bottom-stats {
  max-width: 100%;
  overflow-x: hidden;
}

/* Touch target optimization */
.action-btn,
.stat-card-modern,
.insight-item,
.schedule-item,
.view-all,
.period-select {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.action-btn:active,
.stat-card-modern:active,
.insight-item:active {
  transform: scale(0.98);
}
/* ========================================================================
   SECTION 11: EARNINGS DASHBOARD - FULLY RESPONSIVE
   ======================================================================== */

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
}

@media (min-width: 480px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .metrics-grid {
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.metric-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2.5);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

@media (min-width: 480px) {
  .metric-card {
    padding: calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .metric-card {
    border-radius: 20px;
    padding: calc(var(--spacer) * 3.5);
    gap: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .metric-card {
    border-radius: 24px;
    padding: calc(var(--spacer) * 4);
    gap: calc(var(--spacer) * 3);
  }
}

.metric-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;
}

@media (min-width: 768px) {
  .metric-card::before {
    height: 4px;
  }
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .metric-card:hover {
    transform: translateY(-4px);
  }
}

.metric-card:hover::before {
  opacity: 1;
}

.metric-card.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
}

.metric-card.primary .metric-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.metric-card.primary .metric-label,
.metric-card.primary .metric-value,
.metric-card.primary .metric-trend {
  color: white;
}

.metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .metric-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
}

@media (min-width: 768px) {
  .metric-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.6rem;
  }
}

@media (min-width: 1025px) {
  .metric-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    font-size: 1.8rem;
  }
}

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

.metric-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .metric-label {
    font-size: 0.75rem;
    margin-bottom: 3px;
  }
}

@media (min-width: 768px) {
  .metric-label {
    font-size: 0.8rem;
    margin-bottom: 4px;
  }
}

@media (min-width: 1025px) {
  .metric-label {
    font-size: 0.85rem;
  }
}

.metric-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 2px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .metric-value {
    font-size: 1.6rem;
  }
}

@media (min-width: 768px) {
  .metric-value {
    font-size: 1.8rem;
  }
}

@media (min-width: 1025px) {
  .metric-value {
    font-size: 2rem;
  }
}

.metric-trend {
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .metric-trend {
    font-size: 0.75rem;
    gap: 3px;
  }
}

@media (min-width: 768px) {
  .metric-trend {
    font-size: 0.8rem;
    gap: 4px;
  }
}

@media (min-width: 1025px) {
  .metric-trend {
    font-size: 0.85rem;
  }
}

.metric-trend.positive {
  color: #10b981;
}

.metric-trend.negative {
  color: #ef4444;
}

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

@media (min-width: 480px) {
  .metric-subtitle {
    font-size: 0.75rem;
  }
}

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

@media (min-width: 1025px) {
  .metric-subtitle {
    font-size: 0.85rem;
  }
}

/* Charts Grid */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 3);
  margin-bottom: calc(var(--spacer) * 4);
}

@media (min-width: 768px) {
  .charts-grid {
    grid-template-columns: 2fr 1fr;
    gap: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .charts-grid {
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.chart-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2.5);
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .chart-card {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .chart-card {
    border-radius: 20px;
    padding: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 1025px) {
  .chart-card {
    border-radius: 24px;
    padding: calc(var(--spacer) * 4);
  }
}

.chart-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .chart-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .chart-header {
    margin-bottom: calc(var(--spacer) * 4);
  }
}

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

@media (min-width: 480px) {
  .chart-header h3 {
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  .chart-header h3 {
    font-size: 1.2rem;
  }
}

.chart-legend {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .chart-legend {
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .chart-legend {
    gap: calc(var(--spacer) * 3);
  }
}

.legend-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
  font-size: 0.7rem;
  color: var(--text-soft);
}

@media (min-width: 480px) {
  .legend-item {
    font-size: 0.75rem;
    gap: calc(var(--spacer) * 0.8);
  }
}

@media (min-width: 768px) {
  .legend-item {
    font-size: 0.8rem;
    gap: calc(var(--spacer));
  }
}

@media (min-width: 1025px) {
  .legend-item {
    font-size: 0.85rem;
  }
}

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

@media (min-width: 768px) {
  .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 4px;
  }
}

.legend-color.releases {
  background: var(--accent);
}

.legend-color.holds {
  background: #94a3b8;
}

/* Chart Bars */
.chart-container {
  height: 200px;
  position: relative;
}

@media (min-width: 480px) {
  .chart-container {
    height: 220px;
  }
}

@media (min-width: 768px) {
  .chart-container {
    height: 250px;
  }
}

@media (min-width: 1025px) {
  .chart-container {
    height: 300px;
  }
}

.chart-bars-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 150px;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .chart-bars-container {
    height: 170px;
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .chart-bars-container {
    height: 200px;
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1025px) {
  .chart-bars-container {
    height: 250px;
    gap: calc(var(--spacer) * 3);
  }
}

.chart-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  animation: slideUp 0.5s ease forwards;
  opacity: 0;
  transform: translateY(20px);
  min-width: 30px;
  max-width: 60px;
}

.chart-bar-stack {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  position: relative;
}

@media (min-width: 480px) {
  .chart-bar-stack {
    height: 120px;
  }
}

@media (min-width: 768px) {
  .chart-bar-stack {
    height: 150px;
  }
}

@media (min-width: 1025px) {
  .chart-bar-stack {
    height: 200px;
  }
}

.chart-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.chart-bar.releases {
  background: var(--accent);
}

.chart-bar.holds {
  background: #94a3b8;
}

.chart-label {
  margin-top: calc(var(--spacer));
  font-size: 0.65rem;
  color: var(--text-soft);
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .chart-label {
    font-size: 0.7rem;
    margin-top: calc(var(--spacer) * 1.2);
  }
}

@media (min-width: 768px) {
  .chart-label {
    font-size: 0.75rem;
    margin-top: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 1025px) {
  .chart-label {
    font-size: 0.8rem;
    margin-top: calc(var(--spacer) * 2);
  }
}

.chart-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-dark);
  color: white;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  border-radius: 6px;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
}

@media (min-width: 768px) {
  .chart-tooltip {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
    font-size: 0.75rem;
    border-radius: 8px;
  }
}

@media (min-width: 1025px) {
  .chart-tooltip {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2.5);
    font-size: 0.85rem;
  }
}

.chart-bar-group:hover .chart-tooltip {
  opacity: 1;
}

/* Distribution Chart */
.distribution-container {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 480px) {
  .distribution-container {
    height: 220px;
  }
}

@media (min-width: 768px) {
  .distribution-container {
    height: 250px;
  }
}

@media (min-width: 1025px) {
  .distribution-container {
    height: 300px;
  }
}

.distribution-pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .distribution-pie {
    flex-direction: row;
    gap: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .distribution-pie {
    gap: calc(var(--spacer) * 4);
  }
}

.pie-chart {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}

@media (min-width: 480px) {
  .pie-chart {
    width: 130px;
    height: 130px;
  }
}

@media (min-width: 768px) {
  .pie-chart {
    width: 140px;
    height: 140px;
  }
}

@media (min-width: 1025px) {
  .pie-chart {
    width: 150px;
    height: 150px;
  }
}

.pie-segment {
  transition: stroke-dasharray 0.5s ease;
  cursor: pointer;
}

.pie-segment:hover {
  filter: brightness(1.1);
}

.distribution-legend {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .distribution-legend {
    gap: calc(var(--spacer) * 2);
  }
}

.distribution-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

@media (min-width: 768px) {
  .distribution-legend .dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
  }
}

.dot.releases {
  background: var(--accent);
}

.dot.holds {
  background: #94a3b8;
}

.dot.fees {
  background: #ef4444;
}

/* Quick Stats */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
  padding: calc(var(--spacer) * 2.5);
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .quick-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 2.5);
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .quick-stats {
    gap: calc(var(--spacer) * 3);
    padding: calc(var(--spacer) * 3.5);
    border-radius: 20px;
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .quick-stats {
    padding: calc(var(--spacer) * 4);
    border-radius: 24px;
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .stat-label {
    font-size: 0.7rem;
  }
}

@media (min-width: 768px) {
  .stat-label {
    font-size: 0.75rem;
    margin-bottom: calc(var(--spacer) * 0.8);
  }
}

@media (min-width: 1025px) {
  .stat-label {
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacer));
  }
}

.stat-value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .stat-value {
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  .stat-value {
    font-size: 1.2rem;
  }
}

@media (min-width: 1025px) {
  .stat-value {
    font-size: 1.3rem;
  }
}

/* Transactions Section */
.transactions-section {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2.5);
  margin-bottom: calc(var(--spacer) * 4);
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .transactions-section {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .transactions-section {
    border-radius: 20px;
    padding: calc(var(--spacer) * 3.5);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .transactions-section {
    border-radius: 24px;
    padding: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.section-tabs {
  display: flex;
  gap: calc(var(--spacer));
  border-bottom: 1px solid var(--border-light);
  margin-bottom: calc(var(--spacer) * 2.5);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

@media (min-width: 480px) {
  .section-tabs {
    gap: calc(var(--spacer) * 1.5);
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .section-tabs {
    gap: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.tab-btn {
  background: none;
  border: none;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  font-size: 0.8rem;
  color: var(--text-soft);
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  white-space: nowrap;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
}

@media (min-width: 480px) {
  .tab-btn {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.85rem;
    min-height: 42px;
  }
}

@media (min-width: 768px) {
  .tab-btn {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
    font-size: 0.9rem;
    min-height: 44px;
    gap: calc(var(--spacer));
  }
}

@media (min-width: 1025px) {
  .tab-btn {
    font-size: 0.95rem;
  }
}

.tab-btn i {
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .tab-btn i {
    font-size: 1rem;
  }
}

.tab-btn:hover {
  color: var(--text-dark);
}

.tab-btn.active {
  color: var(--accent);
}

.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

.transactions-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .transactions-list {
    gap: calc(var(--spacer) * 2);
  }
}

.transaction-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  padding: calc(var(--spacer) * 2);
  background: var(--bg);
  border-radius: 14px;
  transition: all 0.2s;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .transaction-item {
    padding: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .transaction-item {
    padding: calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 3);
    border-radius: 16px;
    flex-wrap: nowrap;
  }
}

.transaction-item:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow);
}

@media (min-width: 768px) {
  .transaction-item:hover {
    transform: translateX(4px);
  }
}

.transaction-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .transaction-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  .transaction-icon {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }
}

@media (min-width: 1025px) {
  .transaction-icon {
    width: 48px;
    height: 48px;
  }
}

.transaction-icon.success {
  background: #e3f2e9;
  color: #2f6e4a;
}

.transaction-icon.warning {
  background: #fef3e2;
  color: #b45309;
}

.transaction-icon.danger {
  background: #fbe9e7;
  color: #aa4a44;
}

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

.transaction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 0.5);
  flex-wrap: wrap;
  gap: calc(var(--spacer));
}

@media (min-width: 768px) {
  .transaction-header {
    margin-bottom: calc(var(--spacer));
  }
}

.transaction-type {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .transaction-type {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .transaction-type {
    font-size: 0.95rem;
  }
}

@media (min-width: 1025px) {
  .transaction-type {
    font-size: 1rem;
  }
}

.transaction-amount {
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .transaction-amount {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .transaction-amount {
    font-size: 0.95rem;
  }
}

@media (min-width: 1025px) {
  .transaction-amount {
    font-size: 1rem;
  }
}

.transaction-amount.positive {
  color: #10b981;
}

.transaction-amount.negative {
  color: #ef4444;
}

.transaction-meta {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  font-size: 0.7rem;
  color: var(--text-soft);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .transaction-meta {
    gap: calc(var(--spacer) * 2);
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .transaction-meta {
    gap: calc(var(--spacer) * 3);
    font-size: 0.8rem;
  }
}

@media (min-width: 1025px) {
  .transaction-meta {
    font-size: 0.85rem;
  }
}

.transaction-meta i {
  margin-right: 2px;
  font-size: 0.65rem;
}

@media (min-width: 768px) {
  .transaction-meta i {
    margin-right: 4px;
    font-size: 0.7rem;
  }
}

.transaction-status {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 600;
  background: #e3f2e9;
  color: #2f6e4a;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .transaction-status {
    padding: 3px 10px;
    font-size: 0.7rem;
  }
}

@media (min-width: 768px) {
  .transaction-status {
    padding: 4px 12px;
    font-size: 0.75rem;
  }
}

/* Upcoming Payouts */
.upcoming-payouts {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2.5);
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .upcoming-payouts {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .upcoming-payouts {
    border-radius: 20px;
    padding: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 1025px) {
  .upcoming-payouts {
    border-radius: 24px;
    padding: calc(var(--spacer) * 4);
  }
}

.upcoming-payouts h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 2.5);
}

@media (min-width: 480px) {
  .upcoming-payouts h3 {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .upcoming-payouts h3 {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.payout-timeline {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .payout-timeline {
    gap: calc(var(--spacer) * 3);
  }
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  position: relative;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .timeline-item {
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .timeline-item {
    gap: calc(var(--spacer) * 3);
    flex-wrap: nowrap;
  }
}

.timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 25px;
  bottom: -15px;
  width: 2px;
  background: var(--border-light);
}

@media (min-width: 480px) {
  .timeline-item:not(:last-child)::after {
    left: 11px;
  }
}

@media (min-width: 768px) {
  .timeline-item:not(:last-child)::after {
    left: 11px;
    top: 30px;
    bottom: -20px;
  }
}

.timeline-marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid;
  z-index: 1;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .timeline-marker {
    width: 22px;
    height: 22px;
  }
}

@media (min-width: 768px) {
  .timeline-marker {
    width: 24px;
    height: 24px;
  }
}

.timeline-marker.upcoming {
  border-color: var(--accent);
  background: var(--accent);
}

.timeline-marker.scheduled {
  border-color: #94a3b8;
  background: transparent;
}

.timeline-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .timeline-content {
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .timeline-content {
    gap: calc(var(--spacer) * 3);
    flex-wrap: nowrap;
  }
}

.timeline-date {
  min-width: 80px;
  color: var(--text-soft);
  font-size: 0.75rem;
}

@media (min-width: 480px) {
  .timeline-date {
    min-width: 90px;
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .timeline-date {
    min-width: 100px;
    font-size: 0.85rem;
  }
}

@media (min-width: 1025px) {
  .timeline-date {
    min-width: 120px;
  }
}

.timeline-amount {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .timeline-amount {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .timeline-amount {
    font-size: 0.95rem;
  }
}

@media (min-width: 1025px) {
  .timeline-amount {
    font-size: 1rem;
  }
}

.timeline-status {
  padding: 2px 6px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
}

@media (min-width: 480px) {
  .timeline-status {
    padding: 2px 8px;
    font-size: 0.65rem;
  }
}

@media (min-width: 768px) {
  .timeline-status {
    font-size: 0.7rem;
  }
}

.timeline-status.upcoming {
  background: var(--accent);
  color: white;
}

.timeline-status.scheduled {
  background: var(--bg);
  color: var(--text-soft);
}

/* Empty State Enhanced */
.empty-state.enhanced {
  text-align: center;
  padding: calc(var(--spacer) * 4);
}

@media (min-width: 480px) {
  .empty-state.enhanced {
    padding: calc(var(--spacer) * 5);
  }
}

@media (min-width: 768px) {
  .empty-state.enhanced {
    padding: calc(var(--spacer) * 6);
  }
}

@media (min-width: 1025px) {
  .empty-state.enhanced {
    padding: calc(var(--spacer) * 8);
  }
}

.empty-state.enhanced i {
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .empty-state.enhanced i {
    font-size: 3rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .empty-state.enhanced i {
    font-size: 3.5rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .empty-state.enhanced i {
    font-size: 4rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.empty-state.enhanced h3 {
  font-size: 1.2rem;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .empty-state.enhanced h3 {
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .empty-state.enhanced h3 {
    font-size: 1.4rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 1025px) {
  .empty-state.enhanced h3 {
    font-size: 1.5rem;
  }
}

.empty-state.enhanced p {
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 2);
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .empty-state.enhanced p {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .empty-state.enhanced p {
    font-size: 0.95rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .empty-state.enhanced p {
    font-size: 1rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

/* Error State Enhanced */
.error-state.enhanced {
  text-align: center;
  padding: calc(var(--spacer) * 4);
}

@media (min-width: 480px) {
  .error-state.enhanced {
    padding: calc(var(--spacer) * 5);
  }
}

@media (min-width: 768px) {
  .error-state.enhanced {
    padding: calc(var(--spacer) * 6);
  }
}

@media (min-width: 1025px) {
  .error-state.enhanced {
    padding: calc(var(--spacer) * 8);
  }
}

.error-state.enhanced i {
  font-size: 2.5rem;
  color: #ef4444;
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .error-state.enhanced i {
    font-size: 3rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .error-state.enhanced i {
    font-size: 3.5rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .error-state.enhanced i {
    font-size: 4rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

/* ========================================================================
   EARNINGS DASHBOARD - FULLY RESPONSIVE (FIXED FOR MOBILE)
   ======================================================================== */

.earnings-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .earnings-dashboard {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .earnings-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .earnings-dashboard {
    padding: calc(var(--spacer) * 4);
  }
}

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

.earnings-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .earnings-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.earnings-header .page-title {
  font-size: 1.3rem;
  margin: 0;
  line-height: 1.2;
  word-break: break-word;
}

@media (min-width: 480px) {
  .earnings-header .page-title {
    font-size: 1.4rem;
  }
}

@media (min-width: 768px) {
  .earnings-header .page-title {
    font-size: 1.6rem;
  }
}

@media (min-width: 1025px) {
  .earnings-header .page-title {
    font-size: 1.8rem;
  }
}

.earnings-header .page-subtitle {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin-top: calc(var(--spacer) * 0.5);
  word-break: break-word;
  max-width: 600px;
}

@media (min-width: 480px) {
  .earnings-header .page-subtitle {
    font-size: 0.9rem;
  }
}

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

/* Header Actions */
.header-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
}

@media (min-width: 640px) {
  .header-actions {
    flex-direction: row;
    width: auto;
    gap: calc(var(--spacer) * 2);
  }
}

.header-actions .btn-outline,
.header-actions .btn-primary {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  min-height: 48px;
  border-radius: 40px;
  font-size: 0.9rem;
  white-space: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 1.2);
  width: 100%;
  margin: 0;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
  text-align: center;
  word-break: break-word;
}

@media (min-width: 640px) {
  .header-actions .btn-outline,
  .header-actions .btn-primary {
    width: auto;
    min-width: 140px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    white-space: nowrap;
  }
}

.header-actions .btn-outline i,
.header-actions .btn-primary i {
  line-height: 1;
  flex-shrink: 0;
}

/* ========================================================================
   METRICS GRID - RESPONSIVE CARDS
   ======================================================================== */

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
}

@media (min-width: 480px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
    margin-bottom: calc(var(--spacer) * 4.5);
  }
}

@media (min-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .metrics-grid {
    gap: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.metric-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2.5);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

@media (min-width: 480px) {
  .metric-card {
    padding: calc(var(--spacer) * 2.8);
    gap: calc(var(--spacer) * 2.2);
  }
}

@media (min-width: 768px) {
  .metric-card {
    padding: calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 2.5);
    border-radius: 20px;
  }
}

@media (min-width: 1025px) {
  .metric-card {
    padding: calc(var(--spacer) * 4);
    gap: calc(var(--spacer) * 3);
    border-radius: 24px;
  }
}

.metric-card.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
}

.metric-card.primary .metric-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.metric-card.primary .metric-label,
.metric-card.primary .metric-value,
.metric-card.primary .metric-trend {
  color: white;
}

.metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .metric-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    border-radius: 15px;
  }
}

@media (min-width: 768px) {
  .metric-icon {
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
    border-radius: 16px;
  }
}

@media (min-width: 1025px) {
  .metric-icon {
    width: 56px;
    height: 56px;
    font-size: 1.8rem;
    border-radius: 18px;
  }
}

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

.metric-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
  display: block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

@media (min-width: 480px) {
  .metric-label {
    font-size: 0.75rem;
    letter-spacing: 0.4px;
  }
}

@media (min-width: 768px) {
  .metric-label {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
  }
}

@media (min-width: 1025px) {
  .metric-label {
    font-size: 0.85rem;
  }
}

.metric-value {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 2px;
  display: block;
  word-break: break-word;
}

@media (min-width: 480px) {
  .metric-value {
    font-size: 1.5rem;
  }
}

@media (min-width: 640px) {
  .metric-value {
    font-size: 1.6rem;
  }
}

@media (min-width: 768px) {
  .metric-value {
    font-size: 1.8rem;
    margin-bottom: 4px;
  }
}

@media (min-width: 1025px) {
  .metric-value {
    font-size: 2rem;
  }
}

.metric-trend {
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  word-break: break-word;
}

@media (min-width: 480px) {
  .metric-trend {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .metric-trend {
    font-size: 0.8rem;
  }
}

.metric-trend.positive {
  color: #10b981;
}

.metric-trend.negative {
  color: #ef4444;
}

.metric-subtitle {
  font-size: 0.7rem;
  color: var(--text-soft);
  display: block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
  margin-top: 2px;
}

@media (min-width: 480px) {
  .metric-subtitle {
    font-size: 0.75rem;
  }
}

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

/* ========================================================================
   CHARTS GRID - RESPONSIVE
   ======================================================================== */

.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
}

@media (min-width: 768px) {
  .charts-grid {
    grid-template-columns: 2fr 1fr;
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .charts-grid {
    gap: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.chart-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  min-width: 0;
}

@media (min-width: 480px) {
  .chart-card {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .chart-card {
    padding: calc(var(--spacer) * 3);
    border-radius: 20px;
  }
}

@media (min-width: 1025px) {
  .chart-card {
    padding: calc(var(--spacer) * 4);
    border-radius: 24px;
  }
}

.chart-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .chart-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .chart-header {
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.chart-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  word-break: break-word;
}

@media (min-width: 480px) {
  .chart-header h3 {
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  .chart-header h3 {
    font-size: 1.2rem;
  }
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 1.5);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.8);
  font-size: 0.7rem;
  color: var(--text-soft);
  white-space: nowrap;
}

@media (min-width: 480px) {
  .legend-item {
    font-size: 0.75rem;
    gap: calc(var(--spacer));
  }
}

@media (min-width: 768px) {
  .legend-item {
    font-size: 0.8rem;
  }
}

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .legend-color {
    width: 11px;
    height: 11px;
  }
}

@media (min-width: 768px) {
  .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 4px;
  }
}

.legend-color.releases {
  background: var(--accent);
}

.legend-color.holds {
  background: #94a3b8;
}

/* Chart Container */
.chart-container {
  height: 200px;
  position: relative;
  min-width: 0;
  width: 100%;
}

@media (min-width: 480px) {
  .chart-container {
    height: 220px;
  }
}

@media (min-width: 640px) {
  .chart-container {
    height: 250px;
  }
}

@media (min-width: 768px) {
  .chart-container {
    height: 280px;
  }
}

@media (min-width: 1025px) {
  .chart-container {
    height: 300px;
  }
}

/* Chart Bars */
.chart-bars-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 180px;
  gap: calc(var(--spacer) * 1);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: calc(var(--spacer));
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 480px) {
  .chart-bars-container {
    height: 200px;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .chart-bars-container {
    height: 220px;
    gap: calc(var(--spacer) * 2);
    overflow-x: visible;
  }
}

@media (min-width: 1025px) {
  .chart-bars-container {
    height: 250px;
  }
}

.chart-bar-group {
  flex: 1;
  min-width: 30px;
  max-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  animation: slideUp 0.5s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

@media (min-width: 480px) {
  .chart-bar-group {
    min-width: 35px;
    max-width: 70px;
  }
}

@media (min-width: 640px) {
  .chart-bar-group {
    min-width: 40px;
    max-width: 80px;
  }
}

@media (min-width: 768px) {
  .chart-bar-group {
    min-width: 45px;
    max-width: 90px;
  }
}

.chart-bar-stack {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  position: relative;
}

.chart-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  transition: height 0.3s ease;
}

.chart-bar.releases {
  background: var(--accent);
}

.chart-bar.holds {
  background: #94a3b8;
}

.chart-label {
  margin-top: calc(var(--spacer) * 1.2);
  font-size: 0.65rem;
  color: var(--text-soft);
  white-space: nowrap;
  transform: rotate(-45deg);
  transform-origin: left;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .chart-label {
    font-size: 0.7rem;
    transform: rotate(0);
    margin-top: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .chart-label {
    font-size: 0.75rem;
  }
}

.chart-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-dark);
  color: white;
  padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.5);
  border-radius: 6px;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
  display: none;
}

@media (min-width: 768px) {
  .chart-tooltip {
    display: block;
  }
}

.chart-bar-group:hover .chart-tooltip {
  opacity: 1;
}

/* Chart Placeholder */
.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-soft);
  text-align: center;
  padding: calc(var(--spacer) * 2);
}

.chart-placeholder i {
  font-size: 2rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  opacity: 0.3;
  color: var(--accent);
}

@media (min-width: 768px) {
  .chart-placeholder i {
    font-size: 2.5rem;
  }
}

.chart-placeholder p {
  font-size: 0.85rem;
  word-break: break-word;
}

/* ========================================================================
   DISTRIBUTION CHART - RESPONSIVE
   ======================================================================== */

.distribution-container {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

@media (min-width: 480px) {
  .distribution-container {
    height: 220px;
  }
}

@media (min-width: 640px) {
  .distribution-container {
    height: 250px;
  }
}

@media (min-width: 768px) {
  .distribution-container {
    height: 280px;
  }
}

.distribution-pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  width: 100%;
}

@media (min-width: 480px) {
  .distribution-pie {
    flex-direction: row;
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .distribution-pie {
    gap: calc(var(--spacer) * 3);
  }
}

.pie-chart {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .pie-chart {
    width: 130px;
    height: 130px;
  }
}

@media (min-width: 640px) {
  .pie-chart {
    width: 140px;
    height: 140px;
  }
}

@media (min-width: 768px) {
  .pie-chart {
    width: 150px;
    height: 150px;
  }
}

.pie-segment {
  transition: stroke-dasharray 0.5s ease;
  cursor: pointer;
}

.pie-segment:hover {
  filter: brightness(1.1);
}

.distribution-legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .distribution-legend {
    flex-direction: column;
    gap: calc(var(--spacer) * 1.8);
  }
}

@media (min-width: 768px) {
  .distribution-legend {
    gap: calc(var(--spacer) * 2);
  }
}

.distribution-legend .legend-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  font-size: 0.75rem;
  color: var(--text-dark);
  white-space: nowrap;
}

@media (min-width: 480px) {
  .distribution-legend .legend-item {
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .distribution-legend .legend-item {
    font-size: 0.85rem;
  }
}

.distribution-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .distribution-legend .dot {
    width: 11px;
    height: 11px;
  }
}

@media (min-width: 768px) {
  .distribution-legend .dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
  }
}

.dot.releases {
  background: var(--accent);
}

.dot.holds {
  background: #94a3b8;
}

.dot.fees {
  background: #ef4444;
}

/* ========================================================================
   QUICK STATS - RESPONSIVE
   ======================================================================== */

.quick-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
  padding: calc(var(--spacer) * 2);
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .quick-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 2.5);
    padding: calc(var(--spacer) * 2.5);
    margin-bottom: calc(var(--spacer) * 4.5);
  }
}

@media (min-width: 768px) {
  .quick-stats {
    gap: calc(var(--spacer) * 3);
    padding: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 5);
    border-radius: 20px;
  }
}

@media (min-width: 1025px) {
  .quick-stats {
    gap: calc(var(--spacer) * 4);
    padding: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 6);
    border-radius: 24px;
  }
}

.stat-item {
  text-align: center;
  min-width: 0;
}

.stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 0.5);
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

@media (min-width: 480px) {
  .stat-label {
    font-size: 0.7rem;
    margin-bottom: calc(var(--spacer) * 0.8);
  }
}

@media (min-width: 768px) {
  .stat-label {
    font-size: 0.75rem;
  }
}

@media (min-width: 1025px) {
  .stat-label {
    font-size: 0.8rem;
  }
}

.stat-value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  word-break: break-word;
}

@media (min-width: 480px) {
  .stat-value {
    font-size: 1.1rem;
  }
}

@media (min-width: 640px) {
  .stat-value {
    font-size: 1.2rem;
  }
}

@media (min-width: 768px) {
  .stat-value {
    font-size: 1.3rem;
  }
}

@media (min-width: 1025px) {
  .stat-value {
    font-size: 1.4rem;
  }
}

/* ========================================================================
   TRANSACTIONS SECTION - RESPONSIVE
   ======================================================================== */

.transactions-section {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .transactions-section {
    padding: calc(var(--spacer) * 2.5);
    border-radius: 20px;
    margin-bottom: calc(var(--spacer) * 4.5);
  }
}

@media (min-width: 768px) {
  .transactions-section {
    padding: calc(var(--spacer) * 3);
    border-radius: 22px;
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .transactions-section {
    padding: calc(var(--spacer) * 4);
    border-radius: 24px;
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.section-tabs {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: calc(var(--spacer) * 2.5);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .section-tabs {
    margin-bottom: calc(var(--spacer) * 3);
    overflow-x: visible;
    white-space: normal;
  }
}

.tab-btn {
  background: none;
  border: none;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  font-size: 0.8rem;
  color: var(--text-soft);
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer));
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .tab-btn {
    font-size: 0.85rem;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .tab-btn {
    font-size: 0.9rem;
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
    min-height: 48px;
  }
}

.tab-btn i {
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .tab-btn i {
    font-size: 1rem;
  }
}

.tab-btn:hover {
  color: var(--text-dark);
}

.tab-btn.active {
  color: var(--accent);
}

.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

/* Transactions List */
.transactions-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .transactions-list {
    gap: calc(var(--spacer) * 2);
  }
}

.transaction-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 14px;
  transition: all 0.2s;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .transaction-item {
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2);
    border-radius: 16px;
  }
}

@media (min-width: 768px) {
  .transaction-item {
    flex-wrap: nowrap;
    gap: calc(var(--spacer) * 2.5);
    padding: calc(var(--spacer) * 2.5);
  }
}

.transaction-item:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow);
}

@media (min-width: 768px) {
  .transaction-item:hover {
    transform: translateX(4px);
  }
}

.transaction-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .transaction-icon {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    border-radius: 13px;
  }
}

@media (min-width: 768px) {
  .transaction-icon {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    border-radius: 14px;
  }
}

.transaction-icon.success {
  background: #e3f2e9;
  color: #2f6e4a;
}

.transaction-icon.warning {
  background: #fef3e2;
  color: #b45309;
}

.transaction-icon.danger {
  background: #fbe9e7;
  color: #aa4a44;
}

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

.transaction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
  flex-wrap: wrap;
  gap: calc(var(--spacer));
}

@media (min-width: 768px) {
  .transaction-header {
    margin-bottom: 4px;
  }
}

.transaction-type {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.85rem;
  word-break: break-word;
}

@media (min-width: 480px) {
  .transaction-type {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .transaction-type {
    font-size: 0.95rem;
  }
}

.transaction-amount {
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .transaction-amount {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .transaction-amount {
    font-size: 0.95rem;
  }
}

.transaction-amount.positive {
  color: #10b981;
}

.transaction-amount.negative {
  color: #ef4444;
}

.transaction-meta {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  font-size: 0.7rem;
  color: var(--text-soft);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .transaction-meta {
    font-size: 0.75rem;
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .transaction-meta {
    font-size: 0.8rem;
    gap: calc(var(--spacer) * 3);
  }
}

.transaction-meta i {
  margin-right: 2px;
  font-size: 0.65rem;
}

@media (min-width: 768px) {
  .transaction-meta i {
    font-size: 0.7rem;
    margin-right: 4px;
  }
}

.transaction-status {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 600;
  background: #e3f2e9;
  color: #2f6e4a;
  white-space: nowrap;
  margin-left: auto;
}

@media (min-width: 480px) {
  .transaction-status {
    font-size: 0.65rem;
    padding: 3px 10px;
  }
}

@media (min-width: 768px) {
  .transaction-status {
    font-size: 0.7rem;
    padding: 4px 12px;
  }
}

/* ========================================================================
   UPCOMING PAYOUTS - RESPONSIVE
   ======================================================================== */

.upcoming-payouts {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .upcoming-payouts {
    padding: calc(var(--spacer) * 2.5);
    border-radius: 20px;
  }
}

@media (min-width: 768px) {
  .upcoming-payouts {
    padding: calc(var(--spacer) * 3);
    border-radius: 22px;
  }
}

@media (min-width: 1025px) {
  .upcoming-payouts {
    padding: calc(var(--spacer) * 4);
    border-radius: 24px;
  }
}

.upcoming-payouts h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .upcoming-payouts h3 {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .upcoming-payouts h3 {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.payout-timeline {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .payout-timeline {
    gap: calc(var(--spacer) * 2);
  }
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  position: relative;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .timeline-item {
    gap: calc(var(--spacer) * 2);
    flex-wrap: nowrap;
  }
}

@media (min-width: 768px) {
  .timeline-item {
    gap: calc(var(--spacer) * 2.5);
  }
}

.timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 30px;
  bottom: -15px;
  width: 2px;
  background: var(--border-light);
}

@media (min-width: 480px) {
  .timeline-item:not(:last-child)::after {
    left: 15px;
    top: 35px;
  }
}

@media (min-width: 768px) {
  .timeline-item:not(:last-child)::after {
    left: 15px;
    top: 40px;
  }
}

.timeline-marker {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid;
  z-index: 1;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .timeline-marker {
    width: 24px;
    height: 24px;
  }
}

@media (min-width: 768px) {
  .timeline-marker {
    width: 24px;
    height: 24px;
  }
}

.timeline-marker.upcoming {
  border-color: var(--accent);
  background: var(--accent);
}

.timeline-marker.scheduled {
  border-color: #94a3b8;
  background: transparent;
}

.timeline-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  flex-wrap: wrap;
  min-width: 0;
}

@media (min-width: 480px) {
  .timeline-content {
    gap: calc(var(--spacer) * 2);
    flex-wrap: nowrap;
  }
}

@media (min-width: 768px) {
  .timeline-content {
    gap: calc(var(--spacer) * 3);
  }
}

.timeline-date {
  min-width: 100px;
  color: var(--text-soft);
  font-size: 0.8rem;
  word-break: break-word;
}

@media (min-width: 480px) {
  .timeline-date {
    min-width: 110px;
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .timeline-date {
    min-width: 120px;
    font-size: 0.9rem;
  }
}

.timeline-amount {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.9rem;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .timeline-amount {
    font-size: 0.95rem;
  }
}

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

.timeline-status {
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .timeline-status {
    font-size: 0.65rem;
    padding: 3px 10px;
  }
}

@media (min-width: 768px) {
  .timeline-status {
    font-size: 0.7rem;
    padding: 4px 12px;
  }
}

.timeline-status.upcoming {
  background: var(--accent);
  color: white;
}

.timeline-status.scheduled {
  background: var(--bg);
  color: var(--text-soft);
}

/* ========================================================================
   EMPTY STATE - RESPONSIVE
   ======================================================================== */

.empty-state.enhanced {
  text-align: center;
  padding: calc(var(--spacer) * 4);
  min-width: 0;
}

@media (min-width: 480px) {
  .empty-state.enhanced {
    padding: calc(var(--spacer) * 5);
  }
}

@media (min-width: 768px) {
  .empty-state.enhanced {
    padding: calc(var(--spacer) * 6);
  }
}

@media (min-width: 1025px) {
  .empty-state.enhanced {
    padding: calc(var(--spacer) * 8);
  }
}

.empty-state.enhanced i {
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .empty-state.enhanced i {
    font-size: 3rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .empty-state.enhanced i {
    font-size: 3.5rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .empty-state.enhanced i {
    font-size: 4rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.empty-state.enhanced h3 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.2);
  word-break: break-word;
}

@media (min-width: 480px) {
  .empty-state.enhanced h3 {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .empty-state.enhanced h3 {
    font-size: 1.3rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 1025px) {
  .empty-state.enhanced h3 {
    font-size: 1.5rem;
  }
}

.empty-state.enhanced p {
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 2);
  font-size: 0.85rem;
  word-break: break-word;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 480px) {
  .empty-state.enhanced p {
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .empty-state.enhanced p {
    font-size: 0.95rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

/* ========================================================================
   ANIMATIONS
   ======================================================================== */

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

/* ========================================================================
   TOUCH TARGETS
   ======================================================================== */

.tab-btn,
.transaction-item,
.timeline-item,
.btn-outline,
.btn-primary,
.metric-card {
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

/* ========================================================================
   SCROLLBAR STYLING
   ======================================================================== */

.chart-bars-container::-webkit-scrollbar,
.section-tabs::-webkit-scrollbar {
  height: 2px;
}

.chart-bars-container::-webkit-scrollbar-track,
.section-tabs::-webkit-scrollbar-track {
  background: var(--border-light);
}

.chart-bars-container::-webkit-scrollbar-thumb,
.section-tabs::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 2px;
}

/* ========================================================================
   SECTION 12: BOOKINGS DASHBOARD - FULLY RESPONSIVE
   ======================================================================== */

.booking-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
}

@media (min-width: 480px) {
  .booking-stats-grid {
    gap: calc(var(--spacer) * 2.5);
    margin-bottom: calc(var(--spacer) * 4.5);
  }
}

@media (min-width: 640px) {
  .booking-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .booking-stats-grid {
    gap: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.stat-card.booking-stat {
  background: var(--card-bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Prevents overflow */
}

@media (min-width: 480px) {
  .stat-card.booking-stat {
    padding: calc(var(--spacer) * 2.2);
    border-radius: 18px;
  }
}

@media (min-width: 640px) {
  .stat-card.booking-stat {
    padding: calc(var(--spacer) * 2.5);
    border-radius: 20px;
  }
}

@media (min-width: 768px) {
  .stat-card.booking-stat {
    padding: calc(var(--spacer) * 3);
  }
}

.stat-card.booking-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .stat-card.booking-stat:hover {
    transform: translateY(-4px);
  }
}

.stat-card.booking-stat.pending {
  background: linear-gradient(135deg, #fef3e2, #ffe4cc);
}

.stat-card.booking-stat.confirmed {
  background: linear-gradient(135deg, #e3f2e9, #c8e6d9);
}

.stat-card.booking-stat.completed {
  background: linear-gradient(135deg, #e1f0fa, #c2e0f5);
}

.stat-card.booking-stat.revenue {
  background: linear-gradient(135deg, #f2ebe3, #e8d9cc);
}

.stat-card.booking-stat .stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: calc(var(--spacer) * 1.2);
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(2px);
}

@media (min-width: 480px) {
  .stat-card.booking-stat .stat-icon {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 640px) {
  .stat-card.booking-stat .stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .stat-card.booking-stat .stat-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.stat-card.booking-stat .stat-content {
  flex: 1;
  min-width: 0; /* Prevents text overflow */
}

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

@media (min-width: 480px) {
  .stat-card.booking-stat .stat-value {
    font-size: 1.6rem;
  }
}

@media (min-width: 640px) {
  .stat-card.booking-stat .stat-value {
    font-size: 1.8rem;
  }
}

@media (min-width: 768px) {
  .stat-card.booking-stat .stat-value {
    font-size: 2rem;
  }
}

.stat-card.booking-stat .stat-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  white-space: normal;
  line-height: 1.3;
  word-break: break-word;
}

@media (min-width: 480px) {
  .stat-card.booking-stat .stat-label {
    font-size: 0.75rem;
    letter-spacing: 0.4px;
  }
}

@media (min-width: 640px) {
  .stat-card.booking-stat .stat-label {
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .stat-card.booking-stat .stat-label {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
  }
}

.stat-card.booking-stat .stat-trend {
  font-size: 0.65rem;
  color: var(--text-soft);
  margin-top: calc(var(--spacer) * 0.8);
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

@media (min-width: 480px) {
  .stat-card.booking-stat .stat-trend {
    font-size: 0.7rem;
    margin-top: calc(var(--spacer));
  }
}

@media (min-width: 640px) {
  .stat-card.booking-stat .stat-trend {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .stat-card.booking-stat .stat-trend {
    font-size: 0.8rem;
    margin-top: calc(var(--spacer) * 1.5);
  }
}

/* Very Small Mobile (below 360px) */
@media (max-width: 359px) {
  .booking-stats-grid {
    gap: calc(var(--spacer));
  }

  .stat-card.booking-stat {
    padding: calc(var(--spacer) * 1.5);
  }

  .stat-card.booking-stat .stat-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    margin-bottom: calc(var(--spacer));
  }

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

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

  .stat-card.booking-stat .stat-trend {
    font-size: 0.6rem;
  }
}

/* Alternative 2-column layout for very small screens */
@media (max-width: 380px) {
  .booking-stats-grid {
    grid-template-columns: 1fr;
    gap: calc(var(--spacer) * 1.5);
  }

  .stat-card.booking-stat {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacer) * 2);
  }

  .stat-card.booking-stat .stat-icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .stat-card.booking-stat .stat-content {
    flex: 1;
  }

  .stat-card.booking-stat .stat-value {
    font-size: 1.3rem;
    margin-bottom: 0;
    display: inline-block;
    margin-right: calc(var(--spacer));
  }

  .stat-card.booking-stat .stat-label {
    display: inline-block;
    font-size: 0.7rem;
  }

  .stat-card.booking-stat .stat-trend {
    margin-top: 2px;
  }
}

/* Ensure text doesn't get cut off on any device */
.stat-card.booking-stat {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Add a subtle animation for the numbers */
.stat-card.booking-stat .stat-value {
  animation: fadeInUp 0.5s ease;
}

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

/* Optional: Add a small indicator for clickable cards */
.stat-card.booking-stat::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card.booking-stat:active::after {
  opacity: 1;
}

@media (min-width: 768px) {
  .stat-card.booking-stat:hover::after {
    opacity: 1;
  }
}

.bookings-filters {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
  box-shadow: var(--shadow);
  width: 100%;
  overflow: hidden;
}

@media (min-width: 480px) {
  .bookings-filters {
    padding: calc(var(--spacer) * 2.5);
    border-radius: 22px;
    margin-bottom: calc(var(--spacer) * 4.5);
  }
}

@media (min-width: 640px) {
  .bookings-filters {
    padding: calc(var(--spacer) * 3);
    border-radius: 24px;
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .bookings-filters {
    padding: calc(var(--spacer) * 3.5);
    margin-bottom: calc(var(--spacer) * 6);
  }
}

/* Filter Tabs - Horizontal Scroll on Mobile */
.filter-tabs {
  display: flex;
  gap: calc(var(--spacer) * 1);
  margin-bottom: calc(var(--spacer) * 2);
  padding-bottom: calc(var(--spacer) * 1.5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  white-space: nowrap;
  width: 100%;
}

@media (min-width: 640px) {
  .filter-tabs {
    gap: calc(var(--spacer) * 1.5);
    margin-bottom: calc(var(--spacer) * 2.5);
    padding-bottom: calc(var(--spacer) * 2);
    flex-wrap: wrap;
    overflow-x: visible;
    white-space: normal;
  }
}

@media (min-width: 768px) {
  .filter-tabs {
    gap: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 3);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: calc(var(--spacer) * 2);
  }
}

/* Hide scrollbar for cleaner look on mobile but keep functionality */
.filter-tabs::-webkit-scrollbar {
  height: 2px;
}

.filter-tabs::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 2px;
}

.filter-tabs::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 2px;
}

.filter-tab {
  background: none;
  border: none;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  font-size: 0.8rem;
  color: var(--text-soft);
  cursor: pointer;
  border-radius: 30px;
  transition: all 0.2s;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  min-height: 40px;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .filter-tab {
    padding: calc(var(--spacer) * 1.3) calc(var(--spacer) * 2.2);
    font-size: 0.85rem;
    min-height: 42px;
  }
}

@media (min-width: 640px) {
  .filter-tab {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.9rem;
    min-height: 44px;
  }
}

@media (min-width: 768px) {
  .filter-tab {
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 3);
    font-size: 0.95rem;
    border-radius: 40px;
  }
}

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

.filter-tab.active {
  background: var(--accent);
  color: white;
}

.tab-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 20px;
  font-size: 0.6rem;
  margin-left: 2px;
  min-width: 18px;
  text-align: center;
}

@media (min-width: 480px) {
  .tab-badge {
    padding: 2px 7px;
    font-size: 0.65rem;
    min-width: 20px;
  }
}

@media (min-width: 768px) {
  .tab-badge {
    padding: 2px 8px;
    font-size: 0.7rem;
    margin-left: 4px;
  }
}

/* Filter Actions Container */
.filter-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  width: 100%;
}

@media (min-width: 480px) {
  .filter-actions {
    gap: calc(var(--spacer) * 2.2);
  }
}

@media (min-width: 640px) {
  .filter-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1025px) {
  .filter-actions {
    gap: calc(var(--spacer) * 3);
  }
}

/* Search Box - Full width on mobile */
.filter-actions .search-box {
  flex: 1;
  min-width: 0;
  width: 100%;
  position: relative;
}

@media (min-width: 640px) {
  .filter-actions .search-box {
    min-width: 200px;
    width: auto;
  }
}

@media (min-width: 768px) {
  .filter-actions .search-box {
    min-width: 250px;
  }
}

.filter-actions .search-box i {
  position: absolute;
  left: calc(var(--spacer) * 2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.8rem;
  z-index: 1;
  pointer-events: none;
}

@media (min-width: 480px) {
  .filter-actions .search-box i {
    font-size: 0.85rem;
    left: calc(var(--spacer) * 2.2);
  }
}

@media (min-width: 768px) {
  .filter-actions .search-box i {
    font-size: 0.9rem;
    left: calc(var(--spacer) * 2.5);
  }
}

.filter-actions .search-box input {
  width: 100%;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2)
    calc(var(--spacer) * 1.5) calc(var(--spacer) * 5);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.85rem;
  background: var(--bg);
  transition: all 0.2s;
  min-height: 44px;
  line-height: 1.5;
  color: var(--text-dark);
}

@media (min-width: 480px) {
  .filter-actions .search-box input {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.2)
      calc(var(--spacer) * 1.5) calc(var(--spacer) * 5.5);
    font-size: 0.9rem;
  }
}

@media (min-width: 640px) {
  .filter-actions .search-box input {
    min-width: 200px;
  }
}

@media (min-width: 768px) {
  .filter-actions .search-box input {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2.5)
      calc(var(--spacer) * 2) calc(var(--spacer) * 6);
    font-size: 0.95rem;
    min-height: 48px;
  }
}

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

.filter-actions .search-box input::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .filter-actions .search-box input::placeholder {
    font-size: 0.85rem;
  }
}

/* Date Range Filter Select */
.filter-select {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3)
    calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  background: var(--bg);
  width: 100%;
  min-height: 44px;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
  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 calc(var(--spacer) * 2) center;
  background-size: 14px;
  padding-right: calc(var(--spacer) * 5);
}

@media (min-width: 480px) {
  .filter-select {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3.5)
      calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.8);
    font-size: 0.9rem;
    background-size: 15px;
  }
}

@media (min-width: 640px) {
  .filter-select {
    width: auto;
    min-width: 140px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3)
      calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .filter-select {
    min-width: 160px;
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3.5)
      calc(var(--spacer) * 2) calc(var(--spacer) * 3);
    font-size: 0.95rem;
    min-height: 48px;
    background-size: 16px;
    background-position: right calc(var(--spacer) * 2.5) center;
    padding-right: calc(var(--spacer) * 6);
  }
}

.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 Button */
.filter-actions .btn-outline {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer));
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  margin: 0;
}

@media (min-width: 480px) {
  .filter-actions .btn-outline {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3);
    font-size: 0.9rem;
  }
}

@media (min-width: 640px) {
  .filter-actions .btn-outline {
    width: auto;
    min-width: 100px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .filter-actions .btn-outline {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
    min-height: 48px;
    font-size: 0.95rem;
  }
}

.filter-actions .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .filter-actions .btn-outline:hover {
    transform: translateY(-2px);
  }
}

.filter-actions .btn-outline i {
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .filter-actions .btn-outline i {
    font-size: 0.9rem;
  }
}

/* Responsive layout for filter actions - 2 columns on small mobile */
@media (max-width: 380px) {
  .filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacer));
  }

  .filter-actions .search-box {
    grid-column: span 2;
  }

  .filter-select {
    grid-column: span 1;
    min-width: 0;
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2)
      calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.8);
    font-size: 0.75rem;
    background-position: right calc(var(--spacer) * 1.5) center;
    padding-right: calc(var(--spacer) * 4);
  }

  .filter-actions .btn-outline {
    grid-column: span 1;
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
    font-size: 0.75rem;
  }
}

/* Very Small Mobile (below 360px) */
@media (max-width: 359px) {
  .bookings-filters {
    padding: calc(var(--spacer) * 1.5);
  }

  .filter-tab {
    padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.5);
    font-size: 0.7rem;
    min-height: 36px;
  }

  .filter-actions .search-box input {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5)
      calc(var(--spacer) * 1.2) calc(var(--spacer) * 4.5);
    font-size: 0.75rem;
    min-height: 40px;
  }

  .filter-select {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2.5)
      calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
    font-size: 0.7rem;
    min-height: 40px;
  }

  .filter-actions .btn-outline {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.8);
    font-size: 0.7rem;
    min-height: 40px;
  }
}

/* Landscape orientation fixes */
@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .bookings-filters {
    margin-bottom: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 1.5);
  }

  .filter-tabs {
    margin-bottom: calc(var(--spacer) * 1.5);
    padding-bottom: calc(var(--spacer));
  }

  .filter-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .filter-actions .search-box {
    min-width: 180px;
  }

  .filter-select {
    min-width: 130px;
  }

  .filter-actions .btn-outline {
    width: auto;
  }
}

/* Ensure text doesn't get cut off */
.filter-tab,
.filter-select,
.filter-actions .search-box input,
.filter-actions .btn-outline {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Touch-friendly targets */
.filter-tab,
.filter-select,
.filter-actions .btn-outline,
.filter-actions .search-box input {
  min-height: 44px;
}

@media (max-width: 359px) {
  .filter-tab,
  .filter-select,
  .filter-actions .btn-outline,
  .filter-actions .search-box input {
    min-height: 40px;
  }
}

.tab-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 20px;
  font-size: 0.6rem;
  margin-left: 2px;
}

@media (min-width: 768px) {
  .tab-badge {
    padding: 2px 8px;
    font-size: 0.65rem;
    margin-left: 4px;
  }
}

.filter-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .filter-actions {
    flex-direction: row;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .filter-actions {
    gap: calc(var(--spacer) * 2);
  }
}

/* Booking Cards */
.bookings-section {
  margin-bottom: calc(var(--spacer) * 4);
}

@media (min-width: 768px) {
  .bookings-section {
    margin-bottom: calc(var(--spacer) * 5);
  }
}

@media (min-width: 1025px) {
  .bookings-section {
    margin-bottom: calc(var(--spacer) * 6);
  }
}

.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .section-title {
    font-size: 1.1rem;
    gap: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .section-title {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.section-title i {
  color: var(--accent);
  font-size: 1rem;
}

@media (min-width: 768px) {
  .section-title i {
    font-size: 1.1rem;
  }
}

.section-badge {
  background: var(--accent);
  color: white;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
}

@media (min-width: 480px) {
  .section-badge {
    padding: 2px 10px;
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .section-badge {
    font-size: 0.8rem;
  }
}

.bookings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .bookings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .bookings-grid {
    gap: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .bookings-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: calc(var(--spacer) * 4);
  }
}

.booking-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2.5);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

@media (min-width: 480px) {
  .booking-card {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .booking-card {
    border-radius: 20px;
    padding: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 1025px) {
  .booking-card {
    padding: calc(var(--spacer) * 4);
    border-radius: 24px;
  }
}

.booking-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .booking-card:hover {
    transform: translateY(-4px);
  }
}

.booking-card.pending {
  border-left: 3px solid #b45309;
}

@media (min-width: 768px) {
  .booking-card.pending {
    border-left-width: 4px;
  }
}

.booking-card.confirmed {
  border-left: 3px solid #2f6e4a;
}

@media (min-width: 768px) {
  .booking-card.confirmed {
    border-left-width: 4px;
  }
}

.booking-card.rejected {
  border-left: 3px solid #aa4a44;
  opacity: 0.8;
}

@media (min-width: 768px) {
  .booking-card.rejected {
    border-left-width: 4px;
  }
}

.booking-card.cancelled {
  border-left: 3px solid #64748b;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .booking-card.cancelled {
    border-left-width: 4px;
  }
}

.booking-card.completed {
  border-left: 3px solid #10b981;
}

@media (min-width: 768px) {
  .booking-card.completed {
    border-left-width: 4px;
  }
}

.booking-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 2);
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .booking-card-header {
    margin-bottom: calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 2);
  }
}

.booking-badges {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .booking-badges {
    gap: calc(var(--spacer));
  }
}

.booking-status {
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

@media (min-width: 480px) {
  .booking-status {
    padding: 4px 10px;
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .booking-status {
    padding: 6px 12px;
    font-size: 0.8rem;
    gap: 4px;
  }
}

.booking-badge {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--accent);
  color: white;
}

@media (min-width: 480px) {
  .booking-badge {
    padding: 3px 10px;
    font-size: 0.65rem;
  }
}

@media (min-width: 768px) {
  .booking-badge {
    padding: 4px 10px;
    font-size: 0.7rem;
  }
}

.booking-badge.upcoming {
  background: #10b981;
}

.booking-date {
  color: var(--text-soft);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 3px;
}

@media (min-width: 480px) {
  .booking-date {
    font-size: 0.8rem;
    gap: 4px;
  }
}

@media (min-width: 768px) {
  .booking-date {
    font-size: 0.85rem;
  }
}

@media (min-width: 1025px) {
  .booking-date {
    font-size: 0.9rem;
  }
}

.booking-card-body {
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .booking-card-body {
    margin-bottom: calc(var(--spacer) * 3);
  }
}

/* Time Info */
.booking-time-info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
  margin: calc(var(--spacer) * 1.5) 0;
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 14px;
}

@media (min-width: 480px) {
  .booking-time-info {
    flex-direction: row;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .booking-time-info {
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2);
    border-radius: 16px;
    margin: calc(var(--spacer) * 2) 0;
  }
}

.time-detail {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  flex: 1;
  min-width: 120px;
}

@media (min-width: 480px) {
  .time-detail {
    min-width: 130px;
  }
}

@media (min-width: 768px) {
  .time-detail {
    min-width: 140px;
  }
}

.time-detail i {
  color: var(--accent);
  font-size: 0.9rem;
  width: 18px;
}

@media (min-width: 768px) {
  .time-detail i {
    font-size: 1rem;
    width: 20px;
  }
}

@media (min-width: 1025px) {
  .time-detail i {
    font-size: 1.1rem;
  }
}

.time-detail div {
  display: flex;
  flex-direction: column;
}

.time-label {
  font-size: 0.6rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

@media (min-width: 480px) {
  .time-label {
    font-size: 0.65rem;
  }
}

@media (min-width: 768px) {
  .time-label {
    font-size: 0.7rem;
  }
}

.time-value {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.8rem;
}

@media (min-width: 480px) {
  .time-value {
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .time-value {
    font-size: 0.9rem;
  }
}

@media (min-width: 1025px) {
  .time-value {
    font-size: 0.95rem;
  }
}

/* Booking Note */
.booking-note {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: #fef3e2;
  border-radius: 10px;
  margin-top: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .booking-note {
    padding: calc(var(--spacer) * 2);
    border-radius: 12px;
    margin-top: calc(var(--spacer) * 2);
    gap: calc(var(--spacer) * 2);
  }
}

.booking-note i {
  color: #b45309;
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .booking-note i {
    font-size: 1rem;
  }
}

.booking-note p {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-dark);
  font-style: italic;
}

@media (min-width: 768px) {
  .booking-note p {
    font-size: 0.85rem;
  }
}

@media (min-width: 1025px) {
  .booking-note p {
    font-size: 0.9rem;
  }
}

/* Booking Card Footer */
.booking-card-footer {
  padding-top: calc(var(--spacer) * 1.5);
  border-top: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .booking-card-footer {
    padding-top: calc(var(--spacer) * 2);
  }
}

.booking-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
}

@media (min-width: 480px) {
  .booking-actions {
    flex-direction: row;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .booking-actions {
    gap: calc(var(--spacer) * 2);
  }
}

.booking-actions button {
  flex: 1;
  min-width: 80px;
  width: 100%;
}

@media (min-width: 480px) {
  .booking-actions button {
    width: auto;
  }
}

.booking-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--spacer));
}

@media (min-width: 768px) {
  .booking-meta {
    gap: calc(var(--spacer) * 2);
  }
}

.booking-reference {
  font-family: monospace;
  color: var(--text-soft);
  font-size: 0.7rem;
}

@media (min-width: 480px) {
  .booking-reference {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .booking-reference {
    font-size: 0.8rem;
  }
}

/* Time Indicator */
.booking-time-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border-light);
}

@media (min-width: 768px) {
  .booking-time-indicator {
    height: 4px;
  }
}

.time-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  width: 0;
  transition: width 1s ease;
}

/* Empty State */
.empty-bookings {
  text-align: center;
  padding: calc(var(--spacer) * 5);
  background: var(--card-bg);
  border-radius: 20px;
}

@media (min-width: 480px) {
  .empty-bookings {
    padding: calc(var(--spacer) * 6);
  }
}

@media (min-width: 768px) {
  .empty-bookings {
    padding: calc(var(--spacer) * 8);
    border-radius: 22px;
  }
}

@media (min-width: 1025px) {
  .empty-bookings {
    padding: calc(var(--spacer) * 10);
    border-radius: 24px;
  }
}

.empty-illustration i {
  font-size: 3rem;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: calc(var(--spacer) * 2.5);
}

@media (min-width: 480px) {
  .empty-illustration i {
    font-size: 3.5rem;
  }
}

@media (min-width: 768px) {
  .empty-illustration i {
    font-size: 4rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .empty-illustration i {
    font-size: 5rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.empty-bookings h3 {
  font-size: 1.2rem;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .empty-bookings h3 {
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .empty-bookings h3 {
    font-size: 1.4rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 1025px) {
  .empty-bookings h3 {
    font-size: 1.5rem;
  }
}

.empty-bookings p {
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 2.5);
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .empty-bookings p {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .empty-bookings p {
    font-size: 0.95rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .empty-bookings p {
    font-size: 1rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.empty-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
  justify-content: center;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .empty-actions {
    flex-direction: row;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .empty-actions {
    gap: calc(var(--spacer) * 2);
  }
}

.empty-actions button {
  width: 100%;
}

@media (min-width: 480px) {
  .empty-actions button {
    width: auto;
  }
}

.no-bookings-message {
  text-align: center;
  color: var(--text-soft);
  padding: calc(var(--spacer) * 2.5);
  background: var(--bg);
  border-radius: 14px;
  grid-column: 1 / -1;
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .no-bookings-message {
    padding: calc(var(--spacer) * 3);
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .no-bookings-message {
    padding: calc(var(--spacer) * 4);
    border-radius: 16px;
    font-size: 0.95rem;
  }
}

/* ========================================================================
   BOOKINGS HEADER ACTIONS - TEXT FIX FOR MOBILE
   ======================================================================== */

.bookings-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .bookings-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

/* Header text */
.bookings-header .page-title {
  font-size: 1.3rem;
  margin: 0;
  line-height: 1.2;
  word-break: break-word;
}

@media (min-width: 768px) {
  .bookings-header .page-title {
    font-size: 1.6rem;
  }
}

.bookings-header .page-subtitle {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin-top: calc(var(--spacer) * 0.5);
  word-break: break-word;
}

/* ========================================================================
   BOOKINGS ACTIONS BUTTONS - TEXT FIX FOR MOBILE
   ======================================================================== */

.bookings-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
}

@media (min-width: 640px) {
  .bookings-actions {
    flex-direction: row;
    width: auto;
    gap: calc(var(--spacer) * 2);
  }
}

/* Base button styles for both buttons */
.bookings-actions .btn-outline,
.bookings-actions .btn-primary {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  min-height: 48px;
  border-radius: 40px;
  font-size: 0.9rem;
  white-space: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 1.2);
  width: 100%;
  margin: 0;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
  text-align: center;
  word-break: break-word;
  box-sizing: border-box;
}

/* Export Button specific */
.bookings-actions .btn-outline {
  background: var(--bg);
  border: 1.5px solid var(--border-light);
  color: var(--text-dark);
}

/* Calendar View Button specific */
.bookings-actions .btn-primary {
  background: var(--text-dark);
  border: 1.5px solid var(--text-dark);
  color: white;
}

/* Button icons */
.bookings-actions .btn-outline i,
.bookings-actions .btn-primary i {
  font-size: 1rem;
  flex-shrink: 0;
}

/* Button text */
.bookings-actions .btn-outline span,
.bookings-actions .btn-primary span {
  display: inline-block;
  white-space: normal;
  word-break: break-word;
  text-align: center;
}

/* ========================================================================
   MOBILE SPECIFIC TEXT FIXES
   ======================================================================== */

/* Small mobile devices (below 480px) */
@media (max-width: 479px) {
  .bookings-actions .btn-outline,
  .bookings-actions .btn-primary {
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 1.5);
    font-size: 0.95rem;
    min-height: 52px;
    flex-direction: row;
    gap: calc(var(--spacer) * 1.2);
  }

  .bookings-actions .btn-outline i,
  .bookings-actions .btn-primary i {
    font-size: 1.1rem;
  }

  .bookings-actions .btn-outline span,
  .bookings-actions .btn-primary span {
    font-size: 0.95rem;
    font-weight: 500;
  }
}

/* Very small mobile devices (below 400px) */
@media (max-width: 399px) {
  .bookings-actions .btn-outline,
  .bookings-actions .btn-primary {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 1.2);
    font-size: 0.9rem;
    min-height: 50px;
    gap: calc(var(--spacer));
  }

  .bookings-actions .btn-outline i,
  .bookings-actions .btn-primary i {
    font-size: 1rem;
  }

  .bookings-actions .btn-outline span,
  .bookings-actions .btn-primary span {
    font-size: 0.9rem;
  }
}

/* Extremely small mobile devices (below 360px) */
@media (max-width: 359px) {
  .bookings-actions {
    gap: calc(var(--spacer) * 1.2);
  }

  .bookings-actions .btn-outline,
  .bookings-actions .btn-primary {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 1);
    font-size: 0.85rem;
    min-height: 48px;
    gap: calc(var(--spacer) * 0.8);
  }

  .bookings-actions .btn-outline i,
  .bookings-actions .btn-primary i {
    font-size: 0.95rem;
  }

  .bookings-actions .btn-outline span,
  .bookings-actions .btn-primary span {
    font-size: 0.85rem;
  }
}

/* ========================================================================
   ALTERNATIVE LAYOUT FOR TINY SCREENS - STACK ICON ABOVE TEXT
   ======================================================================== */

@media (max-width: 320px) {
  .bookings-actions {
    gap: calc(var(--spacer) * 1.5);
  }

  .bookings-actions .btn-outline,
  .bookings-actions .btn-primary {
    flex-direction: column;
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 0.8);
    gap: calc(var(--spacer) * 0.5);
    min-height: 60px;
  }

  .bookings-actions .btn-outline i,
  .bookings-actions .btn-primary i {
    font-size: 1.2rem;
    margin-bottom: 2px;
  }

  .bookings-actions .btn-outline span,
  .bookings-actions .btn-primary span {
    font-size: 0.8rem;
    line-height: 1.2;
  }
}

/* ========================================================================
   HOVER AND ACTIVE STATES
   ======================================================================== */

.bookings-actions .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.bookings-actions .btn-outline:hover i {
  color: white;
}

.bookings-actions .btn-primary:hover {
  background: #4a3f3a;
  border-color: #4a3f3a;
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

/* Active state for mobile */
.bookings-actions .btn-outline:active,
.bookings-actions .btn-primary:active {
  transform: scale(0.98);
}

/* ========================================================================
   LANDSCAPE ORIENTATION
   ======================================================================== */

@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .bookings-actions {
    flex-direction: row;
    width: auto;
  }

  .bookings-actions .btn-outline,
  .bookings-actions .btn-primary {
    width: auto;
    min-width: 130px;
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
    font-size: 0.9rem;
    flex-direction: row;
  }

  .bookings-actions .btn-outline i,
  .bookings-actions .btn-primary i {
    font-size: 1rem;
  }
}

/* ========================================================================
   TABLET AND DESKTOP
   ======================================================================== */

@media (min-width: 640px) {
  .bookings-actions .btn-outline,
  .bookings-actions .btn-primary {
    width: auto;
    min-width: 130px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.95rem;
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .bookings-actions .btn-outline,
  .bookings-actions .btn-primary {
    min-width: 140px;
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
    font-size: 1rem;
    min-height: 48px;
  }
}

@media (min-width: 1025px) {
  .bookings-actions .btn-outline,
  .bookings-actions .btn-primary {
    min-width: 160px;
    font-size: 1.05rem;
  }
}

/* ========================================================================
   BUTTON TEXT WRAPPING PROTECTION
   ======================================================================== */

.bookings-actions .btn-outline span,
.bookings-actions .btn-primary span {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Ensure buttons never overflow their container */
.bookings-actions {
  max-width: 100%;
  overflow: hidden;
}

.bookings-actions .btn-outline,
.bookings-actions .btn-primary {
  max-width: 100%;
  box-sizing: border-box;
}

/* ========================================================================
   SECTION 13: ORDERS DASHBOARD - FULLY RESPONSIVE
   ======================================================================== */

/* Order Stats */
.order-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 480px) {
  .order-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .order-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .order-stats-grid {
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.stat-card.compact {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 2);
  border-radius: 16px;
}

@media (min-width: 480px) {
  .stat-card.compact {
    padding: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .stat-card.compact {
    padding: calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 2);
  }
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 1.5rem;
  }
}

.stat-icon.pending {
  background: #fef3e2;
  color: #b45309;
}

.stat-icon.active {
  background: #e1f0fa;
  color: #1e4a6b;
}

.stat-icon.completed {
  background: #e3f2e9;
  color: #2f6e4a;
}

.stat-icon.total {
  background: #f2ebe3;
  color: var(--accent);
}

/* Search Box - Original Style */
.orders-search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
  padding-top: 0;
}

@media (min-width: 480px) {
  .orders-search-box {
    min-width: 220px;
  }
}

@media (min-width: 768px) {
  .orders-search-box {
    min-width: 250px;
  }
}

.orders-search-box input {
  width: 100%;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2)
    calc(var(--spacer) * 1.5) calc(var(--spacer) * 5);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.85rem;
  background: var(--bg);
  transition: all 0.2s;
  min-height: 44px;
  line-height: 1.5;
  color: var(--text-dark);
}

@media (min-width: 480px) {
  .orders-search-box input {
    font-size: 0.9rem;
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 2.5)
      calc(var(--spacer) * 1.8) calc(var(--spacer) * 5.5);
  }
}

@media (min-width: 768px) {
  .orders-search-box input {
    font-size: 0.95rem;
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2.5)
      calc(var(--spacer) * 2) calc(var(--spacer) * 6);
    min-height: 48px;
  }
}

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

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

/* Filters Section */
.filters-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
  background: var(--card-bg);
  padding: calc(var(--spacer) * 2);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .filters-section {
    padding: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .filters-section {
    flex-direction: row;
    align-items: center;
    padding: calc(var(--spacer) * 3);
    border-radius: 16px;
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

/* Filter Group - for selects and buttons */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

@media (min-width: 480px) {
  .filter-group {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .filter-group {
    gap: calc(var(--spacer) * 2);
    width: auto;
  }
}

.filter-select {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  background: var(--bg);
  min-width: 120px;
  min-height: 44px;
  font-size: 0.8rem;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
  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 calc(var(--spacer) * 1.5) center;
  background-size: 14px;
  padding-right: calc(var(--spacer) * 4);
  width: 100%;
}

@media (min-width: 480px) {
  .filter-select {
    width: auto;
    min-width: 130px;
    font-size: 0.85rem;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5)
      calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    padding-right: calc(var(--spacer) * 5);
  }
}

@media (min-width: 768px) {
  .filter-select {
    min-width: 140px;
    font-size: 0.9rem;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3)
      calc(var(--spacer) * 1.5) calc(var(--spacer) * 3);
    padding-right: calc(var(--spacer) * 5);
    min-height: 48px;
  }
}

@media (min-width: 1025px) {
  .filter-select {
    font-size: 0.95rem;
  }
}

.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 Button */
.filter-group .btn-outline {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.8rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.5);
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

@media (min-width: 480px) {
  .filter-group .btn-outline {
    width: auto;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.85rem;
    gap: calc(var(--spacer));
  }
}

@media (min-width: 768px) {
  .filter-group .btn-outline {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3);
    font-size: 0.9rem;
    min-height: 48px;
  }
}

.filter-group .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .filter-group .btn-outline:hover {
    transform: translateY(-2px);
  }
}

.filter-group .btn-outline i {
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .filter-group .btn-outline i {
    font-size: 0.9rem;
  }
}

/* ========================================================================
   SECTION 13: ORDERS DASHBOARD (CONTINUED) - FULLY RESPONSIVE
   ======================================================================== */

/* Orders List */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .orders-list {
    gap: calc(var(--spacer) * 3);
  }
}

/* Order Card */
.order-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2.5);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

@media (min-width: 480px) {
  .order-card {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .order-card {
    border-radius: 18px;
    padding: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 1025px) {
  .order-card {
    border-radius: 20px;
    padding: calc(var(--spacer) * 4);
  }
}

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

.order-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .order-card-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .order-card-header {
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.order-badges {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .order-badges {
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .order-badges {
    gap: calc(var(--spacer) * 2);
  }
}

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

@media (min-width: 480px) {
  .order-id {
    font-size: 0.8rem;
    padding: 4px 12px;
  }
}

@media (min-width: 768px) {
  .order-id {
    font-size: 0.85rem;
    padding: 4px 12px;
  }
}

@media (min-width: 1025px) {
  .order-id {
    font-size: 0.9rem;
  }
}

.order-date {
  color: var(--text-soft);
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 3px;
}

@media (min-width: 480px) {
  .order-date {
    font-size: 0.75rem;
    gap: 4px;
  }
}

@media (min-width: 768px) {
  .order-date {
    font-size: 0.8rem;
  }
}

@media (min-width: 1025px) {
  .order-date {
    font-size: 0.85rem;
  }
}

.order-card-body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .order-card-body {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .order-card-body {
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.customer-info {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  min-width: 0;
}

@media (min-width: 480px) {
  .customer-info {
    gap: calc(var(--spacer) * 2);
  }
}

.customer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.5rem;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .customer-avatar {
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
  }
}

@media (min-width: 768px) {
  .customer-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.8rem;
  }
}

@media (min-width: 1025px) {
  .customer-avatar {
    font-size: 2rem;
  }
}

.customer-details {
  min-width: 0;
}

.customer-details h4 {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .customer-details h4 {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .customer-details h4 {
    font-size: 0.95rem;
    margin-bottom: 4px;
  }
}

@media (min-width: 1025px) {
  .customer-details h4 {
    font-size: 1rem;
  }
}

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

@media (min-width: 480px) {
  .service-title {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .service-title {
    font-size: 0.8rem;
  }
}

@media (min-width: 1025px) {
  .service-title {
    font-size: 0.85rem;
  }
}

.order-meta {
  display: flex;
  gap: calc(var(--spacer) * 2);
  flex-wrap: wrap;
  width: 100%;
}

@media (min-width: 480px) {
  .order-meta {
    width: auto;
    gap: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .order-meta {
    gap: calc(var(--spacer) * 4);
  }
}

.meta-item {
  text-align: left;
  min-width: 80px;
}

@media (min-width: 480px) {
  .meta-item {
    text-align: right;
  }
}

.meta-label {
  display: block;
  font-size: 0.6rem;
  color: var(--text-soft);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

@media (min-width: 480px) {
  .meta-label {
    font-size: 0.65rem;
  }
}

@media (min-width: 768px) {
  .meta-label {
    font-size: 0.7rem;
    margin-bottom: 4px;
  }
}

@media (min-width: 1025px) {
  .meta-label {
    font-size: 0.75rem;
  }
}

.meta-value {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .meta-value {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .meta-value {
    font-size: 0.95rem;
  }
}

@media (min-width: 1025px) {
  .meta-value {
    font-size: 1rem;
  }
}

.meta-value.has-amount {
  color: var(--accent);
}

.meta-value.tbd {
  color: var(--text-soft);
  font-style: italic;
}

.order-card-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  padding-top: calc(var(--spacer) * 1.5);
  border-top: 1px solid var(--border-light);
}

@media (min-width: 480px) {
  .order-card-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .order-card-footer {
    padding-top: calc(var(--spacer) * 2);
    gap: calc(var(--spacer) * 2);
  }
}

/* Progress Indicator */
.progress-indicator {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  flex-wrap: wrap;
  width: 100%;
}

@media (min-width: 480px) {
  .progress-indicator {
    width: auto;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .progress-indicator {
    gap: calc(var(--spacer) * 3);
  }
}

.step {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
  font-size: 0.65rem;
}

@media (min-width: 480px) {
  .step {
    font-size: 0.7rem;
    gap: 3px;
  }
}

@media (min-width: 768px) {
  .step {
    font-size: 0.75rem;
    gap: 4px;
  }
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 18px;
  width: 15px;
  height: 1px;
  background: var(--border-light);
}

@media (min-width: 480px) {
  .step:not(:last-child)::after {
    left: 20px;
    width: 20px;
  }
}

@media (min-width: 768px) {
  .step:not(:last-child)::after {
    left: 20px;
    width: 30px;
  }
}

.step.active .step-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.step.current .step-dot {
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.2);
}

.step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border-light);
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .step-dot {
    width: 12px;
    height: 12px;
  }
}

.step-label {
  font-size: 0.65rem;
  color: var(--text-soft);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .step-label {
    font-size: 0.7rem;
  }
}

/* Order Detail View */
.order-detail-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .order-detail-view {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .order-detail-view {
    padding: calc(var(--spacer) * 4);
  }
}

.detail-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .detail-header {
    flex-direction: row;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .detail-header {
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .detail-header {
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.detail-header h1 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-dark);
  flex: 1;
  word-break: break-word;
}

@media (min-width: 480px) {
  .detail-header h1 {
    font-size: 1.4rem;
  }
}

@media (min-width: 768px) {
  .detail-header h1 {
    font-size: 1.6rem;
  }
}

@media (min-width: 1025px) {
  .detail-header h1 {
    font-size: 1.8rem;
  }
}

.header-actions {
  display: flex;
  gap: calc(var(--spacer));
  width: 100%;
}

@media (min-width: 480px) {
  .header-actions {
    width: auto;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .header-actions {
    gap: calc(var(--spacer) * 2);
  }
}

/* Status Bar */
.status-bar {
  background: var(--card-bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2.5);
  margin-bottom: calc(var(--spacer) * 3);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .status-bar {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .status-bar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 18px;
    padding: calc(var(--spacer) * 3.5);
    margin-bottom: calc(var(--spacer) * 4);
    gap: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .status-bar {
    border-radius: 20px;
    padding: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.status-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

@media (min-width: 480px) {
  .status-label {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .status-label {
    font-size: 0.8rem;
  }
}

@media (min-width: 1025px) {
  .status-label {
    font-size: 0.85rem;
  }
}

.status-value {
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
}

@media (min-width: 480px) {
  .status-value {
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  .status-value {
    font-size: 1.2rem;
    gap: calc(var(--spacer));
  }
}

@media (min-width: 1025px) {
  .status-value {
    font-size: 1.3rem;
  }
}

.status-value i {
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .status-value i {
    font-size: 1rem;
  }
}

@media (min-width: 1025px) {
  .status-value i {
    font-size: 1.1rem;
  }
}

.status-progress {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .status-progress {
    gap: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .status-progress {
    gap: calc(var(--spacer) * 4);
  }
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0.5;
  transition: all 0.3s ease;
  min-width: 50px;
}

@media (min-width: 480px) {
  .progress-step {
    min-width: 60px;
  }
}

@media (min-width: 768px) {
  .progress-step {
    min-width: 70px;
  }
}

.progress-step.complete {
  opacity: 1;
  color: var(--accent);
}

.progress-step i {
  font-size: 1rem;
}

@media (min-width: 480px) {
  .progress-step i {
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  .progress-step i {
    font-size: 1.2rem;
  }
}

.progress-step span {
  font-size: 0.6rem;
  text-align: center;
}

@media (min-width: 480px) {
  .progress-step span {
    font-size: 0.65rem;
  }
}

@media (min-width: 768px) {
  .progress-step span {
    font-size: 0.7rem;
  }
}

@media (min-width: 1025px) {
  .progress-step span {
    font-size: 0.75rem;
  }
}

/* Detail Grid */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 3);
}

@media (min-width: 768px) {
  .detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacer) * 4);
  }
}

/* Info Card */
.info-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2.5);
  box-shadow: var(--shadow);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 480px) {
  .info-card {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .info-card {
    border-radius: 18px;
    padding: calc(var(--spacer) * 3.5);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .info-card {
    border-radius: 20px;
    padding: calc(var(--spacer) * 4);
  }
}

.info-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: calc(var(--spacer) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  color: var(--text-dark);
}

@media (min-width: 480px) {
  .info-card h3 {
    font-size: 1.05rem;
  }
}

@media (min-width: 768px) {
  .info-card h3 {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1025px) {
  .info-card h3 {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.info-rows {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .info-rows {
    gap: calc(var(--spacer) * 2);
  }
}

.info-row {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.5);
  padding: calc(var(--spacer) * 1.2) 0;
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 480px) {
  .info-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer));
  }
}

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

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

@media (min-width: 480px) {
  .info-label {
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .info-label {
    font-size: 0.9rem;
  }
}

@media (min-width: 1025px) {
  .info-label {
    font-size: 0.95rem;
  }
}

.info-value {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.85rem;
  word-break: break-word;
}

@media (min-width: 480px) {
  .info-value {
    font-size: 0.9rem;
    text-align: right;
  }
}

@media (min-width: 768px) {
  .info-value {
    font-size: 0.95rem;
  }
}

@media (min-width: 1025px) {
  .info-value {
    font-size: 1rem;
  }
}

/* Milestones */
.milestones-card,
.updates-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2.5);
  box-shadow: var(--shadow);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 480px) {
  .milestones-card,
  .updates-card {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .milestones-card,
  .updates-card {
    border-radius: 18px;
    padding: calc(var(--spacer) * 3.5);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .milestones-card,
  .updates-card {
    border-radius: 20px;
    padding: calc(var(--spacer) * 4);
  }
}

.card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 2);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .card-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .card-header {
    margin-bottom: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 1025px) {
  .card-header {
    margin-bottom: calc(var(--spacer) * 3);
  }
}

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

@media (min-width: 480px) {
  .card-header h3 {
    font-size: 1.05rem;
  }
}

@media (min-width: 768px) {
  .card-header h3 {
    font-size: 1.1rem;
  }
}

.card-header .btn-text {
  padding: calc(var(--spacer) * 0.8) calc(var(--spacer) * 1.5);
  font-size: 0.75rem;
  min-height: 36px;
}

@media (min-width: 768px) {
  .card-header .btn-text {
    padding: calc(var(--spacer)) calc(var(--spacer) * 2);
    font-size: 0.8rem;
    min-height: 40px;
  }
}

.milestones-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .milestones-list {
    gap: calc(var(--spacer) * 2);
  }
}

.milestone-item {
  padding: calc(var(--spacer) * 2);
  background: var(--bg);
  border-radius: 14px;
  transition: all 0.3s ease;
}

@media (min-width: 480px) {
  .milestone-item {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .milestone-item {
    border-radius: 16px;
    padding: calc(var(--spacer) * 3);
  }
}

.milestone-item.completed {
  opacity: 0.8;
  background: #e3f2e9;
}

.milestone-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer));
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .milestone-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.milestone-title {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.8);
  font-weight: 600;
  font-size: 0.85rem;
  word-break: break-word;
  flex: 1;
}

@media (min-width: 480px) {
  .milestone-title {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .milestone-title {
    font-size: 0.95rem;
    gap: calc(var(--spacer));
  }
}

@media (min-width: 1025px) {
  .milestone-title {
    font-size: 1rem;
  }
}

.milestone-title i {
  color: var(--accent);
  font-size: 0.9rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .milestone-title i {
    font-size: 1rem;
  }
}

.milestone-amount {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.9rem;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .milestone-amount {
    font-size: 0.95rem;
  }
}

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

.milestone-status {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  margin-bottom: calc(var(--spacer) * 1.5);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .milestone-status {
    gap: calc(var(--spacer) * 1.5);
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.customer-approved {
  color: #10b981;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 3px;
}

@media (min-width: 480px) {
  .customer-approved {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .customer-approved {
    font-size: 0.8rem;
    gap: 4px;
  }
}

.milestone-actions {
  margin-top: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .milestone-actions {
    margin-top: calc(var(--spacer) * 2);
  }
}

.milestone-status-select {
  width: 100%;
  padding: calc(var(--spacer) * 1.2);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: white;
  min-height: 44px;
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .milestone-status-select {
    padding: calc(var(--spacer) * 1.5);
    border-radius: 12px;
    font-size: 0.9rem;
    min-height: 48px;
  }
}

/* Updates */
.updates-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  max-height: 350px;
  overflow-y: auto;
  padding-right: calc(var(--spacer));
}

@media (min-width: 480px) {
  .updates-list {
    max-height: 380px;
  }
}

@media (min-width: 768px) {
  .updates-list {
    gap: calc(var(--spacer) * 2.5);
    margin-bottom: calc(var(--spacer) * 4);
    max-height: 400px;
  }
}

.update-item {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 14px;
}

@media (min-width: 480px) {
  .update-item {
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .update-item {
    border-radius: 16px;
    padding: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 2.5);
  }
}

.update-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.2rem;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .update-avatar {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .update-avatar {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
}

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

.update-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

@media (min-width: 480px) {
  .update-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.update-author {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.8rem;
}

@media (min-width: 480px) {
  .update-author {
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .update-author {
    font-size: 0.9rem;
  }
}

.update-time {
  font-size: 0.65rem;
  color: var(--text-soft);
}

@media (min-width: 480px) {
  .update-time {
    font-size: 0.7rem;
  }
}

@media (min-width: 768px) {
  .update-time {
    font-size: 0.75rem;
  }
}

.update-text {
  color: var(--text-dark);
  line-height: 1.5;
  margin-bottom: calc(var(--spacer));
  font-size: 0.8rem;
  word-break: break-word;
}

@media (min-width: 480px) {
  .update-text {
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .update-text {
    font-size: 0.9rem;
  }
}

.update-media img {
  max-width: 100%;
  max-height: 150px;
  border-radius: 10px;
  cursor: pointer;
  margin-top: calc(var(--spacer));
}

@media (min-width: 768px) {
  .update-media img {
    max-height: 200px;
    border-radius: 12px;
  }
}

/* Add Update Form */
.add-update-form {
  margin-top: calc(var(--spacer) * 2);
  padding-top: calc(var(--spacer) * 2);
  border-top: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .add-update-form {
    margin-top: calc(var(--spacer) * 2.5);
    padding-top: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1025px) {
  .add-update-form {
    margin-top: calc(var(--spacer) * 3);
    padding-top: calc(var(--spacer) * 3);
  }
}

.add-update-form textarea {
  width: 100%;
  padding: calc(var(--spacer) * 1.5);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  font-size: 0.85rem;
  resize: vertical;
  margin-bottom: calc(var(--spacer) * 1.5);
  min-height: 70px;
  font-family: var(--font-sans);
}

@media (min-width: 480px) {
  .add-update-form textarea {
    padding: calc(var(--spacer) * 2);
    min-height: 80px;
  }
}

@media (min-width: 768px) {
  .add-update-form textarea {
    border-radius: 16px;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.add-update-form .form-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
  align-items: stretch;
}

@media (min-width: 480px) {
  .add-update-form .form-actions {
    flex-direction: row;
    gap: calc(var(--spacer) * 1.5);
    align-items: center;
  }
}

@media (min-width: 768px) {
  .add-update-form .form-actions {
    gap: calc(var(--spacer) * 2);
  }
}

.add-update-form .form-actions .btn-icon {
  width: 44px;
  height: 44px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-soft);
}

.add-update-form .form-actions .btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.add-update-form .form-actions .btn-primary {
  flex: 1;
  margin: 0;
}

.file-name {
  margin-top: calc(var(--spacer));
  font-size: 0.75rem;
  color: var(--accent);
  word-break: break-all;
}

@media (min-width: 480px) {
  .file-name {
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .file-name {
    font-size: 0.85rem;
  }
}

/* Empty States */
.empty-orders {
  text-align: center;
  padding: calc(var(--spacer) * 5);
  background: var(--card-bg);
  border-radius: 18px;
}

@media (min-width: 480px) {
  .empty-orders {
    padding: calc(var(--spacer) * 6);
  }
}

@media (min-width: 768px) {
  .empty-orders {
    padding: calc(var(--spacer) * 8);
    border-radius: 20px;
  }
}

@media (min-width: 1025px) {
  .empty-orders {
    padding: calc(var(--spacer) * 10);
  }
}

.empty-illustration i {
  font-size: 3rem;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: calc(var(--spacer) * 2.5);
}

@media (min-width: 480px) {
  .empty-illustration i {
    font-size: 3.5rem;
  }
}

@media (min-width: 768px) {
  .empty-illustration i {
    font-size: 4rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .empty-illustration i {
    font-size: 5rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.empty-orders h3 {
  font-size: 1.2rem;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .empty-orders h3 {
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .empty-orders h3 {
    font-size: 1.4rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 1025px) {
  .empty-orders h3 {
    font-size: 1.5rem;
  }
}

.empty-orders p {
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 2.5);
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .empty-orders p {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .empty-orders p {
    font-size: 0.95rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .empty-orders p {
    font-size: 1rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.empty-message {
  text-align: center;
  color: var(--text-soft);
  padding: calc(var(--spacer) * 3);
  background: var(--bg);
  border-radius: 12px;
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .empty-message {
    padding: calc(var(--spacer) * 3.5);
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .empty-message {
    padding: calc(var(--spacer) * 4);
    border-radius: 14px;
    font-size: 0.95rem;
  }
}

/* Touch-friendly targets for mobile */
@media (max-width: 767px) {
  .btn-primary,
  .btn-outline,
  .btn-text,
  .btn-icon,
  .filter-tab,
  .tab-btn,
  .order-card,
  .booking-card,
  .milestone-item,
  .update-item,
  .filter-select,
  .orders-search-box input,
  .add-update-form textarea,
  .milestone-status-select {
    min-height: 48px;
  }

  .btn-icon {
    min-width: 48px;
  }

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

/* Smooth scrolling for lists */
.updates-list,
.transactions-list,
.milestones-list,
.notifications-list {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar for webkit browsers */
.updates-list::-webkit-scrollbar,
.transactions-list::-webkit-scrollbar,
.milestones-list::-webkit-scrollbar,
.notifications-list::-webkit-scrollbar {
  width: 4px;
}

.updates-list::-webkit-scrollbar-track,
.transactions-list::-webkit-scrollbar-track,
.milestones-list::-webkit-scrollbar-track,
.notifications-list::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 4px;
}

.updates-list::-webkit-scrollbar-thumb,
.transactions-list::-webkit-scrollbar-thumb,
.milestones-list::-webkit-scrollbar-thumb,
.notifications-list::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.updates-list::-webkit-scrollbar-thumb:hover,
.transactions-list::-webkit-scrollbar-thumb:hover,
.milestones-list::-webkit-scrollbar-thumb:hover,
.notifications-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

/* Print styles */
@media print {
  .dashboard-sidebar,
  .dashboard-header,
  .mobile-bottom-nav,
  .detail-header .btn-icon,
  .header-actions,
  .filter-section,
  .quick-actions,
  .action-btn,
  .btn-primary,
  .btn-outline,
  .btn-text,
  .btn-icon {
    display: none !important;
  }

  .dashboard-main {
    margin-left: 0 !important;
    padding: 20px !important;
  }

  .order-detail-view,
  .quote-details-card {
    max-width: 100% !important;
    padding: 0 !important;
    box-shadow: none;
    border: 1px solid #ddd;
  }

  .milestones-card,
  .updates-card {
    page-break-inside: avoid;
  }

  body * {
    visibility: hidden;
  }

  .order-detail-view,
  .order-detail-view *,
  .quote-details-card,
  .quote-details-card * {
    visibility: visible;
  }

  .order-detail-view,
  .quote-details-card {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}
/* ========================================================================
   ORDERS & WORKFLOW - FULLY RESPONSIVE TEXT FIXES
   ======================================================================== */

.orders-dashboard {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .orders-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

/* Orders Header */
.orders-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
}

@media (min-width: 640px) {
  .orders-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
  }
}

.orders-header .page-title {
  font-size: 1.3rem;
  margin: 0;
  line-height: 1.3;
  word-break: break-word;
}

@media (min-width: 768px) {
  .orders-header .page-title {
    font-size: 1.6rem;
  }
}

.orders-header .page-subtitle {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin-top: calc(var(--spacer) * 0.5);
  word-break: break-word;
}

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

/* Orders Actions */
.orders-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
}

@media (min-width: 640px) {
  .orders-actions {
    flex-direction: row;
    width: auto;
    gap: calc(var(--spacer) * 2);
  }
}

.orders-actions .btn-outline,
.orders-actions .btn-primary {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  min-height: 48px;
  border-radius: 40px;
  font-size: 0.9rem;
  white-space: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 1.2);
  width: 100%;
  margin: 0;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
  text-align: center;
  word-break: break-word;
}

@media (min-width: 640px) {
  .orders-actions .btn-outline,
  .orders-actions .btn-primary {
    width: auto;
    min-width: 140px;
    white-space: nowrap;
  }
}

/* ========================================================================
   ORDER CARDS - TEXT FIXES
   ======================================================================== */

.order-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2.5);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  width: 100%;
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .order-card {
    padding: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

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

/* Order Card Header */
.order-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .order-card-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 2);
  }
}

.order-badges {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.2);
  flex-wrap: wrap;
  width: 100%;
}

@media (min-width: 480px) {
  .order-badges {
    width: auto;
  }
}

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

@media (min-width: 768px) {
  .order-id {
    font-size: 0.85rem;
    padding: 4px 12px;
  }
}

.order-date {
  color: var(--text-soft);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .order-date {
    font-size: 0.8rem;
  }
}

/* Order Card Body */
.order-card-body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 640px) {
  .order-card-body {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
  }
}

/* Customer Info */
.customer-info {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  min-width: 0;
  flex: 1;
}

.customer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.5rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .customer-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.8rem;
  }
}

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

.customer-details h4 {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .customer-details h4 {
    font-size: 1rem;
  }
}

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

@media (min-width: 768px) {
  .service-title {
    font-size: 0.85rem;
  }
}

/* Order Meta */
.order-meta {
  display: flex;
  gap: calc(var(--spacer) * 2);
  flex-wrap: wrap;
  min-width: 0;
}

@media (min-width: 640px) {
  .order-meta {
    justify-content: flex-end;
  }
}

.meta-item {
  text-align: left;
  min-width: 0;
}

@media (min-width: 640px) {
  .meta-item {
    text-align: right;
  }
}

.meta-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-soft);
  margin-bottom: 2px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .meta-label {
    font-size: 0.7rem;
  }
}

.meta-value {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

@media (min-width: 480px) {
  .meta-value {
    max-width: 150px;
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .meta-value {
    max-width: 200px;
    font-size: 0.95rem;
  }
}

.meta-value.has-amount {
  color: var(--accent);
}

.meta-value.tbd {
  color: var(--text-soft);
  font-style: italic;
}

/* ========================================================================
   ORDER CARD FOOTER - VIEW DETAILS BUTTON (CRITICAL FIX)
   ======================================================================== */

.order-card-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  padding-top: calc(var(--spacer) * 2);
  border-top: 1px solid var(--border-light);
}

@media (min-width: 640px) {
  .order-card-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
  }
}

/* Progress Indicator - Hidden on mobile */
.progress-indicator {
  display: none;
}

@media (min-width: 768px) {
  .progress-indicator {
    display: flex;
    align-items: center;
    gap: calc(var(--spacer) * 2);
    flex-wrap: wrap;
  }
}

/* View Details Button - FULL TEXT ALWAYS VISIBLE */
.order-card-footer .btn-text {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.9rem;
  cursor: pointer;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  border-radius: 30px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.8);
  min-height: 44px;
  width: 100%;
  font-weight: 600;
  text-decoration: none;
  white-space: normal;
  word-break: keep-all;
  text-align: center;
  line-height: 1.3;
  background: var(--bg);
  border: 1px solid var(--border-light);
}

@media (min-width: 480px) {
  .order-card-footer .btn-text {
    width: auto;
    min-width: 140px;
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2.5);
    font-size: 0.95rem;
  }
}

@media (min-width: 640px) {
  .order-card-footer .btn-text {
    width: auto;
    min-width: 130px;
  }
}

@media (min-width: 768px) {
  .order-card-footer .btn-text {
    min-width: 140px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3);
    font-size: 1rem;
    background: transparent;
    border: none;
  }
}

.order-card-footer .btn-text i {
  font-size: 0.8rem;
  transition: transform 0.2s;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .order-card-footer .btn-text i {
    font-size: 0.85rem;
  }
}

.order-card-footer .btn-text span {
  display: inline-block;
  white-space: normal;
  word-break: keep-all;
}

.order-card-footer .btn-text:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.order-card-footer .btn-text:hover i {
  color: white;
  transform: translateX(4px);
}

/* ========================================================================
   VERY SMALL MOBILE - BUTTON FIXES
   ======================================================================== */

@media (max-width: 380px) {
  .order-card-footer .btn-text {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 1.2);
    font-size: 0.9rem;
    min-height: 48px;
    width: 100%;
  }

  .order-card-footer .btn-text i {
    font-size: 0.9rem;
  }

  .order-card-footer .btn-text span {
    font-size: 0.9rem;
  }
}

/* Extremely small screens */
@media (max-width: 320px) {
  .order-card-footer .btn-text {
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 1);
    font-size: 0.95rem;
    min-height: 52px;
    flex-direction: row;
    gap: calc(var(--spacer));
  }

  .order-card-footer .btn-text i {
    font-size: 1rem;
  }

  .order-card-footer .btn-text span {
    font-size: 0.95rem;
  }
}

/* ========================================================================
   EMPTY STATES AND LOADING
   ======================================================================== */

.empty-orders {
  text-align: center;
  padding: calc(var(--spacer) * 6);
  background: var(--card-bg);
  border-radius: 20px;
  width: 100%;
}

.empty-illustration i {
  font-size: 3.5rem;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: calc(var(--spacer) * 3);
}

.empty-orders h3 {
  font-size: 1.2rem;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.5);
  word-break: break-word;
}

.empty-orders p {
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 3);
  font-size: 0.9rem;
  word-break: break-word;
}

/* ========================================================================
   ORDER DETAIL VIEW
   ======================================================================== */

.order-detail-view {
  width: 100%;
  padding: calc(var(--spacer) * 2);
}

.detail-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 640px) {
  .detail-header {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacer) * 3);
  }
}

.detail-header h1 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-dark);
  word-break: break-word;
  flex: 1;
}

@media (min-width: 768px) {
  .detail-header h1 {
    font-size: 1.5rem;
  }
}

.header-actions {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .header-actions {
    width: auto;
    gap: calc(var(--spacer) * 2);
  }
}

.header-actions .btn-outline,
.header-actions .btn-primary {
  flex: 1;
  min-width: 120px;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  font-size: 0.85rem;
  white-space: normal;
  word-break: keep-all;
  text-align: center;
}

@media (min-width: 480px) {
  .header-actions .btn-outline,
  .header-actions .btn-primary {
    flex: 0 1 auto;
    min-width: 130px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
    font-size: 0.9rem;
  }
}

/* Status Bar */
.status-bar {
  background: var(--card-bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2.5);
  margin-bottom: calc(var(--spacer) * 4);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .status-bar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
    padding: calc(var(--spacer) * 3);
  }
}

.status-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-label {
  font-size: 0.75rem;
  color: var(--text-soft);
  word-break: break-word;
}

@media (min-width: 768px) {
  .status-label {
    font-size: 0.8rem;
  }
}

.status-value {
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  word-break: break-word;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .status-value {
    font-size: 1.2rem;
  }
}

/* ========================================================================
   ORDER DETAIL GRID
   ======================================================================== */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .detail-grid {
    gap: calc(var(--spacer) * 4);
  }
}

/* Info Card */
.info-card,
.milestones-card,
.updates-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  margin-bottom: calc(var(--spacer) * 2);
  width: 100%;
}

@media (min-width: 768px) {
  .info-card,
  .milestones-card,
  .updates-card {
    padding: calc(var(--spacer) * 2.5);
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1025px) {
  .info-card,
  .milestones-card,
  .updates-card {
    padding: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.info-card h3,
.milestones-card h3,
.updates-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: calc(var(--spacer) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  color: var(--text-dark);
  word-break: break-word;
}

@media (min-width: 768px) {
  .info-card h3,
  .milestones-card h3,
  .updates-card h3 {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

/* Info Rows */
.info-rows {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

.info-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: calc(var(--spacer) * 1.2) 0;
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 480px) {
  .info-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 2);
  }
}

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

.info-label {
  color: var(--text-soft);
  font-size: 0.8rem;
  word-break: break-word;
}

@media (min-width: 768px) {
  .info-label {
    font-size: 0.85rem;
  }
}

.info-value {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.85rem;
  word-break: break-word;
}

@media (min-width: 768px) {
  .info-value {
    font-size: 0.9rem;
  }
}

/* ========================================================================
   TOUCH TARGETS
   ======================================================================== */

.order-card-footer .btn-text,
.header-actions .btn-outline,
.header-actions .btn-primary,
.milestone-actions .btn-primary,
.milestone-actions select,
.add-update-form .btn-primary {
  min-height: 48px;
}

@media (max-width: 480px) {
  .order-card-footer .btn-text,
  .header-actions .btn-outline,
  .header-actions .btn-primary {
    min-height: 52px;
  }
}

/* ========================================================================
   TEXT WRAPPING UTILITIES
   ======================================================================== */

.text-wrap {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

.no-wrap {
  white-space: nowrap !important;
}

/* Ensure all text elements can wrap */
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
div,
button,
a,
label {
  word-break: break-word;
  overflow-wrap: break-word;
}
/* ========================================================================
   ORDERS & WORKFLOW - FULLY RESPONSIVE (FIXED FOR MOBILE)
   ======================================================================== */

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

.orders-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .orders-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.orders-header .page-title {
  font-size: 1.3rem;
  margin: 0;
  line-height: 1.2;
  word-break: break-word;
}

@media (min-width: 768px) {
  .orders-header .page-title {
    font-size: 1.6rem;
  }
}

.orders-header .page-subtitle {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin-top: calc(var(--spacer) * 0.5);
  word-break: break-word;
}

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

/* Orders Actions (Export and New Order buttons) */
.orders-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
}

@media (min-width: 640px) {
  .orders-actions {
    flex-direction: row;
    width: auto;
    gap: calc(var(--spacer) * 2);
  }
}

.orders-actions .btn-outline,
.orders-actions .btn-primary {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  min-height: 48px;
  border-radius: 40px;
  font-size: 0.9rem;
  white-space: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 1.2);
  width: 100%;
  margin: 0;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
  text-align: center;
  word-break: break-word;
  box-sizing: border-box;
}

.orders-actions .btn-outline {
  background: var(--bg);
  border: 1.5px solid var(--border-light);
  color: var(--text-dark);
}

.orders-actions .btn-primary {
  background: var(--text-dark);
  border: 1.5px solid var(--text-dark);
  color: white;
}

.orders-actions .btn-outline i,
.orders-actions .btn-primary i {
  font-size: 1rem;
  flex-shrink: 0;
}

.orders-actions .btn-outline span,
.orders-actions .btn-primary span {
  display: inline-block;
  white-space: normal;
  word-break: break-word;
  text-align: center;
}

/* ========================================================================
   ORDER STATS GRID
   ======================================================================== */

.order-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
}

@media (min-width: 480px) {
  .order-stats-grid {
    gap: calc(var(--spacer) * 2.5);
    margin-bottom: calc(var(--spacer) * 4.5);
  }
}

@media (min-width: 640px) {
  .order-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.stat-card.compact {
  background: var(--card-bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  cursor: pointer;
  min-width: 0;
}

@media (min-width: 480px) {
  .stat-card.compact {
    padding: calc(var(--spacer) * 2.2);
    gap: calc(var(--spacer) * 1.8);
  }
}

@media (min-width: 640px) {
  .stat-card.compact {
    padding: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 2);
    border-radius: 18px;
  }
}

@media (min-width: 768px) {
  .stat-card.compact {
    padding: calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 2.5);
    border-radius: 20px;
  }
}

.stat-card.compact:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .stat-icon {
    width: 42px;
    height: 42px;
    font-size: 1.3rem;
  }
}

@media (min-width: 640px) {
  .stat-icon {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }
}

@media (min-width: 768px) {
  .stat-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
}

.stat-icon.pending {
  background: #fef3e2;
  color: #b45309;
}

.stat-icon.active {
  background: #e1f0fa;
  color: #1e4a6b;
}

.stat-icon.completed {
  background: #e3f2e9;
  color: #2f6e4a;
}

.stat-icon.total {
  background: #f2ebe3;
  color: var(--accent);
}

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

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

@media (min-width: 480px) {
  .stat-content .stat-value {
    font-size: 1.3rem;
  }
}

@media (min-width: 640px) {
  .stat-content .stat-value {
    font-size: 1.4rem;
  }
}

@media (min-width: 768px) {
  .stat-content .stat-value {
    font-size: 1.6rem;
  }
}

.stat-content .stat-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  white-space: normal;
  line-height: 1.3;
  word-break: break-word;
}

@media (min-width: 480px) {
  .stat-content .stat-label {
    font-size: 0.75rem;
  }
}

@media (min-width: 640px) {
  .stat-content .stat-label {
    font-size: 0.8rem;
  }
}

/* ========================================================================
   FILTERS SECTION
   ======================================================================== */

.filters-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
  background: var(--card-bg);
  padding: calc(var(--spacer) * 2);
  border-radius: 16px;
  box-shadow: var(--shadow);
  width: 100%;
  overflow: hidden;
}

@media (min-width: 480px) {
  .filters-section {
    padding: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 2.2);
  }
}

@media (min-width: 640px) {
  .filters-section {
    flex-direction: row;
    align-items: center;
    padding: calc(var(--spacer) * 2.5) calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 3);
    border-radius: 18px;
  }
}

@media (min-width: 1025px) {
  .filters-section {
    padding: calc(var(--spacer) * 3) calc(var(--spacer) * 4);
    border-radius: 20px;
  }
}

/* Orders Search Box */
.orders-search-box {
  flex: 1;
  min-width: 0;
  width: 100%;
  position: relative;
}

@media (min-width: 640px) {
  .orders-search-box {
    min-width: 200px;
    width: auto;
  }
}

@media (min-width: 768px) {
  .orders-search-box {
    min-width: 250px;
  }
}

.orders-search-box input {
  width: 100%;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2)
    calc(var(--spacer) * 1.5) calc(var(--spacer) * 4);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.85rem;
  background: var(--bg);
  transition: all 0.2s;
  min-height: 44px;
  line-height: 1.5;
  color: var(--text-dark);
  box-sizing: border-box;
}

@media (min-width: 480px) {
  .orders-search-box input {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.2)
      calc(var(--spacer) * 1.5) calc(var(--spacer) * 4.5);
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .orders-search-box input {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2.5)
      calc(var(--spacer) * 2) calc(var(--spacer) * 5);
    font-size: 0.95rem;
    min-height: 48px;
  }
}

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

.orders-search-box input::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .orders-search-box input::placeholder {
    font-size: 0.85rem;
  }
}

/* Filter Group */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
}

@media (min-width: 480px) {
  .filter-group {
    gap: calc(var(--spacer) * 1.8);
  }
}

@media (min-width: 640px) {
  .filter-group {
    flex-direction: row;
    align-items: center;
    width: auto;
    gap: calc(var(--spacer) * 2);
  }
}

/* Filter Select */
.filter-select {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3)
    calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  background: var(--bg);
  width: 100%;
  min-height: 44px;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
  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 calc(var(--spacer) * 2) center;
  background-size: 14px;
  padding-right: calc(var(--spacer) * 5);
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media (min-width: 480px) {
  .filter-select {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3.5)
      calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.8);
    font-size: 0.9rem;
    background-size: 15px;
  }
}

@media (min-width: 640px) {
  .filter-select {
    width: auto;
    min-width: 140px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3)
      calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .filter-select {
    min-width: 160px;
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3.5)
      calc(var(--spacer) * 2) calc(var(--spacer) * 3);
    font-size: 0.95rem;
    min-height: 48px;
    background-size: 16px;
    background-position: right calc(var(--spacer) * 2.5) center;
    padding-right: calc(var(--spacer) * 6);
  }
}

.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 Button */
.filter-group .btn-outline {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  white-space: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer));
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  margin: 0;
  text-align: center;
  word-break: break-word;
  line-height: 1.4;
}

@media (min-width: 480px) {
  .filter-group .btn-outline {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.9rem;
  }
}

@media (min-width: 640px) {
  .filter-group .btn-outline {
    width: auto;
    min-width: 100px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .filter-group .btn-outline {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2.5);
    min-height: 48px;
    font-size: 0.95rem;
  }
}

.filter-group .btn-outline i {
  font-size: 0.8rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .filter-group .btn-outline i {
    font-size: 0.9rem;
  }
}

.filter-group .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.filter-group .btn-outline:hover i {
  color: white;
}

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

.orders-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  width: 100%;
}

/* Order Card */
.order-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  width: 100%;
  min-width: 0;
}

@media (min-width: 480px) {
  .order-card {
    padding: calc(var(--spacer) * 2.2);
    border-radius: 19px;
  }
}

@media (min-width: 640px) {
  .order-card {
    padding: calc(var(--spacer) * 2.5);
    border-radius: 20px;
  }
}

@media (min-width: 768px) {
  .order-card {
    padding: calc(var(--spacer) * 3);
  }
}

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

.order-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.2);
  margin-bottom: calc(var(--spacer) * 2);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .order-card-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 1.5);
  }
}

.order-badges {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  flex-wrap: wrap;
  width: 100%;
}

@media (min-width: 480px) {
  .order-badges {
    width: auto;
  }
}

.order-id {
  font-family: monospace;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

@media (min-width: 480px) {
  .order-id {
    font-size: 0.85rem;
    max-width: 150px;
  }
}

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

@media (min-width: 480px) {
  .status-badge {
    padding: 4px 12px;
    font-size: 0.75rem;
  }
}

.order-date {
  color: var(--text-soft);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .order-date {
    font-size: 0.8rem;
  }
}

.order-card-body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .order-card-body {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 2.5);
  }
}

.customer-info {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  min-width: 0;
  flex: 1;
}

.customer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.5rem;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .customer-avatar {
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
  }
}

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

.customer-details h4 {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .customer-details h4 {
    font-size: 0.95rem;
  }
}

@media (min-width: 768px) {
  .customer-details h4 {
    font-size: 1rem;
  }
}

.service-title {
  color: var(--text-soft);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .service-title {
    font-size: 0.8rem;
  }
}

.order-meta {
  display: flex;
  gap: calc(var(--spacer) * 2);
  flex-wrap: wrap;
  min-width: 0;
}

.meta-item {
  min-width: 0;
}

.meta-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-soft);
  margin-bottom: 2px;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .meta-label {
    font-size: 0.7rem;
  }
}

.meta-value {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

@media (min-width: 480px) {
  .meta-value {
    font-size: 0.85rem;
    max-width: 120px;
  }
}

.meta-value.has-amount {
  color: var(--accent);
}

.meta-value.tbd {
  color: var(--text-soft);
  font-style: italic;
}

.order-card-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  padding-top: calc(var(--spacer) * 1.5);
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .order-card-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 2);
  }
}

/* Progress Indicator */
.progress-indicator {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  flex-wrap: wrap;
  width: 100%;
}

@media (min-width: 480px) {
  .progress-indicator {
    width: auto;
    gap: calc(var(--spacer) * 1.5);
  }
}

.step {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
  font-size: 0.7rem;
}

@media (min-width: 480px) {
  .step {
    font-size: 0.75rem;
    gap: 4px;
  }
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 20px;
  width: 20px;
  height: 2px;
  background: var(--border-light);
}

@media (min-width: 480px) {
  .step:not(:last-child)::after {
    width: 25px;
    left: 22px;
  }
}

@media (min-width: 640px) {
  .step:not(:last-child)::after {
    width: 30px;
  }
}

.step.active .step-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.step.current .step-dot {
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.2);
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border-light);
  transition: all 0.3s ease;
}

@media (min-width: 480px) {
  .step-dot {
    width: 10px;
    height: 10px;
  }
}

@media (min-width: 768px) {
  .step-dot {
    width: 12px;
    height: 12px;
  }
}

.step-label {
  font-size: 0.6rem;
  color: var(--text-soft);
  white-space: nowrap;
}

@media (min-width: 480px) {
  .step-label {
    font-size: 0.65rem;
  }
}

@media (min-width: 640px) {
  .step-label {
    font-size: 0.7rem;
  }
}

/* View Details Button */
.order-card-footer .btn-text {
  font-size: 0.8rem;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  min-height: 40px;
  width: 100%;
  justify-content: center;
}

@media (min-width: 480px) {
  .order-card-footer .btn-text {
    width: auto;
    font-size: 0.85rem;
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  }
}

.order-card-footer .btn-text i {
  font-size: 0.7rem;
}

/* ========================================================================
   EMPTY ORDERS STATE
   ======================================================================== */

.empty-orders {
  text-align: center;
  padding: calc(var(--spacer) * 5);
  background: var(--card-bg);
  border-radius: 20px;
  width: 100%;
}

@media (min-width: 480px) {
  .empty-orders {
    padding: calc(var(--spacer) * 6);
    border-radius: 22px;
  }
}

@media (min-width: 768px) {
  .empty-orders {
    padding: calc(var(--spacer) * 8);
    border-radius: 24px;
  }
}

.empty-illustration i {
  font-size: 3rem;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .empty-illustration i {
    font-size: 3.5rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .empty-illustration i {
    font-size: 4rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.empty-orders h3 {
  font-size: 1.2rem;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .empty-orders h3 {
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .empty-orders h3 {
    font-size: 1.5rem;
  }
}

.empty-orders p {
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 2);
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .empty-orders p {
    font-size: 1rem;
  }
}

.empty-orders .btn-primary {
  display: inline-flex;
  width: auto;
  min-width: 180px;
}

/* ========================================================================
   VERY SMALL MOBILE FIXES
   ======================================================================== */

@media (max-width: 380px) {
  .order-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .order-badges {
    width: 100%;
    justify-content: space-between;
  }

  .order-id {
    max-width: 100px;
    font-size: 0.75rem;
  }

  .status-badge {
    font-size: 0.65rem;
    padding: 3px 8px;
  }

  .customer-info {
    width: 100%;
  }

  .customer-avatar {
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
  }

  .customer-details h4 {
    font-size: 0.85rem;
  }

  .service-title {
    font-size: 0.7rem;
  }

  .order-meta {
    width: 100%;
    justify-content: space-between;
  }

  .meta-item {
    flex: 1;
  }

  .meta-value {
    max-width: 80px;
    font-size: 0.75rem;
  }

  .progress-indicator {
    width: 100%;
    justify-content: space-between;
  }

  .step:not(:last-child)::after {
    width: 15px;
    left: 18px;
  }

  .step-label {
    font-size: 0.55rem;
  }
}

/* ========================================================================
   TOUCH TARGETS
   ======================================================================== */

.order-card,
.filter-select,
.orders-search-box input,
.filter-group .btn-outline,
.order-card-footer .btn-text {
  min-height: 44px;
}

/* ========================================================================
   ANIMATIONS
   ======================================================================== */

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

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

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

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(183, 140, 90, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(183, 140, 90, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(183, 140, 90, 0);
  }
}

/* ========================================================================
   SECTION 14: WORKFLOW UPDATES REDESIGN - FULLY RESPONSIVE
   ======================================================================== */

.workflow-update-item {
  display: flex;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  position: relative;
  animation: slideIn 0.3s ease;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .workflow-update-item {
    gap: calc(var(--spacer) * 2.5);
    margin-bottom: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .workflow-update-item {
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

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

@media (min-width: 768px) {
  @keyframes slideIn {
    from {
      transform: translateX(-20px);
    }
  }
}

/* Timeline */
.update-timeline {
  position: relative;
  width: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .update-timeline {
    width: 36px;
  }
}

@media (min-width: 768px) {
  .update-timeline {
    width: 40px;
  }
}

.timeline-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
  transition: all 0.3s ease;
}

@media (min-width: 480px) {
  .timeline-dot {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  }
}

@media (min-width: 768px) {
  .timeline-dot {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
}

.workflow-update-item:hover .timeline-dot {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
  .workflow-update-item:hover .timeline-dot {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  }
}

.timeline-line {
  position: absolute;
  top: 32px;
  bottom: -15px;
  width: 2px;
  background: linear-gradient(to bottom, var(--border-light), transparent);
  z-index: 1;
}

@media (min-width: 480px) {
  .timeline-line {
    top: 36px;
    bottom: -18px;
  }
}

@media (min-width: 768px) {
  .timeline-line {
    top: 40px;
    bottom: -20px;
  }
}

.workflow-update-item:last-child .timeline-line {
  display: none;
}

/* Update Card */
.update-card {
  flex: 1;
  background: var(--card-bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-width: 200px;
}

@media (min-width: 480px) {
  .update-card {
    border-radius: 18px;
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .update-card {
    border-radius: 20px;
    padding: calc(var(--spacer) * 3);
  }
}

.update-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--accent), var(--accent-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (min-width: 768px) {
  .update-card::before {
    width: 4px;
  }
}

.workflow-update-item:hover .update-card {
  transform: translateX(2px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .workflow-update-item:hover .update-card {
    transform: translateX(4px);
  }
}

.workflow-update-item:hover .update-card::before {
  opacity: 1;
}

/* Update Card Header */
.update-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .update-card-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .update-card-header {
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.update-author-info {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
}

@media (min-width: 480px) {
  .update-author-info {
    width: auto;
  }
}

.author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  box-shadow: 0 2px 6px rgba(183, 140, 90, 0.3);
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .author-avatar {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .author-avatar {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    box-shadow: 0 2px 8px rgba(183, 140, 90, 0.3);
  }
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

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

@media (min-width: 480px) {
  .author-name {
    font-size: 0.9rem;
  }
}

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

.update-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  width: fit-content;
}

@media (min-width: 480px) {
  .update-badge {
    padding: 3px 10px;
    font-size: 0.65rem;
    gap: 4px;
  }
}

@media (min-width: 768px) {
  .update-badge {
    padding: 4px 10px;
    font-size: 0.7rem;
  }
}

.update-badge.milestone {
  background: #fef3e2;
  color: #b45309;
}

.update-badge.approval {
  background: #e3f2e9;
  color: #2f6e4a;
}

.update-badge.completion {
  background: #d1fae5;
  color: #065f46;
}

.update-badge.attachment {
  background: #e6e9f0;
  color: #4b5563;
}

.update-badge.general {
  background: #e1f0fa;
  color: #1e4a6b;
}

.update-time {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-soft);
  font-size: 0.7rem;
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 30px;
  white-space: nowrap;
  align-self: flex-end;
}

@media (min-width: 480px) {
  .update-time {
    font-size: 0.75rem;
    padding: 5px 12px;
  }
}

@media (min-width: 768px) {
  .update-time {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
}

@media (min-width: 1025px) {
  .update-time {
    font-size: 0.85rem;
  }
}

.update-time i {
  font-size: 0.7rem;
}

@media (min-width: 768px) {
  .update-time i {
    font-size: 0.8rem;
  }
}

/* Update Card Body */
.update-card-body {
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .update-card-body {
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.update-message {
  color: var(--text-dark);
  line-height: 1.5;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (min-width: 480px) {
  .update-message {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .update-message {
    font-size: 0.95rem;
  }
}

.update-message .mention {
  background: #f2ebe3;
  color: var(--accent);
  padding: 2px 4px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .update-message .mention {
    padding: 2px 6px;
    font-size: 0.85rem;
  }
}

.update-message .update-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
}

.update-message .update-link:hover {
  border-bottom-style: solid;
}

.update-message strong {
  color: var(--text-dark);
  font-weight: 600;
}

/* Update Media Grid */
.update-media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 1.5);
  margin-top: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .update-media-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .update-media-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: calc(var(--spacer) * 2);
  }
}

.media-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16/9;
  background: var(--bg);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .media-item {
    border-radius: 14px;
  }
}

@media (min-width: 1025px) {
  .media-item {
    border-radius: 16px;
  }
}

.media-item:hover {
  border-color: var(--accent);
  transform: scale(1.01);
}

@media (min-width: 768px) {
  .media-item:hover {
    transform: scale(1.02);
  }
}

.media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.media-item:hover img {
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .media-item:hover img {
    transform: scale(1.1);
  }
}

.media-item.main {
  grid-column: auto;
}

@media (min-width: 480px) {
  .media-item.main {
    grid-column: span 2;
  }
}

.media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}

.media-item:hover .media-overlay {
  opacity: 1;
}

.media-overlay i {
  color: white;
  font-size: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
  .media-overlay i {
    font-size: 2rem;
  }
}

/* Update Attachment */
.update-attachment {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 14px;
  margin-top: calc(var(--spacer) * 1.5);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

@media (min-width: 480px) {
  .update-attachment {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .update-attachment {
    border-radius: 16px;
    padding: calc(var(--spacer) * 2);
    gap: calc(var(--spacer) * 2);
  }
}

.update-attachment:hover {
  border-color: var(--accent);
  background: var(--card-bg);
}

.update-attachment i {
  font-size: 1.5rem;
  color: var(--accent);
}

@media (min-width: 480px) {
  .update-attachment i {
    font-size: 1.8rem;
  }
}

@media (min-width: 768px) {
  .update-attachment i {
    font-size: 2rem;
  }
}

.attachment-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  width: 100%;
}

@media (min-width: 480px) {
  .attachment-info {
    min-width: 150px;
    width: auto;
  }
}

.attachment-name {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.8rem;
  word-break: break-all;
}

@media (min-width: 480px) {
  .attachment-name {
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .attachment-name {
    font-size: 0.9rem;
  }
}

.attachment-size {
  font-size: 0.65rem;
  color: var(--text-soft);
}

@media (min-width: 480px) {
  .attachment-size {
    font-size: 0.7rem;
  }
}

@media (min-width: 768px) {
  .attachment-size {
    font-size: 0.75rem;
  }
}

/* Update Card Footer */
.update-card-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  padding-top: calc(var(--spacer) * 1.5);
  border-top: 1px solid var(--border-light);
  margin-top: calc(var(--spacer) * 0.5);
}

@media (min-width: 480px) {
  .update-card-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .update-card-footer {
    padding-top: calc(var(--spacer) * 2);
    margin-top: calc(var(--spacer));
  }
}

.update-reactions {
  display: flex;
  gap: calc(var(--spacer));
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .update-reactions {
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 1025px) {
  .update-reactions {
    gap: calc(var(--spacer) * 2);
  }
}

.reaction-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 30px;
  color: var(--text-soft);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 36px;
}

@media (min-width: 480px) {
  .reaction-btn {
    gap: 5px;
    padding: 5px 12px;
    font-size: 0.8rem;
    min-height: 40px;
  }
}

@media (min-width: 768px) {
  .reaction-btn {
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    min-height: 44px;
  }
}

.reaction-btn:hover {
  background: var(--card-bg);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.reaction-btn i {
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .reaction-btn i {
    font-size: 0.9rem;
  }
}

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

/* Animation for new updates */
.update-card.new {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(183, 140, 90, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(183, 140, 90, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(183, 140, 90, 0);
  }
}

@media (min-width: 768px) {
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(183, 140, 90, 0.4);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(183, 140, 90, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(183, 140, 90, 0);
    }
  }
}

/* ========================================================================
   SECTION 15: QUOTE DETAILS CARD - FULLY RESPONSIVE
   ======================================================================== */

.quote-details-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2.5);
  box-shadow: var(--shadow);
  margin-bottom: calc(var(--spacer) * 3);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

@media (min-width: 480px) {
  .quote-details-card {
    border-radius: 20px;
    padding: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .quote-details-card {
    border-radius: 22px;
    padding: calc(var(--spacer) * 3.5);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .quote-details-card {
    border-radius: 24px;
    padding: calc(var(--spacer) * 4);
  }
}

.quote-details-card:hover {
  box-shadow: var(--shadow-hover);
}

/* Quote Header */
.quote-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 2.5);
}

@media (min-width: 480px) {
  .quote-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .quote-header {
    margin-bottom: calc(var(--spacer) * 3.5);
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 1025px) {
  .quote-header {
    margin-bottom: calc(var(--spacer) * 4);
    gap: calc(var(--spacer) * 2);
  }
}

.quote-title-section {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .quote-title-section {
    gap: calc(var(--spacer) * 2);
  }
}

.quote-title-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
}

@media (min-width: 480px) {
  .quote-title-section h3 {
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  .quote-title-section h3 {
    font-size: 1.2rem;
    gap: calc(var(--spacer));
  }
}

.quote-title-section h3 i {
  color: var(--accent);
  font-size: 1rem;
}

@media (min-width: 768px) {
  .quote-title-section h3 i {
    font-size: 1.1rem;
  }
}

.quote-status {
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.3px;
}

@media (min-width: 480px) {
  .quote-status {
    padding: 5px 12px;
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .quote-status {
    padding: 6px 14px;
    font-size: 0.8rem;
    gap: 6px;
  }
}

@media (min-width: 1025px) {
  .quote-status {
    font-size: 0.85rem;
  }
}

.quote-actions {
  display: flex;
  gap: calc(var(--spacer));
  width: 100%;
}

@media (min-width: 480px) {
  .quote-actions {
    width: auto;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .quote-actions {
    gap: calc(var(--spacer));
  }
}

.quote-actions .btn-outline {
  flex: 1;
  min-width: 80px;
}

@media (min-width: 480px) {
  .quote-actions .btn-outline {
    flex: 0 1 auto;
  }
}

/* Quote Meta */
.quote-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  padding: calc(var(--spacer) * 2);
  background: var(--bg);
  border-radius: 14px;
  margin-bottom: calc(var(--spacer) * 2.5);
}

@media (min-width: 480px) {
  .quote-meta {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .quote-meta {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: calc(var(--spacer) * 3);
    padding: calc(var(--spacer) * 3);
    border-radius: 16px;
    margin-bottom: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 1025px) {
  .quote-meta {
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.quote-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (min-width: 768px) {
  .quote-meta-item {
    gap: 4px;
  }
}

.quote-meta-item .meta-label {
  font-size: 0.65rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (min-width: 480px) {
  .quote-meta-item .meta-label {
    font-size: 0.7rem;
  }
}

@media (min-width: 768px) {
  .quote-meta-item .meta-label {
    font-size: 0.75rem;
  }
}

.quote-meta-item .meta-value {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dark);
  word-break: break-word;
}

@media (min-width: 480px) {
  .quote-meta-item .meta-value {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .quote-meta-item .meta-value {
    font-size: 1rem;
  }
}

.meta-value.payment-plan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--card-bg);
  padding: 3px 8px;
  border-radius: 20px;
  width: fit-content;
}

@media (min-width: 480px) {
  .meta-value.payment-plan {
    padding: 4px 10px;
    gap: 6px;
  }
}

.meta-value.payment-plan i {
  color: var(--accent);
  font-size: 0.8rem;
}

/* Bill To Section */
.quote-bill-to {
  margin-bottom: calc(var(--spacer) * 2.5);
  padding: calc(var(--spacer) * 2);
  background: linear-gradient(135deg, var(--bg) 0%, var(--card-bg) 100%);
  border-radius: 14px;
  border-left: 3px solid var(--accent);
}

@media (min-width: 480px) {
  .quote-bill-to {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .quote-bill-to {
    padding: calc(var(--spacer) * 3);
    border-radius: 16px;
    border-left-width: 4px;
    margin-bottom: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 1025px) {
  .quote-bill-to {
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.quote-bill-to h4 {
  font-size: 0.8rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .quote-bill-to h4 {
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacer) * 1.8);
  }
}

@media (min-width: 768px) {
  .quote-bill-to h4 {
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.customer-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 768px) {
  .customer-info {
    gap: 6px;
  }
}

.customer-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
}

@media (min-width: 480px) {
  .customer-name {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  .customer-name {
    font-size: 1.1rem;
  }
}

.customer-email,
.customer-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.8rem;
  word-break: break-word;
}

@media (min-width: 480px) {
  .customer-email,
  .customer-phone {
    gap: 8px;
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .customer-email,
  .customer-phone {
    font-size: 0.9rem;
  }
}

.customer-email i,
.customer-phone i {
  color: var(--accent);
  width: 16px;
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .customer-email i,
  .customer-phone i {
    width: 18px;
    font-size: 0.95rem;
  }
}

/* Breakdown Table */
.quote-breakdown {
  margin-bottom: calc(var(--spacer) * 2.5);
}

@media (min-width: 768px) {
  .quote-breakdown {
    margin-bottom: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 1025px) {
  .quote-breakdown {
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.quote-breakdown h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .quote-breakdown h4 {
    font-size: 0.95rem;
  }
}

@media (min-width: 768px) {
  .quote-breakdown h4 {
    font-size: 1rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  border-radius: 14px;
  overflow: hidden;
  font-size: 0.8rem;
}

@media (min-width: 480px) {
  .breakdown-table {
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .breakdown-table {
    border-radius: 16px;
    font-size: 0.9rem;
  }
}

.breakdown-table thead {
  background: var(--card-bg);
  border-bottom: 2px solid var(--border-light);
}

.breakdown-table th {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (min-width: 480px) {
  .breakdown-table th {
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 2.5);
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .breakdown-table th {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
    font-size: 0.8rem;
  }
}

@media (min-width: 1025px) {
  .breakdown-table th {
    font-size: 0.85rem;
  }
}

.breakdown-table td {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-dark);
}

@media (min-width: 480px) {
  .breakdown-table td {
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .breakdown-table td {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
  }
}

.amount-column {
  text-align: right;
  font-family: "Courier New", monospace;
  font-weight: 500;
}

.breakdown-row:hover {
  background: var(--card-bg);
}

.subtotal-row,
.tax-row {
  background: var(--bg);
  font-weight: 500;
}

.total-row {
  background: var(--card-bg);
  font-size: 0.95rem;
}

@media (min-width: 480px) {
  .total-row {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  .total-row {
    font-size: 1.1rem;
  }
}

.total-row td {
  border-bottom: none;
  padding-top: calc(var(--spacer) * 2);
  padding-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .total-row td {
    padding-top: calc(var(--spacer) * 3);
    padding-bottom: calc(var(--spacer) * 3);
  }
}

.empty-breakdown {
  text-align: center;
  color: var(--text-soft);
  font-style: italic;
  padding: calc(var(--spacer) * 3) !important;
}

/* Installment Schedule */
.installment-schedule {
  margin-bottom: calc(var(--spacer) * 2.5);
}

@media (min-width: 768px) {
  .installment-schedule {
    margin-bottom: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 1025px) {
  .installment-schedule {
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.installment-schedule h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .installment-schedule h4 {
    font-size: 0.95rem;
  }
}

@media (min-width: 768px) {
  .installment-schedule h4 {
    font-size: 1rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.installment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .installment-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .installment-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .installment-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.installment-card {
  background: var(--bg);
  border-radius: 14px;
  padding: calc(var(--spacer) * 2);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

@media (min-width: 480px) {
  .installment-card {
    padding: calc(var(--spacer) * 2.5);
    border-radius: 16px;
  }
}

@media (min-width: 768px) {
  .installment-card {
    padding: calc(var(--spacer) * 3);
  }
}

.installment-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;
}

.installment-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.installment-card:hover::before {
  opacity: 1;
}

.installment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 1.5);
  flex-wrap: wrap;
  gap: calc(var(--spacer));
}

@media (min-width: 768px) {
  .installment-header {
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.installment-number {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .installment-number {
    font-size: 0.9rem;
  }
}

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

.installment-badge {
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--card-bg);
  color: var(--accent);
  border: 1px solid var(--accent);
}

@media (min-width: 480px) {
  .installment-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
  }
}

@media (min-width: 768px) {
  .installment-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
  }
}

.installment-amount {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: calc(var(--spacer) * 0.8);
  font-family: "Courier New", monospace;
}

@media (min-width: 480px) {
  .installment-amount {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer));
  }
}

@media (min-width: 768px) {
  .installment-amount {
    font-size: 1.3rem;
  }
}

.installment-due {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-soft);
}

@media (min-width: 480px) {
  .installment-due {
    font-size: 0.8rem;
    gap: 6px;
  }
}

@media (min-width: 768px) {
  .installment-due {
    font-size: 0.85rem;
  }
}

.installment-due i {
  color: var(--accent);
  font-size: 0.75rem;
}

@media (min-width: 768px) {
  .installment-due i {
    font-size: 0.8rem;
  }
}

/* Terms Section */
.quote-terms {
  margin-bottom: calc(var(--spacer) * 2.5);
  padding: calc(var(--spacer) * 2);
  background: var(--bg);
  border-radius: 14px;
}

@media (min-width: 480px) {
  .quote-terms {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .quote-terms {
    padding: calc(var(--spacer) * 3);
    border-radius: 16px;
    margin-bottom: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 1025px) {
  .quote-terms {
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.quote-terms h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .quote-terms h4 {
    font-size: 0.95rem;
  }
}

@media (min-width: 768px) {
  .quote-terms h4 {
    font-size: 1rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.terms-content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.8);
}

@media (min-width: 768px) {
  .terms-content {
    gap: calc(var(--spacer));
  }
}

.terms-content p {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  color: var(--text-soft);
  font-size: 0.8rem;
  word-break: break-word;
}

@media (min-width: 480px) {
  .terms-content p {
    font-size: 0.85rem;
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .terms-content p {
    font-size: 0.9rem;
  }
}

.terms-content p i {
  color: var(--accent);
  width: 18px;
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .terms-content p i {
    width: 20px;
    font-size: 0.95rem;
  }
}

/* Quote Footer Actions */
.quote-footer-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  justify-content: center;
  border-top: 1px solid var(--border-light);
  padding-top: calc(var(--spacer) * 2);
  margin-top: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .quote-footer-actions {
    flex-direction: row;
    gap: calc(var(--spacer) * 2);
    justify-content: flex-end;
  }
}

@media (min-width: 768px) {
  .quote-footer-actions {
    padding-top: calc(var(--spacer) * 3);
    margin-top: calc(var(--spacer) * 2);
    gap: calc(var(--spacer) * 2);
  }
}

.quote-footer-actions .btn-primary,
.quote-footer-actions .btn-outline,
.quote-footer-actions .btn-text {
  width: 100%;
}

@media (min-width: 480px) {
  .quote-footer-actions .btn-primary,
  .quote-footer-actions .btn-outline,
  .quote-footer-actions .btn-text {
    width: auto;
  }
}

/* ========================================================================
   SECTION 16: CALENDAR VIEW - FULLY RESPONSIVE
   ======================================================================== */
/* frontend/public/css/dashboard-provider.css - CALENDAR VIEW RESPONSIVE FIXES */

/* ========================================================================
   CALENDAR VIEW - COMPLETE MOBILE OPTIMIZATION
   ======================================================================== */

.calendar-dashboard {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
  overflow-x: hidden;
}

/* Calendar Header - Mobile Optimized */
.calendar-header {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 2.5);
}

@media (min-width: 768px) {
  .calendar-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
  }
}

.calendar-header .page-title {
  font-size: 1.4rem;
  margin: 0;
  word-break: break-word;
}

@media (max-width: 480px) {
  .calendar-header .page-title {
    font-size: 1.2rem;
  }
}

/* Calendar Navigation */
.calendar-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: calc(var(--spacer));
}

@media (min-width: 768px) {
  .calendar-navigation {
    width: auto;
    gap: calc(var(--spacer) * 2);
  }
}

.calendar-navigation h2 {
  font-size: 1.1rem;
  font-weight: 500;
  min-width: 140px;
  text-align: center;
  margin: 0;
  padding: 0 calc(var(--spacer));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .calendar-navigation h2 {
    font-size: 1.2rem;
    min-width: 160px;
  }
}

@media (min-width: 768px) {
  .calendar-navigation h2 {
    font-size: 1.3rem;
    min-width: 180px;
  }
}

.calendar-navigation .btn-icon {
  width: 44px;
  height: 44px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  transition: all 0.2s;
  flex-shrink: 0;
  padding: 0;
}

.calendar-navigation .btn-icon i {
  font-size: 1rem;
}

.calendar-navigation .btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.calendar-navigation .btn-icon:active {
  transform: scale(0.95);
}

/* Calendar Actions */
.calendar-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
  width: 100%;
}

@media (min-width: 768px) {
  .calendar-actions {
    flex-direction: row;
    width: auto;
    gap: calc(var(--spacer) * 1.5);
  }
}

.calendar-actions .btn-outline,
.calendar-actions .btn-primary {
  width: 100%;
  min-height: 44px;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer));
  border-radius: 30px;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .calendar-actions .btn-outline,
  .calendar-actions .btn-primary {
    font-size: 0.9rem;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .calendar-actions .btn-outline,
  .calendar-actions .btn-primary {
    width: auto;
    min-width: 140px;
  }
}

.calendar-actions .btn-outline i,
.calendar-actions .btn-primary i {
  font-size: 0.85rem;
}

@media (max-width: 480px) {
  .calendar-actions .btn-outline span,
  .calendar-actions .btn-primary span {
    font-size: 0.85rem;
  }
}

/* Calendar View Options Tabs */
.calendar-view-options {
  display: flex;
  gap: calc(var(--spacer) * 0.8);
  margin-bottom: calc(var(--spacer) * 2.5);
  overflow-x: auto;
  padding: 0 0 calc(var(--spacer) * 1.5) 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  white-space: nowrap;
  width: 100%;
}

.calendar-view-options::-webkit-scrollbar {
  height: 3px;
}

.calendar-view-options::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 3px;
}

.calendar-view-options::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}

.view-btn {
  padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.8);
  border: 1px solid var(--border-light);
  background: var(--card-bg);
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 40px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-soft);
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.5);
}

@media (min-width: 768px) {
  .view-btn {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.9rem;
    min-height: 44px;
    flex: 1 1 auto;
  }
}

.view-btn i {
  font-size: 0.8rem;
}

@media (max-width: 480px) {
  .view-btn {
    padding: calc(var(--spacer) * 0.8) calc(var(--spacer) * 1.5);
    font-size: 0.75rem;
  }

  .view-btn i {
    font-size: 0.75rem;
  }

  .view-btn span {
    display: none;
  }

  .view-btn i {
    margin-right: 0;
  }
}

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

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

/* Calendar Container */
.calendar-container {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 1.5);
  box-shadow: var(--shadow);
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .calendar-container {
    padding: calc(var(--spacer) * 3);
    border-radius: 24px;
    overflow-x: visible;
  }
}

/* ========================================================================
   MONTH VIEW - FULLY RESPONSIVE
   ======================================================================== */

.month-view {
  min-width: 300px;
  width: 100%;
}

@media (min-width: 768px) {
  .month-view {
    min-width: 0;
  }
}

.month-view .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: calc(var(--spacer) * 1.5);
  padding: 0 2px;
}

.weekday {
  text-align: center;
  font-weight: 600;
  color: var(--text-soft);
  padding: calc(var(--spacer) * 0.8) 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

@media (min-width: 480px) {
  .weekday {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .weekday {
    font-size: 0.8rem;
  }
}

.weekday .full-day {
  display: none;
}

@media (min-width: 768px) {
  .weekday .full-day {
    display: inline;
  }

  .weekday .short-day {
    display: none;
  }
}

.month-view .calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.month-view .calendar-day {
  min-height: 70px;
  padding: calc(var(--spacer) * 0.8);
  background: var(--bg);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

@media (min-width: 480px) {
  .month-view .calendar-day {
    min-height: 80px;
    padding: calc(var(--spacer));
  }
}

@media (min-width: 768px) {
  .month-view .calendar-day {
    min-height: 100px;
    padding: calc(var(--spacer) * 1.2);
  }
}

@media (min-width: 1024px) {
  .month-view .calendar-day {
    min-height: 120px;
  }
}

.month-view .calendar-day:hover {
  background: var(--card-bg);
  border-color: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.month-view .calendar-day.today {
  border: 2px solid var(--accent);
  background: #f2ebe3;
}

.month-view .calendar-day.weekend {
  background: #f8fafc;
}

.month-view .calendar-day.unavailable {
  background: #fef2f2;
  position: relative;
}

.month-view .calendar-day.unavailable::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    rgba(239, 68, 68, 0.05) 5px,
    rgba(239, 68, 68, 0.05) 10px
  );
  border-radius: 10px;
  pointer-events: none;
}

.month-view .calendar-day.empty {
  background: transparent;
  cursor: default;
  opacity: 0.5;
}

.month-view .calendar-day.empty:hover {
  background: transparent;
  border-color: transparent;
  transform: none;
  box-shadow: none;
}

.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 0.3);
}

.day-number {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.75rem;
  line-height: 1.2;
}

@media (min-width: 480px) {
  .day-number {
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .day-number {
    font-size: 0.85rem;
  }
}

.day-badges {
  display: flex;
  gap: 2px;
}

.booking-badge {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

@media (min-width: 480px) {
  .booking-badge {
    width: 16px;
    height: 16px;
    font-size: 0.55rem;
  }
}

.booking-badge.pending {
  background: #f59e0b;
}

.booking-badge.confirmed {
  background: #10b981;
}

.booking-badge.completed {
  background: #3b82f6;
}

.day-bookings {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 1px;
  overflow: hidden;
  flex: 1;
}

.day-booking {
  padding: 1px 2px;
  border-radius: 2px;
  font-size: 0.55rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: all 0.2s;
  color: white;
  margin-bottom: 1px;
}

@media (min-width: 480px) {
  .day-booking {
    padding: 2px 3px;
    font-size: 0.6rem;
    border-radius: 3px;
  }
}

@media (min-width: 768px) {
  .day-booking {
    padding: 2px 4px;
    font-size: 0.65rem;
    border-radius: 4px;
  }
}

.day-booking.pending {
  background: #f59e0b;
}

.day-booking.confirmed {
  background: #10b981;
}

.day-booking.in_progress {
  background: #3b82f6;
}

.day-booking.completed {
  background: #8b5cf6;
}

.day-booking .booking-time {
  font-weight: 600;
  margin-right: 2px;
}

@media (max-width: 480px) {
  .day-booking .booking-customer {
    display: none;
  }

  .day-booking .booking-time {
    display: inline;
  }
}

.more-bookings {
  font-size: 0.5rem;
  color: var(--text-soft);
  text-align: center;
  margin-top: 1px;
  font-weight: 500;
}

@media (min-width: 480px) {
  .more-bookings {
    font-size: 0.55rem;
  }
}

@media (min-width: 768px) {
  .more-bookings {
    font-size: 0.6rem;
  }
}

.available-indicator {
  font-size: 0.5rem;
  color: #10b981;
  text-align: center;
  margin-top: auto;
  padding: 1px 0;
}

@media (min-width: 480px) {
  .available-indicator {
    font-size: 0.55rem;
  }
}

/* ========================================================================
   WEEK VIEW - HORIZONTAL SCROLL ON MOBILE
   ======================================================================== */

.week-view {
  min-width: 600px;
  width: 100%;
}

@media (min-width: 1024px) {
  .week-view {
    min-width: 0;
  }
}

.week-view .week-header {
  display: grid;
  grid-template-columns: 50px repeat(7, 1fr);
  gap: 2px;
  margin-bottom: calc(var(--spacer) * 1.5);
  padding-bottom: calc(var(--spacer));
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 480px) {
  .week-view .week-header {
    grid-template-columns: 60px repeat(7, 1fr);
  }
}

@media (min-width: 768px) {
  .week-view .week-header {
    grid-template-columns: 70px repeat(7, 1fr);
  }
}

.week-view .time-column {
  font-weight: 600;
  color: var(--text-soft);
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.week-view .day-column {
  text-align: center;
  padding: calc(var(--spacer) * 0.5) 0;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 8px;
}

.week-view .day-column:hover {
  background: var(--bg);
}

.week-view .day-column.today .day-name,
.week-view .day-column.today .day-date {
  color: var(--accent);
  font-weight: 600;
}

.week-view .day-name {
  display: block;
  font-size: 0.6rem;
  color: var(--text-soft);
  margin-bottom: 2px;
}

.week-view .day-name.short {
  display: block;
}

.week-view .day-name.full {
  display: none;
}

@media (min-width: 480px) {
  .week-view .day-name.short {
    display: none;
  }

  .week-view .day-name.full {
    display: block;
    font-size: 0.65rem;
  }
}

.week-view .day-date {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
}

@media (min-width: 480px) {
  .week-view .day-date {
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .week-view .day-date {
    font-size: 0.9rem;
  }
}

.week-view .week-body {
  display: flex;
  flex-direction: column;
}

.week-view .hour-row {
  display: grid;
  grid-template-columns: 50px repeat(7, 1fr);
  gap: 2px;
  min-height: 40px;
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 480px) {
  .week-view .hour-row {
    grid-template-columns: 60px repeat(7, 1fr);
    min-height: 45px;
  }
}

@media (min-width: 768px) {
  .week-view .hour-row {
    grid-template-columns: 70px repeat(7, 1fr);
    min-height: 50px;
  }
}

.week-view .hour-label {
  padding: 2px;
  color: var(--text-soft);
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
}

@media (min-width: 480px) {
  .week-view .hour-label {
    font-size: 0.65rem;
    padding-right: 6px;
  }
}

.week-view .hour-cell {
  position: relative;
  padding: 1px;
  border-left: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.2s;
  min-height: 40px;
}

.week-view .hour-cell:hover {
  background: var(--bg);
}

.week-view .hour-booking {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  padding: 2px;
  border-radius: 3px;
  font-size: 0.55rem;
  cursor: pointer;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
}

@media (min-width: 480px) {
  .week-view .hour-booking {
    padding: 3px;
    font-size: 0.6rem;
  }
}

@media (min-width: 768px) {
  .week-view .hour-booking {
    padding: 4px;
    font-size: 0.65rem;
  }
}

.week-view .hour-booking.pending {
  background: #f59e0b;
}

.week-view .hour-booking.confirmed {
  background: #10b981;
}

.week-view .hour-booking.in_progress {
  background: #3b82f6;
}

.week-view .hour-booking .booking-time {
  font-weight: 600;
  margin-right: 2px;
}

@media (max-width: 480px) {
  .week-view .hour-booking .booking-customer {
    display: none;
  }

  .week-view .hour-booking .booking-time {
    display: inline;
  }
}

/* ========================================================================
   DAY VIEW - VERTICAL TIMELINE, MOBILE OPTIMIZED
   ======================================================================== */

.day-view {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.day-view .day-header {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 2);
  padding-bottom: calc(var(--spacer) * 1.5);
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .day-view .day-header {
    align-items: center;
    gap: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.back-to-week {
  background: var(--bg);
  border: 1px solid var(--border-light);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.back-to-week:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.back-to-week:active {
  transform: scale(0.95);
}

.day-view .day-header h3 {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  word-break: break-word;
}

@media (min-width: 480px) {
  .day-view .day-header h3 {
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  .day-view .day-header h3 {
    font-size: 1.2rem;
  }
}

.day-view .day-stats {
  display: flex;
  gap: calc(var(--spacer) * 1.2);
  flex-wrap: wrap;
  width: 100%;
}

@media (min-width: 480px) {
  .day-view .day-stats {
    width: auto;
  }
}

.day-view .stat {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-soft);
  font-size: 0.7rem;
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .day-view .stat {
    font-size: 0.75rem;
    padding: 4px 10px;
  }
}

.day-view .stat i {
  color: var(--accent);
  font-size: 0.7rem;
}

@media (min-width: 480px) {
  .day-view .stat i {
    font-size: 0.75rem;
  }
}

.day-view .day-timeline {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.day-view .timeline-hour {
  display: grid;
  grid-template-columns: 50px 1fr;
  min-height: 50px;
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 480px) {
  .day-view .timeline-hour {
    grid-template-columns: 60px 1fr;
    min-height: 55px;
  }
}

@media (min-width: 768px) {
  .day-view .timeline-hour {
    grid-template-columns: 70px 1fr;
    min-height: 60px;
  }
}

@media (min-width: 1024px) {
  .day-view .timeline-hour {
    min-height: 70px;
  }
}

.day-view .hour-marker {
  padding: 4px;
  color: var(--text-soft);
  font-size: 0.65rem;
  border-right: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
}

@media (min-width: 480px) {
  .day-view .hour-marker {
    font-size: 0.7rem;
    padding-right: 10px;
  }
}

@media (min-width: 768px) {
  .day-view .hour-marker {
    font-size: 0.75rem;
    padding-right: 12px;
  }
}

.day-view .hour-slot {
  position: relative;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 50px;
}

@media (min-width: 768px) {
  .day-view .hour-slot {
    min-height: 60px;
  }
}

.day-view .slot-booking {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 4px solid;
  box-shadow: var(--shadow);
  width: 100%;
}

@media (min-width: 480px) {
  .day-view .slot-booking {
    padding: 8px 10px;
  }
}

@media (min-width: 768px) {
  .day-view .slot-booking {
    padding: 10px 12px;
    border-radius: 10px;
  }
}

.day-view .slot-booking:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .day-view .slot-booking:hover {
    transform: translateX(4px);
  }
}

.day-view .slot-booking.pending {
  border-left-color: #f59e0b;
}

.day-view .slot-booking.confirmed {
  border-left-color: #10b981;
}

.day-view .slot-booking.in_progress {
  border-left-color: #3b82f6;
}

.day-view .slot-booking.completed {
  border-left-color: #8b5cf6;
  opacity: 0.8;
}

.booking-time-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: var(--accent);
  margin-bottom: 4px;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .booking-time-badge {
    font-size: 0.7rem;
  }
}

.booking-time-badge .duration {
  color: var(--text-soft);
  font-size: 0.6rem;
}

@media (min-width: 480px) {
  .booking-time-badge .duration {
    font-size: 0.65rem;
  }
}

.booking-customer {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-dark);
  margin-bottom: 2px;
  word-break: break-word;
}

@media (min-width: 480px) {
  .booking-customer {
    font-size: 0.85rem;
  }
}

.booking-service {
  font-size: 0.7rem;
  color: var(--text-soft);
  word-break: break-word;
}

@media (min-width: 480px) {
  .booking-service {
    font-size: 0.75rem;
  }
}

.day-view .empty-slot {
  height: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  font-size: 0.65rem;
  cursor: pointer;
  border: 2px dashed var(--border-light);
  border-radius: 8px;
  transition: all 0.2s;
  padding: 4px;
  gap: 4px;
}

@media (min-width: 480px) {
  .day-view .empty-slot {
    min-height: 45px;
    font-size: 0.7rem;
  }
}

.day-view .empty-slot:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg);
}

.show-mobile {
  display: inline;
}

.hide-mobile {
  display: none;
}

@media (min-width: 480px) {
  .hide-mobile {
    display: inline;
  }

  .show-mobile {
    display: none;
  }
}

/* ========================================================================
   AGENDA VIEW - MOBILE OPTIMIZED
   ======================================================================== */

.agenda-view {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  width: 100%;
}

@media (min-width: 640px) {
  .agenda-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacer) * 3);
  }
}

.agenda-section {
  background: var(--bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 1.5);
  width: 100%;
}

@media (min-width: 480px) {
  .agenda-section {
    padding: calc(var(--spacer) * 2);
    border-radius: 18px;
  }
}

@media (min-width: 768px) {
  .agenda-section {
    padding: calc(var(--spacer) * 2.5);
    border-radius: 20px;
  }
}

.agenda-section h3 {
  margin-bottom: calc(var(--spacer) * 1.5);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  font-size: 0.95rem;
  font-weight: 600;
}

@media (min-width: 480px) {
  .agenda-section h3 {
    font-size: 1rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

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

.agenda-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.2);
}

.agenda-item {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.8);
  padding: calc(var(--spacer) * 1.2);
  background: var(--card-bg);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border-light);
}

@media (min-width: 480px) {
  .agenda-item {
    padding: calc(var(--spacer) * 1.5);
    gap: calc(var(--spacer) * 1);
  }
}

@media (min-width: 640px) {
  .agenda-item {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacer) * 1.5);
  }
}

.agenda-item:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow);
  border-color: var(--accent-light);
}

.agenda-time {
  display: flex;
  flex-direction: column;
  min-width: 80px;
}

@media (min-width: 640px) {
  .agenda-time {
    min-width: 90px;
  }
}

.agenda-date {
  font-size: 0.6rem;
  color: var(--text-soft);
  margin-bottom: 2px;
}

@media (min-width: 480px) {
  .agenda-date {
    font-size: 0.65rem;
  }
}

.agenda-time-value {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.75rem;
}

@media (min-width: 480px) {
  .agenda-time-value {
    font-size: 0.8rem;
  }
}

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

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

@media (min-width: 480px) {
  .agenda-customer {
    font-size: 0.85rem;
  }
}

.agenda-service {
  font-size: 0.65rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .agenda-service {
    font-size: 0.7rem;
  }
}

.agenda-status {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .agenda-status {
    align-self: center;
  }
}

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

.agenda-status.confirmed {
  background: #e3f2e9;
  color: #2f6e4a;
}

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

.agenda-status.completed {
  background: #e0e7ff;
  color: #1e3a8a;
}

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

.empty-agenda {
  text-align: center;
  padding: calc(var(--spacer) * 2);
  color: var(--text-soft);
  font-size: 0.8rem;
}

.empty-agenda i {
  font-size: 1.5rem;
  margin-bottom: calc(var(--spacer) * 0.8);
  opacity: 0.3;
  color: var(--accent);
}

/* ========================================================================
   CALENDAR LOADING & ERROR STATES
   ======================================================================== */

.calendar-loading {
  text-align: center;
  padding: calc(var(--spacer) * 4);
  color: var(--text-soft);
  background: var(--card-bg);
  border-radius: 20px;
}

.loading-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: calc(var(--spacer) * 1.5);
}

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

.error-state {
  text-align: center;
  padding: calc(var(--spacer) * 3);
  color: #ef4444;
  background: #fee2e2;
  border-radius: 16px;
}

.error-state i {
  font-size: 2rem;
  margin-bottom: calc(var(--spacer) * 1.2);
}

.error-state button {
  margin-top: calc(var(--spacer) * 1.5);
  background: white;
  border: 1px solid #ef4444;
  color: #ef4444;
  padding: 8px 16px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.error-state button:hover {
  background: #ef4444;
  color: white;
}

/* ========================================================================
   EXTREMELY SMALL SCREENS (below 360px)
   ======================================================================== */

@media (max-width: 359px) {
  .calendar-dashboard {
    padding: calc(var(--spacer) * 1);
  }

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

  .calendar-navigation h2 {
    font-size: 0.9rem;
    min-width: 100px;
  }

  .calendar-navigation .btn-icon {
    width: 38px;
    height: 38px;
  }

  .view-btn {
    padding: calc(var(--spacer) * 0.6) calc(var(--spacer) * 1.2);
    font-size: 0.7rem;
  }

  .month-view .calendar-day {
    min-height: 55px;
    padding: 3px;
  }

  .day-number {
    font-size: 0.65rem;
  }

  .day-booking {
    font-size: 0.5rem;
    padding: 1px;
  }

  .day-view .timeline-hour {
    grid-template-columns: 40px 1fr;
  }

  .hour-marker {
    font-size: 0.6rem;
    padding-right: 4px;
  }

  .booking-customer {
    font-size: 0.7rem;
  }

  .booking-service {
    font-size: 0.6rem;
  }

  .agenda-item {
    padding: calc(var(--spacer) * 0.8);
  }

  .agenda-customer {
    font-size: 0.7rem;
  }

  .agenda-service {
    font-size: 0.6rem;
  }
}

/* ========================================================================
   LANDSCAPE ORIENTATION ON MOBILE
   ======================================================================== */

@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .calendar-dashboard {
    padding: calc(var(--spacer));
  }

  .month-view .calendar-day {
    min-height: 50px;
  }

  .day-bookings {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .day-booking {
    width: auto;
    padding: 1px 4px;
  }

  .day-view .timeline-hour {
    min-height: 40px;
  }

  .agenda-view {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   TOUCH OPTIMIZATIONS
   ======================================================================== */

.calendar-day,
.view-btn,
.back-to-week,
.calendar-navigation .btn-icon,
.day-booking,
.slot-booking,
.agenda-item,
.empty-slot {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.calendar-day:active,
.view-btn:active,
.back-to-week:active,
.calendar-navigation .btn-icon:active,
.day-booking:active,
.slot-booking:active,
.agenda-item:active,
.empty-slot:active {
  transform: scale(0.98);
}

/* ========================================================================
   PRINT STYLES FOR CALENDAR
   ======================================================================== */

@media print {
  .calendar-navigation button,
  .calendar-actions,
  .calendar-view-options,
  .back-to-week {
    display: none !important;
  }

  .calendar-container {
    box-shadow: none;
    padding: 0;
    border: 1px solid #ddd;
  }

  .calendar-day {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .day-booking {
    background: #f0f0f0 !important;
    color: black !important;
    border-left: 2px solid #666;
  }
}

/* frontend/public/css/dashboard-provider.css - Add footer note */

/* Calendar Footer Note */
.calendar-footer-note {
  margin-top: calc(var(--spacer) * 2);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 12px;
  text-align: center;
  color: var(--text-soft);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer));
  border: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .calendar-footer-note {
    margin-top: calc(var(--spacer) * 3);
    padding: calc(var(--spacer) * 2);
    font-size: 0.9rem;
  }
}

.calendar-footer-note i {
  color: var(--accent);
  font-size: 1rem;
}

/* Update empty state message for week/day views */
.week-view .hour-cell:not(.has-booking) {
  /* No hover effects for empty cells since they're not clickable */
  cursor: default;
}

.week-view .hour-cell:not(.has-booking):hover {
  background: transparent;
}

.day-view .hour-slot:not(.has-bookings) {
  /* No hover effects for empty slots */
  cursor: default;
}

.day-view .hour-slot:not(.has-bookings):hover {
  background: transparent;
}

/* ========================================================================
   SECTION 17: AVAILABILITY SETTINGS - FULLY RESPONSIVE
   ======================================================================== */

.availability-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .availability-dashboard {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .availability-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .availability-dashboard {
    padding: calc(var(--spacer) * 4);
  }
}

.availability-header {
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 768px) {
  .availability-header {
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .availability-header {
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.availability-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .availability-actions {
    flex-direction: row;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .availability-actions {
    gap: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .availability-actions {
    margin-bottom: calc(var(--spacer) * 5);
  }
}

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

@media (min-width: 480px) {
  .availability-actions .btn-primary,
  .availability-actions .btn-outline {
    width: auto;
  }
}

/* Working Hours Section */
.working-hours-section,
.exceptions-section,
.preferences-section {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .working-hours-section,
  .exceptions-section,
  .preferences-section {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .working-hours-section,
  .exceptions-section,
  .preferences-section {
    border-radius: 20px;
    padding: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .working-hours-section,
  .exceptions-section,
  .preferences-section {
    border-radius: 24px;
    padding: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.working-hours-grid {
  margin-top: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .working-hours-grid {
    margin-top: calc(var(--spacer) * 3);
  }
}

.working-hours-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 480px) {
  .working-hours-row {
    grid-template-columns: 100px 70px 1fr;
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .working-hours-row {
    grid-template-columns: 110px 75px 1fr;
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1025px) {
  .working-hours-row {
    grid-template-columns: 120px 80px 1fr;
    gap: calc(var(--spacer) * 3);
    padding: calc(var(--spacer) * 2);
  }
}

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

.day-label {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.9rem;
}

@media (min-width: 480px) {
  .day-label {
    font-size: 0.95rem;
  }
}

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

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  margin: 0 auto;
}

@media (min-width: 480px) {
  .toggle-switch {
    width: 48px;
    height: 24px;
    margin: 0;
  }
}

@media (min-width: 768px) {
  .toggle-switch {
    width: 50px;
    height: 24px;
  }
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-light);
  transition: 0.3s;
  border-radius: 22px;
}

@media (min-width: 480px) {
  .toggle-slider {
    border-radius: 24px;
  }
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

@media (min-width: 480px) {
  .toggle-slider:before {
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
  }
}

input:checked + .toggle-slider {
  background-color: var(--accent);
}

input:checked + .toggle-slider:before {
  transform: translateX(22px);
}

@media (min-width: 480px) {
  input:checked + .toggle-slider:before {
    transform: translateX(24px);
  }
}

.time-controls {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 480px) {
  .time-controls {
    justify-content: flex-start;
  }
}

.time-controls.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.time-controls input[type="time"] {
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: 0.8rem;
  min-height: 40px;
  width: 100px;
}

@media (min-width: 480px) {
  .time-controls input[type="time"] {
    width: 110px;
    font-size: 0.85rem;
    min-height: 42px;
  }
}

@media (min-width: 768px) {
  .time-controls input[type="time"] {
    width: 120px;
    font-size: 0.9rem;
    min-height: 44px;
  }
}

.time-controls span {
  color: var(--text-soft);
  font-size: 0.8rem;
}

/* Exceptions List */
.exceptions-list {
  margin: calc(var(--spacer) * 2) 0;
}

@media (min-width: 768px) {
  .exceptions-list {
    margin: calc(var(--spacer) * 3) 0;
  }
}

.exception-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer));
  padding: calc(var(--spacer) * 1.5);
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 480px) {
  .exception-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 1.5);
    padding: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .exception-item {
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2);
  }
}

.exception-date {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .exception-date {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .exception-date {
    font-size: 0.95rem;
  }
}

.exception-notes {
  color: var(--text-soft);
  font-size: 0.8rem;
  margin-left: 0;
}

@media (min-width: 480px) {
  .exception-notes {
    margin-left: calc(var(--spacer) * 2);
  }
}

.exception-item .btn-icon {
  width: 36px;
  height: 36px;
  align-self: flex-end;
}

@media (min-width: 480px) {
  .exception-item .btn-icon {
    align-self: center;
  }
}

.empty-exceptions {
  text-align: center;
  padding: calc(var(--spacer) * 3);
  color: var(--text-soft);
}

@media (min-width: 768px) {
  .empty-exceptions {
    padding: calc(var(--spacer) * 4);
  }
}

.empty-exceptions i {
  font-size: 1.8rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  opacity: 0.3;
}

@media (min-width: 768px) {
  .empty-exceptions i {
    font-size: 2rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

/* Preferences Form */
.preferences-form {
  max-width: 600px;
  margin-top: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .preferences-form {
    margin-top: calc(var(--spacer) * 3);
  }
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .form-row {
    gap: calc(var(--spacer) * 2.5);
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1025px) {
  .form-row {
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.form-group {
  margin-bottom: 0;
}

.form-control {
  width: 100%;
  padding: calc(var(--spacer) * 1.2);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 0.85rem;
  min-height: 44px;
}

@media (min-width: 480px) {
  .form-control {
    padding: calc(var(--spacer) * 1.5);
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .form-control {
    padding: calc(var(--spacer) * 1.5);
    font-size: 0.95rem;
  }
}

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

/* Connected Calendars */
.connected-calendars {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  margin-top: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .connected-calendars {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .connected-calendars {
    border-radius: 20px;
    padding: calc(var(--spacer) * 3);
    margin-top: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .connected-calendars {
    border-radius: 24px;
    padding: calc(var(--spacer) * 4);
  }
}

.calendar-connections {
  margin-top: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .calendar-connections {
    margin-top: calc(var(--spacer) * 3);
  }
}

.calendar-connection {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .calendar-connection {
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .calendar-connection {
    gap: calc(var(--spacer) * 2.5);
    padding: calc(var(--spacer) * 2);
    flex-wrap: nowrap;
  }
}

@media (min-width: 1025px) {
  .calendar-connection {
    gap: calc(var(--spacer) * 3);
  }
}

.calendar-connection i {
  font-size: 1.5rem;
  color: var(--accent);
  width: 32px;
  text-align: center;
}

@media (min-width: 480px) {
  .calendar-connection i {
    font-size: 1.8rem;
    width: 36px;
  }
}

@media (min-width: 768px) {
  .calendar-connection i {
    font-size: 2rem;
    width: 40px;
  }
}

.connection-info {
  flex: 1;
  min-width: 120px;
}

@media (min-width: 480px) {
  .connection-info {
    min-width: 140px;
  }
}

@media (min-width: 768px) {
  .connection-info {
    min-width: 150px;
  }
}

.connection-name {
  display: block;
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.85rem;
  margin-bottom: 2px;
}

@media (min-width: 480px) {
  .connection-name {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .connection-name {
    font-size: 0.95rem;
  }
}

.connection-status {
  font-size: 0.7rem;
}

@media (min-width: 480px) {
  .connection-status {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .connection-status {
    font-size: 0.8rem;
  }
}

.connection-status.not-connected {
  color: var(--text-soft);
}

.connection-status.connected {
  color: #10b981;
}

/* ========================================================================
   SECTION 18: LISTINGS GRID & CARDS - FULLY RESPONSIVE
   ======================================================================== */

.listings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  margin-top: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .listings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
    margin-top: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .listings-grid {
    gap: calc(var(--spacer) * 3);
    margin-top: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .listings-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: calc(var(--spacer) * 4);
    margin-top: calc(var(--spacer) * 4);
  }
}

.listing-card {
  background: var(--card-bg);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  position: relative;
}

@media (min-width: 480px) {
  .listing-card {
    border-radius: 20px;
  }
}

@media (min-width: 768px) {
  .listing-card {
    border-radius: 22px;
  }
}

@media (min-width: 1025px) {
  .listing-card {
    border-radius: 24px;
  }
}

.listing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .listing-card:hover {
    transform: translateY(-4px);
  }
}

.listing-media {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: var(--bg);
}

@media (min-width: 480px) {
  .listing-media {
    height: 180px;
  }
}

@media (min-width: 768px) {
  .listing-media {
    height: 200px;
  }
}

.listing-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.listing-card:hover .listing-media img {
  transform: scale(1.05);
}

.no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-soft);
  font-size: 2rem;
}

@media (min-width: 768px) {
  .no-image {
    font-size: 2.5rem;
  }
}

@media (min-width: 1025px) {
  .no-image {
    font-size: 3rem;
  }
}

.listing-type {
  position: absolute;
  top: calc(var(--spacer) * 1.5);
  left: calc(var(--spacer) * 1.5);
  background: var(--accent);
  color: white;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

@media (min-width: 480px) {
  .listing-type {
    top: calc(var(--spacer) * 2);
    left: calc(var(--spacer) * 2);
    padding: 4px 10px;
    font-size: 0.7rem;
  }
}

@media (min-width: 768px) {
  .listing-type {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 30px;
  }
}

.featured-badge {
  position: absolute;
  top: calc(var(--spacer) * 1.5);
  right: calc(var(--spacer) * 1.5);
  background: #fbbf24;
  color: #78350f;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 600;
  z-index: 2;
}

@media (min-width: 480px) {
  .featured-badge {
    top: calc(var(--spacer) * 2);
    right: calc(var(--spacer) * 2);
    padding: 4px 10px;
    font-size: 0.7rem;
  }
}

@media (min-width: 768px) {
  .featured-badge {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 30px;
  }
}

.listing-content {
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .listing-content {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .listing-content {
    padding: calc(var(--spacer) * 3);
  }
}

.listing-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 0.5);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .listing-title {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacer) * 0.8);
  }
}

@media (min-width: 768px) {
  .listing-title {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer));
  }
}

.listing-description {
  color: var(--text-soft);
  font-size: 0.8rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 480px) {
  .listing-description {
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacer) * 1.8);
  }
}

@media (min-width: 768px) {
  .listing-description {
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.listing-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .listing-price {
    font-size: 1.05rem;
  }
}

@media (min-width: 768px) {
  .listing-price {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.listing-meta {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 1.5);
  font-size: 0.75rem;
  color: var(--text-soft);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .listing-meta {
    gap: calc(var(--spacer) * 2);
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .listing-meta {
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.listing-meta i {
  margin-right: 3px;
  color: var(--accent);
  font-size: 0.7rem;
}

@media (min-width: 768px) {
  .listing-meta i {
    margin-right: 4px;
    font-size: 0.75rem;
  }
}

.listing-stats {
  display: flex;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 1.5);
  font-size: 0.75rem;
  color: var(--text-soft);
  border-top: 1px solid var(--border-light);
  padding-top: calc(var(--spacer) * 1.5);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .listing-stats {
    gap: calc(var(--spacer) * 2.5);
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .listing-stats {
    gap: calc(var(--spacer) * 3);
    font-size: 0.85rem;
    padding-top: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.listing-stats i {
  margin-right: 3px;
  color: var(--accent);
  font-size: 0.7rem;
}

@media (min-width: 768px) {
  .listing-stats i {
    margin-right: 4px;
    font-size: 0.75rem;
  }
}

.listing-status {
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .listing-status {
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.listing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.5);
  border-top: 1px solid var(--border-light);
  padding-top: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .listing-actions {
    gap: calc(var(--spacer));
    padding-top: calc(var(--spacer) * 1.8);
  }
}

@media (min-width: 768px) {
  .listing-actions {
    gap: calc(var(--spacer) * 1.5);
    padding-top: calc(var(--spacer) * 2);
  }
}

.listing-actions .btn-outline {
  flex: 1;
  min-width: 60px;
  padding: calc(var(--spacer) * 0.6) calc(var(--spacer) * 1);
  font-size: 0.7rem;
  min-height: 32px;
}

@media (min-width: 480px) {
  .listing-actions .btn-outline {
    min-width: 70px;
    padding: calc(var(--spacer) * 0.8) calc(var(--spacer) * 1.2);
    font-size: 0.75rem;
    min-height: 34px;
  }
}

@media (min-width: 768px) {
  .listing-actions .btn-outline {
    min-width: 80px;
    padding: calc(var(--spacer)) calc(var(--spacer) * 1.5);
    font-size: 0.8rem;
    min-height: 36px;
  }
}

@media (min-width: 1025px) {
  .listing-actions .btn-outline {
    font-size: 0.85rem;
    min-height: 40px;
  }
}

.listing-actions .btn-outline.danger {
  color: #aa4a44;
  border-color: #aa4a44;
}

.listing-actions .btn-outline.danger:hover {
  background: #aa4a44;
  color: white;
}

/* Filter Group for Products/Services */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 3);
  background: var(--card-bg);
  padding: calc(var(--spacer) * 2);
  border-radius: 14px;
  box-shadow: var(--shadow);
  align-items: stretch;
}

@media (min-width: 480px) {
  .filter-group {
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2.5);
    border-radius: 16px;
  }
}

@media (min-width: 768px) {
  .filter-group {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

/* Search Box - Responsive */
.search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
  width: 100%;
}

@media (min-width: 480px) {
  .search-box {
    min-width: 220px;
  }
}

@media (min-width: 768px) {
  .search-box {
    min-width: 250px;
  }
}

.search-box i {
  position: absolute;
  left: calc(var(--spacer) * 1.5);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.8rem;
  z-index: 1;
  pointer-events: none;
}

@media (min-width: 480px) {
  .search-box i {
    left: calc(var(--spacer) * 2);
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .search-box i {
    font-size: 0.9rem;
  }
}

.search-box input {
  width: 100%;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2)
    calc(var(--spacer) * 1.5) calc(var(--spacer) * 5);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.85rem;
  background: var(--bg);
  transition: all 0.2s;
  min-height: 44px;
  line-height: 1.5;
  color: var(--text-dark);
}

@media (min-width: 480px) {
  .search-box input {
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 2.5)
      calc(var(--spacer) * 1.8) calc(var(--spacer) * 5.5);
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .search-box input {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2.5)
      calc(var(--spacer) * 2) calc(var(--spacer) * 6);
    font-size: 0.95rem;
    min-height: 48px;
  }
}

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

.search-box input::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .search-box input::placeholder {
    font-size: 0.9rem;
  }
}

/* Filter Select - Responsive */
.filter-select {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  background: var(--bg);
  min-width: 120px;
  min-height: 44px;
  font-size: 0.8rem;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' 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 calc(var(--spacer) * 1.5) center;
  background-size: 14px;
  padding-right: calc(var(--spacer) * 4);
  width: 100%;
}

@media (min-width: 480px) {
  .filter-select {
    min-width: 130px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5)
      calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    padding-right: calc(var(--spacer) * 5);
    font-size: 0.85rem;
    background-size: 15px;
  }
}

@media (min-width: 768px) {
  .filter-select {
    min-width: 150px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3)
      calc(var(--spacer) * 1.5) calc(var(--spacer) * 3);
    padding-right: calc(var(--spacer) * 5);
    font-size: 0.9rem;
    min-height: 48px;
    background-size: 16px;
  }
}

@media (min-width: 1025px) {
  .filter-select {
    font-size: 0.95rem;
  }
}

.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);
}

/* Filter Search */
.filter-search {
  flex: 1;
  min-width: 150px;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.8rem;
  background: var(--bg);
  min-height: 44px;
  line-height: 1.5;
  color: var(--text-dark);
  width: 100%;
}

@media (min-width: 480px) {
  .filter-search {
    min-width: 180px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .filter-search {
    min-width: 200px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3);
    font-size: 0.9rem;
    min-height: 48px;
  }
}

@media (min-width: 1025px) {
  .filter-search {
    font-size: 0.95rem;
  }
}

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

.filter-search::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .filter-search::placeholder {
    font-size: 0.9rem;
  }
}

/* Section Header with Add Button */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .section-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .section-header {
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.section-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
}

@media (min-width: 480px) {
  .section-header h2 {
    font-size: 1.2rem;
  }
}

@media (min-width: 768px) {
  .section-header h2 {
    font-size: 1.3rem;
  }
}

.section-header .btn-primary {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 3);
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
  width: 100%;
  justify-content: center;
  margin: 0;
}

@media (min-width: 480px) {
  .section-header .btn-primary {
    width: auto;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3.5);
    font-size: 0.9rem;
    gap: calc(var(--spacer));
  }
}

@media (min-width: 768px) {
  .section-header .btn-primary {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 4);
    font-size: 0.95rem;
    min-height: 48px;
  }
}

/* Filter actions container */
.filter-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

@media (min-width: 480px) {
  .filter-actions {
    flex-direction: row;
    gap: calc(var(--spacer) * 1.5);
    width: auto;
  }
}

@media (min-width: 768px) {
  .filter-actions {
    gap: calc(var(--spacer) * 2);
  }
}

.filter-actions .btn-outline {
  width: 100%;
  margin: 0;
}

@media (min-width: 480px) {
  .filter-actions .btn-outline {
    width: auto;
  }
}

/* ========================================================================
   SECTION 19: IMAGE PREVIEW & UPLOAD - FULLY RESPONSIVE
   ======================================================================== */

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: calc(var(--spacer));
  margin-top: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .image-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: calc(var(--spacer) * 1.5);
    margin-top: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .image-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 1025px) {
  .image-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: calc(var(--spacer) * 2);
  }
}

.image-preview {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border-light);
  transition: all 0.2s;
}

@media (min-width: 768px) {
  .image-preview {
    border-radius: 10px;
  }
}

@media (min-width: 1025px) {
  .image-preview {
    border-radius: 12px;
  }
}

.image-preview.uploaded {
  border-color: var(--accent);
}

.image-preview:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow);
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.image-preview:hover .image-preview-overlay {
  opacity: 1;
}

.image-preview-overlay .btn-icon {
  background: white;
  color: #aa4a44;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.8rem;
  min-width: 28px;
  min-height: 28px;
}

@media (min-width: 480px) {
  .image-preview-overlay .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    min-width: 32px;
    min-height: 32px;
  }
}

@media (min-width: 768px) {
  .image-preview-overlay .btn-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    min-width: 36px;
    min-height: 36px;
  }
}

.image-preview-overlay .btn-icon:hover {
  background: #aa4a44;
  color: white;
  transform: scale(1.1);
}

.image-preview .upload-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border-light);
}

@media (min-width: 768px) {
  .image-preview .upload-progress {
    height: 4px;
  }
}

.image-preview .progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width 0.2s;
}

.image-preview.failed {
  border-color: #aa4a44;
}

.image-filename {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.55rem;
  padding: 2px 3px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .image-filename {
    font-size: 0.6rem;
    padding: 2px 4px;
  }
}

@media (min-width: 768px) {
  .image-filename {
    font-size: 0.65rem;
    padding: 2px 4px;
  }
}

@media (min-width: 1025px) {
  .image-filename {
    font-size: 0.7rem;
  }
}

.primary-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: var(--accent);
  color: white;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 0.55rem;
  font-weight: 600;
  z-index: 2;
}

@media (min-width: 480px) {
  .primary-badge {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: 0.6rem;
    border-radius: 16px;
  }
}

@media (min-width: 768px) {
  .primary-badge {
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    font-size: 0.65rem;
    border-radius: 20px;
  }
}

@media (min-width: 1025px) {
  .primary-badge {
    font-size: 0.7rem;
  }
}

/* ========================================================================
   SECTION 20: PORTFOLIO SECTION - FULLY RESPONSIVE
   ======================================================================== */

/* Portfolio Dashboard Container */
.portfolio-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .portfolio-dashboard {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .portfolio-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .portfolio-dashboard {
    padding: calc(var(--spacer) * 4);
  }
}

/* Portfolio Header */
.portfolio-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .portfolio-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 2.5);
    margin-bottom: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .portfolio-header {
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .portfolio-header {
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.portfolio-header h1 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-dark);
}

@media (min-width: 480px) {
  .portfolio-header h1 {
    font-size: 1.5rem;
  }
}

@media (min-width: 768px) {
  .portfolio-header h1 {
    font-size: 1.6rem;
  }
}

@media (min-width: 1025px) {
  .portfolio-header h1 {
    font-size: 1.8rem;
  }
}

.portfolio-header .btn-primary {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 3);
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
  width: 100%;
  justify-content: center;
  margin: 0;
}

@media (min-width: 480px) {
  .portfolio-header .btn-primary {
    width: auto;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3.5);
    font-size: 0.9rem;
    gap: calc(var(--spacer));
  }
}

@media (min-width: 768px) {
  .portfolio-header .btn-primary {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 4);
    font-size: 0.95rem;
    min-height: 48px;
  }
}

.portfolio-actions {
  display: flex;
  gap: calc(var(--spacer));
  width: 100%;
}

@media (min-width: 480px) {
  .portfolio-actions {
    gap: calc(var(--spacer) * 1.5);
    width: auto;
  }
}

@media (min-width: 768px) {
  .portfolio-actions {
    gap: calc(var(--spacer) * 2);
  }
}

.portfolio-actions .btn-outline {
  flex: 1;
  margin: 0;
}

@media (min-width: 480px) {
  .portfolio-actions .btn-outline {
    flex: none;
  }
}

/* Portfolio Stats Grid */
.portfolio-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 480px) {
  .portfolio-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
    margin-bottom: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .portfolio-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .portfolio-stats {
    gap: calc(var(--spacer) * 4);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.portfolio-stats .stat-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  transition: all 0.3s ease;
}

@media (min-width: 480px) {
  .portfolio-stats .stat-card {
    padding: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 2);
    border-radius: 16px;
  }
}

@media (min-width: 768px) {
  .portfolio-stats .stat-card {
    padding: calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 2);
    border-radius: 18px;
  }
}

@media (min-width: 1025px) {
  .portfolio-stats .stat-card {
    padding: calc(var(--spacer) * 3.5);
    gap: calc(var(--spacer) * 2.5);
    border-radius: 20px;
  }
}

.portfolio-stats .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.portfolio-stats .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .portfolio-stats .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .portfolio-stats .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 1.4rem;
  }
}

@media (min-width: 1025px) {
  .portfolio-stats .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.5rem;
  }
}

.portfolio-stats .stat-content {
  flex: 1;
  min-width: 0;
}

.portfolio-stats .stat-value {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .portfolio-stats .stat-value {
    font-size: 1.4rem;
  }
}

@media (min-width: 768px) {
  .portfolio-stats .stat-value {
    font-size: 1.6rem;
  }
}

@media (min-width: 1025px) {
  .portfolio-stats .stat-value {
    font-size: 1.8rem;
  }
}

.portfolio-stats .stat-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .portfolio-stats .stat-label {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .portfolio-stats .stat-label {
    font-size: 0.8rem;
  }
}

@media (min-width: 1025px) {
  .portfolio-stats .stat-label {
    font-size: 0.85rem;
  }
}

/* Portfolio Filters */
.portfolio-filters {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 3);
  background: var(--card-bg);
  padding: calc(var(--spacer) * 2);
  border-radius: 14px;
  box-shadow: var(--shadow);
  align-items: stretch;
}

@media (min-width: 480px) {
  .portfolio-filters {
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2.5);
    border-radius: 16px;
    margin-bottom: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .portfolio-filters {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 3);
    border-radius: 18px;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .portfolio-filters {
    gap: calc(var(--spacer) * 2.5);
    padding: calc(var(--spacer) * 4);
    border-radius: 20px;
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.portfolio-filters .search-box {
  width: 100%;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .portfolio-filters .search-box {
    width: auto;
  }
}

.portfolio-filters .filter-select {
  width: 100%;
}

@media (min-width: 768px) {
  .portfolio-filters .filter-select {
    width: auto;
  }
}

/* Portfolio Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .portfolio-grid {
    gap: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: calc(var(--spacer) * 4);
  }
}

/* Portfolio Card */
.portfolio-card {
  background: var(--card-bg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  position: relative;
}

@media (min-width: 480px) {
  .portfolio-card {
    border-radius: 18px;
  }
}

@media (min-width: 768px) {
  .portfolio-card {
    border-radius: 20px;
  }
}

@media (min-width: 1025px) {
  .portfolio-card {
    border-radius: 22px;
  }
}

@media (min-width: 1280px) {
  .portfolio-card {
    border-radius: 24px;
  }
}

.portfolio-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .portfolio-card:hover {
    transform: translateY(-4px);
  }
}

/* Card Media */
.portfolio-card-media {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: var(--bg);
}

@media (min-width: 480px) {
  .portfolio-card-media {
    height: 200px;
  }
}

@media (min-width: 768px) {
  .portfolio-card-media {
    height: 220px;
  }
}

@media (min-width: 1025px) {
  .portfolio-card-media {
    height: 240px;
  }
}

.portfolio-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.portfolio-card:hover .portfolio-card-media img {
  transform: scale(1.05);
}

/* Featured Badge */
.featured-badge {
  position: absolute;
  top: calc(var(--spacer));
  left: calc(var(--spacer));
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 600;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

@media (min-width: 480px) {
  .featured-badge {
    top: calc(var(--spacer) * 1.5);
    left: calc(var(--spacer) * 1.5);
    padding: 5px 10px;
    font-size: 0.65rem;
    gap: 5px;
  }
}

@media (min-width: 768px) {
  .featured-badge {
    top: calc(var(--spacer) * 2);
    left: calc(var(--spacer) * 2);
    padding: 6px 12px;
    font-size: 0.7rem;
    border-radius: 25px;
  }
}

@media (min-width: 1025px) {
  .featured-badge {
    font-size: 0.75rem;
  }
}

/* Card Actions (hover overlay) */
.portfolio-card-actions {
  position: absolute;
  top: calc(var(--spacer));
  right: calc(var(--spacer));
  display: flex;
  gap: calc(var(--spacer) * 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

@media (min-width: 480px) {
  .portfolio-card-actions {
    top: calc(var(--spacer) * 1.5);
    right: calc(var(--spacer) * 1.5);
    gap: calc(var(--spacer));
  }
}

@media (min-width: 768px) {
  .portfolio-card-actions {
    top: calc(var(--spacer) * 2);
    right: calc(var(--spacer) * 2);
    gap: calc(var(--spacer) * 1.5);
  }
}

.portfolio-card:hover .portfolio-card-actions {
  opacity: 1;
}

.portfolio-card-actions .btn-icon {
  background: white;
  color: var(--text-dark);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  min-width: 30px;
  min-height: 30px;
}

@media (min-width: 480px) {
  .portfolio-card-actions .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    min-width: 32px;
    min-height: 32px;
  }
}

@media (min-width: 768px) {
  .portfolio-card-actions .btn-icon {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
}

@media (min-width: 1025px) {
  .portfolio-card-actions .btn-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

.portfolio-card-actions .btn-icon:hover {
  background: var(--accent);
  color: white;
  transform: scale(1.1);
}

/* Card Content */
.portfolio-card-content {
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .portfolio-card-content {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .portfolio-card-content {
    padding: calc(var(--spacer) * 3);
  }
}

.portfolio-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 0.8);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .portfolio-title {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacer));
  }
}

@media (min-width: 768px) {
  .portfolio-title {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer) * 1.2);
  }
}

.portfolio-description {
  color: var(--text-soft);
  font-size: 0.8rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 480px) {
  .portfolio-description {
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacer) * 1.8);
  }
}

@media (min-width: 768px) {
  .portfolio-description {
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 1025px) {
  .portfolio-description {
    font-size: 0.95rem;
  }
}

/* Portfolio Meta */
.portfolio-meta {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 1.5);
  font-size: 0.75rem;
  color: var(--text-soft);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .portfolio-meta {
    gap: calc(var(--spacer) * 2);
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .portfolio-meta {
    font-size: 0.85rem;
  }
}

.portfolio-category {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-light);
  color: var(--accent);
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 500;
}

@media (min-width: 480px) {
  .portfolio-category {
    padding: 4px 10px;
    font-size: 0.75rem;
    gap: 5px;
  }
}

@media (min-width: 768px) {
  .portfolio-category {
    padding: 5px 12px;
    font-size: 0.8rem;
    gap: 6px;
    border-radius: 25px;
  }
}

@media (min-width: 1025px) {
  .portfolio-category {
    font-size: 0.85rem;
  }
}

.portfolio-category i {
  font-size: 0.65rem;
}

@media (min-width: 768px) {
  .portfolio-category i {
    font-size: 0.7rem;
  }
}

.portfolio-date {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--text-soft);
  font-size: 0.7rem;
}

@media (min-width: 480px) {
  .portfolio-date {
    font-size: 0.75rem;
    gap: 4px;
  }
}

@media (min-width: 768px) {
  .portfolio-date {
    font-size: 0.8rem;
  }
}

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

@media (min-width: 768px) {
  .portfolio-date i {
    font-size: 0.75rem;
  }
}

/* Portfolio Stats Row */
.portfolio-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--spacer) * 0.5);
  margin: calc(var(--spacer) * 1.5) 0;
  padding: calc(var(--spacer) * 1.5) 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 480px) {
  .portfolio-stats-row {
    gap: calc(var(--spacer));
    margin: calc(var(--spacer) * 2) 0;
    padding: calc(var(--spacer) * 2) 0;
  }
}

.stat-item-small {
  text-align: center;
}

.stat-item-small .stat-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  display: block;
  margin-bottom: 2px;
}

@media (min-width: 480px) {
  .stat-item-small .stat-value {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  .stat-item-small .stat-value {
    font-size: 1.1rem;
  }
}

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

@media (min-width: 480px) {
  .stat-item-small .stat-label {
    font-size: 0.65rem;
  }
}

@media (min-width: 768px) {
  .stat-item-small .stat-label {
    font-size: 0.7rem;
  }
}

/* Portfolio Tags */
.portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.5);
  margin: calc(var(--spacer) * 1.5) 0;
}

@media (min-width: 480px) {
  .portfolio-tags {
    gap: calc(var(--spacer));
    margin: calc(var(--spacer) * 2) 0;
  }
}

.portfolio-tag {
  background: var(--bg);
  color: var(--text-soft);
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 500;
  transition: all 0.2s;
}

@media (min-width: 480px) {
  .portfolio-tag {
    padding: 4px 10px;
    font-size: 0.65rem;
  }
}

@media (min-width: 768px) {
  .portfolio-tag {
    padding: 4px 12px;
    font-size: 0.7rem;
  }
}

@media (min-width: 1025px) {
  .portfolio-tag {
    font-size: 0.75rem;
  }
}

.portfolio-tag:hover {
  background: var(--accent-light);
  color: var(--accent);
}

.portfolio-tag.more {
  background: var(--accent);
  color: white;
}

/* Card Footer */
.portfolio-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: calc(var(--spacer) * 1.5);
  padding-top: calc(var(--spacer) * 1.5);
  border-top: 1px solid var(--border-light);
}

@media (min-width: 480px) {
  .portfolio-card-footer {
    margin-top: calc(var(--spacer) * 2);
    padding-top: calc(var(--spacer) * 2);
  }
}

.portfolio-likes {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-soft);
  font-size: 0.75rem;
}

@media (min-width: 480px) {
  .portfolio-likes {
    gap: 5px;
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .portfolio-likes {
    gap: 6px;
    font-size: 0.85rem;
  }
}

.portfolio-likes i {
  color: #ef4444;
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .portfolio-likes i {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .portfolio-likes i {
    font-size: 1rem;
  }
}

.portfolio-likes i.far {
  color: var(--text-soft);
}

.portfolio-views {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-soft);
  font-size: 0.75rem;
}

@media (min-width: 480px) {
  .portfolio-views {
    gap: 5px;
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .portfolio-views {
    gap: 6px;
    font-size: 0.85rem;
  }
}

.portfolio-views i {
  color: var(--accent);
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .portfolio-views i {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .portfolio-views i {
    font-size: 1rem;
  }
}

/* Empty Portfolio State */
.empty-portfolio {
  text-align: center;
  padding: calc(var(--spacer) * 4);
  background: var(--card-bg);
  border-radius: 18px;
  grid-column: 1 / -1;
}

@media (min-width: 480px) {
  .empty-portfolio {
    padding: calc(var(--spacer) * 5);
    border-radius: 20px;
  }
}

@media (min-width: 768px) {
  .empty-portfolio {
    padding: calc(var(--spacer) * 6);
    border-radius: 22px;
  }
}

@media (min-width: 1025px) {
  .empty-portfolio {
    padding: calc(var(--spacer) * 8);
    border-radius: 24px;
  }
}

.empty-illustration i {
  font-size: 3rem;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .empty-illustration i {
    font-size: 3.5rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .empty-illustration i {
    font-size: 4rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .empty-illustration i {
    font-size: 5rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.empty-portfolio h3 {
  font-size: 1.2rem;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .empty-portfolio h3 {
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .empty-portfolio h3 {
    font-size: 1.4rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 1025px) {
  .empty-portfolio h3 {
    font-size: 1.5rem;
  }
}

.empty-portfolio p {
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 2);
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .empty-portfolio p {
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .empty-portfolio p {
    font-size: 0.95rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .empty-portfolio p {
    font-size: 1rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.empty-portfolio .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3);
  border-radius: 30px;
  font-size: 0.85rem;
  width: auto;
  margin: 0 auto;
}

@media (min-width: 480px) {
  .empty-portfolio .btn-primary {
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 3.5);
    font-size: 0.9rem;
    gap: calc(var(--spacer));
  }
}

@media (min-width: 768px) {
  .empty-portfolio .btn-primary {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 4);
    font-size: 0.95rem;
  }
}

/* No Results State */
.no-results {
  text-align: center;
  padding: calc(var(--spacer) * 4);
  background: var(--card-bg);
  border-radius: 18px;
  grid-column: 1 / -1;
}

@media (min-width: 480px) {
  .no-results {
    padding: calc(var(--spacer) * 5);
    border-radius: 20px;
  }
}

@media (min-width: 768px) {
  .no-results {
    padding: calc(var(--spacer) * 6);
    border-radius: 22px;
  }
}

@media (min-width: 1025px) {
  .no-results {
    padding: calc(var(--spacer) * 8);
    border-radius: 24px;
  }
}

.no-results i {
  font-size: 2.5rem;
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 1.5);
  opacity: 0.5;
}

@media (min-width: 480px) {
  .no-results i {
    font-size: 2.8rem;
  }
}

@media (min-width: 768px) {
  .no-results i {
    font-size: 3rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

/* Mobile touch optimizations */
@media (max-width: 480px) {
  .portfolio-card-actions {
    opacity: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
    padding: calc(var(--spacer));
    right: 0;
    top: 0;
    width: 100%;
    justify-content: flex-end;
  }

  .portfolio-card-actions .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.9);
  }

  .filter-group .btn-outline,
  .filter-actions .btn-outline,
  .section-header .btn-primary {
    min-height: 48px;
  }

  .search-box input,
  .filter-select,
  .filter-search {
    min-height: 48px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* ========================================================================
   PORTFOLIO DASHBOARD - BUTTONS OUTSIDE CARD
   ======================================================================== */

.portfolio-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 3);
}

@media (min-width: 768px) {
  .portfolio-dashboard {
    padding: calc(var(--spacer) * 4);
  }
}

/* Portfolio Header */
.portfolio-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: calc(var(--spacer) * 4);
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 640px) {
  .portfolio-header {
    flex-direction: row;
    align-items: center;
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.portfolio-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 0.5);
}

@media (min-width: 768px) {
  .portfolio-header h1 {
    font-size: 1.8rem;
  }
}

.portfolio-header .page-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
}

.portfolio-actions {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
}

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

.portfolio-actions .btn-outline,
.portfolio-actions .btn-primary {
  flex: 1;
  min-height: 44px;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  font-size: 0.9rem;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .portfolio-actions .btn-outline,
  .portfolio-actions .btn-primary {
    flex: 0 1 auto;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
  }
}

/* ========================================================================
   PORTFOLIO FORM MODAL - BUTTONS OUTSIDE CARD
   ======================================================================== */

/* Portfolio Modal Content */
.portfolio-modal {
  background: var(--card-bg);
  border-radius: 24px;
  width: 95%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-hover);
  animation: slideUp 0.3s ease;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .portfolio-modal {
    width: 90%;
    border-radius: 32px;
  }
}

/* Modal Header */
.portfolio-modal .modal-header {
  padding: calc(var(--spacer) * 2);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card-bg);
  border-radius: 24px 24px 0 0;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .portfolio-modal .modal-header {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .portfolio-modal .modal-header {
    padding: calc(var(--spacer) * 3);
  }
}

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

@media (min-width: 768px) {
  .portfolio-modal .modal-header h3 {
    font-size: 1.4rem;
  }
}

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

.portfolio-modal .modal-close:hover {
  background: var(--bg);
  color: var(--text-dark);
}

/* Modal Body - Scrollable Content */
.portfolio-modal .modal-body {
  padding: calc(var(--spacer) * 2);
  overflow-y: auto;
  flex: 1;
}

@media (min-width: 480px) {
  .portfolio-modal .modal-body {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .portfolio-modal .modal-body {
    padding: calc(var(--spacer) * 3);
  }
}

/* Form Tabs */
.form-tabs {
  display: flex;
  gap: calc(var(--spacer) * 0.5);
  margin-bottom: calc(var(--spacer) * 2);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: calc(var(--spacer) * 1.5);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
  .form-tabs {
    gap: calc(var(--spacer));
    margin-bottom: calc(var(--spacer) * 3);
    padding-bottom: calc(var(--spacer) * 2);
    overflow-x: visible;
    flex-wrap: wrap;
  }
}

.form-tabs .tab-btn {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 30px;
  transition: all 0.2s;
  min-height: 40px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .form-tabs .tab-btn {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
    font-size: 0.95rem;
  }
}

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

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

/* Tab Panes */
.tab-pane {
  animation: fadeIn 0.3s ease;
}

/* Form Groups */
.portfolio-form .form-group {
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .portfolio-form .form-group {
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

.portfolio-form label {
  display: block;
  margin-bottom: calc(var(--spacer) * 0.8);
  font-weight: 500;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.portfolio-form .form-control {
  width: 100%;
  padding: calc(var(--spacer) * 1.5);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 0.9rem;
  transition: all 0.2s;
  background: var(--bg);
  min-height: 44px;
}

@media (min-width: 768px) {
  .portfolio-form .form-control {
    padding: calc(var(--spacer) * 2);
    font-size: 0.95rem;
    min-height: 48px;
  }
}

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

/* Form Row */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacer) * 2);
  }
}

/* Upload Area */
.upload-area {
  border: 2px dashed var(--border-light);
  border-radius: 16px;
  padding: calc(var(--spacer) * 3);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg);
}

.upload-area:hover {
  border-color: var(--accent);
  background: var(--bg);
}

.upload-area i {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: calc(var(--spacer));
}

.upload-area p {
  margin-bottom: calc(var(--spacer) * 0.5);
  color: var(--text-dark);
}

.upload-area small {
  color: var(--text-soft);
  font-size: 0.8rem;
}

/* Image Preview Grid */
.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: calc(var(--spacer) * 1.5);
  margin-top: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .image-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

.image-preview {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--border-light);
}

.image-preview.primary {
  border-color: var(--accent);
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.image-preview:hover .image-preview-overlay {
  opacity: 1;
}

.image-preview-overlay .btn-icon {
  background: white;
  color: var(--text-dark);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Skills Grid */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--spacer));
  max-height: 250px;
  overflow-y: auto;
  padding: calc(var(--spacer));
  background: var(--bg);
  border-radius: 12px;
}

@media (min-width: 480px) {
  .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .skills-grid {
    grid-template-columns: repeat(4, 1fr);
    max-height: 300px;
  }
}

.skill-checkbox {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.8);
  padding: calc(var(--spacer) * 0.8);
  background: var(--card-bg);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.skill-checkbox:hover {
  background: var(--bg);
}

.skill-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.skill-checkbox span {
  font-size: 0.8rem;
  color: var(--text-dark);
}

/* Tags Input */
.tags-input {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: calc(var(--spacer));
  background: var(--bg);
}

.tags-input input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: calc(var(--spacer) * 0.5);
  font-size: 0.9rem;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.8);
  margin-top: calc(var(--spacer));
}

.tag-item {
  background: var(--accent-light);
  color: var(--text-dark);
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag-item i {
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--text-soft);
}

.tag-item i:hover {
  color: var(--danger);
}

/* ========================================================================
   MODAL FOOTER - BUTTONS OUTSIDE CARD
   ======================================================================== */

.portfolio-modal .modal-footer {
  padding: calc(var(--spacer) * 2);
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
  background: var(--bg);
  border-radius: 0 0 24px 24px;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.02);
}

@media (min-width: 480px) {
  .portfolio-modal .modal-footer {
    flex-direction: row;
    justify-content: flex-end;
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .portfolio-modal .modal-footer {
    padding: calc(var(--spacer) * 3);
    border-radius: 0 0 32px 32px;
  }
}

/* Footer Buttons */
.portfolio-modal .modal-footer .btn-outline,
.portfolio-modal .modal-footer .btn-primary {
  width: 100%;
  min-height: 48px;
  padding: calc(var(--spacer) * 1.5);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer));
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
  margin: 0;
}

@media (min-width: 480px) {
  .portfolio-modal .modal-footer .btn-outline,
  .portfolio-modal .modal-footer .btn-primary {
    width: auto;
    min-width: 120px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .portfolio-modal .modal-footer .btn-outline,
  .portfolio-modal .modal-footer .btn-primary {
    min-width: 140px;
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 4);
    font-size: 1rem;
  }
}

/* Cancel Button */
.portfolio-modal .modal-footer .btn-outline {
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-dark);
}

.portfolio-modal .modal-footer .btn-outline:hover {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

@media (min-width: 768px) {
  .portfolio-modal .modal-footer .btn-outline:hover {
    transform: translateY(-2px);
  }
}

/* Save Project Button */
.portfolio-modal .modal-footer .btn-primary {
  background: var(--accent);
  color: white;
}

.portfolio-modal .modal-footer .btn-primary:hover {
  background: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

@media (min-width: 768px) {
  .portfolio-modal .modal-footer .btn-primary:hover {
    transform: translateY(-2px);
  }
}

/* Button loading state */
.portfolio-modal .modal-footer .btn-primary:disabled,
.portfolio-modal .modal-footer .btn-outline:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.portfolio-modal .modal-footer .btn-primary .fa-spinner,
.portfolio-modal .modal-footer .btn-outline .fa-spinner {
  animation: spin 1s linear infinite;
}

/* Mobile specific button layout */
@media (max-width: 479px) {
  .portfolio-modal .modal-footer {
    padding: calc(var(--spacer) * 1.5);
    gap: calc(var(--spacer) * 1.2);
  }

  .portfolio-modal .modal-footer .btn-outline,
  .portfolio-modal .modal-footer .btn-primary {
    min-height: 52px;
    font-size: 1rem;
    padding: calc(var(--spacer) * 1.5);
    width: 100%;
  }

  /* Make buttons stack with good spacing */
  .portfolio-modal .modal-footer {
    flex-direction: column-reverse;
  }

  /* Add some visual separation */
  .portfolio-modal .modal-footer .btn-outline {
    margin-bottom: 0;
  }
}

/* Very small screens */
@media (max-width: 359px) {
  .portfolio-modal .modal-footer .btn-outline,
  .portfolio-modal .modal-footer .btn-primary {
    min-height: 48px;
    font-size: 0.9rem;
    padding: calc(var(--spacer) * 1.2);
  }
}

/* Tablet specific adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
  .portfolio-modal .modal-footer .btn-outline,
  .portfolio-modal .modal-footer .btn-primary {
    min-width: 130px;
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 3);
  }
}

/* Active states for mobile */
.portfolio-modal .modal-footer .btn-outline:active,
.portfolio-modal .modal-footer .btn-primary:active {
  transform: scale(0.98);
}

/* Focus states for accessibility */
.portfolio-modal .modal-footer .btn-outline:focus-visible,
.portfolio-modal .modal-footer .btn-primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Animation for modal */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ========================================================================
   MEDIA TIP STYLES
   ======================================================================== */

.media-tip {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  background: #fef3e2;
  color: #b45309;
  padding: calc(var(--spacer) * 1.5);
  border-radius: 12px;
  margin-top: calc(var(--spacer) * 2);
  font-size: 0.85rem;
}

.media-tip i {
  font-size: 1rem;
  color: #b45309;
}

/* ========================================================================
   EMPTY PORTFOLIO STATE
   ======================================================================== */

.empty-portfolio {
  text-align: center;
  padding: calc(var(--spacer) * 6);
  background: var(--card-bg);
  border-radius: 24px;
  grid-column: 1 / -1;
}

.empty-portfolio i {
  font-size: 4rem;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: calc(var(--spacer) * 2);
}

.empty-portfolio h3 {
  font-size: 1.3rem;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer));
}

.empty-portfolio p {
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 2);
}

.empty-portfolio .btn-primary {
  display: inline-flex;
  min-height: 44px;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3);
}

/* ========================================================================
   SECTION 21: PROFILE & SETTINGS - FULLY RESPONSIVE
   ======================================================================== */

.profile-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .profile-dashboard {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .profile-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .profile-dashboard {
    padding: calc(var(--spacer) * 4);
  }
}

.profile-header {
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 480px) {
  .profile-header {
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 768px) {
  .profile-header {
    margin-bottom: calc(var(--spacer) * 5);
  }
}

/* Profile Tabs - Responsive */
.profile-tabs {
  display: flex;
  gap: calc(var(--spacer) * 0.5);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: calc(var(--spacer) * 2.5);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

@media (min-width: 480px) {
  .profile-tabs {
    gap: calc(var(--spacer));
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .profile-tabs {
    gap: calc(var(--spacer) * 1.5);
    margin-bottom: calc(var(--spacer) * 4);
    overflow-x: visible;
    flex-wrap: wrap;
  }
}

@media (min-width: 1025px) {
  .profile-tabs {
    gap: calc(var(--spacer) * 2);
  }
}

.profile-tabs .tab-btn {
  background: none;
  border: none;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  color: var(--text-soft);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: all 0.2s;
  min-height: 40px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  border-radius: 30px;
}

@media (min-width: 480px) {
  .profile-tabs .tab-btn {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
    font-size: 0.85rem;
    min-height: 42px;
  }
}

@media (min-width: 768px) {
  .profile-tabs .tab-btn {
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 2.5);
    font-size: 0.9rem;
    min-height: 44px;
  }
}

@media (min-width: 1025px) {
  .profile-tabs .tab-btn {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
    font-size: 0.95rem;
  }
}

.profile-tabs .tab-btn i {
  margin-right: calc(var(--spacer) * 0.5);
  font-size: 0.9rem;
}

@media (min-width: 480px) {
  .profile-tabs .tab-btn i {
    margin-right: calc(var(--spacer) * 0.8);
    font-size: 0.95rem;
  }
}

@media (min-width: 768px) {
  .profile-tabs .tab-btn i {
    margin-right: calc(var(--spacer));
    font-size: 1rem;
  }
}

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

.profile-tabs .tab-btn.active {
  color: var(--accent);
  background: rgba(183, 140, 90, 0.1);
}

.profile-tabs .tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  display: none;
}

@media (min-width: 768px) {
  .profile-tabs .tab-btn.active::after {
    display: block;
  }
}

.profile-content {
  animation: fadeIn 0.3s ease;
}

/* Profile Card */
.profile-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: calc(var(--spacer) * 2.5);
  box-shadow: var(--shadow);
  margin-bottom: calc(var(--spacer) * 3);
  width: 100%;
  overflow: hidden;
}

@media (min-width: 480px) {
  .profile-card {
    padding: calc(var(--spacer) * 3);
    border-radius: 20px;
    margin-bottom: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .profile-card {
    padding: calc(var(--spacer) * 4);
    border-radius: 22px;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .profile-card {
    padding: calc(var(--spacer) * 5);
    border-radius: 24px;
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.profile-card-header {
  margin-bottom: calc(var(--spacer) * 2.5);
}

@media (min-width: 480px) {
  .profile-card-header {
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .profile-card-header {
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.profile-card-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 0.5);
}

@media (min-width: 480px) {
  .profile-card-header h2 {
    font-size: 1.2rem;
  }
}

@media (min-width: 768px) {
  .profile-card-header h2 {
    font-size: 1.3rem;
    margin-bottom: calc(var(--spacer));
  }
}

.profile-card-header p {
  color: var(--text-soft);
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .profile-card-header p {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .profile-card-header p {
    font-size: 0.95rem;
  }
}

/* Profile Form */
.profile-form {
  max-width: 800px;
  width: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .form-row {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .form-row {
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.form-group {
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .form-group {
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .form-group {
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

.form-group label {
  display: block;
  margin-bottom: calc(var(--spacer) * 0.5);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-dark);
}

@media (min-width: 480px) {
  .form-group label {
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacer) * 0.8);
  }
}

@media (min-width: 768px) {
  .form-group label {
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacer));
  }
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: calc(var(--spacer) * 1.2);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  transition: all 0.2s ease;
  min-height: 44px;
  background: var(--bg);
}

@media (min-width: 480px) {
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: calc(var(--spacer) * 1.5);
    font-size: 0.9rem;
    min-height: 48px;
  }
}

@media (min-width: 768px) {
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: calc(var(--spacer) * 1.8);
    font-size: 0.95rem;
    border-radius: 14px;
  }
}

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

.form-group textarea {
  min-height: 80px;
  resize: vertical;
}

@media (min-width: 768px) {
  .form-group textarea {
    min-height: 100px;
  }
}

.form-divider {
  height: 1px;
  background: var(--border-light);
  margin: calc(var(--spacer) * 2.5) 0 calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .form-divider {
    margin: calc(var(--spacer) * 3) 0 calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .form-divider {
    margin: calc(var(--spacer) * 4) 0 calc(var(--spacer) * 2.5);
  }
}

.section-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .section-subtitle {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .section-subtitle {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.field-hint {
  display: block;
  font-size: 0.7rem;
  color: var(--text-soft);
  margin-top: 4px;
}

@media (min-width: 480px) {
  .field-hint {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .field-hint {
    font-size: 0.8rem;
  }
}

.input-disabled {
  background: var(--bg) !important;
  color: var(--text-soft) !important;
  cursor: not-allowed;
  opacity: 0.7;
}

.message-alert {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  border-radius: 10px;
  margin-bottom: calc(var(--spacer) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  font-size: 0.85rem;
}

@media (min-width: 480px) {
  .message-alert {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2.5);
    border-radius: 12px;
    margin-bottom: calc(var(--spacer) * 2.5);
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .message-alert {
    padding: calc(var(--spacer) * 2.5) calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 3);
    font-size: 0.95rem;
  }
}

.message-alert.success {
  background: #e3f2e9;
  color: #2f6e4a;
  border: 1px solid #2f6e4a;
}

.message-alert.error {
  background: #fbe9e7;
  color: #aa4a44;
  border: 1px solid #aa4a44;
}

.message-alert i {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .message-alert i {
    font-size: 1.2rem;
  }
}

/* Avatar Preview */
.avatar-preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid var(--border-light);
  transition: all 0.2s ease;
}

.avatar-preview:hover {
  border-color: var(--accent);
  transform: scale(1.02);
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.avatar-preview.fallback .avatar-fallback {
  display: flex;
}

.avatar-preview.fallback img {
  display: none;
}

.avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  font-size: 3rem;
  font-weight: 500;
  border-radius: 50%;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.avatar-preview:hover .avatar-overlay {
  opacity: 1;
}

.avatar-overlay i {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.avatar-overlay span {
  font-size: 0.7rem;
  font-weight: 500;
}

@media (min-width: 480px) {
  .avatar-preview {
    width: 110px;
    height: 110px;
  }
}

@media (min-width: 768px) {
  .avatar-preview {
    width: 120px;
    height: 120px;
    border-width: 3px;
  }
}

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

.avatar-preview.fallback img {
  display: none;
}

.avatar-fallback {
  display: none;
  color: white;
  font-size: 2.5rem;
  font-weight: 600;
  text-transform: uppercase;
}

@media (min-width: 480px) {
  .avatar-fallback {
    font-size: 2.8rem;
  }
}

@media (min-width: 768px) {
  .avatar-fallback {
    font-size: 3rem;
  }
}

.avatar-preview.fallback .avatar-fallback {
  display: block;
}

/* Profile Avatar Section */
.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  margin: calc(var(--spacer) * 2.5) 0;
  padding: calc(var(--spacer) * 2);
  background: var(--bg);
  border-radius: 16px;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .profile-avatar-section {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacer) * 3);
    padding: calc(var(--spacer) * 2.5);
    margin: calc(var(--spacer) * 3) 0;
  }
}

@media (min-width: 768px) {
  .profile-avatar-section {
    gap: calc(var(--spacer) * 4);
    padding: calc(var(--spacer) * 3);
    margin: calc(var(--spacer) * 4) 0;
    border-radius: 18px;
  }
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  gap: 4px;
  border-radius: 50%;
}

.avatar-preview:hover .avatar-overlay {
  opacity: 1;
}

.avatar-overlay i {
  font-size: 1.2rem;
}

@media (min-width: 768px) {
  .avatar-overlay i {
    font-size: 1.5rem;
  }
}

.avatar-overlay span {
  font-size: 0.7rem;
}

@media (min-width: 768px) {
  .avatar-overlay span {
    font-size: 0.8rem;
  }
}

.avatar-info {
  text-align: center;
}

@media (min-width: 480px) {
  .avatar-info {
    text-align: left;
  }
}

.avatar-info h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
}

@media (min-width: 768px) {
  .avatar-info h4 {
    font-size: 1rem;
  }
}

.avatar-info p {
  color: var(--text-soft);
  font-size: 0.8rem;
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .avatar-info p {
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacer) * 1.8);
  }
}

@media (min-width: 768px) {
  .avatar-info p {
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

/* Password Requirements */
.password-requirements {
  background: var(--bg);
  border-radius: 14px;
  padding: calc(var(--spacer) * 2);
  margin: calc(var(--spacer) * 2) 0;
}

@media (min-width: 480px) {
  .password-requirements {
    padding: calc(var(--spacer) * 2.5);
    margin: calc(var(--spacer) * 2.5) 0;
    border-radius: 16px;
  }
}

@media (min-width: 768px) {
  .password-requirements {
    padding: calc(var(--spacer) * 3);
    margin: calc(var(--spacer) * 3) 0;
  }
}

.password-requirements p {
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.5);
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .password-requirements p {
    font-size: 0.95rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.password-requirements ul {
  list-style: none;
  padding: 0;
}

.password-requirements li {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.8);
  margin-bottom: calc(var(--spacer) * 0.8);
  font-size: 0.8rem;
}

@media (min-width: 480px) {
  .password-requirements li {
    gap: calc(var(--spacer));
    margin-bottom: calc(var(--spacer));
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .password-requirements li {
    font-size: 0.9rem;
  }
}

.password-requirements li.valid {
  color: #10b981;
}

.password-requirements li.invalid {
  color: var(--text-soft);
}

.password-requirements li i {
  width: 16px;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .password-requirements li i {
    width: 18px;
    font-size: 0.9rem;
  }
}

/* Password Strength Meter */
.password-strength {
  margin-top: calc(var(--spacer));
}

.strength-meter {
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.strength-fill {
  height: 100%;
  transition:
    width 0.3s,
    background-color 0.3s;
}

.strength-fill.weak {
  background: #ef4444;
}

.strength-fill.medium {
  background: #f59e0b;
}

.strength-fill.strong {
  background: #10b981;
}

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

@media (min-width: 480px) {
  .strength-text {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .strength-text {
    font-size: 0.8rem;
  }
}

/* Form Actions */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
  margin-top: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .form-actions {
    flex-direction: row;
    gap: calc(var(--spacer) * 1.5);
    margin-top: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .form-actions {
    gap: calc(var(--spacer) * 2);
    margin-top: calc(var(--spacer) * 3);
  }
}

.form-actions .btn-primary,
.form-actions .btn-outline {
  width: 100%;
  margin: 0;
}

@media (min-width: 480px) {
  .form-actions .btn-primary,
  .form-actions .btn-outline {
    width: auto;
    min-width: 140px;
  }
}

/* Two Factor Status */
.two-factor-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer));
  margin: calc(var(--spacer) * 2) 0;
}

@media (min-width: 480px) {
  .two-factor-status {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .two-factor-status {
    gap: calc(var(--spacer) * 2);
    margin: calc(var(--spacer) * 2.5) 0;
  }
}

.two-factor-status .status-badge {
  padding: 4px 12px;
  font-size: 0.75rem;
}

@media (min-width: 768px) {
  .two-factor-status .status-badge {
    padding: 6px 16px;
    font-size: 0.8rem;
  }
}

/* Sessions List */
.sessions-list {
  margin: calc(var(--spacer) * 2) 0;
}

.session-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 12px;
  margin-bottom: calc(var(--spacer));
  flex-wrap: wrap;
  gap: calc(var(--spacer));
}

@media (min-width: 480px) {
  .session-item {
    padding: calc(var(--spacer) * 2);
    border-radius: 14px;
  }
}

@media (min-width: 768px) {
  .session-item {
    padding: calc(var(--spacer) * 2.5);
    border-radius: 16px;
    flex-wrap: nowrap;
  }
}

.session-info {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  flex: 1;
  min-width: 200px;
}

.session-info i {
  font-size: 1.2rem;
  color: var(--accent);
  width: 24px;
}

@media (min-width: 768px) {
  .session-info i {
    font-size: 1.4rem;
  }
}

.device-name {
  display: block;
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .device-name {
    font-size: 0.9rem;
  }
}

.device-location {
  display: block;
  font-size: 0.7rem;
  color: var(--text-soft);
}

@media (min-width: 768px) {
  .device-location {
    font-size: 0.75rem;
  }
}

.session-status {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 500;
  background: #e3f2e9;
  color: #2f6e4a;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .session-status {
    padding: 4px 12px;
    font-size: 0.7rem;
  }
}

/* ========================================================================
   PROFILE SETTINGS SECTION - FULLY RESPONSIVE
   ======================================================================== */

.profile-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .profile-dashboard {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .profile-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .profile-dashboard {
    padding: calc(var(--spacer) * 4);
  }
}

/* Profile Header */
.profile-header {
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 480px) {
  .profile-header {
    margin-bottom: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .profile-header {
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 1025px) {
  .profile-header {
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.profile-header .page-title {
  font-size: 1.4rem;
  margin-bottom: calc(var(--spacer) * 0.8);
  line-height: 1.2;
  word-break: break-word;
}

@media (min-width: 480px) {
  .profile-header .page-title {
    font-size: 1.6rem;
  }
}

@media (min-width: 768px) {
  .profile-header .page-title {
    font-size: 1.8rem;
    margin-bottom: calc(var(--spacer));
  }
}

@media (min-width: 1025px) {
  .profile-header .page-title {
    font-size: 2rem;
  }
}

.profile-header .page-subtitle {
  color: var(--text-soft);
  font-size: 0.85rem;
  line-height: 1.5;
  word-break: break-word;
  max-width: 600px;
}

@media (min-width: 480px) {
  .profile-header .page-subtitle {
    font-size: 0.9rem;
  }
}

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

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

/* Profile Tabs - Responsive */
.profile-tabs {
  display: flex;
  gap: calc(var(--spacer) * 0.5);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: calc(var(--spacer) * 2);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .profile-tabs {
    gap: calc(var(--spacer) * 0.8);
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 640px) {
  .profile-tabs {
    gap: calc(var(--spacer));
    overflow-x: visible;
    flex-wrap: wrap;
    white-space: normal;
  }
}

@media (min-width: 768px) {
  .profile-tabs {
    gap: calc(var(--spacer) * 1.5);
    margin-bottom: calc(var(--spacer) * 3);
  }
}

/* Hide scrollbar for cleaner look */
.profile-tabs::-webkit-scrollbar {
  height: 2px;
}

.profile-tabs::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 2px;
}

.profile-tabs::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 2px;
}

.profile-tabs .tab-btn {
  background: none;
  border: none;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  color: var(--text-soft);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: all 0.2s;
  min-height: 44px;
  font-size: 0.85rem;
  flex-shrink: 0;
  border-radius: 30px;
}

@media (min-width: 480px) {
  .profile-tabs .tab-btn {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
    font-size: 0.9rem;
  }
}

@media (min-width: 640px) {
  .profile-tabs .tab-btn {
    flex-shrink: 1;
    white-space: normal;
    word-break: break-word;
  }
}

@media (min-width: 768px) {
  .profile-tabs .tab-btn {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.95rem;
    min-height: 48px;
  }
}

.profile-tabs .tab-btn i {
  margin-right: calc(var(--spacer) * 0.5);
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .profile-tabs .tab-btn i {
    margin-right: calc(var(--spacer) * 0.8);
    font-size: 1rem;
  }
}

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

.profile-tabs .tab-btn.active {
  color: var(--accent);
  background: #f2ebe3;
}

/* Tab Content */
.profile-content {
  animation: fadeIn 0.3s ease;
  min-height: 400px;
}

.profile-card-header {
  margin-bottom: calc(var(--spacer) * 2);
  padding-top: 20px;
}

@media (min-width: 480px) {
  .profile-card-header {
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .profile-card-header {
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.profile-card-header h2 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 0.5);
  word-break: break-word;
}

@media (min-width: 480px) {
  .profile-card-header h2 {
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .profile-card-header h2 {
    font-size: 1.4rem;
    margin-bottom: calc(var(--spacer) * 0.8);
  }
}

.profile-card-header p {
  color: var(--text-soft);
  font-size: 0.85rem;
  line-height: 1.5;
  word-break: break-word;
  text-align: center;
}

@media (min-width: 480px) {
  .profile-card-header p {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .profile-card-header p {
    font-size: 0.95rem;
  }
}

/* Profile Form */
.profile-form {
  max-width: 800px;
  width: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .form-row {
    gap: calc(var(--spacer) * 2);
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .form-row {
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

.form-group {
  margin-bottom: calc(var(--spacer) * 1.5);
  width: 100%;
}

@media (min-width: 480px) {
  .form-group {
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .form-group {
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

.form-group label {
  display: block;
  margin-bottom: calc(var(--spacer) * 0.8);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dark);
  word-break: break-word;
}

@media (min-width: 480px) {
  .form-group label {
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacer));
  }
}

@media (min-width: 768px) {
  .form-group label {
    font-size: 0.95rem;
  }
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  transition: all 0.2s ease;
  min-height: 44px;
  background: var(--bg);
  color: var(--text-dark);
  box-sizing: border-box;
}

@media (min-width: 480px) {
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
    font-size: 0.9rem;
    min-height: 48px;
  }
}

@media (min-width: 768px) {
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 2.5);
    font-size: 0.95rem;
    border-radius: 14px;
  }
}

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

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
  font-size: 0.8rem;
}

.form-group textarea {
  min-height: 80px;
  resize: vertical;
}

@media (min-width: 480px) {
  .form-group textarea {
    min-height: 100px;
  }
}

@media (min-width: 768px) {
  .form-group textarea {
    min-height: 120px;
  }
}

.input-disabled,
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  background: var(--bg) !important;
  color: var(--text-soft) !important;
  cursor: not-allowed;
  opacity: 0.7;
}

.field-hint {
  display: block;
  font-size: 0.7rem;
  color: var(--text-soft);
  margin-top: 4px;
  word-break: break-word;
}

@media (min-width: 480px) {
  .field-hint {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .field-hint {
    font-size: 0.8rem;
  }
}

/* Form Actions */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
  margin-top: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .form-actions {
    flex-direction: row;
    gap: calc(var(--spacer) * 1.5);
    margin-top: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .form-actions {
    margin-top: calc(var(--spacer) * 3);
  }
}

.form-actions .btn-primary {
  min-width: 160px;
  width: 100%;
  margin: 0;
}

@media (min-width: 480px) {
  .form-actions .btn-primary {
    width: auto;
  }
}

/* Message Alerts */
.message-alert {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  border-radius: 12px;
  margin-bottom: calc(var(--spacer) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  font-size: 0.85rem;
  word-break: break-word;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .message-alert {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2.5);
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .message-alert {
    padding: calc(var(--spacer) * 2.5) calc(var(--spacer) * 3);
    font-size: 0.95rem;
  }
}

.message-alert.success {
  background: #e3f2e9;
  color: #2f6e4a;
  border: 1px solid #2f6e4a;
}

.message-alert.error {
  background: #fbe9e7;
  color: #aa4a44;
  border: 1px solid #aa4a44;
}

.message-alert i {
  font-size: 1.2rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .message-alert i {
    font-size: 1.4rem;
  }
}

/* ========================================================================
   AVATAR SECTION - FULLY RESPONSIVE
   ======================================================================== */

.profile-avatar-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  align-items: center;
  margin: calc(var(--spacer) * 2) 0;
  padding: calc(var(--spacer) * 2);
  background: var(--bg);
  border-radius: 16px;
  text-align: center;
}

@media (min-width: 480px) {
  .profile-avatar-section {
    flex-direction: row;
    gap: calc(var(--spacer) * 2.5);
    align-items: center;
    text-align: left;
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 640px) {
  .profile-avatar-section {
    gap: calc(var(--spacer) * 3);
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .profile-avatar-section {
    gap: calc(var(--spacer) * 4);
    padding: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 480px) {
  .avatar-preview {
    width: 110px;
    height: 110px;
  }
}

@media (min-width: 640px) {
  .avatar-preview {
    width: 120px;
    height: 120px;
  }
}

@media (min-width: 768px) {
  .avatar-preview {
    width: 130px;
    height: 130px;
  }
}

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

.avatar-fallback {
  display: none;
  color: white;
  font-size: 2.5rem;
  font-weight: 600;
  text-transform: uppercase;
}

@media (min-width: 480px) {
  .avatar-fallback {
    font-size: 2.8rem;
  }
}

@media (min-width: 640px) {
  .avatar-fallback {
    font-size: 3rem;
  }
}

.avatar-preview.fallback .avatar-fallback {
  display: block;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  gap: 2px;
  padding: calc(var(--spacer));
  text-align: center;
}

@media (min-width: 480px) {
  .avatar-overlay {
    gap: 4px;
  }
}

.avatar-preview:hover .avatar-overlay {
  opacity: 1;
}

.avatar-overlay i {
  font-size: 1.3rem;
}

@media (min-width: 480px) {
  .avatar-overlay i {
    font-size: 1.5rem;
  }
}

@media (min-width: 640px) {
  .avatar-overlay i {
    font-size: 1.8rem;
  }
}

.avatar-overlay span {
  font-size: 0.7rem;
  word-break: break-word;
}

@media (min-width: 480px) {
  .avatar-overlay span {
    font-size: 0.75rem;
  }
}

@media (min-width: 640px) {
  .avatar-overlay span {
    font-size: 0.8rem;
  }
}

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

.avatar-info h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
  word-break: break-word;
}

@media (min-width: 480px) {
  .avatar-info h4 {
    font-size: 1.1rem;
  }
}

@media (min-width: 640px) {
  .avatar-info h4 {
    font-size: 1.2rem;
  }
}

.avatar-info p {
  color: var(--text-soft);
  font-size: 0.8rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  line-height: 1.5;
  word-break: break-word;
}

@media (min-width: 480px) {
  .avatar-info p {
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 640px) {
  .avatar-info p {
    font-size: 0.9rem;
  }
}

.avatar-info .btn-outline,
.avatar-info .btn-text {
  margin-right: calc(var(--spacer));
  margin-bottom: calc(var(--spacer) * 0.5);
}

@media (max-width: 480px) {
  .avatar-info .btn-outline,
  .avatar-info .btn-text {
    width: 100%;
    margin-right: 0;
    text-align: center;
    justify-content: center;
  }
}

/* ========================================================================
   STATS GRID - FULLY RESPONSIVE
   ======================================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--spacer) * 1.5);
  margin: calc(var(--spacer) * 2) 0;
}

@media (min-width: 480px) {
  .stats-grid {
    gap: calc(var(--spacer) * 2);
    margin: calc(var(--spacer) * 2.5) 0;
  }
}

@media (min-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) {
  .stats-grid {
    gap: calc(var(--spacer) * 2.5);
    margin: calc(var(--spacer) * 3) 0;
  }
}

@media (min-width: 1025px) {
  .stats-grid {
    gap: calc(var(--spacer) * 3);
  }
}

.stat-item {
  background: var(--bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 1.5);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.2);
  transition: all 0.3s ease;
  min-width: 0;
}

@media (min-width: 480px) {
  .stat-item {
    padding: calc(var(--spacer) * 1.8);
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 640px) {
  .stat-item {
    padding: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .stat-item {
    border-radius: 18px;
    padding: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 2);
  }
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

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

@media (min-width: 480px) {
  .stat-icon {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
}

@media (min-width: 640px) {
  .stat-icon {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }
}

@media (min-width: 768px) {
  .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.5rem;
  }
}

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

.stat-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 2px;
  word-break: break-word;
}

@media (min-width: 480px) {
  .stat-value {
    font-size: 1.3rem;
  }
}

@media (min-width: 640px) {
  .stat-value {
    font-size: 1.4rem;
  }
}

@media (min-width: 768px) {
  .stat-value {
    font-size: 1.6rem;
  }
}

.stat-label {
  font-size: 0.65rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  word-break: break-word;
  line-height: 1.3;
}

@media (min-width: 480px) {
  .stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.4px;
  }
}

@media (min-width: 640px) {
  .stat-label {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .stat-label {
    font-size: 0.8rem;
  }
}

/* ========================================================================
   MEMBERSHIP CARD - FULLY RESPONSIVE
   ======================================================================== */

.membership-card {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  border-radius: 20px;
  padding: calc(var(--spacer) * 2);
  margin: calc(var(--spacer) * 2) 0;
  color: white;
  box-shadow: var(--shadow);
  width: 100%;
  overflow: hidden;
}

@media (min-width: 480px) {
  .membership-card {
    padding: calc(var(--spacer) * 2.5);
    border-radius: 22px;
    margin: calc(var(--spacer) * 2.5) 0;
  }
}

@media (min-width: 640px) {
  .membership-card {
    padding: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .membership-card {
    border-radius: 24px;
    padding: calc(var(--spacer) * 4);
    margin: calc(var(--spacer) * 3) 0;
  }
}

.membership-card h3 {
  font-size: 1.1rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  font-weight: 600;
  word-break: break-word;
}

@media (min-width: 480px) {
  .membership-card h3 {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .membership-card h3 {
    font-size: 1.3rem;
  }
}

.membership-info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.2);
  margin-bottom: calc(var(--spacer) * 2);
}

@media (min-width: 480px) {
  .membership-info {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .membership-info {
    margin-bottom: calc(var(--spacer) * 3);
  }
}

.membership-level {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  flex-wrap: wrap;
}

.level-badge {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .level-badge {
    font-size: 0.8rem;
    padding: 4px 14px;
  }
}

@media (min-width: 768px) {
  .level-badge {
    font-size: 0.85rem;
    padding: 4px 16px;
  }
}

.points {
  font-size: 0.8rem;
  opacity: 0.9;
  word-break: break-word;
}

@media (min-width: 480px) {
  .points {
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .points {
    font-size: 0.9rem;
  }
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.7rem;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .verified-badge {
    font-size: 0.75rem;
    padding: 4px 12px;
  }
}

@media (min-width: 768px) {
  .verified-badge {
    font-size: 0.8rem;
  }
}

.verified-badge i {
  font-size: 0.8rem;
}

/* Progress Bar */
.progress-info {
  margin-top: calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .progress-info {
    margin-top: calc(var(--spacer) * 2);
  }
}

.progress-info span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  opacity: 0.9;
  word-break: break-word;
}

@media (min-width: 480px) {
  .progress-info span {
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .progress-info span {
    font-size: 0.9rem;
  }
}

.progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

@media (min-width: 480px) {
  .progress-bar {
    height: 10px;
  }
}

.progress-fill {
  height: 100%;
  background: white;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.7rem;
  opacity: 0.8;
  word-break: break-word;
}

@media (min-width: 480px) {
  .progress-text {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .progress-text {
    font-size: 0.8rem;
  }
}

/* ========================================================================
   ACTIVITY TIMELINE - FULLY RESPONSIVE
   ======================================================================== */

.recent-activity {
  margin-top: calc(var(--spacer) * 3);
}

@media (min-width: 480px) {
  .recent-activity {
    margin-top: calc(var(--spacer) * 3.5);
  }
}

@media (min-width: 768px) {
  .recent-activity {
    margin-top: calc(var(--spacer) * 4);
  }
}

.recent-activity h3 {
  font-size: 1.1rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  color: var(--text-dark);
  word-break: break-word;
}

@media (min-width: 480px) {
  .recent-activity h3 {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .recent-activity h3 {
    font-size: 1.3rem;
  }
}

.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.2);
}

@media (min-width: 480px) {
  .activity-timeline {
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .activity-timeline {
    gap: calc(var(--spacer) * 2);
  }
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.2);
  background: var(--bg);
  border-radius: 12px;
  transition: all 0.2s;
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .activity-item {
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 1.5);
    border-radius: 14px;
    flex-wrap: nowrap;
  }
}

@media (min-width: 768px) {
  .activity-item {
    padding: calc(var(--spacer) * 2);
    border-radius: 16px;
  }
}

.activity-item:hover {
  transform: translateX(4px);
  background: var(--card-bg);
}

.activity-icon {
  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;
}

@media (min-width: 480px) {
  .activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  .activity-icon {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }
}

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

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

@media (min-width: 480px) {
  .activity-title {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .activity-title {
    font-size: 0.95rem;
  }
}

.activity-description {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-bottom: 2px;
  word-break: break-word;
  line-height: 1.4;
}

@media (min-width: 480px) {
  .activity-description {
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .activity-description {
    font-size: 0.85rem;
  }
}

.activity-time {
  font-size: 0.65rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .activity-time {
    font-size: 0.7rem;
  }
}

.no-activity {
  text-align: center;
  padding: calc(var(--spacer) * 3);
  color: var(--text-soft);
  font-style: italic;
  background: var(--bg);
  border-radius: 16px;
  word-break: break-word;
}

/* ========================================================================
   FORM DIVIDER
   ======================================================================== */

.form-divider {
  height: 1px;
  background: var(--border-light);
  margin: calc(var(--spacer) * 2) 0 calc(var(--spacer) * 1.5);
}

@media (min-width: 480px) {
  .form-divider {
    margin: calc(var(--spacer) * 2.5) 0 calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .form-divider {
    margin: calc(var(--spacer) * 3) 0 calc(var(--spacer) * 2.5);
  }
}

/* Section Subtitle */
.section-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.5);
  word-break: break-word;
}

@media (min-width: 480px) {
  .section-subtitle {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

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

/* ========================================================================
   PASSWORD REQUIREMENTS SECTION
   ======================================================================== */

.password-requirements {
  background: var(--bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 1.5);
  margin: calc(var(--spacer) * 1.5) 0;
  width: 100%;
}

@media (min-width: 480px) {
  .password-requirements {
    padding: calc(var(--spacer) * 2);
    margin: calc(var(--spacer) * 2) 0;
  }
}

@media (min-width: 768px) {
  .password-requirements {
    padding: calc(var(--spacer) * 2.5);
    margin: calc(var(--spacer) * 2.5) 0;
  }
}

.password-requirements p {
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1.2);
  font-size: 0.9rem;
  word-break: break-word;
}

@media (min-width: 480px) {
  .password-requirements p {
    font-size: 0.95rem;
    margin-bottom: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .password-requirements p {
    font-size: 1rem;
  }
}

.password-requirements ul {
  list-style: none;
  padding: 0;
}

.password-requirements li {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  margin-bottom: calc(var(--spacer) * 0.8);
  font-size: 0.8rem;
  word-break: break-word;
}

@media (min-width: 480px) {
  .password-requirements li {
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacer));
  }
}

@media (min-width: 768px) {
  .password-requirements li {
    font-size: 0.9rem;
  }
}

.password-requirements li.valid {
  color: #10b981;
}

.password-requirements li.invalid {
  color: var(--text-soft);
}

.password-requirements li i {
  width: 18px;
  flex-shrink: 0;
}

/* Password Strength Meter */
.password-strength {
  margin-top: calc(var(--spacer));
  width: 100%;
}

.strength-meter {
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
  width: 100%;
}

.strength-fill {
  height: 100%;
  transition:
    width 0.3s,
    background-color 0.3s;
}

.strength-fill.weak {
  background: #ef4444;
}

.strength-fill.medium {
  background: #f59e0b;
}

.strength-fill.strong {
  background: #10b981;
}

.strength-text {
  font-size: 0.7rem;
  color: var(--text-soft);
  word-break: break-word;
}

@media (min-width: 480px) {
  .strength-text {
    font-size: 0.75rem;
  }
}

/* ========================================================================
   TWO FACTOR SECTION
   ======================================================================== */

.two-factor-section {
  padding: calc(var(--spacer) * 1.5) 0;
  width: 100%;
}

@media (min-width: 480px) {
  .two-factor-section {
    padding: calc(var(--spacer) * 2) 0;
  }
}

.two-factor-section h3 {
  font-size: 1rem;
  margin-bottom: calc(var(--spacer) * 0.5);
  color: var(--text-dark);
  word-break: break-word;
}

@media (min-width: 480px) {
  .two-factor-section h3 {
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  .two-factor-section h3 {
    font-size: 1.2rem;
  }
}

.two-factor-section p {
  color: var(--text-soft);
  font-size: 0.8rem;
  margin-bottom: calc(var(--spacer) * 1.2);
  word-break: break-word;
}

@media (min-width: 480px) {
  .two-factor-section p {
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacer) * 1.5);
  }
}

.two-factor-status {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.2);
  align-items: flex-start;
}

@media (min-width: 480px) {
  .two-factor-status {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacer) * 2);
  }
}

.status-badge.disabled {
  background: var(--neutral-light);
  color: var(--neutral);
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .status-badge.disabled {
    font-size: 0.8rem;
    padding: 4px 12px;
  }
}

/* ========================================================================
   SESSIONS SECTION
   ======================================================================== */

.sessions-section {
  padding: calc(var(--spacer) * 1.5) 0;
  width: 100%;
}

@media (min-width: 480px) {
  .sessions-section {
    padding: calc(var(--spacer) * 2) 0;
  }
}

.sessions-section h3 {
  font-size: 1rem;
  margin-bottom: calc(var(--spacer) * 0.5);
  color: var(--text-dark);
  word-break: break-word;
}

@media (min-width: 480px) {
  .sessions-section h3 {
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  .sessions-section h3 {
    font-size: 1.2rem;
  }
}

.sessions-section p {
  color: var(--text-soft);
  font-size: 0.8rem;
  margin-bottom: calc(var(--spacer) * 1.2);
  word-break: break-word;
}

@media (min-width: 480px) {
  .sessions-section p {
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacer) * 1.5);
  }
}

.sessions-list {
  margin: calc(var(--spacer) * 1.5) 0;
  width: 100%;
}

@media (min-width: 480px) {
  .sessions-list {
    margin: calc(var(--spacer) * 2) 0;
  }
}

.session-item {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.8);
  padding: calc(var(--spacer) * 1.2);
  background: var(--bg);
  border-radius: 12px;
  margin-bottom: calc(var(--spacer));
}

@media (min-width: 480px) {
  .session-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacer) * 1.5);
    border-radius: 14px;
  }
}

@media (min-width: 768px) {
  .session-item {
    padding: calc(var(--spacer) * 2);
    border-radius: 16px;
  }
}

.session-item.current {
  border: 1px solid var(--accent);
  background: #f2ebe3;
}

.session-info {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.2);
  flex: 1;
  min-width: 0;
}

@media (min-width: 480px) {
  .session-info {
    gap: calc(var(--spacer) * 1.5);
  }
}

.session-info i {
  font-size: 1.2rem;
  color: var(--accent);
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .session-info i {
    font-size: 1.3rem;
  }
}

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

.device-name {
  display: block;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  font-size: 0.85rem;
  word-break: break-word;
}

@media (min-width: 480px) {
  .device-name {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .device-name {
    font-size: 0.95rem;
  }
}

.device-location {
  font-size: 0.7rem;
  color: var(--text-soft);
  word-break: break-word;
}

@media (min-width: 480px) {
  .device-location {
    font-size: 0.75rem;
  }
}

.session-status {
  font-size: 0.7rem;
  color: #10b981;
  font-weight: 500;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .session-status {
    font-size: 0.75rem;
  }
}

/* ========================================================================
   SECURITY DIVIDER
   ======================================================================== */

.security-divider {
  height: 1px;
  background: var(--border-light);
  margin: calc(var(--spacer) * 2) 0;
}

@media (min-width: 480px) {
  .security-divider {
    margin: calc(var(--spacer) * 2.5) 0;
  }
}

@media (min-width: 768px) {
  .security-divider {
    margin: calc(var(--spacer) * 3) 0;
  }
}

/* ========================================================================
   SECTION 22: RESPONSIVE DESIGN - COMPLETE & OPTIMIZED
   ======================================================================== */

/* Extra Large Desktop (1280px and above) */
@media (min-width: 1280px) {
  .dashboard-content,
  .overview-dashboard,
  .earnings-dashboard,
  .bookings-dashboard,
  .orders-dashboard,
  .calendar-dashboard,
  .availability-dashboard,
  .messages-dashboard,
  .profile-dashboard,
  .portfolio-dashboard {
    padding: calc(var(--spacer) * 4);
  }

  .profile-card {
    padding: calc(var(--spacer) * 6);
  }

  .stats-grid-modern {
    gap: calc(var(--spacer) * 5);
  }
}

/* Desktop (1025px - 1279px) */
@media (min-width: 1025px) and (max-width: 1279px) {
  .dashboard-content,
  .overview-dashboard,
  .earnings-dashboard,
  .bookings-dashboard,
  .orders-dashboard,
  .calendar-dashboard,
  .availability-dashboard,
  .messages-dashboard,
  .profile-dashboard,
  .portfolio-dashboard {
    padding: calc(var(--spacer) * 3.5);
  }

  .profile-card {
    padding: calc(var(--spacer) * 5);
  }

  .stats-grid-modern {
    gap: calc(var(--spacer) * 4);
  }
}

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

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

  .sidebar-close {
    display: flex;
  }

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

  .dashboard-main {
    margin-left: 0;
    width: 100%;
  }

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

  .search-container {
    display: none;
  }

  .mobile-search {
    display: block;
  }

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

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

  .schedule-panel {
    grid-column: span 2;
  }

  .calendar-dashboard {
    grid-template-columns: 1fr;
  }

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

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

  .profile-tabs .tab-btn {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
    font-size: 0.85rem;
  }

  .avatar-preview {
    width: 100px;
    height: 100px;
  }
}

/* Tablet Portrait (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .dashboard-sidebar {
    width: 280px;
    transform: translateX(-100%);
  }

  .dashboard-sidebar.active {
    transform: translateX(0);
  }

  .sidebar-close {
    display: flex;
  }

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

  .dashboard-main {
    margin-left: 0;
    width: 100%;
  }

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

  .search-container {
    display: none;
  }

  .mobile-search {
    display: block;
  }

  .mobile-bottom-nav {
    display: flex;
  }

  .dashboard-content {
    padding: calc(var(--spacer) * 2.5);
    padding-bottom: calc(var(--spacer) * 8);
  }

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

  .stats-grid,
  .stats-grid-modern,
  .metrics-grid,
  .order-stats-grid,
  .booking-stats-grid {
    grid-template-columns: 1fr;
    gap: calc(var(--spacer) * 2);
  }

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

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

  .welcome-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .quote-card {
    max-width: 100%;
  }

  .quick-actions {
    overflow-x: auto;
    padding-bottom: calc(var(--spacer) * 2);
    -webkit-overflow-scrolling: touch;
  }

  .action-btn {
    flex-shrink: 0;
  }

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

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

  .filter-select,
  .filter-search {
    width: 100%;
  }

  .order-meta {
    width: 100%;
    justify-content: space-between;
  }

  .progress-indicator {
    display: none;
  }

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

  .status-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .quote-header,
  .booking-card-header,
  .order-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .quote-actions,
  .booking-actions,
  .listing-actions {
    width: 100%;
  }

  .quote-actions button,
  .booking-actions button {
    flex: 1;
  }

  .quote-meta,
  .order-meta-grid {
    grid-template-columns: 1fr;
  }

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

  .working-hours-row {
    grid-template-columns: 1fr;
    gap: calc(var(--spacer));
  }

  .calendar-view-options {
    flex-wrap: wrap;
  }

  .view-btn {
    flex: 1;
    font-size: 0.8rem;
    padding: calc(var(--spacer)) calc(var(--spacer) * 1.5);
  }

  .month-view .calendar-day {
    min-height: 70px;
  }

  .day-view .day-header {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacer));
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .profile-avatar-section {
    flex-direction: column;
    text-align: center;
  }

  .avatar-info {
    text-align: center;
  }

  .two-factor-status {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    gap: calc(var(--spacer) * 0.5);
  }

  .profile-tabs .tab-btn {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
    font-size: 0.8rem;
  }

  .listing-actions .btn-outline {
    flex: 1 1 calc(50% - 4px);
  }

  .update-media-grid {
    grid-template-columns: 1fr;
  }

  .media-item.main {
    grid-column: auto;
  }

  .update-card-footer {
    flex-direction: column;
    gap: calc(var(--spacer) * 1.5);
    align-items: flex-start;
  }

  .lightbox-prev,
  .lightbox-next {
    display: none;
  }

  .lightbox-close {
    top: 10px;
    right: 10px;
  }

  .notifications-panel,
  .profile-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 80vh;
  }
}

/* Mobile Landscape (361px - 480px) */
@media (min-width: 361px) and (max-width: 480px) {
  .dashboard-content {
    padding: calc(var(--spacer) * 2);
    padding-bottom: calc(var(--spacer) * 8);
  }

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

  .welcome-title {
    font-size: 1.6rem;
  }

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

  .metrics-grid-compact {
    grid-template-columns: 1fr;
  }

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

  .activity-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .activity-amount {
    align-self: flex-end;
  }

  .order-card-header,
  .booking-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

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

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

  .header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .breakdown-table {
    font-size: 0.75rem;
  }

  .breakdown-table th,
  .breakdown-table td {
    padding: calc(var(--spacer) * 0.8) calc(var(--spacer) * 1.5);
  }

  .installment-amount {
    font-size: 1rem;
  }

  .month-view .calendar-day {
    min-height: 50px;
    font-size: 0.7rem;
  }

  .day-bookings {
    display: none;
  }

  .agenda-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .agenda-time {
    min-width: auto;
  }

  .calendar-day {
    min-height: 50px;
  }

  .listing-actions .btn-outline {
    flex: 1 1 100%;
  }

  .update-attachment {
    flex-direction: column;
    align-items: flex-start;
  }

  .update-reactions {
    width: 100%;
  }

  .reaction-btn {
    flex: 1;
    justify-content: center;
    font-size: 0.7rem;
    padding: calc(var(--spacer) * 0.5) calc(var(--spacer));
  }

  .profile-card {
    padding: calc(var(--spacer) * 2.5);
  }

  .avatar-preview {
    width: 90px;
    height: 90px;
  }

  .stat-item {
    padding: calc(var(--spacer) * 1.5);
  }

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

  .transaction-meta {
    flex-direction: column;
    gap: calc(var(--spacer) * 0.5);
  }

  .distribution-pie {
    flex-direction: column;
    align-items: center;
  }

  .timeline-content {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacer) * 0.8);
  }

  .pie-chart {
    width: 100px;
    height: 100px;
  }

  .filter-tabs {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .filter-tab {
    padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.5);
    font-size: 0.75rem;
  }

  .booking-time-info {
    flex-direction: column;
  }

  .time-detail {
    width: 100%;
  }

  .step:not(:last-child)::after {
    display: none;
  }

  .step-label {
    font-size: 0.65rem;
  }

  .calendar-navigation h2 {
    font-size: 1rem;
  }

  .view-btn {
    font-size: 0.7rem;
    padding: calc(var(--spacer) * 0.8) calc(var(--spacer) * 1.2);
  }

  .week-view .day-date {
    font-size: 0.9rem;
  }

  .week-view .hour-label {
    font-size: 0.65rem;
  }

  .working-hours-row {
    grid-template-columns: 1fr;
  }

  .toggle-switch {
    margin: 0 auto;
  }

  .time-controls {
    justify-content: center;
  }

  .exception-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .exception-notes {
    margin-left: 0;
  }
}

/* Small Mobile (up to 360px) */
@media (max-width: 360px) {
  .dashboard-content {
    padding: calc(var(--spacer) * 1.5);
    padding-bottom: calc(var(--spacer) * 8);
  }

  .welcome-title {
    font-size: 1.4rem;
  }

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

  .action-btn {
    width: 100%;
  }

  .filter-tabs {
    flex-direction: column;
    gap: calc(var(--spacer) * 0.5);
  }

  .filter-tab {
    width: 100%;
    justify-content: center;
  }

  .conversation-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }

  .conversation-last-message {
    max-width: 100px;
  }

  .message-bubble {
    max-width: 95%;
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  }

  .booking-time-info {
    flex-direction: column;
  }

  .time-detail {
    width: 100%;
  }

  .step:not(:last-child)::after {
    display: none;
  }

  .step-label {
    font-size: 0.6rem;
  }

  .calendar-navigation h2 {
    font-size: 0.9rem;
  }

  .view-btn {
    font-size: 0.65rem;
    padding: calc(var(--spacer) * 0.5) calc(var(--spacer));
  }

  .week-view .day-date {
    font-size: 0.8rem;
  }

  .week-view .hour-label {
    font-size: 0.6rem;
  }

  .working-hours-row {
    grid-template-columns: 1fr;
  }

  .toggle-switch {
    margin: 0 auto;
  }

  .time-controls {
    justify-content: center;
  }

  .exception-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .exception-notes {
    margin-left: 0;
  }

  .profile-tabs .tab-btn {
    padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.2);
    font-size: 0.7rem;
  }

  .avatar-preview {
    width: 80px;
    height: 80px;
  }

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

  .avatar-overlay i {
    font-size: 1rem;
  }

  .avatar-overlay span {
    font-size: 0.6rem;
  }

  .password-requirements li {
    font-size: 0.7rem;
  }

  .session-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .session-status {
    align-self: flex-end;
  }
}

/* Print Styles */
@media print {
  .dashboard-sidebar,
  .dashboard-header,
  .mobile-bottom-nav,
  .mobile-menu-toggle,
  .sidebar-close,
  .sidebar-overlay,
  .icon-btn,
  .profile-btn,
  .btn-primary,
  .btn-outline,
  .btn-text,
  .btn-icon,
  .filter-section,
  .filter-tabs,
  .filter-actions,
  .quick-actions,
  .action-btn,
  .booking-actions,
  .listing-actions,
  .add-update-form,
  .quote-actions,
  .header-actions {
    display: none !important;
  }

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

  .dashboard-content,
  .overview-dashboard,
  .earnings-dashboard,
  .bookings-dashboard,
  .orders-dashboard,
  .profile-dashboard,
  .portfolio-dashboard {
    padding: 0 !important;
    max-width: 100% !important;
  }

  .order-detail-view,
  .quote-details-card,
  .booking-card,
  .order-card,
  .profile-card {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #ddd;
    box-shadow: none;
  }

  table {
    page-break-inside: auto;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  body * {
    visibility: hidden;
  }

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

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

/* Touch-friendly improvements for mobile */
@media (max-width: 768px) {
  .nav-item,
  .icon-btn,
  .profile-btn,
  .mobile-menu-toggle,
  .sidebar-close,
  .bottom-nav-item,
  .btn-text,
  .menu-item,
  .filter-tab,
  .tab-btn,
  .action-btn,
  .btn-primary,
  .btn-outline {
    min-height: 48px;
    min-width: 48px;
  }

  .nav-item i,
  .icon-btn i,
  .profile-btn i,
  .action-btn i {
    font-size: 1.2rem;
  }

  .search-input,
  .mobile-search input,
  .filter-select,
  .orders-search-box input {
    min-height: 48px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

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

/* Smooth scrolling */
.dashboard-content,
.messages-list,
.conversations-list,
.notifications-list,
.profile-content {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar for webkit browsers */
.dashboard-sidebar::-webkit-scrollbar,
.messages-list::-webkit-scrollbar,
.conversations-list::-webkit-scrollbar,
.notifications-list::-webkit-scrollbar,
.profile-content::-webkit-scrollbar {
  width: 4px;
}

@media (min-width: 768px) {
  .dashboard-sidebar::-webkit-scrollbar,
  .messages-list::-webkit-scrollbar,
  .conversations-list::-webkit-scrollbar,
  .notifications-list::-webkit-scrollbar,
  .profile-content::-webkit-scrollbar {
    width: 6px;
  }
}

.dashboard-sidebar::-webkit-scrollbar-track,
.messages-list::-webkit-scrollbar-track,
.conversations-list::-webkit-scrollbar-track,
.notifications-list::-webkit-scrollbar-track,
.profile-content::-webkit-scrollbar-track {
  background: var(--bg);
}

.dashboard-sidebar::-webkit-scrollbar-thumb,
.messages-list::-webkit-scrollbar-thumb,
.conversations-list::-webkit-scrollbar-thumb,
.notifications-list::-webkit-scrollbar-thumb,
.profile-content::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.dashboard-sidebar::-webkit-scrollbar-thumb:hover,
.messages-list::-webkit-scrollbar-thumb:hover,
.conversations-list::-webkit-scrollbar-thumb:hover,
.notifications-list::-webkit-scrollbar-thumb:hover,
.profile-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

/* ========================================================================
   SECTION 23: PRINT STYLES - KEPT AS IS (Print doesn't need responsive)
   ======================================================================== */

@media print {
  .dashboard-sidebar,
  .dashboard-header,
  .mobile-bottom-nav,
  .detail-header .btn-icon,
  .header-actions,
  .quote-actions,
  .quote-footer-actions,
  .add-update-form,
  .btn-primary,
  .btn-outline,
  .btn-text,
  .btn-icon,
  .filter-section,
  .quick-actions,
  .action-btn {
    display: none !important;
  }

  .dashboard-main {
    margin-left: 0 !important;
    padding: 20px !important;
  }

  .order-detail-view,
  .quote-details-card {
    max-width: 100% !important;
    padding: 0 !important;
    box-shadow: none;
    border: 1px solid #ddd;
  }

  .milestones-card,
  .updates-card,
  .installment-card {
    page-break-inside: avoid;
  }

  table {
    page-break-inside: auto;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  body * {
    visibility: hidden;
  }

  .order-detail-view,
  .order-detail-view *,
  .quote-details-card,
  .quote-details-card * {
    visibility: visible;
  }

  .order-detail-view,
  .quote-details-card {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/* ========================================================================
   SECTION 24: UTILITY CLASSES - FULLY RESPONSIVE
   ======================================================================== */

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

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

.error-state {
  text-align: center;
  padding: calc(var(--spacer) * 3);
  color: var(--danger);
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  max-width: 500px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .error-state {
    padding: calc(var(--spacer) * 4);
    border-radius: 20px;
  }
}

.error-state i {
  font-size: 2.5rem;
  margin-bottom: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .error-state i {
    font-size: 3rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.error-state button {
  margin-top: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .error-state button {
    margin-top: calc(var(--spacer) * 2);
  }
}

/* Selected Datetime */
.selected-datetime {
  background: var(--accent-light);
  color: var(--text-dark);
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .selected-datetime {
    padding: 12px;
    margin-bottom: 20px;
    gap: 10px;
    font-size: 1rem;
  }
}

/* Or Divider */
.or-divider {
  text-align: center;
  margin: 12px 0;
  color: var(--text-soft);
  position: relative;
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .or-divider {
    margin: 15px 0;
    font-size: 0.9rem;
  }
}

.or-divider::before,
.or-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--border-light);
}

@media (min-width: 768px) {
  .or-divider::before,
  .or-divider::after {
    width: 45%;
  }
}

.or-divider::before {
  left: 0;
}

.or-divider::after {
  right: 0;
}

/* Duration Presets */
.duration-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

@media (min-width: 768px) {
  .duration-presets {
    gap: 8px;
  }
}

/* Booking Summary */
.booking-summary {
  background: var(--bg);
  padding: 12px;
  border-radius: 8px;
  margin: 12px 0;
}

@media (min-width: 768px) {
  .booking-summary {
    padding: 15px;
    margin: 15px 0;
  }
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
  gap: calc(var(--spacer));
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .summary-row {
    padding: 5px 0;
    font-size: 0.9rem;
  }
}

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

/* Conflict Warning */
.conflict-warning {
  background: #fee2e2;
  color: #991b1b;
  padding: 10px;
  border-radius: 8px;
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #fecaca;
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .conflict-warning {
    padding: 12px;
    margin: 15px 0;
    gap: 10px;
    font-size: 0.9rem;
  }
}

.conflict-warning i {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .conflict-warning i {
    font-size: 1.2rem;
  }
}

/* No Results */
.no-results {
  text-align: center;
  padding: calc(var(--spacer) * 4);
  background: var(--card-bg);
  border-radius: 20px;
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .no-results {
    padding: calc(var(--spacer) * 6);
    border-radius: 24px;
  }
}

.no-results i {
  font-size: 2.5rem;
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 1.5);
  opacity: 0.5;
}

@media (min-width: 768px) {
  .no-results i {
    font-size: 3rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

/* Tags Input */
.tags-input {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: calc(var(--spacer) * 1.2);
  margin-bottom: calc(var(--spacer));
}

@media (min-width: 768px) {
  .tags-input {
    padding: calc(var(--spacer) * 1.5);
  }
}

.tags-input input {
  border: none;
  width: 100%;
  outline: none;
  font-size: 0.85rem;
  background: transparent;
  min-height: 36px;
}

@media (min-width: 768px) {
  .tags-input input {
    font-size: 0.9rem;
    min-height: 40px;
  }
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer));
  margin-top: calc(var(--spacer));
}

.tag-item {
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 30px;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
}

@media (min-width: 768px) {
  .tag-item {
    padding: 4px 10px;
    font-size: 0.8rem;
    gap: 6px;
    min-height: 36px;
  }
}

.tag-item i {
  cursor: pointer;
  color: var(--text-soft);
  font-size: 0.65rem;
}

@media (min-width: 768px) {
  .tag-item i {
    font-size: 0.7rem;
  }
}

.tag-item i:hover {
  color: #ef4444;
}

/* Skills Grid */
.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 1.5);
  max-height: 250px;
  overflow-y: auto;
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 16px;
}

@media (min-width: 480px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .skills-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: calc(var(--spacer) * 2);
    max-height: 300px;
    padding: calc(var(--spacer) * 2);
  }
}

.skill-checkbox {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  cursor: pointer;
  padding: calc(var(--spacer));
  border-radius: 8px;
  transition: background 0.2s;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .skill-checkbox {
    font-size: 0.85rem;
    gap: calc(var(--spacer) * 1.2);
  }
}

.skill-checkbox:hover {
  background: var(--card-bg);
}

.skill-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

@media (min-width: 768px) {
  .skill-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }
}

/* Media Tip */
.media-tip {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  background: #fef3e2;
  color: #b45309;
  padding: calc(var(--spacer) * 1.5);
  border-radius: 12px;
  margin-top: calc(var(--spacer) * 1.5);
  font-size: 0.8rem;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .media-tip {
    padding: calc(var(--spacer) * 2);
    margin-top: calc(var(--spacer) * 2);
    font-size: 0.9rem;
    gap: calc(var(--spacer) * 1.5);
  }
}

.media-tip i {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .media-tip i {
    font-size: 1.2rem;
  }
}

/* Drag Handle */
.drag-handle {
  cursor: move;
  color: white;
  background: rgba(0, 0, 0, 0.3);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .drag-handle {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
  }
}

.drag-handle:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Pending Badge */
.pending-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: #f59e0b;
  color: white;
  padding: 2px 6px;
  border-radius: 30px;
  font-size: 0.6rem;
}

@media (min-width: 768px) {
  .pending-badge {
    bottom: 8px;
    right: 8px;
    padding: 2px 8px;
    font-size: 0.65rem;
  }
}

/* ========================================================================
   SECTION 25: MESSAGES SECTION - FULLY RESPONSIVE
   ======================================================================== */

.messages-dashboard {
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 24px;
  overflow: hidden;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

@media (min-width: 480px) {
  .messages-dashboard {
    height: calc(100vh - 140px);
    border-radius: 28px;
  }
}

@media (min-width: 768px) {
  .messages-dashboard {
    height: calc(100vh - 160px);
    border-radius: 32px;
  }
}

.messages-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  z-index: 10;
}

@media (min-width: 480px) {
  .messages-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--spacer) * 2.5) calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .messages-header {
    padding: calc(var(--spacer) * 3) calc(var(--spacer) * 4);
  }
}

.messages-header h1 {
  font-size: 1.3rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--text-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (min-width: 480px) {
  .messages-header h1 {
    font-size: 1.4rem;
  }
}

@media (min-width: 768px) {
  .messages-header h1 {
    font-size: 1.5rem;
  }
}

.messages-actions {
  display: flex;
  gap: calc(var(--spacer));
  width: 100%;
}

@media (min-width: 480px) {
  .messages-actions {
    width: auto;
    gap: calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .messages-actions {
    gap: calc(var(--spacer) * 2);
  }
}

.messages-actions button {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.8);
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  min-height: 40px;
  flex: 1;
  justify-content: center;
}

@media (min-width: 480px) {
  .messages-actions button {
    flex: 0 1 auto;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.85rem;
    min-height: 44px;
  }
}

@media (min-width: 768px) {
  .messages-actions button {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3);
    font-size: 0.9rem;
    gap: calc(var(--spacer));
  }
}

.messages-actions button:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.2);
}

@media (min-width: 768px) {
  .messages-actions button:hover {
    transform: translateY(-2px);
  }
}

.messages-actions button i {
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .messages-actions button i {
    font-size: 0.9rem;
  }
}

/* Messages Container */
.messages-container {
  display: flex;
  flex: 1;
  background: white;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  flex-direction: column;
}

@media (min-width: 768px) {
  .messages-container {
    flex-direction: row;
  }
}

/* Conversations Sidebar */
.conversations-sidebar {
  width: 100%;
  border-right: none;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  background: #fcfcfd;
  transition: all 0.3s ease;
  max-height: 300px;
}

@media (min-width: 480px) {
  .conversations-sidebar {
    max-height: 350px;
  }
}

@media (min-width: 768px) {
  .conversations-sidebar {
    width: 320px;
    border-right: 1px solid var(--border-light);
    border-bottom: none;
    max-height: none;
  }
}

@media (min-width: 1025px) {
  .conversations-sidebar {
    width: 360px;
  }
}

.conversations-search {
  padding: calc(var(--spacer) * 2);
  position: relative;
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .conversations-search {
    padding: calc(var(--spacer) * 2.5) calc(var(--spacer) * 3);
  }
}

.conversations-search i {
  position: absolute;
  left: calc(var(--spacer) * 4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.8rem;
  pointer-events: none;
}

@media (min-width: 768px) {
  .conversations-search i {
    left: calc(var(--spacer) * 5);
    font-size: 0.85rem;
  }
}

.conversations-search input {
  width: 100%;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 1.5)
    calc(var(--spacer) * 1.5) calc(var(--spacer) * 5);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.8rem;
  background: white;
  transition: all 0.2s;
  min-height: 40px;
}

@media (min-width: 480px) {
  .conversations-search input {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2)
      calc(var(--spacer) * 2) calc(var(--spacer) * 6);
    min-height: 44px;
  }
}

@media (min-width: 768px) {
  .conversations-search input {
    font-size: 0.85rem;
    min-height: 48px;
  }
}

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

.conversations-filter {
  display: flex;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  gap: calc(var(--spacer));
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .conversations-filter {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 1.5);
  }
}

.filter-btn {
  flex: 1;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  border: none;
  background: transparent;
  border-radius: 30px;
  cursor: pointer;
  color: var(--text-soft);
  font-weight: 500;
  font-size: 0.8rem;
  transition: all 0.2s;
  min-height: 40px;
}

@media (min-width: 768px) {
  .filter-btn {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
    font-size: 0.85rem;
    min-height: 44px;
  }
}

.filter-btn:hover {
  background: #f1f5f9;
  color: var(--text-dark);
}

.filter-btn.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.3);
}

@media (min-width: 768px) {
  .filter-btn.active {
    box-shadow: 0 4px 12px rgba(183, 140, 90, 0.3);
  }
}

.filter-btn span {
  margin-left: 2px;
  font-size: 0.7rem;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .filter-btn span {
    margin-left: 4px;
    font-size: 0.75rem;
  }
}

.conversations-list {
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .conversations-list {
    padding: calc(var(--spacer) * 2);
  }
}

/* Conversation Item */
.conversation-item {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  margin-bottom: calc(var(--spacer) * 0.5);
  border: 1px solid transparent;
}

@media (min-width: 768px) {
  .conversation-item {
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2);
    border-radius: 20px;
    margin-bottom: calc(var(--spacer));
  }
}

.conversation-item:hover {
  background: white;
  border-color: var(--border-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
  .conversation-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04);
  }
}

.conversation-item.active {
  background: linear-gradient(135deg, #fff9f5 0%, #fef3e9 100%);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.1);
}

@media (min-width: 768px) {
  .conversation-item.active {
    box-shadow: 0 8px 20px rgba(183, 140, 90, 0.15);
  }
}

.conversation-item.unread {
  background: #f8fafc;
}

.conversation-item.unread .conversation-name {
  font-weight: 700;
  color: var(--accent);
}

.conversation-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  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.3);
  text-transform: uppercase;
}

@media (min-width: 480px) {
  .conversation-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  .conversation-avatar {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(183, 140, 90, 0.3);
  }
}

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

.conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
  gap: calc(var(--spacer) * 0.5);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .conversation-header {
    margin-bottom: 4px;
  }
}

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

@media (min-width: 480px) {
  .conversation-name {
    max-width: 150px;
  }
}

@media (min-width: 768px) {
  .conversation-name {
    font-size: 1rem;
    max-width: 180px;
  }
}

.conversation-time {
  font-size: 0.6rem;
  color: var(--text-soft);
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 20px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .conversation-time {
    font-size: 0.65rem;
    padding: 2px 8px;
  }
}

.conversation-last-message {
  font-size: 0.75rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  line-height: 1.4;
}

@media (min-width: 480px) {
  .conversation-last-message {
    max-width: 180px;
  }
}

@media (min-width: 768px) {
  .conversation-last-message {
    font-size: 0.8rem;
    max-width: 200px;
  }
}

.unread-badge {
  position: absolute;
  right: calc(var(--spacer) * 1.5);
  top: 50%;
  transform: translateY(-50%);
  background: var(--accent);
  color: white;
  min-width: 20px;
  height: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(183, 140, 90, 0.3);
  animation: pulse 2s infinite;
}

@media (min-width: 768px) {
  .unread-badge {
    min-width: 24px;
    height: 24px;
    font-size: 0.7rem;
    box-shadow: 0 4px 8px rgba(183, 140, 90, 0.3);
  }
}

/* Message Thread */
.message-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  position: relative;
  display: none;
}

@media (min-width: 768px) {
  .message-thread {
    display: flex;
  }
}

.message-thread.active {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: white;
}

@media (min-width: 768px) {
  .message-thread.active {
    position: relative;
    z-index: auto;
  }
}

.thread-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  padding: calc(var(--spacer) * 4);
  background: linear-gradient(135deg, #faf9f7 0%, #f5f3f0 100%);
}

@media (min-width: 768px) {
  .thread-placeholder {
    padding: calc(var(--spacer) * 6);
  }
}

.thread-placeholder i {
  font-size: 4rem;
  margin-bottom: calc(var(--spacer) * 2);
  opacity: 0.2;
  color: var(--accent);
}

@media (min-width: 768px) {
  .thread-placeholder i {
    font-size: 5rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1025px) {
  .thread-placeholder i {
    font-size: 6rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.thread-placeholder h3 {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 0.8);
  font-family: var(--font-serif);
}

@media (min-width: 768px) {
  .thread-placeholder h3 {
    font-size: 1.6rem;
    margin-bottom: calc(var(--spacer));
  }
}

@media (min-width: 1025px) {
  .thread-placeholder h3 {
    font-size: 1.8rem;
  }
}

.thread-placeholder p {
  margin-bottom: calc(var(--spacer) * 2);
  color: var(--text-soft);
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .thread-placeholder p {
    margin-bottom: calc(var(--spacer) * 3);
    font-size: 1rem;
  }
}

.thread-header {
  padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  z-index: 5;
}

@media (min-width: 480px) {
  .thread-header {
    padding: calc(var(--spacer) * 2.5) calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .thread-header {
    padding: calc(var(--spacer) * 3) calc(var(--spacer) * 4);
    gap: calc(var(--spacer) * 3);
  }
}

.back-btn {
  display: flex;
  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;
}

@media (min-width: 768px) {
  .back-btn {
    display: none;
  }
}

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

.thread-user-info {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  flex: 1;
  min-width: 0;
}

@media (min-width: 768px) {
  .thread-user-info {
    gap: calc(var(--spacer) * 2);
  }
}

.thread-user-info .user-avatar {
  width: 40px;
  height: 40px;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.3);
}

@media (min-width: 480px) {
  .thread-user-info .user-avatar {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  .thread-user-info .user-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(183, 140, 90, 0.3);
  }
}

.user-details h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .user-details h3 {
    font-size: 1.1rem;
  }
}

.user-status {
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 2px;
}

@media (min-width: 768px) {
  .user-status {
    font-size: 0.75rem;
    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;
}

@media (min-width: 768px) {
  .user-status.online::before {
    width: 8px;
    height: 8px;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.user-status.offline {
  color: var(--text-soft);
}

.thread-actions {
  display: flex;
  gap: calc(var(--spacer) * 0.5);
}

@media (min-width: 768px) {
  .thread-actions {
    gap: calc(var(--spacer));
  }
}

.thread-actions .btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  transition: all 0.2s;
  font-size: 0.9rem;
}

@media (min-width: 480px) {
  .thread-actions .btn-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  .thread-actions .btn-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
}

.thread-actions .btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: scale(1.1);
}

/* Messages List */
.messages-list {
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--spacer) * 2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

@media (min-width: 480px) {
  .messages-list {
    padding: calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 2);
  }
}

@media (min-width: 768px) {
  .messages-list {
    padding: calc(var(--spacer) * 4);
  }
}

.date-divider {
  text-align: center;
  margin: calc(var(--spacer) * 2) 0;
  color: var(--text-soft);
  font-size: 0.7rem;
  position: relative;
}

@media (min-width: 768px) {
  .date-divider {
    margin: calc(var(--spacer) * 3) 0;
    font-size: 0.75rem;
  }
}

.date-divider span {
  background: rgba(255, 255, 255, 0.9);
  padding: 3px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  display: inline-block;
}

@media (min-width: 768px) {
  .date-divider span {
    padding: 4px 16px;
    border-radius: 30px;
  }
}

/* Message Items */
.message-item {
  display: flex;
  margin-bottom: calc(var(--spacer) * 1.5);
  animation: slideIn 0.3s ease;
}

@media (min-width: 768px) {
  .message-item {
    margin-bottom: calc(var(--spacer) * 2);
  }
}

.message-item.sent {
  justify-content: flex-end;
}

.message-bubble {
  max-width: 80%;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  border-radius: 20px;
  position: relative;
  word-wrap: break-word;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s;
}

@media (min-width: 480px) {
  .message-bubble {
    max-width: 70%;
  }
}

@media (min-width: 768px) {
  .message-bubble {
    max-width: 60%;
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  }
}

.message-bubble:hover {
  transform: scale(1.01);
}

@media (min-width: 768px) {
  .message-bubble:hover {
    transform: scale(1.02);
  }
}

.message-item.received .message-bubble {
  background: white;
  color: var(--text-dark);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border-light);
}

.message-item.sent .message-bubble {
  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.85rem;
}

@media (min-width: 480px) {
  .message-text {
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) {
  .message-text {
    font-size: 0.95rem;
  }
}

.message-text a {
  color: inherit;
  text-decoration: underline;
  opacity: 0.9;
}

.message-text a:hover {
  opacity: 1;
}

.message-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  font-size: 0.6rem;
  opacity: 0.8;
}

@media (min-width: 768px) {
  .message-footer {
    gap: 4px;
    font-size: 0.65rem;
  }
}

.message-item.sent .message-footer {
  color: rgba(255, 255, 255, 0.9);
}

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

@media (min-width: 768px) {
  .message-time {
    font-size: 0.6rem;
  }
}

.message-status {
  font-size: 0.6rem;
}

/* Message Attachments */
.message-attachment {
  margin-top: calc(var(--spacer) * 1.5);
  border-radius: 12px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .message-attachment {
    margin-top: calc(var(--spacer) * 2);
    border-radius: 16px;
  }
}

.message-attachment.image img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (min-width: 480px) {
  .message-attachment.image img {
    max-height: 250px;
  }
}

@media (min-width: 768px) {
  .message-attachment.image img {
    max-height: 300px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }
}

.message-attachment.image img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
  .message-attachment.image img:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  }
}

.message-attachment.file {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .message-attachment.file {
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2);
    border-radius: 16px;
  }
}

.message-item.sent .message-attachment.file {
  background: rgba(255, 255, 255, 0.15);
}

.message-attachment.file i {
  font-size: 1.5rem;
  color: inherit;
}

@media (min-width: 768px) {
  .message-attachment.file i {
    font-size: 2rem;
  }
}

.file-info {
  flex: 1;
  min-width: 120px;
}

@media (min-width: 480px) {
  .file-info {
    min-width: 140px;
  }
}

@media (min-width: 768px) {
  .file-info {
    min-width: 150px;
  }
}

.file-name {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .file-name {
    font-size: 0.8rem;
    margin-bottom: 2px;
  }
}

.file-size {
  font-size: 0.65rem;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .file-size {
    font-size: 0.7rem;
  }
}

/* Message Reactions */
.message-reactions {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .message-reactions {
    gap: 4px;
  }
}

.reaction-badge {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  padding: 2px 6px;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  min-height: 28px;
}

@media (min-width: 480px) {
  .reaction-badge {
    padding: 2px 8px;
    font-size: 0.75rem;
    min-height: 32px;
  }
}

@media (min-width: 768px) {
  .reaction-badge {
    padding: 2px 10px;
    font-size: 0.8rem;
    gap: 4px;
    min-height: 36px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  }
}

.reaction-badge:hover {
  background: var(--bg);
  transform: scale(1.05);
  border-color: var(--accent);
}

.reaction-count {
  font-size: 0.6rem;
  color: var(--text-soft);
  font-weight: 500;
}

@media (min-width: 768px) {
  .reaction-count {
    font-size: 0.65rem;
  }
}

.reaction-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-dark);
  color: white;
  padding: 4px 8px;
  border-radius: 16px;
  font-size: 0.65rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  margin-bottom: 4px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
  .reaction-tooltip {
    padding: 6px 12px;
    font-size: 0.7rem;
    margin-bottom: 8px;
    border-radius: 20px;
  }
}

.reaction-badge:hover .reaction-tooltip {
  opacity: 1;
}

.add-reaction {
  background: white;
  border: 1px dashed var(--border-light);
  border-radius: 30px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-soft);
  transition: all 0.2s;
  font-size: 0.8rem;
}

@media (min-width: 480px) {
  .add-reaction {
    width: 34px;
    height: 34px;
  }
}

@media (min-width: 768px) {
  .add-reaction {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
}

.add-reaction:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg);
}

/* Message Input */
.message-input-container {
  padding: calc(var(--spacer) * 2);
  border-top: 1px solid var(--border-light);
  background: white;
  position: relative;
}

@media (min-width: 480px) {
  .message-input-container {
    padding: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .message-input-container {
    padding: calc(var(--spacer) * 3);
  }
}

.input-wrapper {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  align-items: flex-end;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  padding: 2px 2px 2px calc(var(--spacer) * 2);
  transition: all 0.2s;
}

@media (min-width: 480px) {
  .input-wrapper {
    gap: calc(var(--spacer) * 2);
    padding: 2px 2px 2px calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .input-wrapper {
    padding: 4px 4px 4px calc(var(--spacer) * 3);
  }
}

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

.input-wrapper textarea {
  flex: 1;
  padding: calc(var(--spacer) * 1.5) 0;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  resize: none;
  max-height: 100px;
  line-height: 1.5;
  outline: none;
}

@media (min-width: 480px) {
  .input-wrapper textarea {
    padding: calc(var(--spacer) * 2) 0;
    font-size: 0.9rem;
    max-height: 110px;
  }
}

@media (min-width: 768px) {
  .input-wrapper textarea {
    padding: calc(var(--spacer) * 2) 0;
    font-size: 0.95rem;
    max-height: 120px;
  }
}

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

.input-actions {
  display: flex;
  gap: 2px;
  padding: 2px;
}

@media (min-width: 768px) {
  .input-actions {
    gap: 4px;
  }
}

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

@media (min-width: 768px) {
  .input-actions .btn-icon {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
}

.input-actions .btn-icon:hover {
  background: var(--bg);
  color: var(--accent);
}

.send-btn {
  background: var(--accent) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.3);
}

@media (min-width: 768px) {
  .send-btn {
    box-shadow: 0 4px 12px rgba(183, 140, 90, 0.3);
  }
}

.send-btn:hover {
  background: var(--accent-light) !important;
  transform: scale(1.05);
}

/* Typing Indicator */
.typing-indicator {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  color: var(--text-soft);
  font-size: 0.75rem;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(183, 140, 90, 0.05),
    transparent
  );
  animation: shimmer 2s infinite;
}

@media (min-width: 768px) {
  .typing-indicator {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
    font-size: 0.8rem;
    gap: calc(var(--spacer) * 2);
  }
}

.typing-dots {
  display: flex;
  gap: 2px;
}

.typing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: typingBounce 1.4s infinite;
}

@media (min-width: 768px) {
  .typing-dots span {
    width: 6px;
    height: 6px;
  }
}

.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(-6px);
    opacity: 1;
  }
}

/* Attachment Preview */
.attachment-preview-area {
  margin-top: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 20px;
  animation: slideUp 0.3s ease;
}

@media (min-width: 768px) {
  .attachment-preview-area {
    margin-top: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2);
    border-radius: 24px;
  }
}

.attachment-preview {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  position: relative;
  background: white;
  padding: calc(var(--spacer) * 1.5);
  border-radius: 16px;
  border: 1px solid var(--border-light);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .attachment-preview {
    gap: calc(var(--spacer) * 3);
    padding: calc(var(--spacer) * 2);
    border-radius: 20px;
  }
}

.attachment-preview img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .attachment-preview img {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.attachment-preview i {
  font-size: 2rem;
  color: var(--accent);
}

@media (min-width: 768px) {
  .attachment-preview i {
    font-size: 2.5rem;
  }
}

.preview-info {
  flex: 1;
  min-width: 120px;
}

@media (min-width: 768px) {
  .preview-info {
    min-width: 150px;
  }
}

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

@media (min-width: 768px) {
  .preview-info .file-name {
    font-size: 0.9rem;
    margin-bottom: 4px;
  }
}

.preview-info .file-size {
  font-size: 0.7rem;
  color: var(--text-soft);
}

@media (min-width: 768px) {
  .preview-info .file-size {
    font-size: 0.75rem;
  }
}

.remove-attachment {
  background: #fee2e2;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ef4444;
  transition: all 0.2s;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .remove-attachment {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
}

.remove-attachment:hover {
  background: #ef4444;
  color: white;
  transform: scale(1.1);
}

/* No Conversations */
.no-conversations {
  text-align: center;
  padding: calc(var(--spacer) * 4);
  color: var(--text-soft);
  background: white;
  border-radius: 20px;
  margin: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .no-conversations {
    padding: calc(var(--spacer) * 6);
    border-radius: 24px;
    margin: calc(var(--spacer) * 2);
  }
}

.no-conversations i {
  font-size: 3rem;
  margin-bottom: calc(var(--spacer) * 2);
  opacity: 0.3;
  color: var(--accent);
}

@media (min-width: 768px) {
  .no-conversations i {
    font-size: 3.5rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

.no-conversations h3 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 0.8);
}

@media (min-width: 768px) {
  .no-conversations h3 {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer));
  }
}

.no-conversations p {
  margin-bottom: calc(var(--spacer) * 2);
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .no-conversations p {
    margin-bottom: calc(var(--spacer) * 2.5);
    font-size: 0.9rem;
  }
}

.no-conversations .btn-text {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-size: 0.9rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

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

/* ========================================================================
   USER SEARCH MODAL - FULLY RESPONSIVE
   ======================================================================== */

.users-list {
  max-height: 300px;
  overflow-y: auto;
  margin-top: calc(var(--spacer) * 2);
  padding-right: 4px;
}

@media (min-width: 480px) {
  .users-list {
    max-height: 350px;
    margin-top: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 768px) {
  .users-list {
    max-height: 400px;
    margin-top: calc(var(--spacer) * 3);
  }
}

.user-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  padding: calc(var(--spacer) * 1.5);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  margin-bottom: 4px;
}

@media (min-width: 480px) {
  .user-item {
    gap: calc(var(--spacer) * 2.5);
    padding: calc(var(--spacer) * 1.8);
    border-radius: 15px;
  }
}

@media (min-width: 768px) {
  .user-item {
    gap: calc(var(--spacer) * 3);
    padding: calc(var(--spacer) * 2);
    border-radius: 16px;
  }
}

.user-item:hover {
  background: var(--bg);
  border-color: var(--border-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
  .user-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04);
  }
}

.user-item .user-avatar {
  width: 40px;
  height: 40px;
  font-size: 0.95rem;
  background: white;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .user-item .user-avatar {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  .user-item .user-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }
}

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

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

@media (min-width: 480px) {
  .user-name {
    font-size: 0.95rem;
    margin-bottom: 3px;
  }
}

@media (min-width: 768px) {
  .user-name {
    font-size: 1rem;
    margin-bottom: 4px;
  }
}

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

@media (min-width: 480px) {
  .user-email {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .user-email {
    font-size: 0.8rem;
  }
}

/* Messages Loading */
.messages-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
}

.messages-loading .loading-spinner {
  width: 32px;
  height: 32px;
}

@media (min-width: 768px) {
  .messages-loading .loading-spinner {
    width: 40px;
    height: 40px;
  }
}

/* Thread Error */
.thread-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacer) * 4);
  color: var(--text-soft);
  text-align: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  min-height: 300px;
}

@media (min-width: 480px) {
  .thread-error {
    padding: calc(var(--spacer) * 6);
  }
}

@media (min-width: 768px) {
  .thread-error {
    padding: calc(var(--spacer) * 8);
    min-height: 400px;
  }
}

.thread-error i {
  font-size: 3.5rem;
  color: #ef4444;
  margin-bottom: calc(var(--spacer) * 2);
  opacity: 0.5;
}

@media (min-width: 480px) {
  .thread-error i {
    font-size: 4rem;
    margin-bottom: calc(var(--spacer) * 3);
  }
}

@media (min-width: 768px) {
  .thread-error i {
    font-size: 5rem;
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.thread-error h3 {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 0.8);
  font-family: var(--font-serif);
}

@media (min-width: 480px) {
  .thread-error h3 {
    font-size: 1.6rem;
    margin-bottom: calc(var(--spacer));
  }
}

@media (min-width: 768px) {
  .thread-error h3 {
    font-size: 1.8rem;
    margin-bottom: calc(var(--spacer) * 1.2);
  }
}

.thread-error p {
  margin-bottom: calc(var(--spacer) * 2);
  color: var(--text-soft);
  font-size: 0.9rem;
  max-width: 400px;
}

@media (min-width: 768px) {
  .thread-error p {
    margin-bottom: calc(var(--spacer) * 3);
    font-size: 1rem;
  }
}

.no-messages {
  text-align: center;
  padding: calc(var(--spacer) * 4);
  color: var(--text-soft);
  font-style: italic;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 30px;
  margin: calc(var(--spacer) * 2) 0;
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .no-messages {
    padding: calc(var(--spacer) * 6);
    border-radius: 40px;
    font-size: 1rem;
  }
}

/* ========================================================================
   MOBILE MESSAGES - COMPREHENSIVE RESPONSIVE
   ======================================================================== */

/* Tablet (768px and below) */
@media (max-width: 768px) {
  .conversations-sidebar {
    width: 100%;
    display: block;
    max-height: none;
  }

  .message-thread {
    display: none;
  }

  .message-thread.active {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: white;
    border-radius: 0;
    animation: fadeIn 0.3s ease;
  }

  .back-btn {
    display: flex;
  }

  .thread-placeholder {
    display: none;
  }

  .message-bubble {
    max-width: 80%;
  }

  .conversation-item {
    padding: calc(var(--spacer) * 1.5);
  }

  .conversation-avatar {
    width: 44px;
    height: 44px;
    font-size: 0.95rem;
  }

  .thread-header {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  }

  .thread-user-info .user-avatar {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
  }

  .user-details h3 {
    font-size: 0.95rem;
  }

  .messages-list {
    padding: calc(var(--spacer) * 1.5);
  }

  .input-wrapper {
    padding-left: calc(var(--spacer) * 1.5);
  }

  .input-actions .btn-icon {
    width: 38px;
    height: 38px;
  }

  .typing-indicator {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
    font-size: 0.7rem;
  }
}

/* Mobile Landscape (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .conversation-avatar {
    width: 46px;
    height: 46px;
    font-size: 1rem;
  }

  .conversation-last-message {
    max-width: 200px;
  }

  .message-bubble {
    max-width: 75%;
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 2.2);
  }

  .message-text {
    font-size: 0.95rem;
  }

  .thread-error i {
    font-size: 4.5rem;
  }

  .thread-error h3 {
    font-size: 1.7rem;
  }

  .no-conversations {
    padding: calc(var(--spacer) * 5);
  }

  .no-conversations i {
    font-size: 3.5rem;
  }
}

/* Mobile Portrait (below 480px) */
@media (max-width: 479px) {
  .conversation-avatar {
    width: 42px;
    height: 42px;
    font-size: 0.9rem;
  }

  .conversation-last-message {
    max-width: 140px;
    font-size: 0.7rem;
  }

  .conversation-time {
    font-size: 0.55rem;
    padding: 2px 5px;
  }

  .message-bubble {
    max-width: 85%;
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  }

  .message-text {
    font-size: 0.85rem;
  }

  .message-footer {
    font-size: 0.55rem;
  }

  .input-wrapper {
    padding-left: calc(var(--spacer) * 1.2);
    gap: calc(var(--spacer));
  }

  .input-wrapper textarea {
    font-size: 0.8rem;
    padding: calc(var(--spacer) * 1.2) 0;
  }

  .input-actions .btn-icon {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }

  .attachment-preview {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacer));
  }

  .attachment-preview img {
    width: 45px;
    height: 45px;
  }

  .attachment-preview i {
    font-size: 1.8rem;
  }

  .preview-info .file-name {
    font-size: 0.8rem;
  }

  .preview-info .file-size {
    font-size: 0.65rem;
  }

  .remove-attachment {
    align-self: flex-end;
  }

  .thread-error i {
    font-size: 3.5rem;
  }

  .thread-error h3 {
    font-size: 1.4rem;
  }

  .thread-error p {
    font-size: 0.8rem;
  }

  .no-conversations {
    padding: calc(var(--spacer) * 3);
  }

  .no-conversations i {
    font-size: 2.8rem;
  }

  .no-conversations h3 {
    font-size: 1rem;
  }

  .no-conversations p {
    font-size: 0.8rem;
  }

  .reaction-badge {
    padding: 1px 5px;
    font-size: 0.65rem;
    min-height: 26px;
  }

  .add-reaction {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
  }
}

/* Small Mobile (below 360px) */
@media (max-width: 359px) {
  .conversation-avatar {
    width: 38px;
    height: 38px;
    font-size: 0.8rem;
  }

  .conversation-last-message {
    max-width: 120px;
  }

  .conversation-name {
    font-size: 0.8rem;
  }

  .message-bubble {
    max-width: 90%;
  }

  .message-text {
    font-size: 0.8rem;
  }

  .thread-header {
    padding: calc(var(--spacer)) calc(var(--spacer) * 1.5);
    gap: calc(var(--spacer));
  }

  .back-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .thread-user-info .user-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }

  .user-details h3 {
    font-size: 0.85rem;
  }

  .user-status {
    font-size: 0.6rem;
  }

  .thread-actions .btn-icon {
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
  }

  .typing-indicator {
    padding: calc(var(--spacer)) calc(var(--spacer) * 1.2);
    font-size: 0.65rem;
  }
}

/* ========================================================================
   TOUCH-FRIENDLY TARGETS - ENSURING 44x44 MINIMUM
   ======================================================================== */

.conversation-item,
.filter-btn,
.input-actions .btn-icon,
.send-btn,
.back-btn,
.thread-actions .btn-icon,
.message-attachment.file a,
.reaction-badge,
.add-reaction,
.remove-attachment,
.user-item,
.modal-close,
.profile-btn,
.mobile-menu-toggle,
.sidebar-close,
.bottom-nav-item,
.nav-item,
.icon-btn,
.btn-text {
  min-height: 44px;
  min-width: 44px;
}

/* Adjust for very small screens */
@media (max-width: 359px) {
  .conversation-item,
  .filter-btn,
  .input-actions .btn-icon,
  .send-btn,
  .back-btn,
  .thread-actions .btn-icon,
  .message-attachment.file a,
  .reaction-badge,
  .add-reaction,
  .remove-attachment,
  .user-item,
  .modal-close,
  .profile-btn,
  .mobile-menu-toggle,
  .sidebar-close,
  .bottom-nav-item,
  .nav-item,
  .icon-btn,
  .btn-text {
    min-height: 40px;
    min-width: 40px;
  }
}

/* ========================================================================
   SMOOTH SCROLLING
   ======================================================================== */

.messages-list,
.conversations-list,
.users-list,
.modal-body {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ========================================================================
   CUSTOM SCROLLBAR - KEPT AS IS (works well on all devices)
   ======================================================================== */

.messages-list::-webkit-scrollbar,
.conversations-list::-webkit-scrollbar,
.users-list::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
  width: 4px;
}

@media (min-width: 768px) {
  .messages-list::-webkit-scrollbar,
  .conversations-list::-webkit-scrollbar,
  .users-list::-webkit-scrollbar,
  .modal-body::-webkit-scrollbar {
    width: 6px;
  }
}

.messages-list::-webkit-scrollbar-track,
.conversations-list::-webkit-scrollbar-track,
.users-list::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 6px;
}

.messages-list::-webkit-scrollbar-thumb,
.conversations-list::-webkit-scrollbar-thumb,
.users-list::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 6px;
}

.messages-list::-webkit-scrollbar-thumb:hover,
.conversations-list::-webkit-scrollbar-thumb:hover,
.users-list::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

/* Firefox scrollbar support */
.messages-list,
.conversations-list,
.users-list,
.modal-body {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg);
}

/* ========================================================================
   ADDITIONAL RESPONSIVE FIXES
   ======================================================================== */

/* Ensure modals don't overflow on small screens */
@media (max-width: 480px) {
  .modal-content {
    max-height: 85vh;
  }

  .modal-body {
    max-height: calc(85vh - 120px);
  }

  .users-list {
    max-height: 250px;
  }
}

/* Fix for very tall mobile screens */
@media (min-height: 800px) and (max-width: 480px) {
  .users-list {
    max-height: 350px;
  }
}

/* Landscape orientation fixes */
@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .modal-content {
    max-height: 85vh;
  }

  .users-list {
    max-height: 200px;
  }

  .message-thread.active {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .thread-header {
    padding-top: calc(env(safe-area-inset-top) + var(--spacer) * 1.5);
  }

  .message-input-container {
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--spacer) * 2);
  }
}

/* Safe area insets for modern mobile devices */
@supports (padding: max(0px)) {
  .message-thread.active {
    padding-top: max(env(safe-area-inset-top), 0px);
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
    padding-left: max(env(safe-area-inset-left), 0px);
    padding-right: max(env(safe-area-inset-right), 0px);
  }

  .thread-header {
    padding-top: max(env(safe-area-inset-top), var(--spacer) * 2);
  }

  .message-input-container {
    padding-bottom: max(env(safe-area-inset-bottom), var(--spacer) * 2);
  }

  .mobile-bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom), var(--spacer));
  }
}

/* ========================================================================
   PRINT STYLES FOR MESSAGES (optional)
   ======================================================================== */

@media print {
  .message-thread {
    display: block !important;
    position: relative !important;
  }

  .message-input-container,
  .input-actions,
  .send-btn,
  .attachment-preview-area,
  .typing-indicator,
  .back-btn,
  .thread-actions {
    display: none !important;
  }

  .message-bubble {
    max-width: 100% !important;
    break-inside: avoid;
  }
}

/* Sidebar User Dropdown */
.sidebar-user-dropdown {
  position: relative;
  margin-bottom: 20px;
}

.sidebar-user-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.sidebar-user-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-light);
}

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

.sidebar-user-trigger.active .dropdown-arrow {
  transform: rotate(180deg);
}

.sidebar-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: white;
  border-radius: 16px;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 100;
  overflow: hidden;
}

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

.sidebar-user-menu .menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
}

.sidebar-user-menu .menu-avatar {
  width: 48px;
  height: 48px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.2rem;
  overflow: hidden;
}

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

.sidebar-user-menu .menu-user-info {
  flex: 1;
}

.sidebar-user-menu .menu-user-name {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.sidebar-user-menu .menu-user-email {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-bottom: 2px;
}

.sidebar-user-menu .menu-user-level {
  font-size: 0.7rem;
  color: var(--accent);
  background: var(--bg);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 30px;
}

.sidebar-user-menu .menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-dark);
  text-decoration: none;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.sidebar-user-menu .menu-item i {
  width: 20px;
  color: var(--accent);
  font-size: 1rem;
}

.sidebar-user-menu .menu-item:hover {
  background: var(--bg);
}

.sidebar-user-menu .menu-item.logout-item {
  color: #ef4444;
}

.sidebar-user-menu .menu-item.logout-item i {
  color: #ef4444;
}

.sidebar-user-menu .badge {
  margin-left: auto;
  background: var(--accent);
  color: white;
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 0.7rem;
}

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

/* Remove the old sidebar-user styles */
.sidebar-user {
  display: none;
}

/* ========================================================================
   PATCH: EARNINGS (FINANCIAL OVERVIEW) VISIBILITY FIXES
   - Ensures chart bars always render (no hidden-by-default states)
   - Prevents metric values from being truncated with ellipsis
   ======================================================================== */

.earnings-dashboard .metric-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.earnings-dashboard .metric-value {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.earnings-dashboard .chart-bar-group {
  opacity: 1;
  transform: none;
  /* Prevent global slideUp keyframes from keeping bars visually hidden */
  animation: none;
}

/* Use transform-based animation (JS sets scaleY(1)) */
.earnings-dashboard .chart-bar {
  transform: scaleY(0);
  transform-origin: bottom;
  transition:
    transform 0.6s ease,
    height 0.3s ease;
}

/* ========================================================================
   OVERVIEW CARDS (MOBILE) - Keep values on a single line
   ======================================================================== */

@media (max-width: 480px) {
  .overview-dashboard .stat-card-modern .stat-value {
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .overview-dashboard .stat-card-modern .stat-label,
  .overview-dashboard .stat-card-modern .stat-trend {
    font-size: 0.65rem;
    white-space: nowrap;
  }

  .overview-dashboard .stat-card-modern {
    gap: calc(var(--spacer) * 1.5);
    padding: calc(var(--spacer) * 2);
  }
}

/* frontend/public/css/dashboard-provider.css - ADD THESE FIXES */

/* ========================================================================
   FIX: FINANCIAL OVERVIEW TEXT WRAPPING - NO MORE CUT OFF TEXT
   ======================================================================== */

/* Remove ellipsis and allow text to wrap properly */
.earnings-dashboard .metric-card .metric-value,
.earnings-dashboard .metric-card .metric-label,
.earnings-dashboard .metric-card .metric-subtitle,
.earnings-dashboard .metric-card .metric-trend {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  line-height: 1.4;
}

/* Adjust metric card layout for better text wrapping */
.earnings-dashboard .metric-card {
  padding: calc(var(--spacer) * 1.5);
  gap: calc(var(--spacer));
  align-items: flex-start;
  min-height: auto;
}

/* Make metric values wrap properly */
.earnings-dashboard .metric-card .metric-value {
  font-size: 1.2rem;
  display: block;
  margin-bottom: 2px;
  line-height: 1.3;
}

@media (min-width: 480px) {
  .earnings-dashboard .metric-card .metric-value {
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .earnings-dashboard .metric-card .metric-value {
    font-size: 1.4rem;
  }
}

@media (min-width: 1025px) {
  .earnings-dashboard .metric-card .metric-value {
    font-size: 1.5rem;
  }
}

/* Labels should be smaller but still wrap */
.earnings-dashboard .metric-card .metric-label {
  font-size: 0.7rem;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
}

@media (min-width: 480px) {
  .earnings-dashboard .metric-card .metric-label {
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .earnings-dashboard .metric-card .metric-label {
    font-size: 0.8rem;
  }
}

/* Subtitles should wrap */
.earnings-dashboard .metric-card .metric-subtitle {
  font-size: 0.65rem;
  margin-top: 2px;
  display: block;
  color: var(--text-soft);
}

/* Trends should wrap */
.earnings-dashboard .metric-card .metric-trend {
  font-size: 0.65rem;
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

/* Adjust metric card layout for mobile */
@media (max-width: 480px) {
  .earnings-dashboard .metrics-grid {
    grid-template-columns: 1fr;
    gap: calc(var(--spacer) * 1.5);
  }

  .earnings-dashboard .metric-card {
    flex-direction: row;
    align-items: center;
    padding: calc(var(--spacer) * 1.2);
  }

  .earnings-dashboard .metric-card .metric-icon {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  .earnings-dashboard .metric-card .metric-content {
    flex: 1;
    min-width: 0;
  }

  .earnings-dashboard .metric-card .metric-value {
    font-size: 1.1rem;
    display: inline-block;
    margin-right: calc(var(--spacer) * 0.5);
  }

  .earnings-dashboard .metric-card .metric-label {
    font-size: 0.7rem;
    display: inline-block;
  }

  .earnings-dashboard .metric-card .metric-subtitle {
    font-size: 0.6rem;
  }
}

/* For very small screens */
@media (max-width: 360px) {
  .earnings-dashboard .metric-card {
    flex-direction: column;
    text-align: center;
  }

  .earnings-dashboard .metric-card .metric-value,
  .earnings-dashboard .metric-card .metric-label {
    display: block;
  }

  .earnings-dashboard .metric-card .metric-value {
    font-size: 1.2rem;
    margin-right: 0;
  }
}

/* ========================================================================
   FIX: EARNINGS CHART VISIBILITY
   ======================================================================== */

/* Ensure chart bars are always visible */
.earnings-dashboard .chart-bar {
  transform: scaleY(1) !important;
  opacity: 1 !important;
  transition: height 0.3s ease;
}

/* Fix for any hidden-by-default animation states */
.earnings-dashboard .chart-bar-group {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Ensure chart container has proper height */
.earnings-dashboard .chart-container {
  min-height: 250px;
  height: auto;
  display: flex;
  align-items: flex-end;
}

/* Fix chart bars container alignment */
.earnings-dashboard .chart-bars-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 200px;
  width: 100%;
  padding: 0 5px;
}

@media (min-width: 768px) {
  .earnings-dashboard .chart-bars-container {
    height: 250px;
  }
}

/* Ensure chart bars are visible */
.earnings-dashboard .chart-bar-stack {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  height: 100%;
  min-height: 20px;
}

/* Add background to chart bars for better visibility */
.earnings-dashboard .chart-bar.releases {
  background: var(--accent);
  min-height: 4px;
  border-radius: 4px 4px 0 0;
}

.earnings-dashboard .chart-bar.holds {
  background: #94a3b8;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
}

.earnings-dashboard .metric-card.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
}

.earnings-dashboard .metric-card.primary .metric-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.earnings-dashboard .metric-card.primary .metric-label,
.earnings-dashboard .metric-card.primary .metric-value,
.earnings-dashboard .metric-card.primary .metric-trend,
.earnings-dashboard .metric-card.primary .metric-subtitle {
  color: white;
}

.earnings-dashboard .metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .earnings-dashboard .metric-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
}

.earnings-dashboard .metric-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 2px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.earnings-dashboard .metric-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.3;
  display: block;
  margin-bottom: 2px;
  white-space: normal;
  word-break: break-word;
}

.earnings-dashboard .metric-subtitle {
  font-size: 0.65rem;
  color: var(--text-soft);
  display: block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.earnings-dashboard .metric-trend {
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  white-space: normal;
  word-break: break-word;
}

.earnings-dashboard .metric-trend.positive {
  color: #10b981;
}

.earnings-dashboard .metric-trend.negative {
  color: #ef4444;
}

/* ========================================================================
   FIX: QUICK STATS SECTION
   ======================================================================== */

.earnings-dashboard .quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: calc(var(--spacer) * 1.5);
  margin: calc(var(--spacer) * 3) 0;
  padding: calc(var(--spacer) * 2);
  background: var(--bg);
  border-radius: 16px;
}

.earnings-dashboard .stat-item {
  text-align: center;
  min-width: 0;
}

.earnings-dashboard .stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-soft);
  margin-bottom: 2px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.earnings-dashboard .stat-value {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

@media (min-width: 480px) {
  .earnings-dashboard .quick-stats {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .earnings-dashboard .stat-value {
    font-size: 1rem;
  }
}

/* Hide portfolio category container if it's empty or not shown */
.portfolio-category:empty {
  display: none;
}

/* Optional: Style for when category exists */
.portfolio-category {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 16px;
  font-size: 0.65rem;
  color: var(--accent);
  margin-bottom: 8px;
}

.portfolio-category i {
  font-size: 0.6rem;
}

/* Add to frontend/public/css/dashboard-provider.css */

/* ========================================================================
   NEW SIDEBAR STRUCTURE STYLES
   ======================================================================== */

.nav-section {
  margin: calc(var(--spacer) * 0.5) 0;
}

/* Add to frontend/public/css/dashboard-provider.css */

.nav-section-header {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}

.nav-section-header .dropdown-icon {
  transition: transform 0.3s ease;
}

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

.nav-submenu {
  display: none;
  padding-left: calc(var(--spacer) * 2);
  margin-left: calc(var(--spacer) * 3);
  border-left: 1px solid var(--border-light);
  margin-bottom: calc(var(--spacer) * 0.5);
}

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

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

/* Ensure the header doesn't have active state when submenu is closed */
.nav-section-header.active {
  background: #f2ebe3;
  color: var(--accent);
}

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

/* Add to frontend/public/css/dashboard-provider.css */

.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 3);
  margin: calc(var(--spacer) * 4) 0;
}

@media (min-width: 768px) {
  .insights-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.activity-feed,
.insights-panel,
.schedule-panel {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 3);
  box-shadow: var(--shadow);
}

.feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 2);
}

.feed-header h3 {
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
}

.feed-header h3 i {
  color: var(--accent);
}

.view-all {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

.activity-item {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.activity-item:hover {
  transform: translateX(4px);
  background: var(--card-bg);
}

.activity-icon {
  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;
}

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

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

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

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

.activity-empty {
  text-align: center;
  padding: calc(var(--spacer) * 3);
  color: var(--text-soft);
}

.activity-empty i {
  font-size: 2rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  opacity: 0.3;
}

/* Schedule items */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  flex-wrap: wrap;
}

.schedule-item:hover {
  transform: translateX(4px);
  background: var(--card-bg);
}

.schedule-time {
  min-width: 70px;
}

.time-badge {
  background: var(--card-bg);
  padding: 3px 6px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-dark);
  display: inline-block;
}

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

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

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

.schedule-status {
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 20px;
  font-weight: 500;
  white-space: nowrap;
}

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

.schedule-status.confirmed {
  background: #e3f2e9;
  color: #2f6e4a;
}

.schedule-status.completed {
  background: #e1f0fa;
  color: #1e4a6b;
}

.schedule-empty {
  text-align: center;
  padding: calc(var(--spacer) * 3);
  color: var(--text-soft);
}

.schedule-empty i {
  font-size: 2rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  opacity: 0.3;
}

.schedule-note {
  display: block;
  margin-top: calc(var(--spacer));
  font-size: 0.7rem;
  color: var(--accent);
}

/* Performance Section */
.performance-section {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 3);
  margin-top: calc(var(--spacer) * 3);
  box-shadow: var(--shadow);
}

.performance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 2);
}

.performance-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
}

.period-select {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.8rem;
  min-height: 40px;
}

.metrics-grid-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 640px) {
  .metrics-grid-compact {
    grid-template-columns: repeat(4, 1fr);
  }
}

.metric-compact {
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 16px;
}

.metric-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  display: block;
  margin-bottom: calc(var(--spacer) * 0.5);
}

.metric-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  display: block;
  margin-bottom: 2px;
}

.rating-display {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  margin-bottom: 2px;
}

.stars {
  color: #fbbf24;
  font-size: 0.8rem;
}

.metric-trend {
  font-size: 0.65rem;
  display: inline-block;
}

.metric-trend.positive {
  color: #10b981;
}

.metric-trend.neutral {
  color: var(--text-soft);
}

/* Add to frontend/public/css/dashboard-provider.css */

.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 768px) {
  .section-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.header-actions {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
}

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

.header-actions button {
  flex: 1;
}

@media (min-width: 768px) {
  .header-actions button {
    flex: none;
  }
}

.listings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  margin-top: calc(var(--spacer) * 2);
}

@media (min-width: 640px) {
  .listings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1024px) {
  .listings-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacer) * 3);
  }
}

@media (min-width: 1280px) {
  .listings-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.listing-media {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--bg);
}

.listing-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.listing-card:hover .listing-media img {
  transform: scale(1.05);
}

.no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-soft);
  font-size: 3rem;
}

.listing-type {
  position: absolute;
  top: calc(var(--spacer) * 1.5);
  left: calc(var(--spacer) * 1.5);
  background: var(--accent);
  color: white;
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

.listing-content {
  padding: calc(var(--spacer) * 2);
}

.listing-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 0.5);
  line-height: 1.4;
}

.listing-description {
  color: var(--text-soft);
  font-size: 0.8rem;
  margin-bottom: calc(var(--spacer) * 1.5);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: calc(var(--spacer) * 1.5);
}

.listing-meta {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.8);
  margin-bottom: calc(var(--spacer) * 1.5);
  font-size: 0.75rem;
  color: var(--text-soft);
}

@media (min-width: 480px) {
  .listing-meta {
    flex-direction: row;
    justify-content: space-between;
  }
}

.listing-meta i {
  margin-right: 4px;
  color: var(--accent);
  width: 14px;
}

.listing-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(var(--spacer) * 1.5);
  font-size: 0.7rem;
  color: var(--text-soft);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: calc(var(--spacer) * 1.2) 0;
}

.listing-stats i {
  margin-right: 4px;
  color: var(--accent);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: calc(var(--spacer) * 6);
  background: var(--card-bg);
  border-radius: 24px;
  color: var(--text-soft);
}

.empty-state > i {
  font-size: 3rem;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: calc(var(--spacer) * 2);
}

.empty-state .btn-primary i,
.empty-state .btn-outline i {
  font-size: inherit;
  color: inherit;
  opacity: 1;
  margin-bottom: 0;
}

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

.empty-state p {
  margin-bottom: calc(var(--spacer) * 2);
}

.error-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: calc(var(--spacer) * 4);
  background: #fee2e2;
  border-radius: 16px;
  color: #991b1b;
}

.error-state i {
  font-size: 2rem;
  margin-bottom: calc(var(--spacer) * 1.5);
}

.error-state button {
  margin-top: calc(var(--spacer) * 1.5);
}

/* Add to frontend/public/css/dashboard-provider.css */

.requests-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
}

.requests-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 2);
}

.requests-actions {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
}

.requests-filters {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  box-shadow: var(--shadow);
}

.filter-tabs {
  display: flex;
  gap: calc(var(--spacer) * 0.8);
  margin-bottom: calc(var(--spacer) * 2);
  overflow-x: auto;
  padding-bottom: calc(var(--spacer));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

.filter-tab {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.8rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  min-height: 40px;
}

.filter-tab:hover {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--text-dark);
}

.filter-tab.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.requests-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .requests-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1200px) {
  .requests-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.request-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

.request-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.request-card.urgent {
  border-left: 4px solid #ef4444;
}

.request-card.pending {
  border-left: 4px solid #f59e0b;
}

.request-card.confirmed {
  border-left: 4px solid #10b981;
}

.request-card.in_progress {
  border-left: 4px solid #3b82f6;
}

.request-card.completed {
  border-left: 4px solid #8b5cf6;
  opacity: 0.9;
}

.request-card.cancelled,
.request-card.rejected {
  border-left: 4px solid #6b7280;
  opacity: 0.7;
}

.request-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: calc(var(--spacer) * 2);
  flex-wrap: wrap;
  gap: calc(var(--spacer));
}

.request-badges {
  display: flex;
  gap: calc(var(--spacer) * 0.5);
  flex-wrap: wrap;
}

.urgent-badge {
  background: #fee2e2;
  color: #991b1b;
  padding: 4px 8px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.request-date {
  font-size: 0.7rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 30px;
  white-space: nowrap;
}

.request-body {
  margin-bottom: calc(var(--spacer) * 2);
}

.customer-section {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 1.5);
}

.customer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  flex-shrink: 0;
}

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

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

.service-title,
.product-title {
  color: var(--accent);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-details {
  background: var(--bg);
  border-radius: 14px;
  padding: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 1.5);
}

.detail-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.8);
  padding: calc(var(--spacer) * 0.5) 0;
  font-size: 0.8rem;
  color: var(--text-dark);
  word-break: break-word;
}

.detail-row i {
  width: 16px;
  color: var(--accent);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.total-row {
  margin-top: calc(var(--spacer));
  padding-top: calc(var(--spacer));
  border-top: 1px solid var(--border-light);
  font-weight: 600;
}

.total-amount {
  color: var(--accent);
  font-size: 0.95rem;
}

.booking-details,
.order-details {
  background: var(--bg);
  border-radius: 14px;
  padding: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 1.5);
}

.note-row {
  background: #fef3e2;
  border-radius: 10px;
  padding: calc(var(--spacer) * 1.2);
  margin-top: calc(var(--spacer));
  font-size: 0.8rem;
  color: #b45309;
  font-style: italic;
  display: flex;
  gap: calc(var(--spacer));
}

.note-row i {
  color: #b45309;
  flex-shrink: 0;
}

.price-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--accent-light);
  border-radius: 30px;
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  margin-top: calc(var(--spacer) * 1.5);
}

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

.price-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
}

.request-footer {
  border-top: 1px solid var(--border-light);
  padding-top: calc(var(--spacer) * 1.5);
}

.action-buttons {
  display: flex;
  gap: calc(var(--spacer) * 0.8);
  flex-wrap: wrap;
  align-items: center;
}

.action-buttons .btn-primary,
.action-buttons .btn-outline {
  flex: 1 1 auto;
  min-width: 80px;
}

.action-buttons .btn-icon {
  width: 36px;
  height: 36px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  margin-left: auto;
}

.action-buttons .btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: calc(var(--spacer) * 6);
  background: var(--card-bg);
  border-radius: 24px;
  color: var(--text-soft);
}

.empty-state > i {
  font-size: 3rem;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: calc(var(--spacer) * 2);
}

.empty-state .btn-primary i,
.empty-state .btn-outline i {
  font-size: inherit;
  color: inherit;
  opacity: 1;
  margin-bottom: 0;
}

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

.empty-state p {
  margin-bottom: calc(var(--spacer) * 2);
}

.empty-actions {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  justify-content: center;
  flex-wrap: wrap;
}

.error-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: calc(var(--spacer) * 4);
  background: #fee2e2;
  border-radius: 16px;
  color: #991b1b;
}

.error-state i {
  font-size: 2rem;
  margin-bottom: calc(var(--spacer) * 1.5);
}

.error-state button {
  margin-top: calc(var(--spacer) * 1.5);
}

.loading-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: calc(var(--spacer) * 4);
  color: var(--text-soft);
}

/* Add to frontend/public/css/dashboard-provider.css */

.team-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

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

.team-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.team-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  border: 3px solid white;
  box-shadow: var(--shadow);
}

.team-status .status-badge {
  padding: 4px 8px;
  font-size: 0.65rem;
}

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

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

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

.member-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.member-role {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 2px;
}

.member-title {
  color: var(--text-soft);
  font-size: 0.8rem;
}

.team-contact {
  background: var(--bg);
  border-radius: 14px;
  padding: calc(var(--spacer) * 1.5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.8);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.8);
  font-size: 0.8rem;
  color: var(--text-dark);
  word-break: break-all;
}

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

.team-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.5);
}

.permission-badge {
  background: var(--bg);
  border: 1px solid var(--border-light);
  padding: 4px 8px;
  border-radius: 30px;
  font-size: 0.65rem;
  color: var(--text-soft);
}

.team-actions {
  display: flex;
  gap: calc(var(--spacer) * 0.5);
  justify-content: flex-end;
  border-top: 1px solid var(--border-light);
  padding-top: calc(var(--spacer) * 1.5);
  margin-top: auto;
}

.team-actions .btn-icon {
  width: 36px;
  height: 36px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-soft);
}

.team-actions .btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.team-actions .btn-icon.danger:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

.team-footer {
  font-size: 0.65rem;
  color: var(--text-soft);
  border-top: 1px solid var(--border-light);
  padding-top: calc(var(--spacer));
  margin-top: auto;
}

/* Team Form */
.team-modal .modal-content {
  max-width: 500px;
}

.social-links-input {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.2);
  margin-top: calc(var(--spacer));
}

.social-input {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.8);
}

.social-input i {
  width: 24px;
  color: var(--accent);
  font-size: 1.1rem;
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: calc(var(--spacer) * 1.5);
  background: var(--bg);
  padding: calc(var(--spacer) * 1.5);
  border-radius: 16px;
  margin-top: calc(var(--spacer));
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  cursor: pointer;
  font-size: 0.8rem;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

/* Profile Avatar Section */
.profile-avatar-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  align-items: center;
  margin: calc(var(--spacer) * 3) 0;
  padding: calc(var(--spacer) * 2);
  background: var(--bg);
  border-radius: 20px;
}

@media (min-width: 640px) {
  .profile-avatar-section {
    flex-direction: row;
    gap: calc(var(--spacer) * 3);
    align-items: center;
  }
}

.avatar-preview {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid var(--border-light);
  transition: all 0.2s;
  flex-shrink: 0;
}

.avatar-preview:hover {
  border-color: var(--accent);
  transform: scale(1.02);
}

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

.avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  font-size: 2.5rem;
  font-weight: 500;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  gap: 4px;
}

.avatar-preview:hover .avatar-overlay {
  opacity: 1;
}

.avatar-overlay i {
  font-size: 1.2rem;
}

.avatar-overlay span {
  font-size: 0.7rem;
}

.avatar-info {
  flex: 1;
  min-width: 0;
  text-align: center;
}

@media (min-width: 640px) {
  .avatar-info {
    text-align: left;
  }
}

.avatar-info h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.avatar-info p {
  color: var(--text-soft);
  font-size: 0.8rem;
  margin-bottom: calc(var(--spacer) * 1.5);
}

.avatar-info .btn-outline,
.avatar-info .btn-text {
  margin-right: calc(var(--spacer));
  margin-bottom: calc(var(--spacer) * 0.5);
}

@media (max-width: 480px) {
  .avatar-info .btn-outline,
  .avatar-info .btn-text {
    width: 100%;
    margin-right: 0;
  }
}

/* Add to frontend/public/css/dashboard-provider.css */

.filter-indicator {
  margin-left: auto;
}

.filter-badge {
  background: var(--accent);
  color: white;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.conversation-status {
  margin-top: 4px;
}

.status-indicator {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-indicator.requests {
  background: #fef3e2;
  color: #b45309;
}

.status-indicator.processing {
  background: #e1f0fa;
  color: #1e4a6b;
}

.status-indicator.pending {
  background: #e6e9f0;
  color: #4b5563;
}

.status-indicator.canceled {
  background: #fee2e2;
  color: #991b1b;
}

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

.user-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.user-status-row .status-badge {
  padding: 2px 8px;
  font-size: 0.6rem;
}

.conversation-item {
  position: relative;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 4px;
  transition: all 0.2s;
  cursor: pointer;
}

.conversation-item:hover {
  background: var(--bg);
}

.conversation-item.active {
  background: #f2ebe3;
  border-left: 3px solid var(--accent);
}

.conversation-item.unread {
  background: #f8fafc;
}

.conversation-item.unread .conversation-name {
  font-weight: 700;
  color: var(--accent);
}

.unread-badge {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: var(--accent);
  color: white;
  min-width: 20px;
  height: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

.no-conversations i {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.3;
  color: var(--accent);
}

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

.no-conversations p {
  margin-bottom: 20px;
}

/* Message thread enhancements */
.thread-user-info .user-details {
  flex: 1;
}

.user-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.user-status-row .status-badge {
  padding: 2px 8px;
  font-size: 0.6rem;
  border-radius: 20px;
  background: var(--bg);
  color: var(--text-soft);
}

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

.user-status-row .status-badge.in_progress {
  background: #e1f0fa;
  color: #1e4a6b;
}

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

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

/* Mobile responsiveness */
@media (max-width: 768px) {
  .filter-indicator {
    width: 100%;
    margin-top: 10px;
  }

  .filter-badge {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .conversation-status .status-indicator {
    font-size: 0.55rem;
    padding: 2px 6px;
  }

  .unread-badge {
    min-width: 18px;
    height: 18px;
    font-size: 0.55rem;
  }
}

@media (max-width: 480px) {
  .conversation-item {
    padding: 10px;
  }

  .conversation-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  .conversation-name {
    font-size: 0.85rem;
  }

  .conversation-last-message {
    font-size: 0.7rem;
  }

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

/* Add to frontend/public/css/dashboard-provider.css */

.earnings-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
}

.earnings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 2);
}

.earnings-header .page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dark);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
}

.metric-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2.5);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.metric-card.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
}

.metric-card.primary .metric-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

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

.metric-label {
  font-size: 0.75rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: block;
}

.metric-card.primary .metric-label {
  color: rgba(255, 255, 255, 0.9);
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
  margin-bottom: 4px;
}

.metric-card.primary .metric-value {
  color: white;
}

.metric-subtitle {
  font-size: 0.7rem;
  color: var(--text-soft);
  display: block;
}

.metric-card.primary .metric-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 768px) {
  .charts-grid {
    grid-template-columns: 2fr 1fr;
    gap: calc(var(--spacer) * 3);
  }
}

.chart-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2.5);
  box-shadow: var(--shadow);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 2);
  flex-wrap: wrap;
  gap: calc(var(--spacer));
}

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

.chart-legend {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
  font-size: 0.8rem;
  color: var(--text-soft);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-color.releases {
  background: var(--accent);
}

.legend-color.holds {
  background: #94a3b8;
}

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

.chart-bars-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 100%;
  gap: calc(var(--spacer) * 1.5);
}

.chart-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 100%;
  min-width: 40px;
  animation: slideUp 0.5s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

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

.chart-bar-stack {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  background: var(--bg);
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  position: relative;
  min-height: 4px;
}

.chart-bar {
  width: 100%;
  transition: height 0.3s ease;
}

.chart-bar.releases {
  background: var(--accent);
}

.chart-bar.holds {
  background: #94a3b8;
}

.chart-label {
  margin-top: calc(var(--spacer));
  font-size: 0.7rem;
  color: var(--text-soft);
  transform: rotate(-45deg);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .chart-label {
    transform: none;
  }
}

.chart-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-dark);
  color: white;
  padding: calc(var(--spacer) * 1.5);
  border-radius: 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.chart-bar-group:hover .chart-tooltip {
  opacity: 1;
}

.distribution-container {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.distribution-pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  width: 100%;
}

@media (min-width: 480px) {
  .distribution-pie {
    flex-direction: row;
    gap: calc(var(--spacer) * 3);
  }
}

.pie-chart {
  width: 140px;
  height: 140px;
  transform: rotate(-90deg);
  cursor: pointer;
}

.pie-segment {
  transition: stroke-width 0.2s;
  cursor: pointer;
}

.pie-segment:hover {
  stroke-width: 24;
}

.distribution-legend {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer));
}

.distribution-legend .legend-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  font-size: 0.85rem;
  color: var(--text-dark);
  flex-wrap: wrap;
}

.distribution-legend .dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.distribution-legend .dot.releases {
  background: var(--accent);
}

.distribution-legend .dot.holds {
  background: #94a3b8;
}

.distribution-legend .dot.fees {
  background: #ef4444;
}

.legend-value {
  margin-left: auto;
  font-weight: 600;
  color: var(--text-dark);
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  padding: calc(var(--spacer) * 2);
  background: var(--bg);
  border-radius: 20px;
}

@media (min-width: 640px) {
  .quick-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.quick-stats .stat-item {
  text-align: center;
}

.quick-stats .stat-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-soft);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-stats .stat-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
}

.transactions-section {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2.5);
  margin-bottom: calc(var(--spacer) * 3);
  box-shadow: var(--shadow);
}

.section-tabs {
  display: flex;
  gap: calc(var(--spacer));
  border-bottom: 1px solid var(--border-light);
  margin-bottom: calc(var(--spacer) * 2);
  overflow-x: auto;
  padding-bottom: 2px;
}

.section-tabs .tab-btn {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  background: none;
  border: none;
  color: var(--text-soft);
  font-size: 0.85rem;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

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

.section-tabs .tab-btn.active {
  color: var(--accent);
}

.section-tabs .tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

.transactions-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  max-height: 400px;
  overflow-y: auto;
  padding-right: calc(var(--spacer));
}

.transaction-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 16px;
  transition: all 0.2s;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .transaction-item {
    flex-wrap: nowrap;
  }
}

.transaction-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow);
}

.transaction-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.transaction-icon.success {
  background: #e3f2e9;
  color: #2f6e4a;
}

.transaction-icon.warning {
  background: #fef3e2;
  color: #b45309;
}

.transaction-icon.danger {
  background: #fee2e2;
  color: #991b1b;
}

.transaction-icon.info {
  background: #e1f0fa;
  color: #1e4a6b;
}

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

.transaction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: calc(var(--spacer));
}

.transaction-type {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.transaction-amount {
  font-weight: 600;
  font-size: 0.9rem;
}

.transaction-amount.positive {
  color: #10b981;
}

.transaction-amount.negative {
  color: #ef4444;
}

.transaction-meta {
  display: flex;
  gap: calc(var(--spacer) * 2);
  font-size: 0.75rem;
  color: var(--text-soft);
  flex-wrap: wrap;
}

.transaction-date i {
  margin-right: 4px;
}

.transaction-description {
  color: var(--text-dark);
}

.transaction-reference {
  color: var(--accent);
}

.transaction-status {
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 500;
  background: #e3f2e9;
  color: #2f6e4a;
  white-space: nowrap;
}

.upcoming-payouts {
  background: var(--card-bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2.5);
  box-shadow: var(--shadow);
}

.upcoming-payouts h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: calc(var(--spacer) * 2);
  color: var(--text-dark);
}

.payout-timeline {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 14px;
  position: relative;
  flex-wrap: wrap;
}

.timeline-item.soon {
  border-left: 3px solid #f59e0b;
}

.timeline-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid;
  flex-shrink: 0;
}

.timeline-marker.upcoming {
  border-color: var(--accent);
  background: transparent;
}

.timeline-marker.scheduled {
  border-color: #94a3b8;
  background: transparent;
}

.timeline-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  flex-wrap: wrap;
}

.timeline-date {
  min-width: 100px;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.timeline-amount {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.9rem;
}

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

.timeline-status.upcoming {
  background: var(--accent);
  color: white;
}

.timeline-status.scheduled {
  background: var(--bg);
  color: var(--text-soft);
}

.timeline-customer {
  font-size: 0.8rem;
  color: var(--text-soft);
  margin-left: auto;
}

.empty-state.small {
  padding: calc(var(--spacer) * 3);
  text-align: center;
  color: var(--text-soft);
}

.empty-state.small i {
  font-size: 2rem;
  margin-bottom: calc(var(--spacer));
  opacity: 0.3;
}

.error-state.full-width {
  grid-column: 1 / -1;
  padding: calc(var(--spacer) * 4);
  text-align: center;
  background: #fee2e2;
  border-radius: 16px;
  color: #991b1b;
}

.error-state.full-width i {
  font-size: 2rem;
  margin-bottom: calc(var(--spacer) * 1.5);
}

.error-state.full-width button {
  margin-top: calc(var(--spacer) * 1.5);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: calc(var(--spacer) * 1.5);
  }

  .metric-card {
    padding: calc(var(--spacer) * 2);
  }

  .metric-value {
    font-size: 1.3rem;
  }

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

  .chart-container {
    height: 200px;
  }

  .distribution-pie {
    flex-direction: column;
  }

  .pie-chart {
    width: 120px;
    height: 120px;
  }

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

  .transaction-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .transaction-header {
    width: 100%;
  }

  .transaction-meta {
    flex-direction: column;
    gap: calc(var(--spacer));
  }

  .transaction-status {
    align-self: flex-end;
  }

  .timeline-content {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacer));
  }

  .timeline-customer {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .earnings-dashboard {
    padding: calc(var(--spacer));
  }

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

  .earnings-header .header-actions {
    width: 100%;
    flex-direction: column;
  }

  .earnings-header .btn-outline,
  .earnings-header .btn-primary {
    width: 100%;
  }

  .quick-stats {
    grid-template-columns: 1fr;
    gap: calc(var(--spacer) * 1.5);
  }

  .section-tabs {
    gap: calc(var(--spacer) * 0.5);
  }

  .section-tabs .tab-btn {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
    font-size: 0.75rem;
  }

  .transaction-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .transaction-type {
    font-size: 0.85rem;
  }

  .transaction-amount {
    font-size: 0.85rem;
  }

  .transaction-meta {
    font-size: 0.7rem;
  }

  .timeline-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .timeline-marker {
    align-self: flex-start;
  }
}

/* Add to frontend/public/css/dashboard-provider.css */

/* Portfolio Dashboard */
.portfolio-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
}

.portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 2);
}

.portfolio-header .page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dark);
}

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

.portfolio-actions {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
}

/* Portfolio Stats */
.portfolio-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
}

.stat-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

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

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

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

/* Portfolio Filters */
.portfolio-filters {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 3);
  background: var(--card-bg);
  padding: calc(var(--spacer) * 2);
  border-radius: 16px;
  box-shadow: var(--shadow);
  flex-wrap: wrap;
  align-items: center;
}

.portfolio-filters .search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.portfolio-filters .search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
}

.portfolio-filters .search-box input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.9rem;
  background: var(--bg);
}

.portfolio-filters .filter-select {
  min-width: 140px;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--text-dark);
  cursor: pointer;
}

.portfolio-filters .filter-select:focus {
  outline: none;
  border-color: var(--accent);
}

.portfolio-filters .btn-outline {
  padding: 12px 20px;
  border-radius: 30px;
  white-space: nowrap;
}

/* Portfolio Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: calc(var(--spacer) * 2.5);
}

/* Portfolio Card */
.portfolio-card {
  background: var(--card-bg);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  border: 1px solid var(--border-light);
  position: relative;
}

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

.portfolio-card-media {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--bg);
}

.portfolio-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.portfolio-card:hover .portfolio-card-media img {
  transform: scale(1.05);
}

.featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.portfolio-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
}

.portfolio-card:hover .portfolio-card-actions {
  opacity: 1;
}

.portfolio-card-actions .btn-icon {
  width: 36px;
  height: 36px;
  background: white;
  color: var(--text-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}

.portfolio-card-actions .btn-icon:hover {
  background: var(--accent);
  color: white;
  transform: scale(1.1);
}

.portfolio-card-actions .btn-icon.danger:hover {
  background: #ef4444;
  color: white;
}

.portfolio-card-content {
  padding: calc(var(--spacer) * 2);
}

.portfolio-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
  line-height: 1.4;
}

.portfolio-description {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin-bottom: 12px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.portfolio-category {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-light);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 500;
  margin-bottom: 12px;
}

.portfolio-category i {
  font-size: 0.65rem;
}

.portfolio-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.75rem;
  color: var(--text-soft);
  flex-wrap: wrap;
}

.portfolio-meta i {
  margin-right: 4px;
  color: var(--accent);
}

.portfolio-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.stat-item-small {
  text-align: center;
}

.stat-item-small .stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  display: block;
  margin-bottom: 2px;
}

.stat-item-small .stat-label {
  font-size: 0.65rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
}

.portfolio-tag {
  background: var(--bg);
  color: var(--text-soft);
  padding: 4px 8px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 500;
  transition: all 0.2s;
}

.portfolio-tag:hover {
  background: var(--accent-light);
  color: var(--accent);
}

.portfolio-tag.more {
  background: var(--accent);
  color: white;
}

/* Empty State */
.empty-portfolio {
  grid-column: 1 / -1;
  text-align: center;
  padding: calc(var(--spacer) * 6);
  background: var(--card-bg);
  border-radius: 24px;
  color: var(--text-soft);
}

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

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

.empty-portfolio p {
  margin-bottom: 20px;
}

.empty-portfolio .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* No Results */
.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: calc(var(--spacer) * 4);
  background: var(--card-bg);
  border-radius: 20px;
  color: var(--text-soft);
}

.no-results i {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.3;
  color: var(--accent);
}

.no-results h3 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 4px;
}

/* Portfolio Modal */
.portfolio-modal .modal-content {
  max-width: 800px;
  width: 95%;
}

.portfolio-modal .modal-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: calc(var(--spacer) * 2);
}

.form-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
  overflow-x: auto;
}

.form-tabs .tab-btn {
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 30px;
  transition: all 0.2s;
  white-space: nowrap;
}

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

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

.tab-pane {
  animation: fadeIn 0.3s ease;
}

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

/* Skills Grid */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 12px;
  background: var(--bg);
  border-radius: 12px;
}

.skill-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
}

.skill-checkbox:hover {
  background: var(--accent-light);
}

.skill-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

/* Tags Input */
.tags-input {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px;
  background: var(--bg);
}

.tags-input input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 4px;
  font-size: 0.9rem;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tag-item {
  background: var(--accent-light);
  color: var(--text-dark);
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag-item i {
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--text-soft);
}

.tag-item i:hover {
  color: #ef4444;
}

/* Media Upload */
.upload-area {
  border: 2px dashed var(--border-light);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg);
  margin-bottom: 16px;
}

.upload-area:hover,
.upload-area.dragover {
  border-color: var(--accent);
  background: var(--bg);
}

.upload-area i {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 8px;
}

.upload-area p {
  margin-bottom: 4px;
  color: var(--text-dark);
}

.upload-area small {
  color: var(--text-soft);
  font-size: 0.8rem;
}

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.image-preview {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--border-light);
  transition: all 0.2s;
}

.image-preview:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow);
}

.image-preview.primary {
  border-color: var(--accent);
}

.image-preview.pending {
  opacity: 0.7;
}

.image-preview.failed {
  border-color: #ef4444;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.image-preview:hover .image-preview-overlay {
  opacity: 1;
}

.image-preview-overlay .btn-icon {
  width: 32px;
  height: 32px;
  background: white;
  color: var(--text-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.image-preview-overlay .btn-icon:hover {
  background: var(--accent);
  color: white;
  transform: scale(1.1);
}

.image-filename {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.65rem;
  padding: 2px 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.primary-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--accent);
  color: white;
  padding: 2px 6px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 600;
  z-index: 2;
}

.pending-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #f59e0b;
  color: white;
  padding: 2px 6px;
  border-radius: 20px;
  font-size: 0.6rem;
}

.drag-handle {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
  font-size: 0.7rem;
}

.upload-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  transition: width 0.2s;
}

/* Media Tip */
.media-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fef3e2;
  color: #b45309;
  padding: 12px;
  border-radius: 12px;
  margin-top: 16px;
  font-size: 0.85rem;
}

.media-tip i {
  font-size: 1rem;
}

/* Modal Footer */
.portfolio-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
  background: var(--bg);
  border-radius: 0 0 24px 24px;
}

.portfolio-modal .modal-footer .btn-outline,
.portfolio-modal .modal-footer .btn-primary {
  min-width: 120px;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .portfolio-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .portfolio-filters .search-box {
    width: 100%;
  }

  .portfolio-filters .filter-select {
    width: 100%;
  }

  .portfolio-filters .btn-outline {
    width: 100%;
  }

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

  .portfolio-card-actions {
    opacity: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
    padding: 8px;
    width: 100%;
    justify-content: flex-end;
  }

  .portfolio-card-actions .btn-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
  }

  .form-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

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

  .image-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
}

@media (max-width: 480px) {
  .portfolio-stats {
    grid-template-columns: 1fr;
  }

  .portfolio-actions {
    width: 100%;
    flex-direction: column;
  }

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

  .portfolio-card-media {
    height: 180px;
  }

  .portfolio-card-content {
    padding: 12px;
  }

  .portfolio-title {
    font-size: 1rem;
  }

  .portfolio-stats-row .stat-value {
    font-size: 0.9rem;
  }

  .portfolio-stats-row .stat-label {
    font-size: 0.6rem;
  }

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

  .image-preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* frontend/public/css/dashboard-provider.css - Full Width Messages */

.messages-fullwidth {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 0;
  overflow: hidden;
}

.messages-fullwidth .messages-header {
  padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 2);
}

@media (max-width: 768px) {
  .messages-fullwidth .messages-header {
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--spacer) * 1.5);
  }
}

.messages-fullwidth .messages-header .header-left {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 3);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .messages-fullwidth .messages-header .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacer) * 1.5);
  }
}

.messages-fullwidth .messages-header .page-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-dark);
}

.messages-fullwidth .filter-tabs {
  display: flex;
  gap: calc(var(--spacer) * 0.5);
  background: var(--bg);
  padding: 4px;
  border-radius: 40px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .messages-fullwidth .filter-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
  }
}

.messages-fullwidth .filter-tab {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  background: transparent;
  border: none;
  border-radius: 30px;
  font-size: 0.85rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  min-height: 40px;
}

.messages-fullwidth .filter-tab:hover {
  color: var(--text-dark);
  background: var(--card-bg);
}

.messages-fullwidth .filter-tab.active {
  background: var(--accent);
  color: white;
}

.messages-fullwidth .header-right {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
}

.messages-fullwidth .search-box {
  position: relative;
  width: 250px;
}

@media (max-width: 768px) {
  .messages-fullwidth .search-box {
    width: 100%;
  }
}

.messages-fullwidth .search-box i {
  position: absolute;
  left: calc(var(--spacer) * 2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.9rem;
}

.messages-fullwidth .search-box input {
  width: 100%;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 1.5)
    calc(var(--spacer) * 1.5) calc(var(--spacer) * 5);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.9rem;
  background: var(--bg);
  min-height: 44px;
}

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

/* Full Width Container */
.messages-fullwidth-container {
  display: flex;
  flex: 1;
  min-height: 0;
  height: calc(100vh - 180px);
  background: white;
  overflow: hidden;
}

@media (max-width: 768px) {
  .messages-fullwidth-container {
    height: calc(100vh - 220px);
  }
}

/* Conversations Sidebar - Fixed Width */
.messages-fullwidth-container .conversations-sidebar {
  width: 350px;
  border-right: 1px solid var(--border-light);
  background: #fcfcfd;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .messages-fullwidth-container .conversations-sidebar {
    width: 300px;
  }
}

@media (max-width: 768px) {
  .messages-fullwidth-container .conversations-sidebar {
    width: 100%;
    border-right: none;
    display: block;
  }

  .messages-fullwidth-container .conversations-sidebar.hide-mobile {
    display: none;
  }
}

.conversations-header {
  padding: calc(var(--spacer) * 2);
  border-bottom: 1px solid var(--border-light);
  background: white;
}

.conversations-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.conversation-count {
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 0.75rem;
  color: var(--text-soft);
  font-weight: normal;
}

.conversations-list {
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--spacer) * 1.5);
}

/* Conversation Items */
.conversation-item {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  margin-bottom: 4px;
  border: 1px solid transparent;
}

.conversation-item:hover {
  background: white;
  border-color: var(--border-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.conversation-item.active {
  background: #f2ebe3;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.1);
}

.conversation-item.unread {
  background: #f8fafc;
}

.conversation-item.unread .conversation-name {
  font-weight: 700;
  color: var(--accent);
}

.conversation-avatar {
  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.1rem;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.3);
  text-transform: uppercase;
}

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

.conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  gap: 8px;
}

.conversation-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.conversation-time {
  font-size: 0.65rem;
  color: var(--text-soft);
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 20px;
  white-space: nowrap;
}

.conversation-last-message {
  font-size: 0.8rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  line-height: 1.4;
  margin-bottom: 4px;
}

.conversation-status {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.status-indicator {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-indicator.requests {
  background: #fef3e2;
  color: #b45309;
}

.status-indicator.processing {
  background: #e1f0fa;
  color: #1e4a6b;
}

.status-indicator.pending {
  background: #e6e9f0;
  color: #4b5563;
}

.status-indicator.canceled {
  background: #fee2e2;
  color: #991b1b;
}

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

.unread-badge {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: var(--accent);
  color: white;
  min-width: 22px;
  height: 22px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(183, 140, 90, 0.3);
  animation: pulse 2s infinite;
}

/* Message Thread - Takes Remaining Space */
.messages-fullwidth-container .message-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  min-width: 0;
}

.thread-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  padding: calc(var(--spacer) * 4);
  background: linear-gradient(135deg, #faf9f7 0%, #f5f3f0 100%);
}

.thread-placeholder i {
  font-size: 4rem;
  margin-bottom: calc(var(--spacer) * 2);
  opacity: 0.2;
  color: var(--accent);
}

.thread-placeholder h3 {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 0.8);
  font-family: var(--font-serif);
}

.thread-placeholder p {
  margin-bottom: calc(var(--spacer) * 2);
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* Message Thread Header */
.thread-header {
  padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 5;
}

@media (max-width: 768px) {
  .thread-header {
    padding: calc(var(--spacer) * 1.5);
  }
}

.back-btn {
  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;
}

@media (max-width: 768px) {
  .back-btn {
    display: flex;
  }
}

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

.thread-user-info {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  flex: 1;
  min-width: 0;
}

.thread-user-info .user-avatar {
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  background: white;
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.3);
}

@media (max-width: 768px) {
  .thread-user-info .user-avatar {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

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

.user-details h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
  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.75rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-status.online {
  color: #10b981;
}

.user-status.online::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  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.65rem;
  border-radius: 20px;
  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;
}

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

.thread-actions {
  display: flex;
  gap: 4px;
}

.thread-actions .btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  transition: all 0.2s;
  font-size: 0.95rem;
}

.thread-actions .btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: scale(1.1);
}

/* Messages List */
.messages-list {
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--spacer) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

@media (max-width: 768px) {
  .messages-list {
    padding: calc(var(--spacer) * 1.5);
  }
}

.date-divider {
  text-align: center;
  margin: calc(var(--spacer) * 1.5) 0;
  color: var(--text-soft);
  font-size: 0.7rem;
  position: relative;
}

.date-divider span {
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  display: inline-block;
}

.message-item {
  display: flex;
  margin-bottom: 4px;
  animation: fadeIn 0.3s ease;
}

.message-item.sent {
  justify-content: flex-end;
}

.message-bubble {
  max-width: 60%;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  border-radius: 20px;
  position: relative;
  word-wrap: break-word;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s;
}

@media (max-width: 768px) {
  .message-bubble {
    max-width: 80%;
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  }
}

.message-bubble:hover {
  transform: scale(1.01);
}

.message-item.received .message-bubble {
  background: white;
  color: var(--text-dark);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border-light);
}

.message-item.sent .message-bubble {
  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.9rem;
}

@media (max-width: 768px) {
  .message-text {
    font-size: 0.85rem;
  }
}

.message-text a {
  color: inherit;
  text-decoration: underline;
  opacity: 0.9;
}

.message-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  opacity: 0.8;
}

.message-item.sent .message-footer {
  color: rgba(255, 255, 255, 0.9);
}

.message-time {
  font-size: 0.6rem;
}

.message-status {
  font-size: 0.65rem;
}

/* Message Attachments */
.message-attachment {
  margin-top: calc(var(--spacer));
  border-radius: 12px;
  overflow: hidden;
}

.message-attachment.image img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.message-attachment.image img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.message-attachment.file {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.2);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-wrap: wrap;
}

.message-item.sent .message-attachment.file {
  background: rgba(255, 255, 255, 0.15);
}

.message-attachment.file i {
  font-size: 1.5rem;
  color: inherit;
}

.file-info {
  flex: 1;
  min-width: 120px;
}

.file-name {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-size {
  font-size: 0.65rem;
  opacity: 0.7;
}

/* Typing Indicator */
.typing-indicator {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  color: var(--text-soft);
  font-size: 0.75rem;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  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(-6px);
    opacity: 1;
  }
}

/* Message Input */
.message-input-container {
  padding: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
  border-top: 1px solid var(--border-light);
  background: white;
}

@media (max-width: 768px) {
  .message-input-container {
    padding: calc(var(--spacer) * 1.5);
  }
}

.input-wrapper {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  align-items: flex-end;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  padding: 4px 4px 4px calc(var(--spacer) * 2);
  transition: all 0.2s;
}

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

.input-wrapper textarea {
  flex: 1;
  padding: calc(var(--spacer) * 1.5) 0;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  resize: none;
  max-height: 100px;
  line-height: 1.5;
  outline: none;
}

@media (max-width: 768px) {
  .input-wrapper textarea {
    font-size: 0.85rem;
    padding: calc(var(--spacer) * 1.2) 0;
  }
}

.input-actions {
  display: flex;
  gap: 2px;
  padding: 2px;
}

.input-actions .btn-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.input-actions .btn-icon:hover {
  background: var(--bg);
  color: var(--accent);
}

.send-btn {
  background: var(--accent) !important;
  color: white !important;
  box-shadow: 0 2px 8px 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: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 20px;
  animation: slideUp 0.3s ease;
}

.attachment-preview {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  background: white;
  padding: calc(var(--spacer) * 1.5);
  border-radius: 16px;
  border: 1px solid var(--border-light);
  flex-wrap: wrap;
}

.attachment-preview img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.attachment-preview i {
  font-size: 2rem;
  color: var(--accent);
}

.preview-info {
  flex: 1;
  min-width: 120px;
}

.preview-info .file-name {
  font-size: 0.85rem;
  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.7rem;
  color: var(--text-soft);
}

.remove-attachment {
  background: #fee2e2;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ef4444;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.remove-attachment:hover {
  background: #ef4444;
  color: white;
  transform: scale(1.1);
}

/* No Conversations */
.no-conversations {
  text-align: center;
  padding: calc(var(--spacer) * 4);
  color: var(--text-soft);
  background: white;
  border-radius: 20px;
  margin: calc(var(--spacer) * 1.5);
}

.no-conversations i {
  font-size: 3rem;
  margin-bottom: calc(var(--spacer) * 2);
  opacity: 0.3;
  color: var(--accent);
}

.no-conversations h3 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 0.8);
}

.no-conversations p {
  margin-bottom: calc(var(--spacer) * 2);
  font-size: 0.85rem;
}

.no-conversations .btn-text {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-size: 0.9rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

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

/* No Messages */
.no-messages {
  text-align: center;
  padding: calc(var(--spacer) * 4);
  color: var(--text-soft);
  font-style: italic;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 30px;
  margin: calc(var(--spacer) * 2) 0;
  font-size: 0.9rem;
}

/* Loading States */
.conversations-list .loading-spinner {
  text-align: center;
  padding: calc(var(--spacer) * 4);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .messages-fullwidth-container .conversations-sidebar {
    display: block;
  }

  .messages-fullwidth-container .conversations-sidebar.hide-mobile {
    display: none;
  }

  .messages-fullwidth-container .message-thread {
    display: none;
  }

  .messages-fullwidth-container .message-thread.active-mobile {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: white;
    border-radius: 0;
    animation: fadeIn 0.3s ease;
  }

  .thread-placeholder {
    display: none;
  }

  .conversation-name {
    max-width: 120px;
  }

  .conversation-last-message {
    max-width: 140px;
  }

  .unread-badge {
    min-width: 20px;
    height: 20px;
    font-size: 0.6rem;
    right: 8px;
  }
}

@media (max-width: 480px) {
  .conversation-avatar {
    width: 42px;
    height: 42px;
    font-size: 0.95rem;
  }

  .conversation-name {
    font-size: 0.85rem;
  }

  .conversation-last-message {
    font-size: 0.7rem;
    max-width: 120px;
  }

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

  .message-bubble {
    max-width: 85%;
  }

  .input-actions .btn-icon {
    width: 38px;
    height: 38px;
  }
}

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

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

@keyframes pulse {
  0%,
  100% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-50%) scale(1.1);
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@media (min-width: 768px) {
  .nav-section-header {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2.5);
    min-height: 52px;
  }
}

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

.nav-section-header span {
  flex: 1;
  font-size: 0.9rem;
}

.nav-section-header .dropdown-icon {
  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: var(--bg);
  color: var(--text-dark);
}

.nav-section-header.active {
  background: #f2ebe3;
  color: var(--accent);
}

.nav-submenu {
  display: none;
  padding-left: calc(var(--spacer) * 2);
  margin-left: calc(var(--spacer) * 3);
  border-left: 1px solid var(--border-light);
  margin-bottom: calc(var(--spacer) * 0.5);
}

.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: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  color: var(--text-soft);
  text-decoration: none;
  transition: all 0.2s;
  min-height: 40px;
  border-radius: 4px;
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .nav-subitem {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
    min-height: 44px;
  }
}

.nav-subitem i {
  width: 18px;
  font-size: 0.9rem;
}

.nav-subitem:hover {
  background: var(--bg);
  color: var(--text-dark);
}

.nav-subitem.active {
  color: var(--accent);
  background: #f2ebe3;
}

.nav-subitem .badge {
  margin-left: auto;
  background: var(--accent);
  color: white;
  padding: 2px 6px;
  border-radius: 30px;
  font-size: 0.6rem;
  min-width: 18px;
  text-align: center;
}

@media (min-width: 768px) {
  .nav-subitem .badge {
    padding: 2px 8px;
    font-size: 0.65rem;
    min-width: 20px;
  }
}

/* ========================================================================
   REQUESTS GRID (Service Requests & Product Orders)
   ======================================================================== */

.requests-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
}

.requests-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 2);
}

.requests-filters {
  background: var(--card-bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  box-shadow: var(--shadow);
}

.filter-tabs {
  display: flex;
  gap: calc(var(--spacer));
  margin-bottom: calc(var(--spacer) * 2);
  overflow-x: auto;
  padding-bottom: calc(var(--spacer));
  -webkit-overflow-scrolling: touch;
}

.filter-tab {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  background: transparent;
  border: none;
  border-radius: 30px;
  font-size: 0.8rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  min-height: 40px;
}

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

.filter-tab.active {
  background: var(--accent);
  color: white;
}

.requests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: calc(var(--spacer) * 2);
}

.request-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.request-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.request-card.pending {
  border-left: 3px solid #f59e0b;
}

.request-card.confirmed {
  border-left: 3px solid #10b981;
}

.request-card.completed {
  border-left: 3px solid #2563eb;
}

.request-card.cancelled {
  border-left: 3px solid #ef4444;
  opacity: 0.8;
}

.request-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 1.5);
  flex-wrap: wrap;
  gap: calc(var(--spacer));
}

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

.request-body {
  margin-bottom: calc(var(--spacer) * 2);
}

.customer-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: calc(var(--spacer) * 0.5);
}

.service-title,
.product-title {
  color: var(--accent);
  font-size: 0.9rem;
  margin-bottom: calc(var(--spacer) * 1.5);
}

.contact-info {
  background: var(--bg);
  border-radius: 12px;
  padding: calc(var(--spacer) * 1.5);
  margin: calc(var(--spacer) * 1.5) 0;
  font-size: 0.8rem;
}

.contact-info p {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  margin-bottom: calc(var(--spacer) * 0.5);
}

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

.booking-time,
.order-details {
  font-size: 0.8rem;
  color: var(--text-soft);
  margin-top: calc(var(--spacer));
}

.order-details {
  display: flex;
  gap: calc(var(--spacer) * 2);
  justify-content: space-between;
}

.request-footer {
  display: flex;
  gap: calc(var(--spacer));
  border-top: 1px solid var(--border-light);
  padding-top: calc(var(--spacer) * 1.5);
}

/* ========================================================================
   TEAM MEMBERS SECTION
   ======================================================================== */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: calc(var(--spacer) * 2);
  margin-top: calc(var(--spacer) * 2);
}

.team-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 2);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
}

.team-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: calc(var(--spacer) * 2);
  border: 3px solid white;
  box-shadow: var(--shadow);
}

.team-info {
  margin-bottom: calc(var(--spacer) * 2);
  width: 100%;
}

.member-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.member-role {
  color: var(--accent);
  font-size: 0.85rem;
  margin-bottom: calc(var(--spacer));
}

.member-email,
.member-phone {
  font-size: 0.75rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.5);
  margin-bottom: 2px;
}

.member-email i,
.member-phone i {
  font-size: 0.7rem;
  color: var(--accent);
}

.team-actions {
  display: flex;
  gap: calc(var(--spacer));
  margin-top: auto;
}

.team-actions .btn-icon {
  width: 36px;
  height: 36px;
  background: var(--bg);
  border: 1px solid var(--border-light);
}

.team-actions .btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Team Form */
.team-modal .modal-content {
  max-width: 500px;
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: calc(var(--spacer) * 1.5);
  background: var(--bg);
  padding: calc(var(--spacer) * 1.5);
  border-radius: 12px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer));
  cursor: pointer;
  font-size: 0.8rem;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

/* ========================================================================
   FILTER INDICATOR FOR MESSAGES
   ======================================================================== */

.filter-indicator {
  margin-left: auto;
}

.filter-badge {
  background: var(--accent);
  color: white;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 500;
}

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

@media (max-width: 768px) {
  .requests-grid {
    grid-template-columns: 1fr;
  }

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

  .filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

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

  .requests-actions {
    width: 100%;
  }

  .requests-actions button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .request-card {
    padding: calc(var(--spacer) * 1.5);
  }

  .contact-info p {
    flex-wrap: wrap;
  }

  .request-footer {
    flex-wrap: wrap;
  }

  .request-footer button {
    flex: 1;
  }

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

/* Order Action Buttons */
.order-actions-footer {
  margin-top: 30px;
  padding: 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.action-card {
  margin-bottom: 20px;
  animation: slideIn 0.3s ease;
}

.action-card:last-child {
  margin-bottom: 0;
}

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

.confirm-visit-btn,
.send-quote-btn {
  transition: all 0.2s;
}

.confirm-visit-btn:hover {
  background: #1e4a3c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(47, 110, 74, 0.3);
}

.send-quote-btn:hover {
  background: #9f6e3c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.3);
}
/* Slider Styling */
#discountSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  outline: none;
}

#discountSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #b78c5a;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
  border: 2px solid white;
}

#discountSlider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#discountSlider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #b78c5a;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
  border: 2px solid white;
}

#discountSlider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Animation for preview card */
@keyframes highlightUpdate {
  0% {
    background-color: #fef3e2;
  }
  100% {
    background-color: white;
  }
}

.preview-updated {
  animation: highlightUpdate 1s ease;
}

/* ========================================================================
   ORDERS & WORKFLOW - COMPLETE REDESIGN
   ======================================================================== */

/* Orders Dashboard Container */
.orders-dashboard-enhanced {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
  width: 100%;
}

@media (min-width: 768px) {
  .orders-dashboard-enhanced {
    padding: calc(var(--spacer) * 3);
  }
}

/* Orders Header */
.orders-header-enhanced {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
  position: relative;
}

@media (min-width: 640px) {
  .orders-header-enhanced {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.orders-header-enhanced .page-title {
  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;
}

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

@media (min-width: 768px) {
  .orders-header-enhanced .page-title {
    font-size: 2rem;
  }
}

.orders-header-enhanced .page-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: calc(var(--spacer) * 0.5);
  line-height: 1.5;
  padding-top: 10px;
}

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

/* Header Actions */
.orders-header-actions {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
}

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

.orders-header-actions .btn-outline,
.orders-header-actions .btn-primary {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.8);
  white-space: nowrap;
  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);
}

@media (min-width: 768px) {
  .orders-header-actions .btn-outline,
  .orders-header-actions .btn-primary {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.9rem;
    gap: calc(var(--spacer));
    min-height: 48px;
  }
}

.orders-header-actions .btn-primary {
  background: var(--text-dark);
  color: white;
  border-color: var(--text-dark);
}

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

.orders-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);
}

/* Category Tabs */
.orders-category-tabs {
  display: flex;
  gap: calc(var(--spacer) * 0.5);
  margin-bottom: calc(var(--spacer) * 3);
  background: white;
  padding: calc(var(--spacer) * 1);
  border-radius: 50px;
  box-shadow: 0 5px 15px -8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .orders-category-tabs {
    gap: calc(var(--spacer));
    padding: calc(var(--spacer) * 1.2);
    margin-bottom: calc(var(--spacer) * 4);
    flex-wrap: wrap;
    overflow-x: visible;
    white-space: normal;
  }
}

.orders-category-tabs::-webkit-scrollbar {
  display: none;
}

.category-tab {
  padding: calc(var(--spacer) * 1) calc(var(--spacer) * 2);
  border-radius: 40px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.5);
  min-height: 40px;
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .category-tab {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2.5);
    font-size: 0.85rem;
    min-height: 44px;
    flex: 1 1 auto;
  }
}

.category-tab i {
  font-size: 0.8rem;
  color: currentColor;
}

.category-tab .tab-badge {
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 30px;
  font-size: 0.6rem;
  margin-left: 4px;
  color: var(--text-soft);
}

.category-tab:hover {
  color: var(--accent);
  background: var(--bg);
  border-color: var(--border-light);
}

.category-tab.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 5px 10px -3px rgba(183, 140, 90, 0.3);
}

.category-tab.active .tab-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Stats Grid */
.orders-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 480px) {
  .orders-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacer) * 2.5);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

@media (min-width: 768px) {
  .orders-stats-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 5);
  }
}

.stat-card-enhanced {
  background: white;
  border-radius: 20px;
  padding: calc(var(--spacer) * 2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 1.5);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .stat-card-enhanced {
    padding: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 2);
  }
}

.stat-card-enhanced::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-enhanced:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 30px -12px rgba(183, 140, 90, 0.15);
  border-color: var(--accent-light);
}

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

.stat-card-enhanced.pending-quote::before {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.stat-card-enhanced.awaiting-deposit::before {
  background: linear-gradient(135deg, #b45309, #f59e0b);
}

.stat-card-enhanced.active::before {
  background: linear-gradient(135deg, #1e4a6b, #2563eb);
}

.stat-card-enhanced.completed::before {
  background: linear-gradient(135deg, #2f6e4a, #10b981);
}

.stat-card-header {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.2);
  width: 100%;
}

.stat-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .stat-icon-wrapper {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
    border-radius: 18px;
  }
}

.stat-card-enhanced.pending-quote .stat-icon-wrapper {
  background: #fef3e2;
  color: #b45309;
}

.stat-card-enhanced.awaiting-deposit .stat-icon-wrapper {
  background: #fef3e2;
  color: #b45309;
}

.stat-card-enhanced.active .stat-icon-wrapper {
  background: #e1f0fa;
  color: #1e4a6b;
}

.stat-card-enhanced.completed .stat-icon-wrapper {
  background: #e3f2e9;
  color: #2f6e4a;
}

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

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

@media (min-width: 768px) {
  .stat-label {
    font-size: 0.75rem;
  }
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
}

@media (min-width: 768px) {
  .stat-value {
    font-size: 1.6rem;
  }
}

.stat-trend {
  font-size: 0.65rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}

.stat-trend.positive {
  color: #10b981;
}

.stat-trend.negative {
  color: #ef4444;
}

/* Filters Bar */
.orders-filters-bar {
  background: white;
  border-radius: 24px;
  padding: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

@media (min-width: 768px) {
  .orders-filters-bar {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacer) * 2);
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2.5);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.search-wrapper {
  flex: 1;
  position: relative;
  width: 100%;
}

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

@media (min-width: 768px) {
  .search-wrapper i {
    font-size: 0.9rem;
  }
}

.search-wrapper input {
  width: 100%;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 1.5)
    calc(var(--spacer) * 1.5) calc(var(--spacer) * 5);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.85rem;
  background: var(--bg);
  transition: all 0.2s;
  min-height: 44px;
  line-height: 1.5;
  color: var(--text-dark);
}

@media (min-width: 768px) {
  .search-wrapper input {
    padding: calc(var(--spacer) * 1.8) calc(var(--spacer) * 2)
      calc(var(--spacer) * 1.8) calc(var(--spacer) * 5.5);
    font-size: 0.9rem;
    min-height: 48px;
  }
}

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

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

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 1);
  width: 100%;
}

@media (min-width: 768px) {
  .filter-group {
    width: auto;
    gap: calc(var(--spacer) * 1.5);
  }
}

.filter-select-enhanced {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 3)
    calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  background: var(--bg);
  min-height: 44px;
  font-size: 0.8rem;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
  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 calc(var(--spacer) * 1.5) center;
  background-size: 14px;
  padding-right: calc(var(--spacer) * 5);
  flex: 1;
  min-width: 120px;
}

@media (min-width: 480px) {
  .filter-select-enhanced {
    flex: 0 1 auto;
    min-width: 130px;
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .filter-select-enhanced {
    min-width: 140px;
    font-size: 0.9rem;
    min-height: 48px;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3.5)
      calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
  }
}

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

.clear-filters-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.5);
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.8rem;
  font-weight: 500;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex: 1;
}

@media (min-width: 480px) {
  .clear-filters-btn {
    flex: 0 1 auto;
    min-width: 100px;
    font-size: 0.85rem;
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  }
}

@media (min-width: 768px) {
  .clear-filters-btn {
    font-size: 0.9rem;
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
    min-height: 48px;
  }
}

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

/* Orders Sections */
.orders-sections {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 3);
  margin-top: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .orders-sections {
    gap: calc(var(--spacer) * 4);
  }
}

.section-title-enhanced {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 calc(var(--spacer) * 2) 0;
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  position: relative;
}

@media (min-width: 768px) {
  .section-title-enhanced {
    font-size: 1.3rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

.section-title-enhanced i {
  color: var(--accent);
  font-size: 1.1rem;
}

@media (min-width: 768px) {
  .section-title-enhanced i {
    font-size: 1.2rem;
  }
}

.section-title-enhanced .section-badge {
  background: var(--accent);
  color: white;
  padding: 2px 10px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

@media (min-width: 768px) {
  .section-title-enhanced .section-badge {
    padding: 3px 12px;
    font-size: 0.75rem;
  }
}

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

@media (min-width: 768px) {
  .section-title-enhanced::after {
    width: 50px;
  }
}

/* Orders Grid */
.orders-grid-enhanced {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 640px) {
  .orders-grid-enhanced {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
  }
}

@media (min-width: 1024px) {
  .orders-grid-enhanced {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacer) * 3);
  }
}

/* Enhanced Order Card */
.order-card-enhanced {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.order-card-enhanced:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 30px -12px rgba(183, 140, 90, 0.15);
  border-color: var(--accent-light);
}

.order-card-header-enhanced {
  padding: calc(var(--spacer) * 2);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}

@media (min-width: 768px) {
  .order-card-header-enhanced {
    padding: calc(var(--spacer) * 2.5);
  }
}

.order-status-badge {
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: capitalize;
}

@media (min-width: 768px) {
  .order-status-badge {
    padding: 4px 14px;
    font-size: 0.75rem;
    gap: 6px;
  }
}

.order-status-badge i {
  font-size: 0.65rem;
}

@media (min-width: 768px) {
  .order-status-badge i {
    font-size: 0.7rem;
  }
}

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

.order-status-badge.awaiting-deposit {
  background: #fef3e2;
  color: #b45309;
}

.order-status-badge.awaiting-visit {
  background: #e3f2e9;
  color: #2f6e4a;
}

.order-status-badge.awaiting-quote {
  background: #fef3e2;
  color: #b78c5a;
}

.order-status-badge.quoted {
  background: #f2ebe3;
  color: #b78c5a;
}

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

.order-status-badge.awaiting-final-payment {
  background: #fef3e2;
  color: #b45309;
}

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

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

.order-date-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-soft);
  font-size: 0.7rem;
  background: white;
  padding: 4px 10px;
  border-radius: 30px;
  border: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .order-date-badge {
    font-size: 0.75rem;
    padding: 4px 12px;
  }
}

.order-card-body-enhanced {
  padding: calc(var(--spacer) * 2);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .order-card-body-enhanced {
    padding: calc(var(--spacer) * 2.5);
    gap: calc(var(--spacer) * 2.5);
  }
}

.customer-info-enhanced {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  min-width: 0;
}

.customer-avatar-enhanced {
  width: 44px;
  height: 44px;
  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.1rem;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 5px 10px -3px rgba(183, 140, 90, 0.2);
}

@media (min-width: 768px) {
  .customer-avatar-enhanced {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }
}

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

.customer-name-enhanced {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .customer-name-enhanced {
    font-size: 0.95rem;
  }
}

.service-name-enhanced {
  color: var(--accent);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

@media (min-width: 768px) {
  .service-name-enhanced {
    font-size: 0.8rem;
  }
}

.order-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 1.5);
  margin: calc(var(--spacer) * 0.5) 0;
}

@media (min-width: 768px) {
  .order-metrics {
    padding: calc(var(--spacer) * 2);
    gap: calc(var(--spacer) * 2);
  }
}

.metric-item-enhanced {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-label {
  font-size: 0.6rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

@media (min-width: 768px) {
  .metric-label {
    font-size: 0.65rem;
  }
}

.metric-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
}

@media (min-width: 768px) {
  .metric-value {
    font-size: 0.9rem;
  }
}

.metric-value.highlight {
  color: var(--accent);
}

.metric-value.success {
  color: #10b981;
}

.metric-value.warning {
  color: #b45309;
}

.order-id-display {
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 30px;
  display: inline-block;
  margin-top: 2px;
}

@media (min-width: 768px) {
  .order-id-display {
    font-size: 0.75rem;
  }
}

.order-progress {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.8);
  margin-top: auto;
}

.progress-bar-container {
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .progress-bar-container {
    height: 6px;
    border-radius: 3px;
  }
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  text-align: center;
  position: relative;
}

.progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: var(--border-light);
  z-index: 1;
}

@media (min-width: 768px) {
  .progress-step:not(:last-child)::after {
    top: 10px;
  }
}

.progress-step.completed .step-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.progress-step.completed:not(:last-child)::after {
  background: var(--accent);
}

.step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--border-light);
  transition: all 0.3s ease;
  z-index: 2;
  position: relative;
}

@media (min-width: 768px) {
  .step-dot {
    width: 8px;
    height: 8px;
    border-width: 2px;
  }
}

.step-label {
  font-size: 0.55rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .step-label {
    font-size: 0.6rem;
  }
}

.order-card-footer-enhanced {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}

@media (min-width: 768px) {
  .order-card-footer-enhanced {
    padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2.5);
  }
}

.order-id-small {
  font-family: "Courier New", monospace;
  font-size: 0.65rem;
  color: var(--text-soft);
}

.view-details-btn-enhanced {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

@media (min-width: 768px) {
  .view-details-btn-enhanced {
    font-size: 0.75rem;
    padding: 6px 14px;
    gap: 6px;
  }
}

.view-details-btn-enhanced i {
  font-size: 0.6rem;
  transition: transform 0.3s ease;
}

.view-details-btn-enhanced:hover {
  background: var(--accent);
  color: white;
}

.view-details-btn-enhanced:hover i {
  transform: translateX(4px);
}

/* Empty States */
.empty-orders-enhanced {
  text-align: center;
  padding: calc(var(--spacer) * 5);
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .empty-orders-enhanced {
    padding: calc(var(--spacer) * 6);
  }
}

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

@media (min-width: 768px) {
  .empty-illustration {
    width: 100px;
    height: 100px;
    font-size: 2.5rem;
  }
}

.empty-orders-enhanced h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer) * 1);
}

@media (min-width: 768px) {
  .empty-orders-enhanced h3 {
    font-size: 1.5rem;
  }
}

.empty-orders-enhanced p {
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 2);
  font-size: 0.9rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Loading Skeleton */
.orders-loading-skeleton {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 640px) {
  .orders-loading-skeleton {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacer) * 2.5);
  }
}

.skeleton-card {
  background: white;
  border-radius: 24px;
  padding: calc(var(--spacer) * 2);
  height: 220px;
  border: 1px solid var(--border-light);
}

.skeleton-animation {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Responsive Adjustments */
@media (max-width: 480px) {
  .order-card-header-enhanced {
    padding: calc(var(--spacer) * 1.5);
  }

  .order-card-body-enhanced {
    padding: calc(var(--spacer) * 1.5);
  }

  .order-card-footer-enhanced {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  }

  .customer-avatar-enhanced {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .order-metrics {
    padding: calc(var(--spacer) * 1.2);
  }

  .stat-card-enhanced {
    padding: calc(var(--spacer) * 1.5);
  }

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

@media (max-width: 360px) {
  .category-tab {
    padding: calc(var(--spacer) * 0.8) calc(var(--spacer) * 1.5);
    font-size: 0.7rem;
  }

  .order-metrics {
    grid-template-columns: 1fr;
    gap: calc(var(--spacer));
  }
}

/* ========================================================================
   ORDER DETAIL MODERN - ENHANCED DESIGN
   ======================================================================== */

.order-detail-modern {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
  width: 100%;
  animation: fadeIn 0.4s ease;
}

@media (min-width: 768px) {
  .order-detail-modern {
    padding: calc(var(--spacer) * 3);
  }
}

/* Header Section */
.order-detail-header {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
  position: relative;
}

@media (min-width: 768px) {
  .order-detail-header {
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.back-button {
  border-radius: 50%;
  background: white;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

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

.back-button i {
  font-size: 1rem;
}

.order-title-section {
  flex: 1;
}

.order-title-section h1 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 5px 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;
  display: inline-block;
}

@media (min-width: 768px) {
  .order-title-section h1 {
    font-size: 1.8rem;
  }
}

.order-meta-tags {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  flex-wrap: wrap;
}

.order-meta-tags .date-tag,
.order-meta-tags .booking-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg);
  border-radius: 30px;
  font-size: 0.75rem;
  color: var(--text-soft);
  border: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .order-meta-tags .date-tag,
  .order-meta-tags .booking-tag {
    padding: 4px 12px;
    font-size: 0.8rem;
  }
}

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

.header-actions {
  display: flex;
  gap: calc(var(--spacer) * 1);
}

.header-actions .btn-outline,
.header-actions .btn-primary {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.8);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

@media (min-width: 768px) {
  .header-actions .btn-outline,
  .header-actions .btn-primary {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.9rem;
    gap: calc(var(--spacer));
    min-height: 48px;
  }
}

.header-actions .btn-primary {
  background: var(--text-dark);
  color: white;
  border: none;
}

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

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

.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);
}

/* Status Banner */
.order-status-banner {
  background: white;
  border-radius: 24px;
  padding: calc(var(--spacer) * 2.5);
  margin-bottom: calc(var(--spacer) * 3);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .order-status-banner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--spacer) * 3);
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.status-info {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  flex-wrap: wrap;
}

.status-badge-large {
  padding: 6px 16px;
  border-radius: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .status-badge-large {
    padding: 8px 20px;
    font-size: 0.95rem;
    gap: 10px;
  }
}

.status-badge-large i {
  font-size: 0.9rem;
}

.status-text {
  display: flex;
  flex-direction: column;
}

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

.status-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
}

@media (min-width: 768px) {
  .status-value {
    font-size: 1.2rem;
  }
}

.status-description {
  color: var(--text-soft);
  font-size: 0.85rem;
  max-width: 500px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .status-description {
    font-size: 0.9rem;
  }
}

/* Progress Timeline */
.progress-timeline-container {
  background: var(--bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 768px) {
  .progress-timeline-container {
    padding: calc(var(--spacer) * 2.5);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.progress-timeline {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(var(--spacer) * 2);
  position: relative;
  overflow-x: auto;
  padding: calc(var(--spacer)) 0;
  gap: calc(var(--spacer) * 0.5);
}

.progress-step-item {
  flex: 1;
  min-width: 70px;
  text-align: center;
  position: relative;
}

@media (min-width: 480px) {
  .progress-step-item {
    min-width: 80px;
  }
}

@media (min-width: 768px) {
  .progress-step-item {
    min-width: 90px;
  }
}

.step-marker-wrapper {
  position: relative;
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}

.step-marker {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  z-index: 2;
  position: relative;
}

@media (min-width: 768px) {
  .step-marker {
    width: 42px;
    height: 42px;
    font-size: 1rem;
    border-width: 2px;
  }
}

.progress-step-item.completed .step-marker {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.progress-step-item.active .step-marker {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px rgba(183, 140, 90, 0.1);
}

.step-connector {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border-light);
  z-index: 1;
}

@media (min-width: 768px) {
  .step-connector {
    top: 21px;
  }
}

.progress-step-item.completed .step-connector {
  background: var(--accent);
}

.step-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-soft);
  white-space: wrap;
}

@media (min-width: 768px) {
  .step-label {
    font-size: 0.75rem;
  }
}

.progress-step-item.active .step-label {
  color: var(--accent);
  font-weight: 600;
}

/* Payment Progress */
.payment-progress-card {
  background: linear-gradient(135deg, #f2ebe3 0%, #fff 100%);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2);
  margin-top: calc(var(--spacer) * 2);
  border: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .payment-progress-card {
    padding: calc(var(--spacer) * 2.5);
  }
}

.payment-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 1.5);
  flex-wrap: wrap;
  gap: calc(var(--spacer));
}

.payment-progress-header h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}

.payment-progress-header h4 i {
  color: var(--accent);
  font-size: 0.9rem;
}

.payment-progress-header .payment-percentage {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  background: white;
  padding: 4px 12px;
  border-radius: 30px;
  border: 1px solid var(--border-light);
}

.progress-bar-enhanced {
  height: 8px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: calc(var(--spacer) * 2);
}

.progress-bar-enhanced .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 4px;
  transition: width 0.5s ease;
}

.payment-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--spacer) * 1.5);
}

.payment-item {
  background: white;
  border-radius: 16px;
  padding: calc(var(--spacer) * 1.5);
  text-align: center;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.payment-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.05);
  border-color: var(--accent-light);
}

.payment-item .payment-label {
  font-size: 0.65rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 4px;
}

.payment-item .payment-amount {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  display: block;
  margin-bottom: 4px;
}

.payment-item .payment-status {
  font-size: 0.65rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: 30px;
}

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

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

/* Main Content Grid */
.order-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 768px) {
  .order-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

/* Cards */
.detail-card {
  background: white;
  border-radius: 24px;
  padding: calc(var(--spacer) * 2);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  height: fit-content;
}

@media (min-width: 768px) {
  .detail-card {
    padding: calc(var(--spacer) * 2.5);
  }
}

.detail-card:hover {
  box-shadow: 0 15px 25px -12px rgba(183, 140, 90, 0.1);
}

.card-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 calc(var(--spacer) * 2) 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: calc(var(--spacer) * 1.5);
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .card-title {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacer) * 2.5);
  }
}

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

/* Customer Card */
.customer-card {
  background: linear-gradient(135deg, var(--bg) 0%, white 100%);
}

.customer-profile {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 2);
  flex-wrap: wrap;
}

.customer-avatar-large {
  width: 70px;
  height: 70px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 600;
  box-shadow: 0 10px 20px -5px rgba(183, 140, 90, 0.2);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .customer-avatar-large {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    border-radius: 28px;
  }
}

.customer-details-large {
  flex: 1;
}

.customer-details-large h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 4px 0;
}

@media (min-width: 768px) {
  .customer-details-large h3 {
    font-size: 1.3rem;
  }
}

.customer-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.customer-contact span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.customer-contact i {
  color: var(--accent);
  width: 18px;
  font-size: 0.8rem;
}

.contact-actions {
  display: flex;
  gap: calc(var(--spacer));
  margin-top: calc(var(--spacer) * 1.5);
}

.contact-actions .btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-actions .btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Service Details */
.service-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 2);
}

.detail-item {
  background: var(--bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 1.5);
  border: 1px solid var(--border-light);
}

.detail-item.full-width {
  grid-column: 1 / -1;
}

.detail-label {
  font-size: 0.65rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 4px;
}

.detail-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
  word-break: break-word;
}

@media (min-width: 768px) {
  .detail-value {
    font-size: 0.95rem;
  }
}

.detail-description {
  font-size: 0.85rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0;
}

/* Quote Card */
.quote-card-enhanced {
  background: linear-gradient(135deg, var(--bg) 0%, white 100%);
}

.quote-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--spacer) * 2);
  padding-bottom: calc(var(--spacer) * 2);
  border-bottom: 2px solid var(--border-light);
}

.quote-total span {
  font-size: 0.9rem;
  color: var(--text-soft);
}

.quote-total .amount {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
}

@media (min-width: 768px) {
  .quote-total .amount {
    font-size: 2rem;
  }
}

.breakdown-items {
  margin-bottom: calc(var(--spacer) * 2);
}

.breakdown-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--spacer) * 1.2) 0;
  border-bottom: 1px dashed var(--border-light);
}

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

.breakdown-item-row .item-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.breakdown-item-row .item-name i {
  color: var(--accent);
  font-size: 0.7rem;
}

.breakdown-item-row .item-amount {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.discount-section {
  background: #fef3e2;
  border-radius: 12px;
  padding: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 2);
}

.discount-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b45309;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.discount-title i {
  color: #b45309;
}

.discount-item-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #b45309;
  margin-bottom: 4px;
}

.discount-item-row .discount-amount {
  font-weight: 600;
}

.payment-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--spacer) * 1.5);
  margin-top: calc(var(--spacer) * 2);
}

.schedule-item-enhanced {
  background: var(--bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 1.5);
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

.schedule-item-enhanced::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.schedule-item-enhanced:hover::before {
  opacity: 1;
}

.schedule-item-enhanced .schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.schedule-item-enhanced .schedule-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.schedule-item-enhanced .schedule-badge {
  font-size: 0.6rem;
  padding: 2px 8px;
  border-radius: 30px;
  background: var(--accent-light);
  color: var(--accent);
}

.schedule-item-enhanced .schedule-amount {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  display: block;
  margin-bottom: 4px;
}

.schedule-item-enhanced .schedule-status {
  font-size: 0.65rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: 30px;
}

.platform-fee-note {
  margin-top: calc(var(--spacer) * 2);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 12px;
  color: var(--text-soft);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-light);
}

.platform-fee-note i {
  color: var(--accent);
  font-size: 0.9rem;
}

/* Action Center */
.action-center-card {
  background: linear-gradient(135deg, var(--bg) 0%, white 100%);
}

.action-buttons-container {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}

.action-card-enhanced {
  background: white;
  border-radius: 20px;
  padding: calc(var(--spacer) * 2);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.action-card-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.05);
  border-color: var(--accent-light);
}

.action-header {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 1.5);
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.4rem;
  flex-shrink: 0;
}

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

.action-subtitle {
  color: var(--text-soft);
  font-size: 0.8rem;
}

.action-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: calc(var(--spacer) * 1.5);
  text-align: center;
}

.action-button-primary {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.action-button-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.3);
}

.action-button-secondary {
  width: 100%;
  padding: 14px;
  background: white;
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.action-button-secondary:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-2px);
}

/* Counter Offer Card */
.counter-offer-card {
  background: #fef3e2;
  border: 2px solid var(--accent);
  position: relative;
  overflow: hidden;
}

.counter-offer-card::before {
  content: "COUNTER OFFER";
  position: absolute;
  top: 8px;
  right: -30px;
  background: var(--accent);
  color: white;
  padding: 4px 30px;
  font-size: 0.6rem;
  font-weight: 600;
  transform: rotate(45deg);
  z-index: 2;
}

.counter-offer-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--spacer) * 1.5);
  margin: calc(var(--spacer) * 2) 0;
}

.comparison-item {
  background: white;
  border-radius: 16px;
  padding: calc(var(--spacer) * 1.5);
  text-align: center;
}

.comparison-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.comparison-amount {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
}

.comparison-amount.customer {
  color: var(--accent);
}

/* Workflow Updates */
.updates-timeline-card {
  background: white;
  border-radius: 24px;
  padding: calc(var(--spacer) * 2);
  border: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .updates-timeline-card {
    padding: calc(var(--spacer) * 2.5);
  }
}

.updates-list-enhanced {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: calc(var(--spacer) * 2);
  padding-right: calc(var(--spacer));
}

.update-item-enhanced {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  padding: calc(var(--spacer) * 1.5);
  background: var(--bg);
  border-radius: 16px;
  margin-bottom: calc(var(--spacer) * 1.5);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.update-item-enhanced:hover {
  transform: translateX(4px);
  background: white;
  border-color: var(--accent-light);
}

.update-avatar {
  width: 40px;
  height: 40px;
  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;
  flex-shrink: 0;
}

.update-content-enhanced {
  flex: 1;
}

.update-header-enhanced {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 4px;
}

.update-author {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.update-time {
  font-size: 0.7rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 30px;
  border: 1px solid var(--border-light);
}

.update-text {
  color: var(--text-soft);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
}

.update-media-enhanced {
  margin-top: calc(var(--spacer) * 1.5);
  max-width: 100%;
  max-height: 200px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--border-light);
}

.update-media-enhanced:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.1);
}

.empty-updates-enhanced {
  text-align: center;
  padding: calc(var(--spacer) * 4);
  background: var(--bg);
  border-radius: 20px;
  color: var(--text-soft);
}

.empty-updates-enhanced i {
  font-size: 2.5rem;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: calc(var(--spacer) * 2);
}

/* Update Form */
.update-form-enhanced {
  background: var(--bg);
  border-radius: 20px;
  padding: calc(var(--spacer) * 2);
  margin-top: calc(var(--spacer) * 2);
  border: 1px solid var(--border-light);
}

.update-form-enhanced textarea {
  width: 100%;
  padding: calc(var(--spacer) * 1.5);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  resize: vertical;
  min-height: 80px;
  margin-bottom: calc(var(--spacer) * 1.5);
  transition: all 0.3s ease;
}

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

.update-form-actions {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  align-items: center;
  flex-wrap: wrap;
}

.file-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.8rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 40px;
}

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

.file-name {
  font-size: 0.75rem;
  color: var(--accent);
  background: white;
  padding: 4px 10px;
  border-radius: 30px;
  border: 1px solid var(--border-light);
}

.post-update-btn {
  margin-left: auto;
  padding: 10px 24px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.post-update-btn:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px rgba(183, 140, 90, 0.2);
}

/* Milestones */
.milestones-list {
  max-height: 300px;
  overflow-y: auto;
}

.milestone-item-enhanced {
  background: var(--bg);
  border-radius: 16px;
  padding: calc(var(--spacer) * 1.5);
  margin-bottom: calc(var(--spacer) * 1.2);
  border-left: 4px solid;
  transition: all 0.3s ease;
}

.milestone-item-enhanced:hover {
  transform: translateX(4px);
  box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.05);
}

.milestone-item-enhanced.pending {
  border-left-color: var(--accent);
}

.milestone-item-enhanced.completed {
  border-left-color: #10b981;
  opacity: 0.8;
}

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

.milestone-title {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.milestone-amount {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.9rem;
}

.milestone-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.milestone-status .status-badge {
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 0.6rem;
  font-weight: 600;
}

/* Loading & Error States */
.order-detail-loading {
  text-align: center;
  padding: calc(var(--spacer) * 6);
  color: var(--text-soft);
}

.order-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: 0 auto calc(var(--spacer) * 2);
}

.order-detail-error {
  text-align: center;
  padding: calc(var(--spacer) * 5);
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
  max-width: 500px;
  margin: calc(var(--spacer) * 2) auto;
}

.order-detail-error i {
  font-size: 3rem;
  color: #ef4444;
  margin-bottom: calc(var(--spacer) * 2);
  opacity: 0.7;
}

.order-detail-error h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-dark);
  margin-bottom: calc(var(--spacer));
}

.order-detail-error p {
  color: var(--text-soft);
  margin-bottom: calc(var(--spacer) * 2);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

/* Responsive Adjustments */
@media (max-width: 480px) {
  .order-detail-header {
    gap: calc(var(--spacer) * 1.5);
  }

  .order-title-section h1 {
    font-size: 1.3rem;
  }

  .status-badge-large {
    padding: 4px 12px;
    font-size: 0.75rem;
  }

  .payment-breakdown-grid {
    grid-template-columns: 1fr;
  }

  .customer-profile {
    flex-direction: column;
    text-align: center;
  }

  .customer-avatar-large {
    margin: 0 auto;
  }

  .contact-actions {
    justify-content: center;
  }

  .service-details-grid {
    grid-template-columns: 1fr;
  }

  .update-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .post-update-btn {
    margin-left: 0;
  }

  .counter-offer-comparison {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .order-detail-modern {
    padding: calc(var(--spacer) * 1.2);
  }

  .order-title-section h1 {
    font-size: 1.1rem;
  }

  .back-button {
    width: 38px;
    height: 38px;
  }

  .status-badge-large {
    padding: 3px 10px;
    font-size: 0.7rem;
  }

  .status-value {
    font-size: 0.9rem;
  }

  .step-marker {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

  .step-connector {
    top: 15px;
  }
}

/* Print Styles */
@media print {
  .order-detail-header .back-button,
  .header-actions,
  .action-center-card,
  .update-form-enhanced,
  .contact-actions .btn-icon {
    display: none !important;
  }

  .order-detail-modern {
    padding: 0.5cm;
  }

  .detail-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ========================================================================
   ENHANCED ACTION CARDS - FOR ORDER DETAIL PAGE
   ======================================================================== */

.action-card-enhanced {
  background: white;
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.action-card-enhanced:hover {
  box-shadow: 0 8px 20px rgba(183, 140, 90, 0.1);
  border-color: var(--accent-light);
}

.action-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.action-header.center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.action-icon-wrapper {
  width: 60px;
  height: 60px;
  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.8rem;
  flex-shrink: 0;
}

.action-icon-wrapper.success {
  background: linear-gradient(135deg, #e3f2e9 0%, #2f6e4a 100%);
}

.action-icon-wrapper.neutral {
  background: linear-gradient(135deg, #f1f5f9 0%, #64748b 100%);
}

.action-icon-wrapper.danger {
  background: linear-gradient(135deg, #fee2e2 0%, #991b1b 100%);
}

.action-icon-wrapper.pulse {
  animation: actionPulse 2s infinite;
}

@keyframes actionPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(183, 140, 90, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(183, 140, 90, 0);
  }
}

.action-title h3 {
  margin: 0 0 5px 0;
  font-size: 1.2rem;
  color: var(--text-dark);
}

.action-title p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.action-title strong {
  color: var(--accent);
}

/* Payment Summary Card */
.payment-summary-card,
.quote-summary-card,
.fee-summary-card {
  background: var(--bg);
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
}

.payment-summary-card h4,
.fee-summary-card h4 {
  margin: 0 0 15px 0;
  font-size: 1rem;
  color: var(--text-dark);
}

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

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

.summary-row.deposit .amount {
  color: #2f6e4a;
}

.summary-row.fee .amount {
  color: #b45309;
}

.summary-row.refund .amount {
  color: #2f6e4a;
}

.summary-row.total {
  font-weight: 600;
  margin-top: 5px;
  padding-top: 12px;
  border-top: 2px solid var(--border-light);
}

.amount {
  font-weight: 600;
}

.amount.highlight {
  color: var(--accent);
}

.amount.success {
  color: #2f6e4a;
}

.amount.warning {
  color: #b45309;
}

.amount.danger {
  color: #991b1b;
}

.amount.large {
  font-size: 1.3rem;
}

/* Deposit Card */
.deposit-card {
  background: var(--bg);
  border-radius: 16px;
  padding: 20px;
  margin-top: 15px;
}

.deposit-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.deposit-amount .label {
  color: var(--text-soft);
  font-size: 0.9rem;
}

.deposit-amount .amount {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
}

/* Quote Summary Card */
.quote-summary-card {
  margin: 15px 0;
}

/* Info Note */
.info-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: #f8fafc;
  border-radius: 12px;
  margin-top: 15px;
  font-size: 0.85rem;
  color: #64748b;
}

.info-note.warning {
  background: #fee2e2;
  color: #991b1b;
}

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

.info-note.warning i {
  color: #991b1b;
}

/* Notification Badge */
.notification-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: #fef3e2;
  border-radius: 40px;
  font-size: 0.85rem;
  color: #b45309;
  margin-top: 15px;
}

.notification-badge i {
  font-size: 0.9rem;
}

/* Status Indicator */
.status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  background: var(--bg);
  border-radius: 40px;
  margin-top: 15px;
  color: var(--text-soft);
  font-size: 0.9rem;
}

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

/* Progress Actions */
.progress-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.progress-actions .btn-primary,
.progress-actions .btn-outline {
  flex: 1;
  padding: 14px;
}

/* Payment Details Card */
.payment-details-card {
  background: var(--bg);
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
}

.payment-details-card .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.payment-details-card .detail-row.payout {
  margin-top: 10px;
  padding-top: 15px;
  border-top: 1px solid var(--border-light);
}

/* Completion Summary */
.completion-summary {
  background: var(--bg);
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
}

.completion-summary .summary-row.payout {
  margin-top: 10px;
  padding-top: 15px;
  border-top: 2px solid var(--border-light);
  font-weight: 600;
}

/* Action Footer */
.action-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border-light);
}

.action-footer .btn-text {
  color: var(--text-soft);
  font-size: 0.85rem;
}

.action-footer .btn-text:hover {
  color: var(--accent);
}

/* Payout Box */
.payout-box {
  background: #e3f2e9;
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
}

.payout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.fee-detail {
  display: flex;
  justify-content: space-between;
  color: #64748b;
  font-size: 0.8rem;
  padding: 5px 0;
  border-bottom: 1px dashed #b8d9c5;
}

.success-note {
  margin: 10px 0 0 0;
  color: #2f6e4a;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Response Options */
.response-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

/* ========================================================================
   COUNTER OFFER CARD - ENHANCED
   ======================================================================== */

.counter-offer-card {
  background: white;
  border-radius: 24px;
  padding: 30px;
  margin-bottom: 20px;
  border: 2px solid var(--accent);
  position: relative;
  box-shadow: 0 10px 30px -10px rgba(183, 140, 90, 0.2);
}

.counter-badge {
  position: absolute;
  top: -12px;
  left: 30px;
  background: var(--accent);
  color: white;
  padding: 4px 20px;
  border-radius: 40px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 8px rgba(183, 140, 90, 0.2);
}

.counter-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 10px 0 25px 0;
}

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

.counter-icon.pulse {
  animation: counterPulse 2s infinite;
}

@keyframes counterPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.counter-title h3 {
  margin: 0 0 5px 0;
  font-size: 1.3rem;
  color: #b45309;
}

.counter-title p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* Comparison Grid */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 25px;
}

.original-box,
.counter-box {
  background: var(--bg);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.counter-box {
  border: 2px solid var(--accent);
  background: #fef3e2;
}

.box-label {
  color: var(--text-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.box-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}

.counter-box .box-amount {
  color: #b45309;
}

/* Counter Breakdown */
.counter-breakdown {
  background: var(--bg);
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 25px;
}

.counter-breakdown h4 {
  margin: 0 0 20px 0;
  color: var(--text-dark);
}

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

.breakdown-row.deposit .amount {
  color: #2f6e4a;
}

/* Payment Breakdown */
.payment-breakdown {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
}

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

.payment-row.fee .amount {
  color: #b45309;
}

.payment-row.total {
  font-weight: 600;
  margin-top: 10px;
  padding-top: 15px;
  border-top: 2px solid var(--border-light);
  border-bottom: none;
}

/* Counter Actions */
.counter-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.counter-actions .btn-primary,
.counter-actions .btn-outline {
  flex: 1;
  padding: 16px;
  font-size: 1rem;
}

.counter-actions .btn-outline.danger {
  border-color: #ef4444;
  color: #ef4444;
}

.counter-actions .btn-outline.danger:hover {
  background: #ef4444;
  color: white;
}

/* Warning Note */
.warning-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: #fee2e2;
  border-radius: 12px;
  margin-bottom: 15px;
  font-size: 0.9rem;
  color: #991b1b;
}

.warning-note i {
  font-size: 1rem;
}

/* Notification Text */
.notification-text {
  margin: 0;
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
}

.notification-text i {
  margin-right: 5px;
  color: var(--accent);
}

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

  .action-header.center {
    align-items: center;
  }

  .progress-actions {
    flex-direction: column;
  }

  .counter-actions {
    flex-direction: column;
  }

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

  .action-footer {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .action-card-enhanced {
    padding: 20px;
  }

  .counter-offer-card {
    padding: 20px;
  }

  .counter-badge {
    left: 20px;
    font-size: 0.7rem;
    padding: 4px 15px;
  }

  .counter-header {
    flex-direction: column;
    text-align: center;
  }

  .counter-title h3 {
    font-size: 1.1rem;
  }

  .box-amount {
    font-size: 1.2rem;
  }
}

/* ========================================================================
   COMPACT COUNTER OFFER CARD
   ======================================================================== */

.compact-counter-card {
  background: white;
  border-radius: 16px;
  border: 2px solid var(--accent);
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.15);
  margin-bottom: 20px;
}

.compact-counter-badge {
  background: var(--accent);
  color: white;
  padding: 6px 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 0 0 12px 0;
}

.compact-counter-badge i {
  font-size: 0.65rem;
}

.compact-counter-content {
  padding: 15px;
}

/* Price Comparison */
.compact-price-comparison {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 15px;
  background: var(--bg);
  padding: 12px;
  border-radius: 12px;
}

.compact-price-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.price-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--text-soft);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.price-value {
  font-size: 0.9rem;
  font-weight: 700;
}

.price-value.original {
  color: var(--text-dark);
}

.price-value.counter {
  color: #b45309;
}

.compact-price-arrow {
  color: var(--accent);
  font-size: 0.8rem;
}

/* Payment Preview */
.compact-payment-preview {
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 15px;
}

.compact-payment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 0.75rem;
  color: var(--text-dark);
}

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

.compact-amount {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.8rem;
}

/* Actions */
.compact-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.compact-actions .btn-primary,
.compact-actions .btn-outline {
  flex: 1;
  padding: 8px;
  font-size: 0.75rem;
  min-height: 36px;
}

.compact-actions .btn-outline.danger {
  border-color: #ef4444;
  color: #ef4444;
}

.compact-actions .btn-outline.danger:hover {
  background: #ef4444;
  color: white;
}

/* Warning */
.compact-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  background: #fee2e2;
  border-radius: 20px;
  font-size: 0.65rem;
  color: #991b1b;
}

.compact-warning i {
  font-size: 0.6rem;
}

/* Hover Effects */
.compact-counter-card:hover {
  box-shadow: 0 6px 16px rgba(183, 140, 90, 0.25);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

.compact-actions .btn-primary:active,
.compact-actions .btn-outline:active {
  transform: scale(0.98);
}

/* ========================================================================
   COMPACT QUOTE MODAL
   ======================================================================== */

.compact-quote-modal .modal-content {
  max-width: 550px;
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.compact-modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.compact-modal-header h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dark);
}

.compact-modal-header h3 i {
  color: var(--accent);
  font-size: 1.1rem;
}

.compact-modal-body {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

/* Input Group */
.compact-input-group {
  margin-bottom: 20px;
}

.compact-input-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.amount-input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}

.currency-symbol {
  padding: 0 12px;
  background: #f1f5f9;
  color: var(--text-soft);
  font-weight: 500;
  font-size: 0.9rem;
  border-right: 1px solid var(--border-light);
  line-height: 42px;
}

.quote-amount-input {
  flex: 1;
  padding: 12px 15px;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  background: transparent;
  color: var(--text-dark);
}

.quote-amount-input:focus {
  outline: none;
}

/* Discount Slider */
.discount-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.discount-value {
  background: var(--accent);
  color: white;
  padding: 2px 10px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
}

.slider-container {
  padding: 5px 0;
}

.discount-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  background: linear-gradient(to right, var(--accent-light), var(--accent));
  border-radius: 3px;
  outline: none;
}

.discount-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

.discount-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.3);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 0.65rem;
  color: var(--text-soft);
  padding: 0 5px;
}

/* Calculation Cards */
.calculation-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.calc-card {
  background: var(--bg);
  border-radius: 16px;
  padding: 15px;
  border: 1px solid var(--border-light);
}

.calc-card.original {
  background: #f8fafc;
}

.calc-card.discounted {
  background: #fef3e2;
  border-color: var(--accent-light);
}

.calc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-soft);
}

.calc-header i {
  color: var(--accent);
  font-size: 0.8rem;
}

.calc-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.calc-row.discount-amount {
  color: #2f6e4a;
  border-top: 1px dashed var(--border-light);
  padding-top: 6px;
  margin-top: 2px;
}

.calc-value {
  font-weight: 600;
}

.calc-value.highlight {
  color: var(--accent);
  font-size: 0.95rem;
}

.calc-value.success {
  color: #2f6e4a;
}

/* Payment Split Title */
.payment-split-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
}

.payment-split-title i {
  color: var(--accent);
}

/* Payment Split Grid */
.payment-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.split-card {
  background: white;
  border-radius: 16px;
  padding: 15px;
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.split-card.first {
  border-top: 3px solid var(--accent);
}

.split-card.second {
  border-top: 3px solid #94a3b8;
}

.split-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.split-number {
  width: 20px;
  height: 20px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
}

.split-card.second .split-number {
  background: #94a3b8;
}

.split-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-dark);
  flex: 1;
}

.split-percentage {
  font-size: 0.65rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 20px;
}

.split-amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
}

.split-card.second .split-amount {
  color: #64748b;
}

.split-breakdown {
  background: var(--bg);
  border-radius: 12px;
  padding: 10px;
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  padding: 4px 0;
  color: var(--text-soft);
}

.breakdown-row.provider {
  border-top: 1px dashed var(--border-light);
  margin-top: 4px;
  padding-top: 8px;
  font-weight: 500;
  color: var(--text-dark);
}

/* Total Payout Card */
.total-payout-card {
  background: linear-gradient(135deg, #e3f2e9 0%, #d1e6db 100%);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.total-payout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: #2f6e4a;
  margin-bottom: 8px;
}

.total-payout-row i {
  margin-right: 5px;
}

.total-payout-amount {
  font-size: 1.2rem;
  font-weight: 700;
}

.payout-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #2f6e4a;
  background: rgba(255, 255, 255, 0.5);
  padding: 6px 10px;
  border-radius: 30px;
}

.payout-note i {
  font-size: 0.7rem;
}

/* Rejection Details */
.rejection-details {
  background: var(--bg);
  border-radius: 12px;
  padding: 0;
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.rejection-details summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 15px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-dark);
  list-style: none;
}

.rejection-details summary i:first-child {
  color: #ef4444;
}

.rejection-details summary i:last-child {
  margin-left: auto;
  color: var(--text-soft);
  transition: transform 0.3s;
}

.rejection-details[open] summary i:last-child {
  transform: rotate(180deg);
}

.rejection-content {
  padding: 0 15px 15px 15px;
}

.rejection-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.8rem;
  border-bottom: 1px dashed var(--border-light);
}

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

.rejection-row.warning {
  color: #b45309;
}

.rejection-row.success {
  color: #2f6e4a;
}

.rejection-row.total {
  font-weight: 600;
  margin-top: 5px;
  padding-top: 10px;
  border-top: 2px solid var(--border-light);
}

.rejection-row .warning {
  color: #b45309;
  font-weight: 600;
}

.rejection-row .success {
  color: #2f6e4a;
  font-weight: 600;
}

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

.rejection-row .highlight {
  color: var(--accent);
  font-weight: 700;
}

/* Modal Footer */
.compact-modal-footer {
  padding: 18px 20px;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 12px;
  background: #f8fafc;
}

.compact-modal-footer .btn-primary,
.compact-modal-footer .btn-outline {
  flex: 1;
  padding: 12px;
  font-size: 0.9rem;
  min-height: 44px;
}

.compact-modal-footer .btn-primary {
  background: var(--accent);
}

.compact-modal-footer .btn-primary:hover {
  background: var(--accent-light);
}

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

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

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

/* Responsive */
@media (max-width: 500px) {
  .calculation-cards {
    grid-template-columns: 1fr;
  }

  .payment-split-grid {
    grid-template-columns: 1fr;
  }

  .compact-modal-footer {
    flex-direction: column-reverse;
  }

  .compact-modal-footer .btn-primary,
  .compact-modal-footer .btn-outline {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .compact-modal-body {
    padding: 15px;
  }

  .split-card {
    padding: 12px;
  }

  .split-amount {
    font-size: 1rem;
  }

  .total-payout-amount {
    font-size: 1rem;
  }
}

/* ========================================================================
   COMPACT SENT QUOTE CARD
   ======================================================================== */

.compact-sent-quote-card {
  background: white;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.compact-sent-quote-card:hover {
  box-shadow: 0 8px 20px rgba(183, 140, 90, 0.08);
  border-color: var(--accent-light);
}

/* Header */
.sent-quote-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--border-light);
}

.sent-quote-icon {
  width: 36px;
  height: 36px;
  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: 1rem;
  flex-shrink: 0;
}

.sent-quote-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sent-quote-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
}

.sent-quote-time {
  font-size: 0.65rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 4px;
}

.sent-quote-time i {
  font-size: 0.6rem;
}

.sent-quote-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #fef3e2;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #b45309;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b45309;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

/* Body */
.sent-quote-body {
  padding: 16px;
}

/* Amount Summary */
.amount-summary {
  background: var(--bg);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 15px;
}

.original-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-soft);
  padding: 4px 0;
}

.original-amount {
  text-decoration: line-through;
  color: var(--text-soft);
}

.discount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #2f6e4a;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-light);
  margin-bottom: 6px;
}

.discount-row i {
  font-size: 0.7rem;
  margin-right: 4px;
}

.discount-amount {
  font-weight: 600;
  color: #2f6e4a;
}

.final-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
}

.final-amount {
  color: var(--accent);
  font-size: 1rem;
}

/* Quick Payment Preview */
.quick-payment-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 15px;
}

.preview-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.preview-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-soft);
  letter-spacing: 0.3px;
}

.preview-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}

.preview-fee {
  font-size: 0.6rem;
  color: #b45309;
  background: #fee2e2;
  padding: 2px 6px;
  border-radius: 20px;
}

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

/* Payout Preview */
.payout-preview {
  background: linear-gradient(135deg, #e3f2e9 0%, #d1e6db 100%);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 15px;
}

.payout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2f6e4a;
  margin-bottom: 8px;
}

.payout-row i {
  margin-right: 4px;
}

.payout-amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2f6e4a;
}

.fee-breakdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 0.7rem;
  color: #2f6e4a;
  border-top: 1px dashed rgba(47, 110, 74, 0.3);
}

.fee-breakdown-toggle i:first-child {
  font-size: 0.7rem;
}

.fee-breakdown-toggle i:last-child {
  margin-left: auto;
  transition: transform 0.3s;
}

.fee-breakdown-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  margin-top: 0;
}

.fee-breakdown-details.show {
  max-height: 150px;
  padding: 10px;
  margin-top: 10px;
}

.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: #2f6e4a;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(47, 110, 74, 0.2);
}

.fee-row.total {
  font-weight: 600;
  border-bottom: none;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 2px solid rgba(47, 110, 74, 0.3);
}

/* Action Buttons */
.sent-quote-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.sent-quote-actions .btn-outline,
.sent-quote-actions .btn-primary {
  flex: 1;
  padding: 10px;
  font-size: 0.8rem;
  min-height: 40px;
}

.sent-quote-actions .btn-outline {
  border-color: var(--accent);
  color: var(--accent);
}

.sent-quote-actions .btn-outline:hover {
  background: var(--accent);
  color: white;
}

.sent-quote-actions .btn-primary {
  background: var(--accent);
}

.sent-quote-actions .btn-primary i {
  font-size: 0.7rem;
  transition: transform 0.2s;
}

.sent-quote-actions .btn-primary:hover i {
  transform: translateX(4px);
}

/* Waiting Indicator */
.waiting-response {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 40px;
  font-size: 0.75rem;
  color: var(--text-soft);
}

.pulse-loader {
  display: flex;
  gap: 4px;
}

.pulse-loader span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-loader 1.4s infinite;
}

.pulse-loader span:nth-child(2) {
  animation-delay: 0.2s;
}

.pulse-loader span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pulse-loader {
  0%,
  60%,
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
  30% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Hover Effects */
.compact-sent-quote-card:hover .sent-quote-icon {
  transform: scale(1.05);
  transition: transform 0.3s;
}

.compact-sent-quote-card:hover .sent-quote-badge {
  background: #fde6c9;
}

/* Responsive */
@media (max-width: 480px) {
  .sent-quote-header {
    flex-wrap: wrap;
  }

  .sent-quote-badge {
    width: 100%;
    justify-content: center;
  }

  .quick-payment-preview {
    flex-direction: column;
    gap: 10px;
  }

  .preview-divider {
    transform: rotate(90deg);
  }

  .preview-item {
    width: 100%;
  }

  .sent-quote-actions {
    flex-direction: column;
  }

  .fee-breakdown-toggle {
    flex-wrap: wrap;
  }
}

@media (max-width: 360px) {
  .sent-quote-body {
    padding: 12px;
  }

  .amount-summary {
    padding: 10px;
  }

  .final-amount-row {
    font-size: 0.8rem;
  }

  .final-amount {
    font-size: 0.9rem;
  }

  .payout-amount {
    font-size: 1rem;
  }

  .waiting-response {
    flex-direction: column;
    text-align: center;
  }
}
/* ========================================================================
   ORDERS & WORKFLOW - CLEAN CATEGORIES
   ======================================================================== */

/* Category Tabs - Clean Design */
.orders-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
  padding: 4px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
}

.category-tab {
  padding: 8px 16px;
  border-radius: 40px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  white-space: nowrap;
}

.category-tab i {
  font-size: 0.75rem;
  color: currentColor;
  opacity: 0.7;
}

.category-tab .tab-badge {
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 0.65rem;
  margin-left: 2px;
  color: var(--text-soft);
}

.category-tab:hover {
  color: var(--accent);
  background: var(--bg);
  border-color: var(--border-light);
}

.category-tab.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.15);
}

.category-tab.active i {
  opacity: 1;
}

.category-tab.active .tab-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Responsive Category Tabs */
@media (max-width: 768px) {
  .orders-category-tabs {
    padding: 4px;
    gap: 4px;
  }

  .category-tab {
    padding: 6px 12px;
    font-size: 0.7rem;
    min-height: 36px;
  }

  .category-tab i {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .orders-category-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .orders-category-tabs::-webkit-scrollbar {
    display: none;
  }

  .category-tab {
    flex: 0 0 auto;
  }
}
/* ========================================================================
   PROGRESS STEPS - 2 ROW WITH ICONS
   ======================================================================== */

.progress-steps-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.progress-step-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.step-icon-wrapper {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.step-icon-wrapper i {
  font-size: 0.7rem;
  color: var(--text-soft);
  transition: all 0.3s ease;
}

.progress-step-icon.completed .step-icon-wrapper {
  background: var(--accent);
  border-color: var(--accent);
}

.progress-step-icon.completed .step-icon-wrapper i {
  color: white;
}

.step-icon-label {
  font-size: 0.55rem;
  color: var(--text-soft);
  font-weight: 500;
  white-space: nowrap;
}

.progress-step-icon.completed .step-icon-label {
  color: var(--accent);
  font-weight: 600;
}

/* Connector lines */
.progress-step-icon:not(:nth-child(4)):not(:nth-child(8))::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 60%;
  width: 70%;
  height: 2px;
  background: var(--border-light);
  z-index: 1;
}

.progress-step-icon.completed:not(:nth-child(4)):not(:nth-child(8))::after {
  background: var(--accent);
}

/* Responsive */
@media (min-width: 768px) {
  .step-icon-wrapper {
    width: 32px;
    height: 32px;
  }

  .step-icon-wrapper i {
    font-size: 0.8rem;
  }

  .step-icon-label {
    font-size: 0.6rem;
  }
}

@media (max-width: 480px) {
  .progress-steps-icons {
    gap: 4px;
  }

  .step-icon-wrapper {
    width: 24px;
    height: 24px;
    border-width: 1.5px;
  }

  .step-icon-wrapper i {
    font-size: 0.6rem;
  }

  .step-icon-label {
    font-size: 0.5rem;
  }
}

.stat-card-enhanced.all-orders .stat-icon-wrapper {
  background: rgba(183, 140, 90, 0.15);
  color: var(--accent);
}
/* Counter Offer Styles in Quote Details */
.quote-card-enhanced.counter-offer-active {
  border: 2px solid var(--accent);
  position: relative;
}

.counter-badge-small {
  background: var(--accent);
  color: white;
  font-size: 0.6rem;
  padding: 2px 8px;
  border-radius: 30px;
  margin-left: 10px;
  font-weight: 500;
}

.counter-comparison {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border-radius: 16px;
  padding: 15px;
  margin-bottom: 15px;
}

.comparison-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.comparison-item.original .comparison-value {
  color: var(--text-soft);
  text-decoration: line-through;
  font-size: 0.9rem;
}

.comparison-item.counter .comparison-value {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 700;
}

.comparison-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 4px;
}

.comparison-arrow {
  color: var(--accent);
  font-size: 1rem;
  padding: 0 10px;
}

.price-difference {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 15px;
}

.price-difference.discount {
  background: #e3f2e9;
  color: #2f6e4a;
}

.price-difference.increase {
  background: #fee2e2;
  color: #b45309;
}

.price-difference i {
  font-size: 0.7rem;
}
/* Rejected counter offer styles */
.quote-card-enhanced.counter-rejected {
  border: 1px solid #fee2e2;
  opacity: 0.9;
}

.counter-badge-small.rejected {
  background: #991b1b;
  color: white;
}

.comparison-item.counter.rejected .comparison-value {
  color: #991b1b;
  text-decoration: line-through;
}

.price-difference.muted {
  opacity: 0.7;
  background: #f1f5f9;
  color: #64748b;
}

.rejected-label {
  font-size: 0.6rem;
  color: #991b1b;
  margin-left: 6px;
  font-weight: 500;
}

.final-amount.muted {
  color: #64748b;
}
/* Cancelled stat card */
.stat-card-enhanced.cancelled {
  border-left: 4px solid #991b1b;
}

.stat-card-enhanced.cancelled .stat-icon-wrapper {
  background: rgba(153, 27, 27, 0.1);
  color: #991b1b;
}

.stat-card-enhanced.cancelled:hover {
  border-color: #991b1b;
  background: rgba(153, 27, 27, 0.02);
}
/* Cancelled Stat Card */
.stat-card-enhanced.cancelled {
  border-left: 4px solid #991b1b;
}

.stat-card-enhanced.cancelled .stat-icon-wrapper {
  background: rgba(153, 27, 27, 0.1);
  color: #991b1b;
}

.stat-card-enhanced.cancelled:hover {
  border-color: #991b1b;
}
/* ========================================================================
   ORDER CARD PROGRESS - COMPLETE REDESIGN
   ======================================================================== */

.order-card-enhanced .order-progress {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

/* Progress Bar Container */
.progress-bar-container {
  height: 6px;
  background: #f1f5f9;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.progress-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Progress Steps Grid - 2 Rows */
.progress-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 4px;
  margin-top: 8px;
}

/* Progress Step Item */
.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 6px 2px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* First row - 4 steps */
.progress-step:nth-child(-n + 4) {
  grid-row: 1;
}

/* Second row - 4 steps */
.progress-step:nth-child(n + 5) {
  grid-row: 2;
}

/* Step Dot */
.step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--border-light);
  transition: all 0.3s ease;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Completed Step Dot */
.progress-step.completed .step-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(183, 140, 90, 0.2);
  transform: scale(1.1);
}

/* Current Step Dot (if you want to highlight) */
.progress-step.current .step-dot {
  border-color: var(--accent);
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.15);
  transform: scale(1.15);
}

/* Step Label */
.step-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
  transition: all 0.2s ease;
}

/* Completed Step Label */
.progress-step.completed .step-label {
  color: var(--accent);
  font-weight: 700;
}

/* Current Step Label */
.progress-step.current .step-label {
  color: var(--text-dark);
  font-weight: 700;
}

/* Connector Lines - Horizontal for first row */
.progress-step:not(:nth-child(4)):not(:nth-child(8))::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 60%;
  width: 70%;
  height: 2px;
  background: var(--border-light);
  z-index: 1;
  transition: background 0.3s ease;
}

/* Completed Connector Lines */
.progress-step.completed:not(:nth-child(4)):not(:nth-child(8))::after {
  background: var(--accent);
}

/* Pulse animation for current step */
.progress-step.current .step-dot {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(183, 140, 90, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(183, 140, 90, 0.1);
  }
}

/* Responsive Adjustments */
@media (min-width: 768px) {
  .step-dot {
    width: 12px;
    height: 12px;
    border-width: 2.5px;
    margin-bottom: 8px;
  }

  .step-label {
    font-size: 0.65rem;
    letter-spacing: 0.4px;
  }

  .progress-step:not(:nth-child(4)):not(:nth-child(8))::after {
    top: 16px;
    height: 2.5px;
  }

  .progress-bar-container {
    height: 8px;
    margin-bottom: 16px;
  }
}

@media (max-width: 640px) {
  .progress-steps {
    gap: 6px 3px;
  }

  .step-dot {
    width: 8px;
    height: 8px;
    border-width: 1.8px;
    margin-bottom: 4px;
  }

  .step-label {
    font-size: 0.55rem;
    letter-spacing: 0.2px;
  }

  .progress-step:not(:nth-child(4)):not(:nth-child(8))::after {
    top: 11px;
    height: 1.8px;
    width: 65%;
  }
}

@media (max-width: 480px) {
  .progress-steps {
    gap: 4px 2px;
  }

  .step-dot {
    width: 7px;
    height: 7px;
    border-width: 1.5px;
    margin-bottom: 3px;
  }

  .step-label {
    font-size: 0.5rem;
    letter-spacing: 0.1px;
  }

  .progress-step:not(:nth-child(4)):not(:nth-child(8))::after {
    top: 9px;
    height: 1.5px;
    width: 60%;
  }

  .progress-bar-container {
    height: 5px;
    margin-bottom: 10px;
  }
}

/* Alternative: Vertical layout for very small screens */
@media (max-width: 360px) {
  .progress-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 8px;
  }

  .progress-step:nth-child(-n + 2) {
    grid-row: 1;
  }

  .progress-step:nth-child(n + 3):nth-child(-n + 4) {
    grid-row: 2;
  }

  .progress-step:nth-child(n + 5):nth-child(-n + 6) {
    grid-row: 3;
  }

  .progress-step:nth-child(n + 7):nth-child(-n + 8) {
    grid-row: 4;
  }

  .progress-step:not(:nth-child(2)):not(:nth-child(4)):not(:nth-child(6)):not(
      :nth-child(8)
    )::after {
    display: none;
  }

  .step-dot {
    width: 8px;
    height: 8px;
  }

  .step-label {
    font-size: 0.55rem;
  }
}

/* ========================================================================
   COMPACT QUOTE DETAILS CARD
   ======================================================================== */

.quote-card-enhanced {
  padding: 16px !important;
}

.card-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-title i {
  font-size: 0.9rem;
}

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

.status-pill {
  background: var(--accent);
  color: white;
  font-size: 0.6rem;
  padding: 2px 8px;
  border-radius: 30px;
  font-weight: 500;
}

.status-pill.rejected {
  background: #991b1b;
}

/* Comparison Compact */
.comparison-compact {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
}

.comparison-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.comparison-row.highlight {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--border-light);
}

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

.comparison-value.original {
  color: var(--text-soft);
  text-decoration: line-through;
  font-size: 0.75rem;
}

.comparison-value.counter {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
}

.comparison-arrow {
  text-align: center;
  color: var(--accent);
  font-size: 0.7rem;
  margin: 2px 0;
}

.price-diff {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 500;
  margin-top: 6px;
}

.price-diff.discount {
  background: #e3f2e9;
  color: #2f6e4a;
}

.price-diff.increase {
  background: #fee2e2;
  color: #b45309;
}

.rejected-tag {
  margin-left: 4px;
  color: #991b1b;
}

/* Amount Compact */
.amount-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 16px;
}

.amount-main {
  display: flex;
  flex-direction: column;
}

.amount-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--text-soft);
  letter-spacing: 0.3px;
}

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

.amount-value.muted {
  color: #94a3b8;
}

.discount-badge {
  background: var(--accent);
  color: white;
  padding: 3px 8px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Breakdown Compact */
.breakdown-compact {
  margin-bottom: 16px;
}

.breakdown-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
}

.breakdown-header i {
  color: var(--accent);
  font-size: 0.65rem;
}

.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.breakdown-grid-item {
  background: var(--bg);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
}

.grid-item-name {
  font-size: 0.6rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.grid-item-amount {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
}

.breakdown-empty {
  background: var(--bg);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  color: var(--text-soft);
  font-size: 0.7rem;
  margin-bottom: 16px;
}

.breakdown-empty i {
  margin-right: 4px;
  color: var(--accent-light);
}

/* Discounts Compact */
.discounts-compact {
  margin-bottom: 16px;
}

.discounts-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #b45309;
  margin-bottom: 8px;
}

.discounts-header i {
  font-size: 0.65rem;
}

.discount-item-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fee2e2;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.7rem;
  margin-bottom: 4px;
}

.discount-item-compact .discount-amount {
  color: #b45309;
  font-weight: 600;
}

/* Deposit Note Mini */
.deposit-note-mini {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #e3f2e9;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.65rem;
  color: #2f6e4a;
  margin-bottom: 16px;
  width: fit-content;
}

.deposit-note-mini i {
  font-size: 0.6rem;
}

/* Payment Compact */
.payment-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.payment-card {
  background: white;
  border-radius: 12px;
  padding: 10px;
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.payment-card.first {
  border-top: 2px solid var(--accent);
}

.payment-card.second {
  border-top: 2px solid #94a3b8;
}

.payment-card-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

.payment-number {
  width: 16px;
  height: 16px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 600;
}

.payment-card.second .payment-number {
  background: #94a3b8;
}

.payment-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-dark);
  flex: 1;
}

.payment-percent {
  font-size: 0.55rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 20px;
}

.payment-amount {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}

.payment-card.second .payment-amount {
  color: #64748b;
}

.payment-details {
  background: var(--bg);
  border-radius: 8px;
  padding: 6px;
}

.detail-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.6rem;
  color: var(--text-soft);
  padding: 2px 0;
}

.detail-line.payout {
  border-top: 1px dashed var(--border-light);
  margin-top: 2px;
  padding-top: 4px;
  font-weight: 500;
  color: var(--text-dark);
}

/* Total Payout Mini */
.total-payout-mini {
  background: linear-gradient(135deg, #e3f2e9 0%, #d1e6db 100%);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.payout-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #2f6e4a;
}

.payout-label i {
  font-size: 0.7rem;
}

.payout-value {
  font-size: 1rem;
  font-weight: 700;
  color: #2f6e4a;
}

/* Rejection Mini */
.rejection-mini {
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

.rejection-mini summary {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 500;
  color: #b45309;
  list-style: none;
}

.rejection-mini summary i:first-child {
  color: #b45309;
  font-size: 0.65rem;
}

.rejection-mini summary i:last-child {
  margin-left: auto;
  color: var(--text-soft);
  font-size: 0.6rem;
  transition: transform 0.2s;
}

.rejection-mini[open] summary i:last-child {
  transform: rotate(180deg);
}

.rejection-content-mini {
  padding: 0 10px 10px 10px;
}

.rejection-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-light);
}

.rejection-row.fee {
  color: #b45309;
}

.rejection-row.split {
  color: var(--text-soft);
  padding-left: 8px;
}

.rejection-row.split.you {
  color: #2f6e4a;
  font-weight: 500;
}

.rejection-row.refund {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 2px solid var(--border-light);
  font-weight: 600;
  color: var(--accent);
}

/* Responsive */
@media (max-width: 480px) {
  .breakdown-grid {
    grid-template-columns: 1fr;
  }

  .payment-compact {
    grid-template-columns: 1fr;
  }

  .amount-value {
    font-size: 1rem;
  }
}
/* Add to dashboard-provider.css */

/* ========================================================================
   NESTED SUBMENU STYLES (Matching Customer Dashboard)
   ======================================================================== */

/* Nested submenu container */
.nav-submenu.nested {
  padding-left: calc(var(--spacer) * 1.5);
  margin-left: calc(var(--spacer) * 3);
  border-left: 1px solid var(--border-light);
  margin-bottom: calc(var(--spacer) * 0.5);
}

/* Nested section header */
.nav-section.nested {
  margin: calc(var(--spacer) * 0.5) 0;
}

.nav-section.nested .nav-section-header {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  min-height: 40px;
  font-size: 0.85rem;
  border-left: 3px solid transparent;
}

.nav-section.nested .nav-section-header i:first-child {
  width: 18px;
  font-size: 0.9rem;
}

.nav-section.nested .nav-section-header .dropdown-icon {
  font-size: 0.7rem;
}

.nav-section.nested .nav-section-header:hover {
  background: var(--bg);
  color: var(--text-dark);
}

.nav-section.nested .nav-section-header.active {
  background: #f2ebe3;
  color: var(--accent);
  border-left-color: var(--accent);
}

/* Submenu divider */
.nav-submenu-divider {
  height: 1px;
  background: var(--border-light);
  margin: calc(var(--spacer) * 1) calc(var(--spacer) * 2);
}

/* Mini divider for separating "All" option */
.nav-submenu-mini-divider {
  height: 1px;
  background: var(--border-light);
  margin: calc(var(--spacer) * 0.5) calc(var(--spacer) * 2);
  opacity: 0.5;
}

/* Ensure proper spacing for nested items */
.nav-submenu.nested .nav-subitem {
  padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.2);
  min-height: 36px;
  font-size: 0.8rem;
}

.nav-submenu.nested .nav-subitem i {
  width: 16px;
  font-size: 0.8rem;
}

.nav-submenu.nested .nav-subitem .badge {
  font-size: 0.55rem;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
}

/* Style for "All" items to make them stand out slightly */
.nav-submenu.nested .nav-subitem:first-of-type {
  font-weight: 500;
}

.nav-submenu.nested .nav-subitem:first-of-type i {
  color: var(--accent);
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .nav-submenu.nested {
    padding-left: calc(var(--spacer) * 1.2);
    margin-left: calc(var(--spacer) * 2.5);
  }

  .nav-section.nested .nav-section-header {
    padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.2);
    font-size: 0.8rem;
    min-height: 40px;
  }

  .nav-section.nested .nav-section-header i:first-child {
    width: 16px;
    font-size: 0.8rem;
  }

  .nav-submenu.nested .nav-subitem {
    padding: calc(var(--spacer) * 0.8) calc(var(--spacer) * 1);
    font-size: 0.75rem;
    min-height: 34px;
  }
}

/* Very small mobile */
@media (max-width: 480px) {
  .nav-submenu.nested {
    padding-left: calc(var(--spacer));
    margin-left: calc(var(--spacer) * 2);
  }
}
/* Add to dashboard-provider.css */

/* ========================================================================
   SERVICE ORDERS SECTION - PREMIUM DESIGN
   ======================================================================== */

.service-orders-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
  width: 100%;
}

@media (min-width: 768px) {
  .service-orders-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

/* Header */
.service-orders-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .service-orders-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.service-orders-header .page-title {
  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;
}

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

.service-orders-header .page-subtitle {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin-top: calc(var(--spacer) * 0.5);
  padding-top: 10px;
}
/* Portfolio Media Drag and Drop Styles */
.portfolio-media-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: grab;
  user-select: none;
  aspect-ratio: 1;
}

.portfolio-media-item:active {
  cursor: grabbing;
}

.portfolio-media-item.dragging {
  opacity: 0.5;
  transform: scale(0.95);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.portfolio-media-item.drag-over {
  border: 2px dashed var(--accent);
  transform: scale(1.02);
}

.portfolio-media-item .media-preview {
  width: 100%;
  height: 100%;
  position: relative;
}

.portfolio-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portfolio-media-item .media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.portfolio-media-item:hover .media-overlay {
  opacity: 1;
}

.portfolio-media-item .btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  border: none;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.portfolio-media-item .btn-icon:hover {
  background: var(--accent);
  color: white;
  transform: scale(1.1);
}

.portfolio-media-item .btn-icon.remove-media:hover {
  background: #ef4444;
}

.portfolio-media-item .btn-icon.set-primary:hover {
  background: #f59e0b;
}

.portfolio-media-item .drag-handle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

.portfolio-media-item .drag-handle:active {
  cursor: grabbing;
}

.portfolio-media-item .primary-badge {
  background: var(--accent);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Grid Layout */
#portfolioImagePreviewGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 20px;
  min-height: 100px;
}

.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon.btn-sm:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
/* ========================================================================
   BANKING INFORMATION SECTION
   ======================================================================== */

.bank-verification-status {
  background: #e3f2e9;
  border-radius: 12px;
  padding: 15px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.verification-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #2f6e4a;
  font-weight: 500;
}

.verification-badge i {
  font-size: 1.2rem;
}

.bank-verification-status small {
  color: #2f6e4a;
  opacity: 0.8;
}

/* Banking form section styling */
.profile-form .section-subtitle i {
  margin-right: 5px;
}

.profile-form .field-hint {
  color: var(--text-soft);
  font-size: 0.7rem;
  margin-top: 4px;
  display: block;
}

/* Error messages */
.error-message {
  color: #ef4444;
  font-size: 0.7rem;
  margin-top: 4px;
  display: block;
}

/* Required field indicator */
.required {
  color: #ef4444;
  margin-left: 2px;
}

/* Form divider */
.form-divider {
  height: 1px;
  background: var(--border-light);
  margin: 25px 0 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .bank-verification-status {
    flex-direction: column;
    align-items: flex-start;
  }
} /* Error state for form inputs */
.form-control.error {
  border-color: #ef4444 !important;
  background-color: #fef2f2;
}

.form-control.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Enhanced message alert */
.message-alert {
  padding: 15px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
}

.message-alert.success {
  background: #e3f2e9;
  color: #2f6e4a;
  border: 1px solid #2f6e4a;
}

.message-alert.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #991b1b;
}

.message-alert i {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.message-alert ul {
  margin: 5px 0 0 0;
  padding-left: 20px;
}

.message-alert li {
  margin-bottom: 2px;
}

/* ========================================================================
   TEAM MEMBERS - COMPACT REDESIGN
   ======================================================================== */

.team-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* Header */
.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

.team-header .page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.team-header .page-subtitle {
  color: var(--text-soft);
  font-size: 0.85rem;
}

/* Stats Cards */
.team-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.team-stat-card {
  background: white;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-light);
  transition: all 0.2s;
}

.team-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-color: var(--accent-light);
}

.team-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    var(--accent) 100%
  );
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.team-stat-icon.active {
  background: linear-gradient(135deg, #e3f2e9 0%, #2f6e4a 100%);
}

.team-stat-icon.pending {
  background: linear-gradient(135deg, #fef3e2 0%, #b45309 100%);
}

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

.team-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
}

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

/* Filters */
.team-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
  flex-wrap: wrap;
  background: white;
  padding: 15px;
  border-radius: 16px;
  border: 1px solid var(--border-light);
}

.team-filters .search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.team-filters .search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.8rem;
}

.team-filters .search-box input {
  width: 100%;
  padding: 10px 10px 10px 35px;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.85rem;
  background: var(--bg);
  min-height: 40px;
}

.team-filters .filter-select {
  min-width: 120px;
  padding: 8px 25px 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.8rem;
  background: var(--bg);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' 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 10px center;
}

.team-filters .btn-outline.btn-sm {
  padding: 8px 15px;
  font-size: 0.8rem;
  border-radius: 30px;
  white-space: nowrap;
}

/* Team Grid - Compact */
.team-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

/* Team Card - Compact Design */
.team-card-compact {
  background: white;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-light);
  transition: all 0.2s;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-card-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-color: var(--accent-light);
}

.team-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

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

.team-status-badge {
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

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

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

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

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

.team-info-compact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.team-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
}

.team-role-badge {
  display: inline-block;
  padding: 3px 8px;
  background: var(--bg);
  border-radius: 30px;
  font-size: 0.65rem;
  color: var(--accent);
  font-weight: 500;
  width: fit-content;
}

.team-title {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-top: 2px;
}

/* Contact Info Compact */
.team-contact-compact {
  background: var(--bg);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

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

.contact-item-compact span {
  word-break: break-all;
  flex: 1;
}

/* Permissions Compact */
.team-permissions-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 5px 0;
}

.permission-tag {
  background: white;
  border: 1px solid var(--border-light);
  padding: 3px 8px;
  border-radius: 30px;
  font-size: 0.6rem;
  color: var(--text-soft);
  font-weight: 500;
}

/* Actions */
.team-actions-compact {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.8rem;
}

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

.action-btn.danger:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

/* Footer */
.team-footer-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  color: var(--text-soft);
  margin-top: 5px;
}

.invited-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

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

.expiry-warning {
  color: #b45309;
  font-weight: 500;
}

/* Empty State */
.empty-team-compact {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
}

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

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

.empty-team-compact p {
  color: var(--text-soft);
  margin-bottom: 20px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Modal - Compact */
.team-modal-compact {
  max-width: 700px !important;
  width: 95%;
}

.team-form-compact {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.permissions-section {
  background: var(--bg);
  border-radius: 16px;
  padding: 16px;
  margin-top: 5px;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.section-label i {
  color: var(--accent);
}

.permissions-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 10px;
}

.permission-group {
  background: white;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--border-light);
}

.permission-group-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.permission-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.permission-checkboxes .checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-dark);
  cursor: pointer;
}

.permission-checkboxes .checkbox-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .team-stats-grid {
    grid-template-columns: 1fr;
  }

  .team-filters {
    flex-direction: column;
  }

  .team-filters .search-box,
  .team-filters .filter-select,
  .team-filters .btn-outline {
    width: 100%;
  }

  .team-grid-compact {
    grid-template-columns: 1fr;
  }

  .permissions-grid-compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .team-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .team-status-badge {
    align-self: flex-start;
  }
}

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

.stat-card-order {
  background: white;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat-card-order:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  border-color: var(--accent);
}

.stat-icon-wrapper-small {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

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

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

.stat-value-compact {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
}

.stat-trend-small {
  font-size: 0.65rem;
  color: var(--text-soft);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Filters Bar */
.service-filters-bar {
  background: white;
  border-radius: 20px;
  padding: 16px 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: 16px;
}

@media (min-width: 768px) {
  .service-filters-bar {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
  }
}

.search-wrapper {
  flex: 1;
  position: relative;
  width: 100%;
}

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

.search-wrapper input {
  width: 100%;
  padding: 12px 12px 12px 42px;
  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);
}

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

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

.filter-select-enhanced {
  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;
  padding-right: 40px;
  flex: 1;
  min-width: 140px;
}

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

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

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

/* Orders Grid */
.service-orders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .service-orders-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .service-orders-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* ========================================================================
   ENHANCED ORDER CARD - PREMIUM DESIGN
   ======================================================================== */

.order-card-enhanced {
  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;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.order-card-enhanced:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
}

.order-card-enhanced:hover .view-details-indicator i {
  transform: translateX(4px);
}

.order-card-header-enhanced {
  padding: 18px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-status-badge {
  padding: 6px 14px;
  border-radius: 40px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: capitalize;
  pointer-events: none;
}

.order-status-badge.awaiting-deposit {
  background: #fef3e2;
  color: #b45309;
}

.order-status-badge.awaiting-visit {
  background: #e3f2e9;
  color: #2f6e4a;
}

.order-status-badge.awaiting-quote {
  background: #fef3e2;
  color: #b78c5a;
}

.order-status-badge.quoted {
  background: #f2ebe3;
  color: #b78c5a;
}

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

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

.order-status-badge.final-payment {
  background: #fef3e2;
  color: #b45309;
}

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

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

.order-date-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.7rem;
  background: white;
  padding: 4px 12px;
  border-radius: 30px;
  border: 1px solid var(--border-light);
  pointer-events: none;
}

.order-card-body-enhanced {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.customer-info-enhanced {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.customer-avatar-enhanced {
  width: 48px;
  height: 48px;
  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;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -3px rgba(183, 140, 90, 0.2);
  pointer-events: none;
}

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

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

.service-name-enhanced {
  color: var(--accent);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Order Metrics Grid */
.order-metrics-enhanced {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: var(--bg);
  border-radius: 18px;
  padding: 16px;
  pointer-events: none;
}

.metric-item-enhanced {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-label-enhanced {
  font-size: 0.65rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.metric-value-enhanced {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
}

.metric-value-enhanced.highlight {
  color: var(--accent);
}

.metric-value-enhanced.success {
  color: #10b981;
}

.metric-value-enhanced.warning {
  color: #b45309;
}

/* Progress Bar */
.order-progress-enhanced {
  margin-top: 4px;
  pointer-events: none;
}

.progress-bar-container-enhanced {
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill-enhanced {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* Footer */
.order-card-footer-enhanced {
  padding: 18px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}

.order-id-small {
  font-family: monospace;
  font-size: 0.7rem;
  color: var(--text-soft);
  pointer-events: none;
}

.view-details-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  transition: all 0.2s ease;
  pointer-events: none;
}

.view-details-indicator i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

/* Empty State */
.empty-state-enhanced {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
  grid-column: 1 / -1;
}

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

.empty-state-enhanced h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.empty-state-enhanced p {
  color: var(--text-soft);
  margin-bottom: 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

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

.empty-actions .btn-primary,
.empty-actions .btn-outline {
  min-width: 160px;
  padding: 12px 24px;
}

/* Click Hint */
.click-hint {
  text-align: center;
  margin-top: 24px;
  padding: 12px;
  font-size: 0.8rem;
  color: var(--text-soft);
  background: var(--bg);
  border-radius: 40px;
  border: 1px dashed var(--border-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.click-hint i {
  color: var(--accent);
  font-size: 0.9rem;
  animation: handWave 2s infinite;
}

@keyframes handWave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg);
  }
  75% {
    transform: rotate(-15deg);
  }
}

/* Responsive */
@media (max-width: 640px) {
  .service-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stat-card-order {
    padding: 14px;
  }

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

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

  .order-card-header-enhanced {
    padding: 14px;
  }

  .order-card-body-enhanced {
    padding: 16px;
  }

  .customer-avatar-enhanced {
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }

  .order-metrics-enhanced {
    padding: 12px;
  }

  .order-card-footer-enhanced {
    padding: 14px;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .view-details-indicator {
    align-self: flex-end;
  }

  .empty-actions {
    flex-direction: column;
    align-items: center;
  }

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

@media (max-width: 480px) {
  .service-stats-grid {
    grid-template-columns: 1fr;
  }
}
.service-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}

.stat-card-order {
  background: white;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-card-order:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  border-color: var(--accent);
}

.stat-card-order.all-services {
  border-left: 4px solid var(--accent);
  background: linear-gradient(135deg, #f8fafc, white);
}

.stat-icon-wrapper-small {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-bottom: 4px;
}

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

.stat-label-compact {
  font-size: 0.65rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-value-compact {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
}

.stat-trend-small {
  font-size: 0.6rem;
  color: var(--text-soft);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Responsive grid */
@media (max-width: 768px) {
  .service-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .stat-card-order {
    padding: 12px;
  }

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

  .stat-value-compact {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .service-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 360px) {
  .service-stats-grid {
    grid-template-columns: 1fr;
  }
}
/* Add to dashboard-provider.css */

.stat-card-order.active {
  border-color: var(--accent);
  background: #f2ebe3;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(183, 140, 90, 0.15);
}

.stat-card-order.active .stat-icon-wrapper-small {
  background: var(--accent) !important;
  color: white !important;
}

.stat-card-order.active .stat-value-compact {
  color: var(--accent);
}
/* Add to dashboard-provider.css - Updated Premium Stats Grid */

/* ========================================================================
   SERVICE STATS GRID - PREMIUM REDESIGN
   ======================================================================== */

.service-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

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

.stat-card-premium::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;
}

.stat-card-premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(183, 140, 90, 0.2);
  border-color: var(--accent);
}
/* ========================================================================
   FILTER GROUP - ONE LINE LAYOUT FOR ALL SCREENS (INCLUDING MOBILE)
   ======================================================================== */
/* ========================================================================
   EARNINGS CHART STYLES - ADD THIS TO YOUR CSS FILE
   ======================================================================== */

.chart-card {
  background: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  margin-bottom: 20px;
}

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

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

.chart-legend {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

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

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-color.releases {
  background: var(--accent);
}

.legend-color.holds {
  background: #94a3b8;
}

.chart-container {
  min-height: 250px;
  height: auto;
  display: flex;
  align-items: flex-end;
  position: relative;
  width: 100%;
  padding: 10px 0;
}

.chart-bars-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 200px;
  width: 100%;
  padding: 0 10px;
  gap: 8px;
}

@media (min-width: 768px) {
  .chart-bars-container {
    height: 250px;
    gap: 12px;
  }
}

.chart-bar-group {
  flex: 1;
  min-width: 30px;
  max-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 100%;
  animation: slideUp 0.5s ease forwards;
}

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

.chart-bar-stack {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  background: #f1f5f9;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  position: relative;
  min-height: 4px;
  height: 100%;
}

.chart-bar {
  width: 100%;
  transition: height 0.3s ease;
  min-height: 2px;
}

.chart-bar.releases {
  background: var(--accent);
}

.chart-bar.holds {
  background: #94a3b8;
}

.chart-label {
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--text-soft);
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .chart-label {
    font-size: 0.75rem;
  }
}

.chart-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-dark);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  margin-bottom: 8px;
}

.chart-bar-group:hover .chart-tooltip {
  opacity: 1;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--text-soft);
  text-align: center;
  padding: 20px;
  width: 100%;
}

.chart-placeholder i {
  font-size: 2rem;
  margin-bottom: 12px;
  opacity: 0.3;
  color: var(--accent);
}

.chart-placeholder p {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.chart-placeholder small {
  font-size: 0.75rem;
  opacity: 0.7;
}

.distribution-container {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.distribution-pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

@media (min-width: 480px) {
  .distribution-pie {
    flex-direction: row;
    gap: 30px;
  }
}

.pie-chart {
  width: 140px;
  height: 140px;
  transform: rotate(-90deg);
  cursor: pointer;
}

.pie-segment {
  transition: stroke-width 0.2s;
  cursor: pointer;
}

.pie-segment:hover {
  stroke-width: 24;
}

.distribution-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.distribution-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-dark);
  flex-wrap: wrap;
}

.distribution-legend .dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.distribution-legend .dot.releases {
  background: var(--accent);
}

.distribution-legend .dot.holds {
  background: #94a3b8;
}

.distribution-legend .dot.fees {
  background: #ef4444;
}

.legend-value {
  margin-left: auto;
  font-weight: 600;
  color: var(--text-dark);
} /* ========================================================================
   EARNINGS CHART - BARS START FROM BOTTOM (UPDATED)
   ======================================================================== */

.chart-container {
  min-height: 250px;
  height: auto;
  display: flex;
  align-items: flex-end;
  position: relative;
  width: 100%;
  padding: 10px 0;
}

.chart-bars-container {
  display: flex;
  align-items: flex-end; /* This aligns all bars to the bottom */
  justify-content: space-around;
  height: 200px;
  width: 100%;
  padding: 0 10px;
  gap: 8px;
}

@media (min-width: 768px) {
  .chart-bars-container {
    height: 250px;
    gap: 12px;
  }
}

.chart-bar-group {
  flex: 1;
  min-width: 30px;
  max-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 100%;
  justify-content: flex-end; /* This ensures content stays at bottom */
  animation: slideUp 0.5s ease forwards;
}

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

.chart-bar-stack {
  width: 100%;
  display: flex;
  flex-direction: column; /* Changed from column-reverse to column */
  justify-content: flex-end; /* This stacks children from bottom */
  background: #f1f5f9;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  position: relative;
  min-height: 4px;
  height: 100%; /* This will be set dynamically by JS */
}

.chart-bar {
  width: 100%;
  transition: height 0.3s ease;
  min-height: 2px;
}

/* Holds bar (gray) - appears at the bottom */
.chart-bar.holds {
  background: #94a3b8;
  order: 1; /* Ensures holds appear first (at bottom) */
}

/* Releases bar (accent color) - appears on top of holds */
.chart-bar.releases {
  background: var(--accent);
  order: 2; /* Ensures releases appear after holds (on top) */
}

/* Empty bar (placeholder) */
.chart-bar.empty {
  background: #e2e8f0;
  opacity: 0.3;
  order: 1;
}

.chart-label {
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--text-soft);
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .chart-label {
    font-size: 0.75rem;
  }
}

.chart-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-dark);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  margin-bottom: 8px;
}

.chart-bar-group:hover .chart-tooltip {
  opacity: 1;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--text-soft);
  text-align: center;
  padding: 20px;
  width: 100%;
}

.chart-placeholder i {
  font-size: 2rem;
  margin-bottom: 12px;
  opacity: 0.3;
  color: var(--accent);
}

.chart-placeholder p {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.chart-placeholder small {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Container for filter elements - ALWAYS ONE LINE */
.filter-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  background: white;
  padding: 16px 20px;
  border-radius: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
  width: 100%;
  padding-left: 250px;
  /* Allow horizontal scrolling on mobile */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  flex-wrap: nowrap !important; /* Never wrap */
}

/* Hide scrollbar for cleaner look but keep functionality */
.filter-group::-webkit-scrollbar {
  height: 4px;
}

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

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

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

/* Individual filter elements - fixed width, no shrinking */
.filter-group .filter-select,
.filter-group .filter-search,
.filter-group .btn-outline {
  flex: 0 0 auto !important; /* Never shrink, never grow */
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap;
}

/* Search input wrapper - slightly larger but still fixed */
.filter-group .filter-search {
  min-width: 200px;
  flex: 0 0 auto !important;
}

/* Search input styling */
.filter-group .filter-search input {
  width: 100%;
  padding: 10px 12px 10px 35px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.9rem;
  background: var(--bg);
  min-height: 44px;
  white-space: nowrap;
}

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

.filter-group .filter-search input::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Select dropdown styling */
.filter-group .filter-select {
  padding: 10px 30px 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.9rem;
  background: var(--bg);
  min-height: 44px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' 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;
}

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

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

/* Button styling */
.filter-group .btn-outline {
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.9rem;
  white-space: nowrap;
  border: 1px solid var(--border-light);
  background: white;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.filter-group .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* ========================================================================
   MOBILE OPTIMIZATIONS - STILL ONE LINE WITH SCROLLING
   ======================================================================== */

/* Small Desktop / Large Tablet */
@media (max-width: 1024px) {
  .filter-group {
    padding: 14px 16px;
    gap: 10px;
  }

  .filter-group .filter-select,
  .filter-group .filter-search,
  .filter-group .btn-outline {
    font-size: 0.85rem;
  }

  .filter-group .filter-search {
    min-width: 180px;
  }

  .filter-group .filter-select {
    min-width: 130px;
  }
}

/* Tablet */
@media (max-width: 768px) {
  .filter-group {
    padding: 12px 14px;
    gap: 8px;
  }

  .filter-group .filter-select,
  .filter-group .filter-search,
  .filter-group .btn-outline {
    font-size: 0.8rem;
    min-height: 40px;
  }

  .filter-group .filter-search {
    min-width: 160px;
  }

  .filter-group .filter-search input {
    min-height: 40px;
    padding: 8px 10px 8px 32px;
    font-size: 0.8rem;
  }

  .filter-group .filter-select {
    min-width: 120px;
    padding: 8px 28px 8px 12px;
    font-size: 0.8rem;
    background-size: 12px;
  }

  .filter-group .btn-outline {
    padding: 8px 16px;
    font-size: 0.8rem;
    min-height: 40px;
  }
}

/* Mobile Landscape & Portrait - STILL ONE LINE with horizontal scroll */
@media (max-width: 640px) {
  .filter-group {
    padding: 10px 12px;
    gap: 8px;
    border-radius: 16px;
    margin-bottom: 16px;
  }

  .filter-group .filter-select,
  .filter-group .filter-search,
  .filter-group .btn-outline {
    font-size: 0.75rem;
    min-height: 38px;
  }

  .filter-group .filter-search {
    min-width: 140px;
  }

  .filter-group .filter-search input {
    min-height: 38px;
    padding: 6px 8px 6px 30px;
    font-size: 0.75rem;
  }

  .filter-group .filter-search i {
    font-size: 0.7rem;
    left: 10px;
  }

  .filter-group .filter-select {
    min-width: 110px;
    padding: 6px 24px 6px 10px;
    font-size: 0.75rem;
    background-size: 10px;
    background-position: right 8px center;
  }

  .filter-group .btn-outline {
    padding: 6px 12px;
    font-size: 0.75rem;
    min-height: 38px;
    gap: 4px;
  }

  .filter-group .btn-outline i {
    font-size: 0.7rem;
  }
}

/* Small Mobile - STILL ONE LINE with horizontal scroll */
@media (max-width: 480px) {
  .filter-group {
    padding: 8px 10px;
    gap: 6px;
    border-radius: 14px;
  }

  .filter-group .filter-select,
  .filter-group .filter-search,
  .filter-group .btn-outline {
    font-size: 0.7rem;
    min-height: 36px;
  }

  .filter-group .filter-search {
    min-width: 130px;
  }

  .filter-group .filter-search input {
    min-height: 36px;
    padding: 6px 6px 6px 28px;
    font-size: 0.7rem;
  }

  .filter-group .filter-search i {
    font-size: 0.65rem;
    left: 8px;
  }

  .filter-group .filter-select {
    min-width: 100px;
    padding: 6px 22px 6px 8px;
    font-size: 0.7rem;
  }

  .filter-group .btn-outline {
    padding: 6px 10px;
    font-size: 0.7rem;
    min-height: 36px;
  }
}

/* Extra Small Mobile */
@media (max-width: 360px) {
  .filter-group {
    padding: 6px 8px;
    gap: 4px;
  }

  .filter-group .filter-select,
  .filter-group .filter-search,
  .filter-group .btn-outline {
    font-size: 0.65rem;
    min-height: 34px;
  }

  .filter-group .filter-search {
    min-width: 110px;
  }

  .filter-group .filter-search input {
    min-height: 34px;
    padding: 4px 4px 4px 24px;
    font-size: 0.65rem;
  }

  .filter-group .filter-select {
    min-width: 90px;
    padding: 4px 18px 4px 6px;
    font-size: 0.65rem;
  }

  .filter-group .btn-outline {
    padding: 4px 8px;
    font-size: 0.65rem;
    min-height: 34px;
    gap: 2px;
  }

  .filter-group .btn-outline i {
    font-size: 0.6rem;
  }
}

/* Touch-friendly scrolling hint (optional) */
@media (max-width: 768px) {
  .filter-group::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 0 20px 20px 0;
  }

  .filter-group.scrollable::after {
    opacity: 1;
  }
}
.stat-card-premium.active {
  background: linear-gradient(135deg, #f2ebe3, #fff);
  border-color: var(--accent);
  box-shadow: 0 12px 24px -12px rgba(183, 140, 90, 0.3);
}

.stat-card-premium.all-services {
  background: linear-gradient(135deg, #f8fafc, white);
  border-left: 4px solid var(--accent);
}

/* Icon Container */
.stat-icon-container {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-icon-container::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card-premium:hover .stat-icon-container::after {
  opacity: 1;
}

/* Status-specific icon backgrounds */
.stat-icon-container.pending-deposit {
  background: linear-gradient(135deg, #fef3e2, #ffe4cc);
  color: #b45309;
}

.stat-icon-container.pending-visit {
  background: linear-gradient(135deg, #e3f2e9, #c8e6d9);
  color: #2f6e4a;
}

.stat-icon-container.pending-quote {
  background: linear-gradient(135deg, #fef3e2, #ffd8b2);
  color: #b78c5a;
}

.stat-icon-container.quote-received {
  background: linear-gradient(135deg, #f2ebe3, #e8d9cc);
  color: #b78c5a;
}

.stat-icon-container.approved {
  background: linear-gradient(135deg, #e3f2e9, #c8e6d9);
  color: #2f6e4a;
}

.stat-icon-container.in-progress {
  background: linear-gradient(135deg, #e1f0fa, #c2e0f5);
  color: #1e4a6b;
}

.stat-icon-container.final-payment {
  background: linear-gradient(135deg, #fef3e2, #ffd8b2);
  color: #b45309;
}

.stat-icon-container.completed {
  background: linear-gradient(135deg, #e3f2e9, #c8e6d9);
  color: #2f6e4a;
}

.stat-icon-container.cancelled {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
}

.stat-icon-container.all-services {
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  color: #475569;
}

/* Content Area */
.stat-content-premium {
  flex: 1;
  min-width: 0;
}

.stat-label-premium {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: block;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-value-premium {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
  margin-bottom: 2px;
  font-family: "Inter", sans-serif;
}

.stat-trend-premium {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  color: var(--text-soft);
}

.stat-trend-premium i {
  font-size: 0.55rem;
}

.stat-trend-premium.positive {
  color: #10b981;
}

.stat-trend-premium.negative {
  color: #ef4444;
}

/* Responsive Grid */
@media (min-width: 1200px) {
  .service-stats-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .service-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .service-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .service-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stat-card-premium {
    padding: 14px;
  }

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

  .stat-value-premium {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .service-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 360px) {
  .service-stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-card-premium {
    padding: 16px;
  }
}
/* Add to dashboard-provider.css */

.stat-card-premium.active {
  background: linear-gradient(135deg, #f2ebe3, #fff9f5);
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 12px 24px -12px rgba(183, 140, 90, 0.3);
}

.stat-card-premium.active .stat-icon-container {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stat-card-premium.active .stat-value-premium {
  color: var(--accent);
}
/* ========================================================================
   MESSAGES SECTION - COMPACT REDESIGN
   ======================================================================== */

.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);
}

/* 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;
}

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

.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;
}

.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;
}

.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;
}

.search-box-compact {
  position: relative;
  width: 220px;
}

.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;
}

/* 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);
}

.conversation-item-compact.unread {
  background: #f8fafc;
}

.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;
}

.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;
  }
}

/* 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);
  background-color: white;
}

.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: var(--accent);
  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;
}

/* Message Reactions */
.message-reactions {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.reaction-badge {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  padding: 2px 6px;
  font-size: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  min-height: 24px;
}

.reaction-badge:hover {
  background: var(--bg);
  transform: scale(1.05);
  border-color: var(--accent);
}

.reaction-count {
  font-size: 0.55rem;
  color: var(--text-soft);
  font-weight: 500;
}

/* 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;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .messages-header-compact {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }

  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .filter-chips {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    white-space: nowrap;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .filter-chip {
    flex: 0 0 auto;
  }

  .header-right {
    width: 100%;
  }

  .search-box-compact {
    flex: 1;
  }

  .message-bubble-compact {
    max-width: 85%;
  }
}

@media (max-width: 480px) {
  .conversation-avatar-compact {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  .conversation-name {
    font-size: 0.8rem;
  }

  .conversation-last-message {
    font-size: 0.65rem;
  }

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

  .message-bubble-compact {
    max-width: 90%;
  }

  .input-actions-compact .btn-icon {
    width: 34px;
    height: 34px;
  }
}
/* ========================================================================
   MESSAGES SECTION - ENHANCED MOBILE RESPONSIVENESS
   ======================================================================== */

/* Mobile Optimizations */
@media (max-width: 768px) {
  .messages-dashboard-compact {
    height: calc(100vh - 100px);
    border-radius: 16px;
  }

  .messages-header-compact {
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

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

  .filter-chips {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    white-space: nowrap;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
  }

  .filter-chips::-webkit-scrollbar {
    display: none;
  }

  .filter-chip {
    flex: 0 0 auto;
    padding: 5px 12px;
    font-size: 0.7rem;
  }

  .header-right {
    width: 100%;
    gap: 6px;
  }

  .search-box-compact {
    flex: 1;
    min-width: 0;
  }

  .search-box-compact input {
    font-size: 0.75rem;
    padding: 6px 6px 6px 28px;
  }

  .search-box-compact i {
    left: 8px;
    font-size: 0.7rem;
  }

  .btn-icon {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  /* Conversations Sidebar - Mobile */
  .conversations-sidebar-compact {
    width: 100% !important;
    display: block;
    transition: transform 0.3s ease;
  }

  .conversations-sidebar-compact.hide-mobile {
    display: none;
  }

  .conversations-header-compact {
    padding: 12px;
  }

  .conversations-header-compact h3 {
    font-size: 0.85rem;
  }

  .conversations-list-compact {
    padding: 6px;
  }

  .conversation-item-compact {
    padding: 10px;
    gap: 10px;
  }

  .conversation-avatar-compact {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
    border-radius: 12px;
  }

  .conversation-name {
    font-size: 0.8rem;
    max-width: 100px;
  }

  .conversation-time {
    font-size: 0.55rem;
    padding: 2px 5px;
  }

  .conversation-last-message {
    font-size: 0.65rem;
    max-width: 140px;
  }

  .status-indicator {
    font-size: 0.5rem;
    padding: 2px 6px;
  }

  .unread-badge-compact {
    min-width: 16px;
    height: 16px;
    font-size: 0.5rem;
  }

  /* Message Thread - Mobile */
  .message-thread-compact {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: white;
    width: 100%;
    height: 100%;
  }

  .message-thread-compact.active-mobile {
    display: flex;
    flex-direction: column;
    animation: slideInMobile 0.3s ease;
  }

  @keyframes slideInMobile {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  .thread-header-compact {
    padding: 10px 12px;
    min-height: 56px;
    background: white;
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .back-btn-compact {
    display: flex !important;
    width: 36px;
    height: 36px;
    background: var(--bg);
    border-radius: 50%;
    color: var(--text-dark);
  }

  .back-btn-compact:hover {
    background: var(--accent);
    color: white;
  }

  .thread-user-info .user-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  .user-details-compact h3 {
    font-size: 0.9rem;
  }

  .user-status {
    font-size: 0.6rem;
  }

  .thread-actions-compact .btn-icon {
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
  }

  .messages-list-compact {
    padding: 12px;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    background: #f8fafc;
  }

  .message-bubble-compact {
    max-width: 85%;
    padding: 8px 12px;
  }

  .message-text {
    font-size: 0.75rem;
  }

  .message-time {
    font-size: 0.5rem;
  }

  .date-divider span {
    font-size: 0.6rem;
    padding: 3px 10px;
  }

  .message-input-container-compact {
    padding: 8px 12px;
    background: white;
    border-top: 1px solid var(--border-light);
    position: sticky;
    bottom: 0;
  }

  .input-wrapper-compact {
    padding: 2px 2px 2px 10px;
  }

  .input-wrapper-compact textarea {
    font-size: 0.75rem;
    padding: 6px 0;
    max-height: 60px;
  }

  .input-actions-compact .btn-icon {
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
  }

  .attachment-preview {
    padding: 8px;
    gap: 8px;
  }

  .attachment-preview img {
    width: 35px;
    height: 35px;
  }

  .preview-info .file-name {
    font-size: 0.7rem;
  }

  .preview-info .file-size {
    font-size: 0.6rem;
  }

  /* Thread Placeholder - Mobile */
  .thread-placeholder-compact {
    padding: 20px;
  }

  .placeholder-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-bottom: 15px;
  }

  .thread-placeholder-compact h3 {
    font-size: 1rem;
  }

  .thread-placeholder-compact p {
    font-size: 0.75rem;
    margin-bottom: 15px;
  }

  /* Empty States */
  .no-conversations-compact {
    padding: 30px 15px;
  }

  .no-conversations-compact i {
    font-size: 2rem;
  }

  .no-conversations-compact h3 {
    font-size: 0.95rem;
  }

  .no-conversations-compact p {
    font-size: 0.7rem;
  }
}

/* Small Mobile (under 480px) */
@media (max-width: 480px) {
  .conversation-avatar-compact {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
    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.5rem;
    padding: 1px 4px;
  }

  .status-indicator {
    font-size: 0.45rem;
    padding: 2px 5px;
  }

  .message-bubble-compact {
    max-width: 90%;
    padding: 7px 10px;
  }

  .message-text {
    font-size: 0.7rem;
  }

  .message-time {
    font-size: 0.45rem;
  }

  .date-divider span {
    font-size: 0.55rem;
    padding: 2px 8px;
  }

  .input-actions-compact .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .send-btn {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Extra Small Mobile (under 360px) */
@media (max-width: 360px) {
  .conversation-item-compact {
    padding: 8px;
    gap: 8px;
  }

  .conversation-avatar-compact {
    width: 32px;
    height: 32px;
    font-size: 0.7rem;
  }

  .conversation-name {
    font-size: 0.7rem;
    max-width: 80px;
  }

  .conversation-last-message {
    max-width: 100px;
    font-size: 0.55rem;
  }

  .status-indicator {
    font-size: 0.4rem;
    padding: 1px 4px;
  }

  .message-bubble-compact {
    max-width: 95%;
    padding: 6px 8px;
  }

  .message-text {
    font-size: 0.65rem;
  }

  .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;
  }

  .thread-user-info .user-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .user-details-compact h3 {
    font-size: 0.8rem;
  }
}
/* ========================================================================
   TEAM MEMBERS - COMPACT REDESIGN
   ======================================================================== */

.team-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* Header */
.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

.team-header .page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.team-header .page-subtitle {
  color: var(--text-soft);
  font-size: 0.85rem;
}

/* Stats Cards */
.team-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.team-stat-card {
  background: white;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-light);
  transition: all 0.2s;
}

.team-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-color: var(--accent-light);
}

.team-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    var(--accent) 100%
  );
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.team-stat-icon.active {
  background: linear-gradient(135deg, #e3f2e9 0%, #2f6e4a 100%);
}

.team-stat-icon.pending {
  background: linear-gradient(135deg, #fef3e2 0%, #b45309 100%);
}

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

.team-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
}

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

/* Filters */
.team-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
  flex-wrap: wrap;
  background: white;
  padding: 15px;
  border-radius: 16px;
  border: 1px solid var(--border-light);
}

.team-filters .search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.team-filters .search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.8rem;
}

.team-filters .search-box input {
  width: 100%;
  padding: 10px 10px 10px 35px;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.85rem;
  background: var(--bg);
  min-height: 40px;
}

.team-filters .filter-select {
  min-width: 120px;
  padding: 8px 25px 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.8rem;
  background: var(--bg);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' 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 10px center;
}

.team-filters .btn-outline.btn-sm {
  padding: 8px 15px;
  font-size: 0.8rem;
  border-radius: 30px;
  white-space: nowrap;
}

/* Team Grid - Compact */
.team-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

/* Team Card - Compact Design */
.team-card-compact {
  background: white;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-light);
  transition: all 0.2s;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-card-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-color: var(--accent-light);
}

.team-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

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

.team-status-badge {
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

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

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

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

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

.team-info-compact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.team-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
}

.team-role-badge {
  display: inline-block;
  padding: 3px 8px;
  background: var(--bg);
  border-radius: 30px;
  font-size: 0.65rem;
  color: var(--accent);
  font-weight: 500;
  width: fit-content;
}

.team-title {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-top: 2px;
}

/* Contact Info Compact */
.team-contact-compact {
  background: var(--bg);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

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

.contact-item-compact span {
  word-break: break-all;
  flex: 1;
}

/* Permissions Compact */
.team-permissions-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 5px 0;
}

.permission-tag {
  background: white;
  border: 1px solid var(--border-light);
  padding: 3px 8px;
  border-radius: 30px;
  font-size: 0.6rem;
  color: var(--text-soft);
  font-weight: 500;
}

/* Actions */
.team-actions-compact {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.8rem;
}

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

.action-btn.danger:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

/* Footer */
.team-footer-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  color: var(--text-soft);
  margin-top: 5px;
}

.invited-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

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

.expiry-warning {
  color: #b45309;
  font-weight: 500;
}

/* Empty State */
.empty-team-compact {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
}

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

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

.empty-team-compact p {
  color: var(--text-soft);
  margin-bottom: 20px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Modal - Compact */
.team-modal-compact {
  max-width: 700px !important;
  width: 95%;
}

.team-form-compact {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.permissions-section {
  background: var(--bg);
  border-radius: 16px;
  padding: 16px;
  margin-top: 5px;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.section-label i {
  color: var(--accent);
}

.permissions-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 10px;
}

.permission-group {
  background: white;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--border-light);
}

.permission-group-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.permission-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.permission-checkboxes .checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-dark);
  cursor: pointer;
}

.permission-checkboxes .checkbox-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .team-stats-grid {
    grid-template-columns: 1fr;
  }

  .team-filters {
    flex-direction: column;
  }

  .team-filters .search-box,
  .team-filters .filter-select,
  .team-filters .btn-outline {
    width: 100%;
  }

  .team-grid-compact {
    grid-template-columns: 1fr;
  }

  .permissions-grid-compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .team-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .team-status-badge {
    align-self: flex-start;
  }
}
/* ========================================================================
   MESSAGES SECTION - COMPACT REDESIGN
   ======================================================================== */

.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);
}

/* 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;
}

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

.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;
}

.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;
}

.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;
}

.search-box-compact {
  position: relative;
  width: 220px;
}

.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;
}

/* 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);
}

.conversation-item-compact.unread {
  background: #f8fafc;
}

.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;
}

.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;
  }
}

/* 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);
  background-color: white;
}

.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: var(--accent);
  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;
}

/* Message Reactions */
.message-reactions {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.reaction-badge {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  padding: 2px 6px;
  font-size: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  min-height: 24px;
}

.reaction-badge:hover {
  background: var(--bg);
  transform: scale(1.05);
  border-color: var(--accent);
}

.reaction-count {
  font-size: 0.55rem;
  color: var(--text-soft);
  font-weight: 500;
}

/* 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;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .messages-header-compact {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }

  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .filter-chips {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    white-space: nowrap;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .filter-chip {
    flex: 0 0 auto;
  }

  .header-right {
    width: 100%;
  }

  .search-box-compact {
    flex: 1;
  }

  .message-bubble-compact {
    max-width: 85%;
  }
}

@media (max-width: 480px) {
  .conversation-avatar-compact {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  .conversation-name {
    font-size: 0.8rem;
  }

  .conversation-last-message {
    font-size: 0.65rem;
  }

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

  .message-bubble-compact {
    max-width: 90%;
  }

  .input-actions-compact .btn-icon {
    width: 34px;
    height: 34px;
  }
} /* ========================================================================
   CONVERSATION ITEM - NO AVATAR, WITH SERVICE DETAILS
   ======================================================================== */

.conversation-item-compact {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  margin-bottom: 4px;
  border: 1px solid transparent;
  background: white;
}

.conversation-item-compact:hover {
  background: var(--bg);
  border-color: var(--border-light);
  transform: translateX(2px);
}

.conversation-item-compact.active {
  background: #f2ebe3;
  border-color: var(--accent);
  border-left-width: 3px;
}

.conversation-item-compact.unread {
  background: #f8fafc;
  border-left: 3px solid var(--accent);
}

/* Content Area - No Avatar */
.conversation-content-compact {
  flex: 1;
  min-width: 0;
}

/* Header with name and time */
.conversation-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  gap: 8px;
}

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

.conversation-item-compact.unread .customer-name {
  color: var(--accent);
  font-weight: 700;
}

.conversation-time {
  font-size: 0.6rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 30px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ========================================================================
   SERVICE ORDERS DASHBOARD
   ======================================================================== */

.service-orders-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
  width: 100%;
}

@media (min-width: 768px) {
  .service-orders-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

.service-orders-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .service-orders-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.service-orders-header .page-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  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;
}

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

.service-orders-header .page-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: calc(var(--spacer) * 0.5);
  padding-top: 10px;
}

.service-orders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
}

@media (min-width: 640px) {
  .service-orders-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .service-orders-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* Click Hint */
.click-hint {
  text-align: center;
  margin-top: 30px;
  padding: 12px;
  font-size: 0.8rem;
  color: var(--text-soft);
  background: var(--bg);
  border-radius: 40px;
  border: 1px dashed var(--border-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.click-hint i {
  color: var(--accent);
  font-size: 0.9rem;
  animation: handWave 2s infinite;
}

@keyframes handWave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg);
  }
  75% {
    transform: rotate(-15deg);
  }
}
/* ========================================================================
   PRODUCT ORDERS DASHBOARD
   ======================================================================== */

.product-orders-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
  width: 100%;
}

@media (min-width: 768px) {
  .product-orders-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

.product-orders-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .product-orders-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.product-orders-header .page-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  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;
}

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

.product-orders-header .page-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: calc(var(--spacer) * 0.5);
  padding-top: 10px;
}

/* Product Stats Grid */
.product-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

/* Status-specific icon backgrounds for products */
.stat-icon-container.all-products {
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  color: #475569;
}

.stat-icon-container.pending {
  background: linear-gradient(135deg, #fef3e2, #ffe4cc);
  color: #b45309;
}

.stat-icon-container.accepted {
  background: linear-gradient(135deg, #e3f2e9, #c8e6d9);
  color: #2f6e4a;
}

.stat-icon-container.shipped {
  background: linear-gradient(135deg, #e1f0fa, #c2e0f5);
  color: #1e4a6b;
}

.stat-icon-container.delivered {
  background: linear-gradient(135deg, #e3f2e9, #c8e6d9);
  color: #2f6e4a;
}

.stat-icon-container.cancelled {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
}

/* Product Filters Bar */
.product-filters-bar {
  background: white;
  border-radius: 20px;
  padding: 16px 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: 16px;
}

@media (min-width: 768px) {
  .product-filters-bar {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
  }
}

/* Product Orders Grid */
.product-orders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .product-orders-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .product-orders-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* Product Order Card Enhanced */
.product-order-card-enhanced {
  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;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.product-order-card-enhanced:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
}

.product-order-card-header {
  padding: 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-order-card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.product-order-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: var(--bg);
  border-radius: 16px;
  padding: 14px;
}

.product-sku {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 8px 12px;
  border-radius: 30px;
  width: fit-content;
}

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

.delivery-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 10px 12px;
  border-radius: 12px;
  line-height: 1.4;
}

.delivery-address i {
  color: var(--accent);
  font-size: 0.7rem;
  margin-top: 2px;
}

.product-order-card-footer {
  padding: 16px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .product-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .product-order-metrics {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Add to dashboard-provider.css */

/* Product Order Modal */
.product-order-modal .modal-content {
  animation: slideUp 0.3s ease;
}

.product-order-modal .modal-header {
  border-bottom: 1px solid var(--border-light);
  background: white;
}

.product-order-modal .modal-close:hover {
  background: var(--bg);
  color: var(--accent);
}

.product-order-modal .modal-footer {
  border-top: 1px solid var(--border-light);
  background: var(--bg);
}

/* Status badge in modal */
.product-order-modal .status-badge {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Customer avatar */
.product-order-modal .customer-avatar {
  box-shadow: 0 4px 10px rgba(183, 140, 90, 0.2);
}

/* Product details grid */
.product-order-modal .details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  background: white;
  border-radius: 12px;
  padding: 15px;
}

/* Button hover effects */
.product-order-modal .btn-primary:hover,
.product-order-modal .btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-order-modal .btn-primary.accept-order-modal:hover {
  background: #1e4a3c;
}

.product-order-modal .btn-outline.reject-order-modal:hover {
  background: #ef4444;
  color: white;
}

/* Animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .product-order-modal .modal-footer {
    flex-direction: column;
  }

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

  .product-order-modal .details-grid {
    grid-template-columns: 1fr;
  }
}

/* Add to dashboard-provider.css */

/* Requests Header Enhanced */
.requests-header-enhanced {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

.requests-header-enhanced .page-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  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;
}

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

.requests-header-enhanced .page-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 8px;
}

/* Requests Filters Enhanced */
.requests-filters-enhanced {
  background: white;
  border-radius: 20px;
  padding: 16px 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: 16px;
}

@media (min-width: 768px) {
  .requests-filters-enhanced {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
  }
}

/* Requests Grid Enhanced */
.requests-grid-enhanced {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .requests-grid-enhanced {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .requests-grid-enhanced {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* Request Card Enhanced */
.request-card-enhanced {
  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;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.request-card-enhanced:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
}

.request-card-enhanced .request-card-header {
  padding: 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.request-card-enhanced .request-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.request-card-enhanced .status-badge {
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.request-card-enhanced .request-date {
  color: var(--text-soft);
  font-size: 0.7rem;
  background: white;
  padding: 4px 10px;
  border-radius: 30px;
  border: 1px solid var(--border-light);
  white-space: nowrap;
}

.request-card-enhanced .request-card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.request-card-enhanced .customer-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.request-card-enhanced .customer-avatar {
  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: 1.1rem;
  font-weight: 600;
  flex-shrink: 0;
}

.request-card-enhanced .customer-details {
  flex: 1;
  min-width: 0;
}

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

.request-card-enhanced .product-title {
  color: var(--accent);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.request-card-enhanced .contact-info-compact {
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

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

.request-card-enhanced .order-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--bg);
  border-radius: 14px;
  padding: 12px;
}

.request-card-enhanced .detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.request-card-enhanced .detail-item.total {
  grid-column: span 3;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}

.request-card-enhanced .detail-label {
  font-size: 0.6rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.request-card-enhanced .detail-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
}

.request-card-enhanced .detail-value.highlight {
  color: var(--accent);
  font-size: 0.9rem;
}

.request-card-enhanced .product-sku {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 6px 12px;
  border-radius: 30px;
  width: fit-content;
}

.request-card-enhanced .product-sku i {
  color: var(--accent);
  font-size: 0.65rem;
}

.request-card-enhanced .delivery-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--text-soft);
  background: var(--bg);
  padding: 10px 12px;
  border-radius: 12px;
  line-height: 1.4;
}

.request-card-enhanced .delivery-address i {
  color: var(--accent);
  font-size: 0.7rem;
  margin-top: 2px;
}

.request-card-enhanced .order-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fef3e2;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.75rem;
  color: #b45309;
  font-style: italic;
}

.request-card-enhanced .order-note i {
  color: #b45309;
  margin-top: 2px;
  font-size: 0.7rem;
}

.request-card-enhanced .request-card-footer {
  padding: 16px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}

.request-card-enhanced .order-ref {
  font-family: monospace;
  font-size: 0.65rem;
  color: var(--text-soft);
}

.request-card-enhanced .footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.request-card-enhanced .btn-primary.btn-sm,
.request-card-enhanced .btn-outline.btn-sm {
  padding: 6px 12px;
  font-size: 0.7rem;
  min-height: 32px;
  border-radius: 30px;
}

.request-card-enhanced .btn-icon {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

/* Add to dashboard-provider.css */

/* Status Indicator for waiting states */
.status-indicator.waiting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  background: #fef3e2;
  color: #b45309;
}

.status-indicator.waiting i {
  font-size: 0.65rem;
  animation: pulse 2s infinite;
}

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

/* Action button styles */
.accept-order-btn,
.start-order-btn,
.ship-order-btn,
.deliver-order-btn {
  transition: all 0.2s;
}

.accept-order-btn:hover {
  background: #1e4a3c;
  transform: translateY(-1px);
}

.reject-order-btn:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
  transform: translateY(-1px);
}

.start-order-btn:hover {
  background: #1e4a6b;
  transform: translateY(-1px);
}

.ship-order-btn:hover {
  background: #b45309;
  transform: translateY(-1px);
}

.deliver-order-btn:hover {
  background: #2f6e4a;
  transform: translateY(-1px);
} /* Add to dashboard-provider.css */

/* Product Order Modal - Match Card Design */
.product-order-modal .modal-content {
  animation: slideUp 0.3s ease;
}

.product-order-modal .modal-header {
  border-bottom: 1px solid var(--border-light);
  background: #f8fafc;
}

.product-order-modal .modal-close:hover {
  background: var(--bg);
  color: var(--accent);
}

.product-order-modal .modal-footer {
  border-top: 1px solid var(--border-light);
  background: var(--bg);
}

/* Status badge in modal */
.product-order-modal .status-badge {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Customer avatar */
.product-order-modal .customer-avatar {
  box-shadow: 0 4px 10px rgba(183, 140, 90, 0.2);
}

/* Product details grid - matches card exactly */
.product-order-modal .details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: white;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 15px;
}

/* Button hover effects */
.product-order-modal .btn-primary:hover,
.product-order-modal .btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-order-modal .btn-primary.accept-order-modal:hover {
  background: #1e4a3c;
}

.product-order-modal .btn-outline.reject-order-modal:hover {
  background: #ef4444;
  color: white;
}

.product-order-modal .start-order-modal:hover {
  background: #0f2a3a;
}

.product-order-modal .ship-order-modal:hover {
  background: #8b3d07;
}

.product-order-modal .deliver-order-modal:hover {
  background: #1e4a3c;
}

/* Animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .product-order-modal .modal-footer {
    flex-direction: column;
  }

  .product-order-modal .modal-footer button,
  .product-order-modal .modal-footer div {
    width: 100%;
  }

  .product-order-modal .details-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
} /* Add to dashboard-provider.css */

/* Product Order Card Enhanced - Match Modal */
.product-order-card-enhanced {
  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;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.product-order-card-enhanced:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
}

.product-order-card-header {
  padding: 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.product-order-card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Order Details Grid - Match Modal Exactly */
.product-order-card-body .order-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: var(--bg);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 0;
}

/* Status Badge - Match Modal */
.product-order-card-body .status-badge {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Customer Avatar - Match Modal */
.product-order-card-body .customer-avatar-enhanced {
  box-shadow: 0 4px 10px rgba(183, 140, 90, 0.2);
}

/* Product SKU - Match Modal */
.product-order-card-body .product-sku {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border-radius: 30px;
  padding: 8px 16px;
  width: fit-content;
}

/* Delivery Address - Match Modal */
.product-order-card-body .delivery-address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: white;
  border-radius: 12px;
  padding: 12px 15px;
}

/* Order Note - Match Modal */
.product-order-card-body .order-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fef3e2;
  border-radius: 12px;
  padding: 12px 15px;
}

/* Delivery Timestamp - Match Modal */
.product-order-card-body .delivery-timestamp {
  font-size: 0.6rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

/* Footer Actions - Match Modal */
.product-order-card-footer {
  padding: 16px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}

.product-order-card-footer .btn-primary.btn-sm,
.product-order-card-footer .btn-outline.btn-sm {
  padding: 6px 12px;
  font-size: 0.7rem;
  min-height: 32px;
  border-radius: 30px;
  transition: all 0.2s;
}

.product-order-card-footer .btn-primary.btn-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.product-order-card-footer .accept-order-btn:hover {
  background: #1e4a3c;
}

.product-order-card-footer .reject-order-btn:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

.product-order-card-footer .start-order-btn:hover {
  background: #0f2a3a;
}

.product-order-card-footer .ship-order-btn:hover {
  background: #8b3d07;
}

.product-order-card-footer .deliver-order-btn:hover {
  background: #1e4a3c;
}

.product-order-card-footer .btn-icon {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  cursor: pointer;
}

.product-order-card-footer .btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Waiting Indicator - Match Modal */
.status-indicator.waiting {
  background: #fef3e2;
  color: #b45309;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.status-indicator.waiting i {
  font-size: 0.65rem;
  animation: pulse 2s infinite;
}

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

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

  .product-order-card-body .order-details-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .product-order-card-footer {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .product-order-card-footer > div {
    width: 100%;
    justify-content: flex-end;
  }
}
/* ========================================================================
   CALENDAR DASHBOARD ENHANCED - COMPLETE CSS FIX
   ======================================================================== */

.calendar-dashboard-enhanced {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
  width: 100%;
  background: var(--bg);
}

@media (min-width: 768px) {
  .calendar-dashboard-enhanced {
    padding: calc(var(--spacer) * 3);
  }
}

/* Calendar Header Enhanced */
.calendar-header-enhanced {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
}

@media (min-width: 768px) {
  .calendar-header-enhanced {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
  }
}

.calendar-header-enhanced .header-left {
  flex: 1;
}

.calendar-header-enhanced .page-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 5px 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;
}

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

.calendar-header-enhanced .page-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 8px;
}

.calendar-header-enhanced .header-actions {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  flex-wrap: wrap;
}

/* View Options */
.calendar-header-enhanced .view-options {
  display: flex;
  gap: calc(var(--spacer) * 0.5);
  background: white;
  padding: 4px;
  border-radius: 40px;
  border: 1px solid var(--border-light);
}

.calendar-header-enhanced .view-btn {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-soft);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
}

@media (min-width: 768px) {
  .calendar-header-enhanced .view-btn {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2.5);
    font-size: 0.85rem;
  }
}

.calendar-header-enhanced .view-btn i {
  font-size: 0.8rem;
}

.calendar-header-enhanced .view-btn:hover {
  background: var(--bg);
  color: var(--text-dark);
}

.calendar-header-enhanced .view-btn.active {
  background: var(--accent);
  color: white;
}

.calendar-header-enhanced .btn-outline {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacer) * 0.8);
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}

.calendar-header-enhanced .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Calendar Filters Enhanced */
.calendar-filters-enhanced {
  background: white;
  border-radius: 20px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .calendar-filters-enhanced {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
  }
}

.calendar-filters-enhanced .filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}

.calendar-filters-enhanced .search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.calendar-filters-enhanced .search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.8rem;
  pointer-events: none;
}

.calendar-filters-enhanced .search-box input {
  width: 100%;
  padding: 10px 10px 10px 35px;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.85rem;
  background: var(--bg);
  min-height: 40px;
}

.calendar-filters-enhanced .filter-select {
  min-width: 120px;
  padding: 8px 25px 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.8rem;
  background: var(--bg);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' 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 10px center;
}

.calendar-filters-enhanced .btn-outline.btn-sm {
  padding: 8px 15px;
  font-size: 0.8rem;
  border-radius: 30px;
  white-space: nowrap;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
}

.calendar-filters-enhanced .btn-outline.btn-sm:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Date Navigation */
.calendar-filters-enhanced .date-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  padding: 6px 12px;
  border-radius: 40px;
  border: 1px solid var(--border-light);
}

.calendar-filters-enhanced .date-navigation .btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.calendar-filters-enhanced .date-navigation .btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.calendar-filters-enhanced .date-navigation h2 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dark);
  margin: 0;
  min-width: 140px;
  text-align: center;
}

@media (min-width: 768px) {
  .calendar-filters-enhanced .date-navigation h2 {
    font-size: 1.1rem;
    min-width: 160px;
  }
}

/* Calendar Stats Legend */
.calendar-stats-legend {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  background: white;
  border-radius: 20px;
  padding: 16px 20px;
  border: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .calendar-stats-legend {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
  }
}

.calendar-stats-legend .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  flex: 1;
}

.calendar-stats-legend .stat-item {
  text-align: center;
}

.calendar-stats-legend .stat-label {
  font-size: 0.65rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 4px;
}

.calendar-stats-legend .stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
}

.calendar-stats-legend .color-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

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

.calendar-stats-legend .color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.color-dot.pending {
  background: #f59e0b;
}

.color-dot.confirmed {
  background: #10b981;
}

.color-dot.in-progress {
  background: #3b82f6;
}

.color-dot.completed {
  background: #8b5cf6;
}

.color-dot.cancelled {
  background: #ef4444;
}

/* Calendar Main Container */
.calendar-main-container {
  display: flex;
  gap: 20px;
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  min-height: 600px;
}

.calendar-container-enhanced {
  flex: 1;
  padding: 20px;
  overflow-x: auto;
  min-width: 0;
}

@media (min-width: 768px) {
  .calendar-container-enhanced {
    padding: 24px;
  }
}

/* Upcoming Events Sidebar */
.upcoming-events-sidebar {
  width: 280px;
  border-left: 1px solid var(--border-light);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

@media (max-width: 1024px) {
  .upcoming-events-sidebar {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .upcoming-events-sidebar {
    display: none;
  }
}

.upcoming-events-sidebar .sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
}

.upcoming-events-sidebar .sidebar-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}

.upcoming-events-sidebar .sidebar-header h3 i {
  color: var(--accent);
  font-size: 0.8rem;
}

.upcoming-events-sidebar .sidebar-header .btn-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.upcoming-events-sidebar .sidebar-header .btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.upcoming-events-sidebar .events-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upcoming-events-sidebar .sidebar-event {
  background: white;
  border-radius: 14px;
  padding: 12px;
  border: 1px solid var(--border-light);
  transition: all 0.2s;
  cursor: pointer;
}

.upcoming-events-sidebar .sidebar-event:hover {
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-color: var(--accent);
}

.upcoming-events-sidebar .sidebar-event .event-time-small {
  font-size: 0.6rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 4px;
}

.upcoming-events-sidebar .sidebar-event .event-title-small {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-events-sidebar .sidebar-event .event-customer-small {
  font-size: 0.65rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-events-sidebar .empty-events {
  text-align: center;
  padding: 24px 12px;
  color: var(--text-soft);
}

.upcoming-events-sidebar .empty-events i {
  font-size: 2rem;
  margin-bottom: 12px;
  opacity: 0.3;
  color: var(--accent);
}

/* Calendar Month View */
.calendar-month-view {
  width: 100%;
}

.calendar-month-view .month-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}

.calendar-month-view .weekday {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 8px 0;
}

@media (min-width: 768px) {
  .calendar-month-view .weekday {
    font-size: 0.75rem;
  }
}

.calendar-month-view .month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-month-view .calendar-day {
  min-height: 100px;
  padding: 8px;
  background: var(--bg);
  border-radius: 12px;
  border: 1px solid transparent;
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .calendar-month-view .calendar-day {
    min-height: 120px;
    padding: 10px;
  }
}

.calendar-month-view .calendar-day:hover {
  background: white;
  border-color: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.calendar-month-view .calendar-day.today {
  border: 2px solid var(--accent);
  background: #f2ebe3;
}

.calendar-month-view .calendar-day.other-month {
  background: #f8fafc;
  opacity: 0.6;
}

.calendar-month-view .day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.calendar-month-view .day-number {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .calendar-month-view .day-number {
    font-size: 0.9rem;
  }
}

.calendar-month-view .day-badges {
  display: flex;
  gap: 2px;
}

.calendar-month-view .day-badge {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.calendar-month-view .day-badge.pending {
  background: #f59e0b;
}

.calendar-month-view .day-badge.confirmed {
  background: #10b981;
}

.calendar-month-view .day-badge.in_progress {
  background: #3b82f6;
}

.calendar-month-view .day-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 70px;
  overflow: hidden;
}

.calendar-month-view .day-event {
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

@media (min-width: 768px) {
  .calendar-month-view .day-event {
    padding: 2px 6px;
    font-size: 0.65rem;
    border-radius: 6px;
  }
}

.calendar-month-view .day-event:hover {
  transform: translateX(2px);
  opacity: 0.9;
}

.calendar-month-view .day-event.pending {
  background: #f59e0b;
}

.calendar-month-view .day-event.confirmed {
  background: #10b981;
}

.calendar-month-view .day-event.in_progress {
  background: #3b82f6;
}

.calendar-month-view .day-event .event-time {
  font-weight: 600;
  margin-right: 2px;
}

.calendar-month-view .more-events {
  font-size: 0.55rem;
  color: var(--text-soft);
  text-align: center;
  margin-top: 2px;
  font-weight: 500;
}

/* Calendar Week View */
.calendar-week-view {
  width: 100%;
  min-width: 700px;
}

.calendar-week-view .week-header {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
}

@media (min-width: 768px) {
  .calendar-week-view .week-header {
    grid-template-columns: 70px repeat(7, 1fr);
  }
}

.calendar-week-view .time-column-header {
  font-weight: 600;
  color: var(--text-soft);
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-week-view .day-column-header {
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 4px;
  border-radius: 8px;
}

.calendar-week-view .day-column-header:hover {
  background: var(--bg);
}

.calendar-week-view .day-column-header.today .day-name,
.calendar-week-view .day-column-header.today .day-date {
  color: var(--accent);
  font-weight: 600;
}

.calendar-week-view .day-column-header .day-name {
  font-size: 0.6rem;
  color: var(--text-soft);
  display: block;
  margin-bottom: 2px;
}

.calendar-week-view .day-column-header .day-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
}

.calendar-week-view .week-body {
  display: flex;
  flex-direction: column;
}

.calendar-week-view .week-row {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  gap: 4px;
  min-height: 40px;
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .calendar-week-view .week-row {
    grid-template-columns: 70px repeat(7, 1fr);
    min-height: 45px;
  }
}

.calendar-week-view .hour-label {
  padding: 4px;
  color: var(--text-soft);
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
}

.calendar-week-view .hour-cell {
  position: relative;
  padding: 2px;
  border-left: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.2s;
  min-height: 40px;
}

.calendar-week-view .hour-cell:hover {
  background: var(--bg);
}

.calendar-week-view .week-event {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.55rem;
  cursor: pointer;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
}

@media (min-width: 768px) {
  .calendar-week-view .week-event {
    padding: 3px 6px;
    font-size: 0.6rem;
    border-radius: 6px;
  }
}

.calendar-week-view .week-event.pending {
  background: #f59e0b;
}

.calendar-week-view .week-event.confirmed {
  background: #10b981;
}

.calendar-week-view .week-event.in_progress {
  background: #3b82f6;
}

.calendar-week-view .week-event .event-time {
  font-weight: 600;
  margin-right: 2px;
}

/* Calendar Day View */
.calendar-day-view {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.calendar-day-view .day-view-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.calendar-day-view .back-to-week {
  background: var(--bg);
  border: 1px solid var(--border-light);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
}

.calendar-day-view .back-to-week:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

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

@media (min-width: 768px) {
  .calendar-day-view .day-view-header h3 {
    font-size: 1.1rem;
  }
}

.calendar-day-view .day-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.8rem;
  background: var(--bg);
  padding: 6px 12px;
  border-radius: 30px;
}

.calendar-day-view .day-stats i {
  color: var(--accent);
}

.calendar-day-view .day-timeline {
  display: flex;
  flex-direction: column;
}

.calendar-day-view .timeline-hour {
  display: grid;
  grid-template-columns: 60px 1fr;
  min-height: 50px;
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .calendar-day-view .timeline-hour {
    grid-template-columns: 70px 1fr;
    min-height: 60px;
  }
}

.calendar-day-view .hour-marker {
  padding: 8px;
  color: var(--text-soft);
  font-size: 0.65rem;
  border-right: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
}

.calendar-day-view .hour-slot {
  position: relative;
  padding: 4px;
  min-height: 50px;
}

.calendar-day-view .slot-event {
  background: white;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 4px solid;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 4px;
}

.calendar-day-view .slot-event:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.calendar-day-view .slot-event.pending {
  border-left-color: #f59e0b;
}

.calendar-day-view .slot-event.confirmed {
  border-left-color: #10b981;
}

.calendar-day-view .slot-event.in_progress {
  border-left-color: #3b82f6;
}

.calendar-day-view .event-time-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: var(--accent);
  margin-bottom: 4px;
}

.calendar-day-view .event-time-badge .duration {
  color: var(--text-soft);
  font-size: 0.6rem;
}

.calendar-day-view .event-customer {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.calendar-day-view .event-service {
  font-size: 0.7rem;
  color: var(--text-soft);
}

.calendar-day-view .event-note {
  margin-top: 6px;
  padding: 6px 8px;
  background: #fef3e2;
  border-radius: 6px;
  font-size: 0.7rem;
  color: #b45309;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* Calendar Agenda View */
.calendar-agenda-view {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .calendar-agenda-view {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

.calendar-agenda-view .agenda-section {
  background: white;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid var(--border-light);
}

.calendar-agenda-view .agenda-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-agenda-view .agenda-section h3 i {
  color: var(--accent);
  font-size: 0.9rem;
}

.calendar-agenda-view .agenda-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calendar-agenda-view .agenda-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

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

.calendar-agenda-view .agenda-time {
  min-width: 70px;
}

.calendar-agenda-view .agenda-date {
  font-size: 0.6rem;
  color: var(--text-soft);
  display: block;
  margin-bottom: 2px;
}

.calendar-agenda-view .agenda-time-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark);
}

.calendar-agenda-view .agenda-content {
  flex: 1;
  min-width: 0;
}

.calendar-agenda-view .agenda-customer {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.8rem;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-agenda-view .agenda-service {
  font-size: 0.65rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-agenda-view .agenda-status {
  font-size: 0.6rem;
  padding: 2px 8px;
  border-radius: 30px;
  font-weight: 600;
  white-space: nowrap;
}

.calendar-agenda-view .agenda-status.pending {
  background: #fef3e2;
  color: #b45309;
}

.calendar-agenda-view .agenda-status.confirmed {
  background: #e3f2e9;
  color: #2f6e4a;
}

.calendar-agenda-view .agenda-status.in_progress {
  background: #e1f0fa;
  color: #1e4a6b;
}

.calendar-agenda-view .agenda-status.completed {
  background: #e0e7ff;
  color: #1e3a8a;
}

.calendar-agenda-view .empty-events {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-soft);
}

.calendar-agenda-view .empty-events i {
  font-size: 2rem;
  margin-bottom: 12px;
  opacity: 0.3;
  color: var(--accent);
}

/* Loading and Error States */
.calendar-loading {
  text-align: center;
  padding: 40px;
  color: var(--text-soft);
}

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

.error-state {
  text-align: center;
  padding: 40px;
  background: #fee2e2;
  border-radius: 16px;
  color: #991b1b;
}

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

.error-state button {
  margin-top: 16px;
  padding: 8px 20px;
  background: white;
  border: 1px solid #991b1b;
  color: #991b1b;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s;
}

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

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

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

  .calendar-header-enhanced .header-actions {
    width: 100%;
    flex-direction: column;
  }

  .calendar-header-enhanced .view-options {
    width: 100%;
    justify-content: space-between;
  }

  .calendar-header-enhanced .view-btn {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.7rem;
  }

  .calendar-header-enhanced .view-btn i {
    font-size: 0.7rem;
  }

  .calendar-filters-enhanced {
    flex-direction: column;
  }

  .calendar-filters-enhanced .filter-group {
    width: 100%;
  }

  .calendar-filters-enhanced .search-box {
    width: 100%;
  }

  .calendar-filters-enhanced .filter-select {
    width: 100%;
  }

  .calendar-stats-legend {
    flex-direction: column;
  }

  .calendar-stats-legend .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .calendar-stats-legend .color-legend {
    justify-content: center;
  }

  .calendar-month-view .calendar-day {
    min-height: 70px;
    padding: 4px;
  }

  .calendar-month-view .day-number {
    font-size: 0.7rem;
  }

  .calendar-month-view .day-badges {
    display: none;
  }

  .calendar-month-view .day-event {
    font-size: 0.5rem;
    padding: 1px 2px;
  }

  .calendar-day-view .timeline-hour {
    grid-template-columns: 50px 1fr;
  }

  .calendar-day-view .hour-marker {
    font-size: 0.6rem;
    padding-right: 8px;
  }

  .calendar-agenda-view {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .calendar-month-view .calendar-day {
    min-height: 50px;
  }

  .calendar-month-view .day-events {
    display: none;
  }

  .calendar-day-view .event-customer {
    font-size: 0.7rem;
  }

  .calendar-day-view .event-service {
    font-size: 0.6rem;
  }
} /* Add to dashboard-provider.css */

/* Event Modal */
.event-modal .modal-content {
  animation: slideUp 0.3s ease;
}

.event-modal .modal-header {
  border-bottom: 1px solid var(--border-light);
}

.event-modal .modal-close:hover {
  background: var(--bg);
  color: var(--accent);
}

.event-modal .modal-footer {
  border-top: 1px solid var(--border-light);
  background: var(--bg);
}

.event-modal .btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.event-modal .btn-primary:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.2);
}

/* Animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
} /* Service Requests Dashboard */
.service-requests-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
  width: 100%;
}

@media (min-width: 768px) {
  .service-requests-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

/* Requests Header Compact */
.requests-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

.requests-header-compact .page-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  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;
}

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

.requests-header-compact .page-subtitle {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 8px;
}

/* Service Stats Grid */
.service-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

/* Filters Bar Compact */
.filters-bar-compact {
  background: white;
  border-radius: 20px;
  padding: 16px 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: 16px;
}

@media (min-width: 768px) {
  .filters-bar-compact {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
  }
}

.filters-bar-compact .filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}

/* Search Box Compact */
.search-box-compact {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.search-box-compact i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.8rem;
  pointer-events: none;
}

.search-box-compact input {
  width: 100%;
  padding: 10px 10px 10px 35px;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.85rem;
  background: var(--bg);
  min-height: 40px;
}

/* Filter Select Compact */
.filter-select-compact {
  min-width: 120px;
  padding: 8px 25px 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.8rem;
  background: var(--bg);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' 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 10px center;
}

/* Requests Grid Compact */
.requests-grid-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .requests-grid-compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .requests-grid-compact {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* Request Card Compact */
.request-card-compact {
  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;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.request-card-compact:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
}

/* Empty State */
.empty-requests-compact {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
}

.empty-requests-compact .empty-icon i {
  font-size: 3rem;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: 15px;
}

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

.empty-requests-compact p {
  color: var(--text-soft);
  margin-bottom: 20px;
}

/* Click Hint */
.click-hint {
  text-align: center;
  margin-top: 24px;
  padding: 12px;
  font-size: 0.8rem;
  color: var(--text-soft);
  background: var(--bg);
  border-radius: 40px;
  border: 1px dashed var(--border-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.click-hint i {
  color: var(--accent);
  font-size: 0.9rem;
  animation: handWave 2s infinite;
}

@keyframes handWave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg);
  }
  75% {
    transform: rotate(-15deg);
  }
} /* ========================================================================
   REQUEST CARD COMPACT - COMPLETE CSS
   ======================================================================== */

.request-card-compact {
  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;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.request-card-compact:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
}

/* Card Header */
.request-card-compact .request-card-header {
  padding: 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.request-card-compact .request-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.request-card-compact .status-badge {
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.request-card-compact .custom-offer-badge {
  background: var(--accent);
  color: white;
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.request-card-compact .request-date {
  color: var(--text-soft);
  font-size: 0.7rem;
  background: white;
  padding: 4px 12px;
  border-radius: 30px;
  border: 1px solid var(--border-light);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.request-card-compact .request-date i {
  font-size: 0.65rem;
  color: var(--accent);
}

/* Card Body */
.request-card-compact .request-card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Customer Info Row */
.request-card-compact .customer-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.request-card-compact .customer-avatar-small {
  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: 1.1rem;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(183, 140, 90, 0.2);
}

.request-card-compact .customer-details {
  flex: 1;
  min-width: 0;
}

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

.request-card-compact .service-name {
  color: var(--accent);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Quick Info Grid */
.request-card-compact .quick-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: var(--bg);
  border-radius: 14px;
  padding: 12px;
}

.request-card-compact .info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.request-card-compact .info-label {
  font-size: 0.6rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.request-card-compact .info-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
}

.request-card-compact .info-value.highlight {
  color: var(--accent);
}

.request-card-compact .info-value.success {
  color: #10b981;
}

.request-card-compact .info-value.warning {
  color: #b45309;
}

.request-card-compact .info-value.muted {
  color: var(--text-soft);
  font-style: italic;
}

.request-card-compact .info-value i {
  font-size: 0.7rem;
  margin-right: 2px;
}

/* Contact Info Compact */
.request-card-compact .contact-info-compact {
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

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

.request-card-compact .contact-row span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Progress Bar Mini */
.request-card-compact .progress-bar-mini {
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  overflow: hidden;
  margin: 5px 0;
}

.request-card-compact .progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Quote Preview */
.request-card-compact .quote-preview {
  background: #f2ebe3;
  border-radius: 30px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
}

.request-card-compact .quote-label {
  color: var(--text-soft);
}

.request-card-compact .quote-amount {
  font-weight: 700;
  color: var(--accent);
}

/* Card Footer */
.request-card-compact .request-card-footer {
  padding: 16px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}

.request-card-compact .order-ref {
  font-family: monospace;
  font-size: 0.65rem;
  color: var(--text-soft);
}

.request-card-compact .footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.request-card-compact .btn-primary.btn-sm {
  padding: 6px 12px;
  font-size: 0.7rem;
  min-height: 32px;
  border-radius: 30px;
  background: var(--accent);
  border: none;
  color: white;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.request-card-compact .btn-primary.btn-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

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

.request-card-compact .btn-outline.btn-sm:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.request-card-compact .btn-icon.btn-sm {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  cursor: pointer;
}

.request-card-compact .btn-icon.btn-sm:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Status-specific styling */
.request-card-compact[data-status="pending"] .status-badge {
  background: #fef3e2;
  color: #b45309;
}

.request-card-compact[data-status="awaiting_deposit"] .status-badge {
  background: #fef3e2;
  color: #b45309;
}

.request-card-compact[data-status="awaiting_visit"] .status-badge {
  background: #e3f2e9;
  color: #2f6e4a;
}

.request-card-compact[data-status="awaiting_quote"] .status-badge {
  background: #fef3e2;
  color: #b78c5a;
}

.request-card-compact[data-status="quoted"] .status-badge {
  background: #f2ebe3;
  color: #b78c5a;
}

.request-card-compact[data-status="approved"] .status-badge {
  background: #e3f2e9;
  color: #2f6e4a;
}

.request-card-compact[data-status="in_progress"] .status-badge {
  background: #e1f0fa;
  color: #1e4a6b;
}

.request-card-compact[data-status="awaiting_final_payment"] .status-badge {
  background: #fef3e2;
  color: #b45309;
}

.request-card-compact[data-status="completed"] .status-badge {
  background: #e3f2e9;
  color: #2f6e4a;
}

.request-card-compact[data-status="cancelled"] .status-badge,
.request-card-compact[data-status="cancelled_with_fee"] .status-badge {
  background: #fee2e2;
  color: #991b1b;
}

/* Empty State */
.empty-requests-compact {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 24px;
  border: 1px solid var(--border-light);
}

.empty-requests-compact .empty-icon {
  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: 2.5rem;
}

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

.empty-requests-compact p {
  color: var(--text-soft);
  margin-bottom: 20px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.empty-requests-compact .btn-primary {
  padding: 12px 24px;
  border-radius: 40px;
  font-size: 0.9rem;
}

/* Filter Select Compact - Additional styles */
.filter-select-compact {
  padding: 8px 30px 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  font-size: 0.8rem;
  background: white;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' 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 10px center;
  background-size: 12px;
  min-height: 38px;
}

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

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

/* Mobile Responsive */
@media (max-width: 768px) {
  .request-card-compact .request-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .request-card-compact .quick-info-grid {
    grid-template-columns: 1fr;
  }

  .request-card-compact .footer-actions {
    flex-wrap: wrap;
  }

  .filters-bar-compact {
    flex-direction: column;
  }

  .filters-bar-compact .filter-group {
    width: 100%;
  }

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

  .search-box-compact {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .request-card-compact .customer-avatar-small {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
  }

  .request-card-compact .customer-name {
    font-size: 0.85rem;
  }

  .request-card-compact .service-name {
    font-size: 0.75rem;
  }

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

  .request-card-compact .btn-primary.btn-sm,
  .request-card-compact .btn-outline.btn-sm {
    padding: 5px 10px;
    font-size: 0.65rem;
  }
} /* Add to your dashboard-provider.css */
#serviceRequestsGrid .request-card-compact.hidden-filtered {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

.request-card-enhanced .btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Service/Order Details */
.service-details1 {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Last Message */
.conversation-last-message {
  font-size: 0.7rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Status Row */
.conversation-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.status-indicator {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 30px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: capitalize;
  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.active {
  background: #e1f0fa;
  color: #1e4a6b;
}

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

.status-indicator.canceled {
  background: #fee2e2;
  color: #991b1b;
}

/* Unread Badge */
.unread-badge-compact {
  background: var(--accent);
  color: white;
  min-width: 20px;
  height: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0 6px;
  margin-left: 4px;
  align-self: center;
  box-shadow: 0 2px 4px rgba(183, 140, 90, 0.3);
  flex-shrink: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .customer-name {
    font-size: 0.85rem;
    max-width: 120px;
  }

  .service-details1 {
    font-size: 0.7rem;
  }

  .conversation-last-message {
    font-size: 0.65rem;
  }

  .status-indicator {
    font-size: 0.55rem;
    padding: 2px 8px;
  }

  .unread-badge-compact {
    min-width: 18px;
    height: 18px;
    font-size: 0.55rem;
  }
}

@media (max-width: 480px) {
  .customer-name {
    font-size: 0.8rem;
    max-width: 100px;
  }

  .service-details1 {
    font-size: 0.65rem;
  }

  .conversation-last-message {
    font-size: 0.6rem;
  }

  .conversation-time {
    font-size: 0.55rem;
    padding: 2px 6px;
  }
}
/* ========================================================================
   PROVIDER HEADER - ENHANCED DESIGN (MATCHING CUSTOMER 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;
}

.header-left-enhanced {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
}

.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);
}

.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;
  }
}

.header-right-enhanced {
  display: flex;
  align-items: center;
  gap: calc(var(--spacer) * 2);
  flex-shrink: 0;
}

/* Search Container */
.search-container-enhanced {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon-enhanced {
  position: absolute;
  left: calc(var(--spacer) * 2);
  color: var(--text-soft);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 1;
}

.search-input-enhanced {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2)
    calc(var(--spacer) * 1.5) calc(var(--spacer) * 5);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.9rem;
  width: 240px;
  transition: all 0.2s;
  background: var(--bg);
  min-height: 44px;
}

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

@media (max-width: 1024px) {
  .search-container-enhanced {
    display: none;
  }
}

/* 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);
}

.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);
}

/* 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;
}

.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-enhanced {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: white;
  border-radius: 20px;
  box-shadow: var(--shadow-hover);
  border: 1px solid var(--border-light);
  display: none;
  z-index: 1000;
  overflow: hidden;
}

.profile-menu-enhanced.active {
  display: block;
  animation: slideDown 0.3s ease;
}

.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: var(--bg);
}

/* Mobile Search */
.mobile-search-enhanced {
  display: none;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

.mobile-search-enhanced i {
  position: absolute;
  left: calc(var(--spacer) * 4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  z-index: 1;
}

.mobile-search-enhanced input {
  width: 100%;
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2)
    calc(var(--spacer) * 1.5) calc(var(--spacer) * 6);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 1rem;
  min-height: 48px;
}

/* 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;
}

.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;
}

.unread-dot-enhanced {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  position: absolute;
  right: calc(var(--spacer) * 2);
  top: 50%;
  transform: translateY(-50%);
}

.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;
}

/* ========================================================================
   MOBILE RESPONSIVE (768px and below)
   ======================================================================== */
@media (max-width: 768px) {
  .dashboard-header {
    padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  }

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

  .search-container-enhanced {
    display: none;
  }

  .mobile-search-enhanced {
    display: block;
  }

  .header-right-enhanced {
    gap: calc(var(--spacer));
  }

  .icon-btn-enhanced {
    min-width: 40px;
    min-height: 40px;
    font-size: 1.1rem;
  }

  .profile-btn-enhanced {
    padding: calc(var(--spacer) * 0.5);
  }

  .profile-avatar-enhanced {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .notifications-panel-enhanced {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 80vh;
  }
}

/* ========================================================================
   SMALL MOBILE (480px and below)
   ======================================================================== */
@media (max-width: 480px) {
  .dashboard-header {
    padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 1.5);
  }

  .mobile-menu-toggle-enhanced {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .page-title-enhanced {
    font-size: 1rem;
    max-width: 120px;
  }

  .icon-btn-enhanced {
    min-width: 38px;
    min-height: 38px;
    font-size: 1rem;
  }

  .profile-avatar-enhanced {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }

  .profile-menu-enhanced {
    width: 260px;
    right: -10px;
  }
}

/* ========================================================================
   EXTRA SMALL MOBILE (360px and below)
   ======================================================================== */
@media (max-width: 360px) {
  .mobile-menu-toggle-enhanced {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  .page-title-enhanced {
    font-size: 0.9rem;
    max-width: 100px;
  }

  .icon-btn-enhanced {
    min-width: 36px;
    min-height: 36px;
    font-size: 0.95rem;
  }

  .icon-btn-enhanced .badge {
    min-width: 16px;
    height: 16px;
    font-size: 0.55rem;
    top: 2px;
    right: 2px;
  }
}

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

/* ========================================================================
   TOUCH TARGETS
   ======================================================================== */
.mobile-menu-toggle-enhanced,
.icon-btn-enhanced,
.profile-btn-enhanced,
.btn-text-enhanced,
.notification-item-enhanced {
  min-height: 44px;
  min-width: 44px;
  -webkit-tap-highlight-color: transparent;
}
/* ========================================================================
   GLOBAL INSIGHT ITEM FIXES - SHOW FULL TEXT
   ======================================================================== */

/* Override any truncation on insight items */
.insight-item,
.insights-panel .insight-item,
.activity-feed .insight-item,
.schedule-panel .insight-item {
  height: auto !important;
  min-height: auto !important;
}

.insight-item .insight-content h4,
.insights-panel .insight-content h4,
.activity-feed .insight-content h4 {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  line-height: 1.4;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.insight-item .insight-content p,
.insights-panel .insight-content p,
.activity-feed .insight-content p {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  line-height: 1.4;
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-bottom: 6px;
}

/* Make the container flexible */
.insight-item .insight-content,
.insights-panel .insight-content,
.activity-feed .insight-content {
  flex: 1;
  min-width: 0;
  width: 100%;
}

/* Keep the action link clean */
.insight-item .insight-action,
.insights-panel .insight-action,
.activity-feed .insight-action {
  font-size: 0.7rem;
  display: inline-block;
  white-space: nowrap;
  color: var(--accent);
  font-weight: 500;
}

/* Responsive font sizes */
@media (min-width: 480px) {
  .insight-item .insight-content h4 {
    font-size: 0.9rem;
  }

  .insight-item .insight-content p {
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) {
  .insight-item .insight-content h4 {
    font-size: 0.95rem;
  }

  .insight-item .insight-content p {
    font-size: 0.85rem;
  }

  .insight-item .insight-action {
    font-size: 0.75rem;
  }
}

@media (min-width: 1025px) {
  .insight-item .insight-content h4 {
    font-size: 1rem;
  }

  .insight-item .insight-content p {
    font-size: 0.9rem;
  }
} /* Mobile specific fixes (below 480px) */
@media (max-width: 480px) {
  .insight-item {
    flex-wrap: wrap;
  }

  .insight-item .insight-content {
    width: calc(100% - 50px); /* Account for icon width */
  }

  .insight-item .insight-content h4 {
    font-size: 0.8rem;
    margin-bottom: 2px;
  }

  .insight-item .insight-content p {
    font-size: 0.7rem;
    line-height: 1.3;
    margin-bottom: 4px;
  }

  .insight-item .insight-action {
    font-size: 0.65rem;
  }
}

/* Extra small screens */
@media (max-width: 360px) {
  .insight-item {
    padding: 8px;
  }

  .insight-item .insight-icon {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .insight-item .insight-content h4 {
    font-size: 0.75rem;
  }

  .insight-item .insight-content p {
    font-size: 0.65rem;
  }
}
/* ========================================================================
   PRODUCT ORDER CARD STYLES
   ======================================================================== */

.delivery-address-preview {
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 0.8rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.delivery-address-preview i {
  color: var(--accent);
  font-size: 0.8rem;
}

/* Product-specific status badge colors */
.order-status-badge.pending {
  background: #fef3e2;
  color: #b45309;
}

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

.order-status-badge.shipped {
  background: #e1f0fa;
  color: #1e4a6b;
}

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

/* Product stats cards */
.stat-card-enhanced.product-pending .stat-icon-wrapper {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.stat-card-enhanced.product-accepted .stat-icon-wrapper {
  background: rgba(47, 110, 74, 0.1);
  color: #2f6e4a;
}

.stat-card-enhanced.product-in-progress .stat-icon-wrapper {
  background: rgba(30, 74, 107, 0.1);
  color: #1e4a6b;
}

.stat-card-enhanced.product-shipped .stat-icon-wrapper {
  background: rgba(30, 74, 107, 0.1);
  color: #1e4a6b;
}

.stat-card-enhanced.product-delivered .stat-icon-wrapper {
  background: rgba(47, 110, 74, 0.1);
  color: #2f6e4a;
}

.stat-card-enhanced.product-completed .stat-icon-wrapper {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.stat-card-enhanced.product-cancelled .stat-icon-wrapper {
  background: rgba(153, 27, 27, 0.1);
  color: #991b1b;
}

/* Responsive adjustments for product cards */
@media (max-width: 768px) {
  .order-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .delivery-address-preview {
    font-size: 0.75rem;
  }
}
/* ========================================================================
   PRODUCT STATS GRID - FULL TEXT DISPLAY
   ======================================================================== */

.product-stats-grid .stat-card-premium {
  overflow: visible;
}

.product-stats-grid .stat-label-premium,
.product-stats-grid .stat-value-premium,
.product-stats-grid .stat-trend-premium {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  line-height: 1.4;
}

.product-stats-grid .stat-trend-premium {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 0.65rem;
}

@media (min-width: 768px) {
  .product-stats-grid .stat-trend-premium {
    font-size: 0.7rem;
  }
}

.product-stats-grid .stat-trend-premium i {
  font-size: 0.6rem;
  flex-shrink: 0;
}

/* Ensure the stat content doesn't overflow */
.product-stats-grid .stat-content-premium {
  min-width: 0;
  width: 100%;
  overflow: visible;
}

/* Make sure the stat cards have proper spacing */
.product-stats-grid .stat-card-premium {
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: auto;
  min-height: 90px;
}

@media (min-width: 768px) {
  .product-stats-grid .stat-card-premium {
    padding: 18px;
    min-height: 100px;
  }
}

/* Keep icons properly sized */
.product-stats-grid .stat-icon-container {
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .product-stats-grid .stat-icon-container {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .product-stats-grid .stat-card-premium {
    flex-direction: row;
    align-items: center;
    padding: 12px;
  }

  .product-stats-grid .stat-icon-container {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .product-stats-grid .stat-label-premium {
    font-size: 0.7rem;
    margin-bottom: 2px;
  }

  .product-stats-grid .stat-value-premium {
    font-size: 1.1rem;
    line-height: 1.2;
  }

  .product-stats-grid .stat-trend-premium {
    font-size: 0.6rem;
    margin-top: 2px;
  }
}

/* Extra small screens */
@media (max-width: 360px) {
  .product-stats-grid .stat-card-premium {
    padding: 10px;
    gap: 8px;
  }

  .product-stats-grid .stat-icon-container {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .product-stats-grid .stat-label-premium {
    font-size: 0.65rem;
  }

  .product-stats-grid .stat-value-premium {
    font-size: 1rem;
  }

  .product-stats-grid .stat-trend-premium {
    font-size: 0.55rem;
  }
}
/* ========================================================================
   SERVICE STATS GRID - FULL TEXT DISPLAY
   ======================================================================== */

.orders-stats-grid .stat-card-premium {
  overflow: visible;
}

.orders-stats-grid .stat-label-premium,
.orders-stats-grid .stat-value-premium,
.orders-stats-grid .stat-trend-premium {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  line-height: 1.4;
}

.orders-stats-grid .stat-trend-premium {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 0.65rem;
}

@media (min-width: 768px) {
  .orders-stats-grid .stat-trend-premium {
    font-size: 0.7rem;
  }
}

.orders-stats-grid .stat-trend-premium i {
  font-size: 0.6rem;
  flex-shrink: 0;
}

/* Ensure the stat content doesn't overflow */
.orders-stats-grid .stat-content-premium {
  min-width: 0;
  width: 100%;
  overflow: visible;
}

/* Make sure the stat cards have proper spacing */
.orders-stats-grid .stat-card-premium {
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: auto;
  min-height: 90px;
}

@media (min-width: 768px) {
  .orders-stats-grid .stat-card-premium {
    padding: 18px;
    min-height: 100px;
  }
}

/* Keep icons properly sized */
.orders-stats-grid .stat-icon-container {
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .orders-stats-grid .stat-icon-container {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }
}

/* Status-specific icon backgrounds */
.orders-stats-grid .stat-icon-container.pending-deposit {
  background: linear-gradient(135deg, #fef3e2, #ffe4cc);
  color: #b45309;
}

.orders-stats-grid .stat-icon-container.pending-visit {
  background: linear-gradient(135deg, #e3f2e9, #c8e6d9);
  color: #2f6e4a;
}

.orders-stats-grid .stat-icon-container.pending-quote {
  background: linear-gradient(135deg, #fef3e2, #ffd8b2);
  color: #b78c5a;
}

.orders-stats-grid .stat-icon-container.quote-received {
  background: linear-gradient(135deg, #f2ebe3, #e8d9cc);
  color: #b78c5a;
}

.orders-stats-grid .stat-icon-container.approved {
  background: linear-gradient(135deg, #e3f2e9, #c8e6d9);
  color: #2f6e4a;
}

.orders-stats-grid .stat-icon-container.in-progress {
  background: linear-gradient(135deg, #e1f0fa, #c2e0f5);
  color: #1e4a6b;
}

.orders-stats-grid .stat-icon-container.final-payment {
  background: linear-gradient(135deg, #fef3e2, #ffd8b2);
  color: #b45309;
}

.orders-stats-grid .stat-icon-container.completed {
  background: linear-gradient(135deg, #e3f2e9, #c8e6d9);
  color: #2f6e4a;
}

.orders-stats-grid .stat-icon-container.cancelled {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
}

.orders-stats-grid .stat-icon-container.all-services {
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  color: #475569;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .orders-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .orders-stats-grid .stat-card-premium {
    flex-direction: row;
    align-items: center;
    padding: 12px;
    min-height: 80px;
  }

  .orders-stats-grid .stat-icon-container {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .orders-stats-grid .stat-label-premium {
    font-size: 0.65rem;
    margin-bottom: 2px;
  }

  .orders-stats-grid .stat-value-premium {
    font-size: 1.1rem;
    line-height: 1.2;
  }

  .orders-stats-grid .stat-trend-premium {
    font-size: 0.6rem;
    margin-top: 2px;
  }
}

/* Extra small screens */
@media (max-width: 360px) {
  .orders-stats-grid {
    grid-template-columns: 1fr;
  }

  .orders-stats-grid .stat-card-premium {
    padding: 10px;
    gap: 8px;
  }

  .orders-stats-grid .stat-icon-container {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .orders-stats-grid .stat-label-premium {
    font-size: 0.6rem;
  }

  .orders-stats-grid .stat-value-premium {
    font-size: 1rem;
  }

  .orders-stats-grid .stat-trend-premium {
    font-size: 0.55rem;
  }
}
/* ========================================================================
   PERFORMANCE METRICS - ENHANCED DISPLAY
   ======================================================================== */

.metrics-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.metric-compact {
  background: var(--bg);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

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

.metric-compact::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;
}

.metric-compact:hover::before {
  opacity: 1;
}

.metric-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .metric-label {
    font-size: 0.75rem;
  }
}

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

@media (min-width: 768px) {
  .metric-value {
    font-size: 1.5rem;
  }
}

.rating-display {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.stars {
  color: #fbbf24;
  font-size: 0.8rem;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .stars {
    font-size: 0.85rem;
  }
}

.metric-trend {
  font-size: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 30px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  margin-bottom: 4px;
}

@media (min-width: 768px) {
  .metric-trend {
    font-size: 0.7rem;
    padding: 2px 10px;
  }
}

.metric-trend.positive {
  color: #10b981;
  background: #e3f2e9;
  border-color: #10b981;
}

.metric-trend.negative {
  color: #ef4444;
  background: #fee2e2;
  border-color: #ef4444;
}

.metric-trend.neutral {
  color: #64748b;
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.metric-trend i {
  font-size: 0.55rem;
}

@media (min-width: 768px) {
  .metric-trend i {
    font-size: 0.6rem;
  }
}

.metric-subtitle {
  font-size: 0.65rem;
  color: var(--text-soft);
  display: block;
  margin-top: 4px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

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

/* Mobile optimizations */
@media (max-width: 768px) {
  .metrics-grid-compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .metric-compact {
    padding: 12px;
  }

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

@media (max-width: 480px) {
  .metrics-grid-compact {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .metric-compact {
    padding: 12px;
  }

  .rating-display {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
/* ========================================================================
   BACK BUTTON STYLES
   ======================================================================== */

.back-to-all-btn {
  padding: 10px 16px;
  border-radius: 40px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.back-to-all-btn:hover {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateX(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.back-to-all-btn i {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.back-to-all-btn:hover i {
  transform: translateX(-3px);
}

.back-to-all-btn:active {
  transform: translateX(0);
}

/* Small screen adjustment */
@media (max-width: 768px) {
  .back-to-all-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
    gap: 6px;
  }

  .back-to-all-btn i {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .back-to-all-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}
/* ========================================================================
   FIX: BOOKING SECTION - PAGE SUBTITLE UNDER PAGE TITLE
   ======================================================================== */

.calendar-header-enhanced .header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.calendar-header-enhanced .page-title {
  margin-bottom: 0;
}

.calendar-header-enhanced .page-subtitle {
  margin-top: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .calendar-header-enhanced .header-left {
    width: 100%;
  }

  .calendar-header-enhanced .page-subtitle {
    font-size: 0.85rem;
  }
}
/* Add to dashboard-provider.css */

/* ========================================================================
   PROVIDED LISTINGS - REDESIGNED TO MATCH DASHBOARD SECTIONS
   ======================================================================== */

.provided-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
  width: 100%;
}

@media (min-width: 768px) {
  .provided-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

/* Header */
.provided-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .provided-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.provided-header .page-title {
  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;
}

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

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

/* Header Actions */
.header-actions {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
  flex-wrap: wrap;
}

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

.header-actions .btn-outline,
.header-actions .btn-primary {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.8);
  white-space: nowrap;
  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;
  line-height: 1.4;
}

.header-actions .btn-primary {
  background: var(--text-dark);
  color: white;
  border-color: var(--text-dark);
}

.header-actions .btn-primary[style*="background: #b78c5a;"],
.header-actions .btn-primary[style*="background: #3b82f6;"] {
  background: var(--text-dark) !important;
}

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

.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);
}

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

.stat-card-mini {
  background: white;
  border-radius: 20px;
  padding: 16px;
  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-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  background: var(--bg);
  color: var(--accent);
}

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

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

.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;
}

/* Filters Bar - Clean One Line Design */
.filters-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;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  white-space: nowrap;
}

.filters-bar::-webkit-scrollbar {
  height: 4px;
}

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

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

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

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

.search-wrapper i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.8rem;
  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);
  min-height: 44px;
  transition: all 0.2s;
}

.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-select-enhanced {
  padding: 10px 35px 10px 18px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.9rem;
  background: var(--bg);
  min-height: 44px;
  color: var(--text-dark);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' 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;
  white-space: nowrap;
  flex-shrink: 0;
}

.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);
}

.clear-filters-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.9rem;
  font-weight: 500;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

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

/* Combined Listings Grid */
.combined-listings-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 20px;
}

/* Listings Section */
.listings-section {
  background: white;
  border-radius: 24px;
  padding: 25px;
  border: 1px solid var(--border-light);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.listings-section:hover {
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.08);
}

.section-title-serif {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

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

.section-title-serif i {
  color: var(--accent);
  font-size: 1.2rem;
}

.section-badge {
  background: var(--accent);
  color: white;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.8rem;
  margin-left: 10px;
  font-weight: 500;
}

/* Services/Products Grid */
.services-grid,
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

@media (min-width: 640px) {
  .services-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .services-grid,
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1280px) {
  .services-grid,
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

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

.empty-section .btn-primary i,
.empty-section .btn-outline i {
  font-size: inherit;
  color: inherit;
  opacity: 1;
  margin-bottom: 0;
}

.empty-section p {
  color: var(--text-soft);
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.empty-section .btn-primary {
  padding: 10px 20px;
  font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .provided-dashboard {
    padding: calc(var(--spacer) * 1.5);
  }

  .quick-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stat-card-mini {
    padding: 12px;
  }

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

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

  .filters-bar {
    padding: 10px 15px;
    gap: 10px;
  }

  .search-wrapper {
    min-width: 150px;
  }

  .filter-select-enhanced {
    min-width: 120px;
    font-size: 0.8rem;
    padding: 8px 30px 8px 12px;
  }

  .listings-section {
    padding: 20px;
  }

  .section-title-serif {
    font-size: 1.1rem;
  }

  .section-title-serif::after {
    width: 30px;
  }
}

@media (max-width: 480px) {
  .quick-stats-grid {
    grid-template-columns: 1fr;
  }

  .filters-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .services-grid,
  .products-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .filters-bar {
    padding: 8px 12px;
  }

  .search-wrapper {
    min-width: 120px;
  }

  .filter-select-enhanced {
    min-width: 100px;
    font-size: 0.7rem;
  }

  .clear-filters-btn {
    padding: 8px 12px;
    font-size: 0.7rem;
  }
}
/* Add to dashboard-provider.css - Mobile Optimizations for Listings */

/* ========================================================================
   MOBILE OPTIMIZATIONS FOR LISTINGS SECTIONS
   ======================================================================== */

/* Mobile (up to 480px) */
@media (max-width: 480px) {
  .provided-dashboard {
    padding: calc(var(--spacer) * 1.2);
  }

  /* Make the entire grid more compact */
  .combined-listings-grid {
    gap: 15px;
    margin-top: 10px;
  }

  /* Smaller section containers */
  .listings-section {
    padding: 15px;
    border-radius: 18px;
  }

  /* Smaller section title */
  .section-title-serif {
    font-size: 1rem;
  }

  .section-title-serif i {
    font-size: 0.9rem;
  }

  .section-title-serif::after {
    width: 25px;
    bottom: -4px;
  }

  .section-badge {
    padding: 2px 8px;
    font-size: 0.65rem;
    margin-left: 6px;
  }

  /* Reduce spacing between header and grid */
  .listings-section .btn-outline.btn-sm {
    padding: 5px 10px;
    font-size: 0.7rem;
    min-height: 32px;
  }

  .services-grid,
  .products-grid {
    gap: 12px;
    margin-top: 12px;
    grid-template-columns: 1fr; /* Force single column */
  }

  /* Smaller stat cards */
  .quick-stats-grid {
    gap: 8px;
    margin-bottom: 20px;
  }

  .stat-card-mini {
    padding: 10px;
    gap: 8px;
    min-height: 60px;
  }

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

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

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

/* Small Mobile (361px - 480px) */
@media (min-width: 361px) and (max-width: 480px) {
  .listings-section {
    padding: 12px;
  }

  .services-grid,
  .products-grid {
    gap: 10px;
  }
}

/* Very Small Mobile (up to 360px) - EXTRA COMPACT */
@media (max-width: 360px) {
  .provided-dashboard {
    padding: calc(var(--spacer));
  }

  .combined-listings-grid {
    gap: 12px;
  }

  .listings-section {
    padding: 10px;
    border-radius: 16px;
  }

  .section-title-serif {
    font-size: 0.9rem;
  }

  .section-title-serif i {
    font-size: 0.8rem;
  }

  .section-badge {
    padding: 2px 6px;
    font-size: 0.6rem;
    margin-left: 4px;
  }

  .listings-section .btn-outline.btn-sm {
    padding: 4px 8px;
    font-size: 0.65rem;
    min-height: 28px;
  }

  .services-grid,
  .products-grid {
    gap: 8px;
    margin-top: 10px;
  }

  .quick-stats-grid {
    gap: 6px;
    margin-bottom: 15px;
  }

  .stat-card-mini {
    padding: 8px;
    gap: 6px;
    min-height: 50px;
  }

  .stat-icon {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
    border-radius: 8px;
  }

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

  .stat-label {
    font-size: 0.55rem;
    letter-spacing: 0.2px;
  }
}

/* Landscape mode on mobile */
@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .services-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .listings-section {
    padding: 12px;
  }

  .section-title-serif {
    font-size: 0.95rem;
  }
}
/* ========================================================================
   LISTING CARDS - MOBILE OPTIMIZATION
   ======================================================================== */

@media (max-width: 480px) {
  .listing-card {
    border-radius: 16px;
  }

  .listing-media {
    height: 140px; /* Smaller image height */
  }

  .listing-content {
    padding: 12px;
  }

  .listing-title {
    font-size: 0.9rem;
    margin-bottom: 4px;
  }

  .listing-description {
    font-size: 0.7rem;
    margin-bottom: 10px;
    -webkit-line-clamp: 1; /* Only show 1 line on mobile */
  }

  .listing-price {
    font-size: 0.9rem;
    margin-bottom: 10px;
  }

  .listing-meta {
    gap: 8px;
    font-size: 0.65rem;
    margin-bottom: 10px;
  }

  .listing-meta i {
    font-size: 0.6rem;
  }

  .listing-stats {
    gap: 8px;
    font-size: 0.65rem;
    padding: 8px 0;
    margin-bottom: 10px;
  }

  .listing-stats i {
    font-size: 0.6rem;
  }

  /* Make action buttons more compact */
  .listing-actions {
    gap: 4px;
    padding-top: 8px;
  }

  .listing-actions .btn-outline.btn-sm {
    padding: 5px 0;
    font-size: 0.6rem;
    min-height: 28px;
    border-radius: 20px;
  }

  .listing-actions .btn-outline.btn-sm i {
    font-size: 0.55rem;
    margin-right: 2px;
  }
}

@media (max-width: 360px) {
  .listing-media {
    height: 120px;
  }

  .listing-content {
    padding: 8px;
  }

  .listing-title {
    font-size: 0.8rem;
  }

  .listing-description {
    font-size: 0.65rem;
    margin-bottom: 6px;
  }

  .listing-price {
    font-size: 0.8rem;
    margin-bottom: 6px;
  }

  .listing-meta,
  .listing-stats {
    font-size: 0.6rem;
  }

  .listing-actions {
    gap: 2px;
  }

  .listing-actions .btn-outline.btn-sm {
    padding: 4px 0;
    font-size: 0.55rem;
    min-height: 24px;
  }

  .listing-actions .btn-outline.btn-sm i {
    font-size: 0.5rem;
    margin-right: 1px;
  }
}
/* ========================================================================
   SERVICES & PRODUCTS SECTION HEADERS - FULLY RESPONSIVE
   ======================================================================== */

/* Base styles */
.listings-section .section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

/* Section title with icon and badge */
.section-title-serif {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  line-height: 1.3;
}

.section-title-serif i {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.section-badge {
  background: #b78c5a;
  color: white;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Add button */
.listings-section .btn-outline.btn-sm {
  padding: 8px 16px;
  border-radius: 40px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: white;
  border: 1px solid #b78c5a;
  color: #b78c5a;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 40px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.listings-section .btn-outline.btn-sm:hover {
  background: #b78c5a;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(183, 140, 90, 0.2);
}

.listings-section .btn-outline.btn-sm:active {
  transform: translateY(0);
}

.listings-section .btn-outline.btn-sm i {
  font-size: 0.7rem;
  transition: transform 0.2s;
}

.listings-section .btn-outline.btn-sm:hover i {
  transform: scale(1.1);
}

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

/* Tablet Landscape (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .section-title-serif {
    font-size: 1.2rem;
  }

  .section-title-serif i {
    font-size: 1.1rem;
  }

  .section-badge {
    padding: 3px 10px;
    font-size: 0.75rem;
    margin-left: 8px;
  }

  .listings-section .btn-outline.btn-sm {
    padding: 7px 14px;
    font-size: 0.75rem;
    min-height: 38px;
  }
}

/* Tablet Portrait (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .listings-section .section-header-row {
    margin-bottom: 15px;
    gap: 12px;
  }

  .section-title-serif {
    font-size: 1.1rem;
    gap: 8px;
  }

  .section-title-serif i {
    font-size: 1rem;
  }

  .section-badge {
    padding: 3px 8px;
    font-size: 0.7rem;
    margin-left: 6px;
  }

  .listings-section .btn-outline.btn-sm {
    padding: 6px 12px;
    font-size: 0.7rem;
    min-height: 36px;
    gap: 4px;
  }

  .listings-section .btn-outline.btn-sm i {
    font-size: 0.65rem;
  }
}

/* Mobile (320px - 480px) */
@media (max-width: 480px) {
  .listings-section .section-header-row {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
    gap: 12px;
    width: 100%;
  }

  .section-title-serif {
    font-size: 1rem;
    gap: 8px;
    width: 100%;
    justify-content: space-between;
  }

  .section-title-serif i {
    font-size: 0.95rem;
  }

  .section-badge {
    padding: 2px 8px;
    font-size: 0.65rem;
    margin-left: auto; /* Push badge to the right */
    min-width: 30px;
    text-align: center;
  }

  .listings-section .btn-outline.btn-sm {
    width: 100%;
    padding: 10px 16px;
    font-size: 0.8rem;
    min-height: 44px; /* Better touch target */
    justify-content: center;
    background: #b78c5a;
    color: white;
    border: none;
  }

  .listings-section .btn-outline.btn-sm i {
    font-size: 0.8rem;
    color: white;
  }

  .listings-section .btn-outline.btn-sm:hover {
    background: #9a6e3c;
    transform: translateY(-2px);
  }
}

/* Small Mobile (320px - 360px) */
@media (max-width: 360px) {
  .section-title-serif {
    font-size: 0.9rem;
    gap: 6px;
  }

  .section-title-serif i {
    font-size: 0.85rem;
  }

  .section-badge {
    padding: 2px 6px;
    font-size: 0.6rem;
    min-width: 28px;
  }

  .listings-section .btn-outline.btn-sm {
    padding: 8px 12px;
    font-size: 0.75rem;
    min-height: 40px;
  }

  .listings-section .btn-outline.btn-sm i {
    font-size: 0.75rem;
  }
}

/* Extra Small Mobile (below 320px) */
@media (max-width: 319px) {
  .section-title-serif {
    font-size: 0.8rem;
    flex-wrap: wrap;
    gap: 4px;
  }

  .section-title-serif i {
    font-size: 0.75rem;
  }

  .section-badge {
    padding: 2px 5px;
    font-size: 0.55rem;
    min-width: 25px;
    margin-left: 4px;
  }

  .listings-section .btn-outline.btn-sm {
    padding: 6px 10px;
    font-size: 0.7rem;
    min-height: 36px;
  }
}

/* Landscape mode on mobile */
@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .listings-section .section-header-row {
    flex-direction: row;
    align-items: center;
    margin-bottom: 12px;
  }

  .section-title-serif {
    font-size: 1rem;
  }

  .listings-section .btn-outline.btn-sm {
    width: auto;
    padding: 6px 12px;
    min-height: 36px;
  }
}
/* ========================================================================
   LISTING ACTIONS - MOBILE OPTIMIZED (SMALLER & COMPACT)
   ======================================================================== */

/* Base styles for listing actions */
.listing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
  margin-top: auto;
}

.listing-actions .btn-outline.btn-sm {
  flex: 1 1 calc(50% - 4px);
  padding: 8px 4px;
  font-size: 0.75rem;
  min-height: 36px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1px solid var(--border-light);
  background: white;
  color: var(--text-dark);
  cursor: pointer;
}

.listing-actions .btn-outline.btn-sm i {
  font-size: 0.7rem;
}

.listing-actions .btn-outline.btn-sm.danger {
  color: #ef4444;
  border-color: #ef4444;
}

.listing-actions .btn-outline.btn-sm.danger:hover {
  background: #ef4444;
  color: white;
}

/* Tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .listing-actions {
    gap: 6px;
    padding-top: 14px;
  }

  .listing-actions .btn-outline.btn-sm {
    padding: 6px 4px;
    font-size: 0.7rem;
    min-height: 34px;
    gap: 3px;
  }

  .listing-actions .btn-outline.btn-sm i {
    font-size: 0.65rem;
  }
}

/* Mobile (361px - 480px) - SMALLER */
@media (min-width: 361px) and (max-width: 480px) {
  .listing-actions {
    gap: 5px;
    padding-top: 12px;
  }

  .listing-actions .btn-outline.btn-sm {
    flex: 1 1 calc(50% - 3px);
    padding: 5px 2px;
    font-size: 0.65rem;
    min-height: 32px;
    border-radius: 20px;
    gap: 2px;
  }

  .listing-actions .btn-outline.btn-sm i {
    font-size: 0.6rem;
    margin-right: 1px;
  }

  /* For buttons with only icons (like delete) */
  .listing-actions .btn-outline.btn-sm:has(i:only-child) {
    flex: 0 0 32px;
    padding: 0;
  }
}

/* Very Small Mobile (up to 360px) - EXTRA SMALL */
@media (max-width: 360px) {
  .listing-actions {
    gap: 4px;
    padding-top: 10px;
  }

  .listing-actions .btn-outline.btn-sm {
    flex: 1 1 calc(50% - 2px);
    padding: 4px 2px;
    font-size: 0.6rem;
    min-height: 28px;
    border-radius: 16px;
    gap: 2px;
    border-width: 1px;
  }

  .listing-actions .btn-outline.btn-sm i {
    font-size: 0.55rem;
  }

  /* For buttons with only icons (like delete) */
  .listing-actions .btn-outline.btn-sm:has(i:only-child) {
    flex: 0 0 28px;
    padding: 0;
  }
}

/* Alternative: 3-column layout for very small screens with many buttons */
@media (max-width: 400px) {
  .listing-actions .btn-outline.btn-sm {
    flex: 1 1 calc(33.333% - 3px);
    font-size: 0.55rem;
  }
}

/* For the delete button specifically - make it red outline but smaller */
.listing-actions .btn-outline.btn-sm.danger {
  border-color: #ef4444;
  color: #ef4444;
}

/* Hover effects (only on non-touch devices) */
@media (hover: hover) {
  .listing-actions .btn-outline.btn-sm:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .listing-actions .btn-outline.btn-sm.danger:hover {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
  }
}

/* Active state for touch devices */
.listing-actions .btn-outline.btn-sm:active {
  transform: scale(0.95);
}

/* Ensure the delete button stays red on hover */
.listing-actions .btn-outline.btn-sm.danger:hover {
  background: #ef4444 !important;
  color: white !important;
  border-color: #ef4444 !important;
}

/* ========================================================================
   LISTING ACTIONS - ALTERNATIVE COMPACT LAYOUT (if you want even smaller)
   ======================================================================== */

/* Ultra compact for very small screens - uncomment if needed */
@media (max-width: 320px) {
  .listing-actions {
    gap: 3px;
    padding-top: 8px;
  }

  .listing-actions .btn-outline.btn-sm {
    padding: 3px 1px;
    font-size: 0.55rem;
    min-height: 24px;
    border-radius: 12px;
  }

  .listing-actions .btn-outline.btn-sm i {
    font-size: 0.5rem;
  }

  .listing-actions .btn-outline.btn-sm:has(i:only-child) {
    flex: 0 0 24px;
  }
}
/* ========================================================================
   NEW STAT CARDS FOR PENDING SERVICES AND PRODUCTS
   ======================================================================== */

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

.stat-card-enhanced.pending-services .stat-icon-wrapper i {
  animation: pulse 2s infinite;
}

.stat-card-enhanced.pending-products .stat-icon-wrapper {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.stat-card-enhanced.pending-products .stat-icon-wrapper i {
  animation: pulse 2s infinite;
}

.stat-card-enhanced.pending-services.active,
.stat-card-enhanced.pending-products.active {
  border-color: currentColor;
  border-width: 2px;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-card-enhanced.pending-services.active .stat-icon-wrapper,
.stat-card-enhanced.pending-products.active .stat-icon-wrapper {
  transform: scale(1.05);
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .stat-card-enhanced.pending-services,
  .stat-card-enhanced.pending-products {
    order: -1; /* Show these first on mobile */
  }
}

@media (max-width: 480px) {
  .stat-card-enhanced.pending-services .stat-icon-wrapper,
  .stat-card-enhanced.pending-products .stat-icon-wrapper {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}
/* ========================================================================
   ORDER STATS GRID - TEXT VISIBILITY FIXES
   ======================================================================== */

/* Ensure all text is visible and wraps properly */
.orders-stats-grid .stat-card-premium {
  overflow: visible;
  min-height: 90px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.orders-stats-grid .stat-card-premium .stat-info {
  flex: 1;
  min-width: 0;
  overflow: visible;
}

.orders-stats-grid .stat-card-premium .stat-label,
.orders-stats-grid .stat-card-premium .stat-value {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  line-height: 1.4;
}

.orders-stats-grid .stat-card-premium .stat-label {
  font-size: 0.7rem;
  margin-bottom: 4px;
  display: block;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.orders-stats-grid .stat-card-premium .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
}

/* Section titles between service and product stats */
.stats-section-title {
  margin: 25px 0 10px 0;
}

.stats-section-title .section-title-enhanced {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-section-title .section-title-enhanced i {
  font-size: 1rem;
}

/* Main category stats - 3 cards in a row */
.orders-stats-grid.main-category-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}

/* Service stats grid */
.orders-stats-grid.service-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

/* Product stats grid */
.orders-stats-grid.product-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

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

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .orders-stats-grid.main-category-stats {
    gap: 12px;
  }

  .orders-stats-grid.service-stats-grid,
  .orders-stats-grid.product-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .orders-stats-grid .stat-card-premium .stat-value {
    font-size: 1.3rem;
  }
}

/* Mobile Landscape (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .orders-stats-grid.main-category-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .orders-stats-grid.service-stats-grid,
  .orders-stats-grid.product-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .orders-stats-grid .stat-card-premium {
    padding: 12px;
    min-height: 80px;
  }

  .orders-stats-grid .stat-card-premium .stat-value {
    font-size: 1.2rem;
  }

  .orders-stats-grid .stat-card-premium .stat-label {
    font-size: 0.65rem;
  }

  .stats-section-title .section-title-enhanced {
    font-size: 1.1rem;
  }
}

/* Mobile Portrait (up to 480px) */
@media (max-width: 480px) {
  .orders-stats-grid.main-category-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
  }

  .orders-stats-grid.service-stats-grid,
  .orders-stats-grid.product-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 15px;
  }

  .orders-stats-grid .stat-card-premium {
    padding: 10px;
    min-height: 75px;
    gap: 8px;
  }

  .orders-stats-grid .stat-card-premium .stat-icon-wrapper {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .orders-stats-grid .stat-card-premium .stat-value {
    font-size: 1rem;
  }

  .orders-stats-grid .stat-card-premium .stat-label {
    font-size: 0.6rem;
    line-height: 1.3;
    margin-bottom: 2px;
  }

  .stats-section-title {
    margin: 15px 0 8px 0;
  }

  .stats-section-title .section-title-enhanced {
    font-size: 1rem;
  }

  .stats-section-title .section-title-enhanced i {
    font-size: 0.9rem;
  }
}

/* Very Small Mobile (up to 360px) */
@media (max-width: 360px) {
  .orders-stats-grid.main-category-stats {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .orders-stats-grid.service-stats-grid,
  .orders-stats-grid.product-stats-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .orders-stats-grid .stat-card-premium {
    padding: 8px;
    min-height: 65px;
  }

  .orders-stats-grid .stat-card-premium .stat-icon-wrapper {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .orders-stats-grid .stat-card-premium .stat-value {
    font-size: 0.9rem;
  }

  .orders-stats-grid .stat-card-premium .stat-label {
    font-size: 0.55rem;
  }
}

/* Ensure icons are properly sized */
.orders-stats-grid .stat-card-premium .stat-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .orders-stats-grid .stat-card-premium .stat-icon-wrapper {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

@media (max-width: 360px) {
  .orders-stats-grid .stat-card-premium .stat-icon-wrapper {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
}
/* ========================================================================
   TWO-STEP CATEGORY SELECTION
   ======================================================================== */

.category-selection-two-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 5px;
}

@media (min-width: 768px) {
  .category-selection-two-step {
    flex-direction: row;
    gap: 15px;
  }

  .parent-category-group,
  .subcategory-group {
    flex: 1;
  }
}

.parent-category-group select,
.subcategory-group select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-light);
  border-radius: 12px;
  background: white;
  font-size: 0.95rem;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s ease;
  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;
}

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

.parent-category-group select:disabled,
.subcategory-group select:disabled {
  background-color: #f8fafc;
  color: var(--text-soft);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Subcategory options indentation */
.subcategory-group select option[data-level="1"] {
  padding-left: 20px;
  background-color: #f8fafc;
}

.subcategory-group select option[data-level="2"] {
  padding-left: 35px;
  background-color: #f1f5f9;
}

.subcategory-group select option[data-level="3"] {
  padding-left: 50px;
  background-color: #eef2f6;
}

/* Category badges */
.category-type-badge-small {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 0.65rem;
  font-weight: 600;
  margin-left: 8px;
  background: var(--bg);
  color: var(--text-soft);
}

.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);
}

/* Loading indicator for subcategories */
.subcategory-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  color: var(--text-soft);
  font-size: 0.85rem;
  background: #f8fafc;
  border-radius: 12px;
}

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

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

/* Field hint */
.field-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-soft);
  background: #f8fafc;
  padding: 6px 10px;
  border-radius: 30px;
  width: fit-content;
}

.field-hint i {
  color: var(--accent);
  font-size: 0.7rem;
}
/* In dashboard-provider.css - Add responsive styles for Stripe status */

/* ========================================================================
   STRIPE CONNECT STATUS - Responsive Design
   ======================================================================== */

/* Base styles for all screens */
.stripe-connect-prompt,
.stripe-disabled-prompt,
.stripe-onboarding-prompt,
.stripe-connected-status {
  transition: all 0.3s ease;
  width: 100%;
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .stripe-connect-prompt,
  .stripe-disabled-prompt,
  .stripe-onboarding-prompt,
  .stripe-connected-status {
    padding: 20px !important;
  }

  .stripe-connect-prompt > div:first-child,
  .stripe-disabled-prompt > div:first-child,
  .stripe-onboarding-prompt > div:first-child,
  .stripe-connected-status > div:first-child {
    gap: 15px !important;
  }

  .stripe-connect-prompt .btn-primary,
  .stripe-disabled-prompt .btn-primary,
  .stripe-onboarding-prompt .btn-primary,
  .stripe-connected-status .btn-primary {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
  }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  /* Stack content vertically on mobile */
  .stripe-connect-prompt,
  .stripe-disabled-prompt,
  .stripe-onboarding-prompt,
  .stripe-connected-status {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 16px !important;
    gap: 16px !important;
  }

  /* Center the icon section on mobile */
  .stripe-connect-prompt > div:first-child,
  .stripe-disabled-prompt > div:first-child,
  .stripe-onboarding-prompt > div:first-child,
  .stripe-connected-status > div:first-child {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Make icon slightly smaller on mobile */
  .stripe-connect-prompt > div:first-child > div:first-child,
  .stripe-disabled-prompt > div:first-child > div:first-child,
  .stripe-onboarding-prompt > div:first-child > div:first-child,
  .stripe-connected-status > div:first-child > div:first-child {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
  }

  .stripe-connect-prompt > div:first-child > div:first-child i,
  .stripe-disabled-prompt > div:first-child > div:first-child i,
  .stripe-onboarding-prompt > div:first-child > div:first-child i,
  .stripe-connected-status > div:first-child > div:first-child i {
    font-size: 1.5rem !important;
  }

  /* Text content takes full width */
  .stripe-connect-prompt > div:first-child > div:last-child,
  .stripe-disabled-prompt > div:first-child > div:last-child,
  .stripe-onboarding-prompt > div:first-child > div:last-child,
  .stripe-connected-status > div:first-child > div:last-child {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .stripe-connect-prompt h3,
  .stripe-disabled-prompt h3,
  .stripe-onboarding-prompt h3,
  .stripe-connected-status h3 {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .stripe-connect-prompt p,
  .stripe-disabled-prompt p,
  .stripe-onboarding-prompt p,
  .stripe-connected-status p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  /* Button takes full width on mobile */
  .stripe-connect-prompt .btn-primary,
  .stripe-disabled-prompt .btn-primary,
  .stripe-onboarding-prompt .btn-primary,
  .stripe-connected-status .btn-primary,
  .stripe-connect-prompt button,
  .stripe-disabled-prompt button,
  .stripe-onboarding-prompt button,
  .stripe-connected-status button {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
    font-size: 0.9rem !important;
    margin-top: 4px !important;
  }

  /* Specific adjustments for connected status */
  .stripe-connected-status .btn-outline.btn-sm {
    width: 100% !important;
    justify-content: center !important;
  }

  /* For connected status with inline button */
  .stripe-connected-status {
    flex-direction: column !important;
  }

  .stripe-connected-status > div:first-child {
    width: 100% !important;
  }

  .stripe-connected-status .btn-outline.btn-sm {
    margin-left: 0 !important;
    margin-top: 10px !important;
  }
}

/* Small mobile (up to 480px) */
@media (max-width: 480px) {
  .stripe-connect-prompt,
  .stripe-disabled-prompt,
  .stripe-onboarding-prompt,
  .stripe-connected-status {
    padding: 14px !important;
    gap: 12px !important;
  }

  .stripe-connect-prompt > div:first-child > div:first-child,
  .stripe-disabled-prompt > div:first-child > div:first-child,
  .stripe-onboarding-prompt > div:first-child > div:first-child,
  .stripe-connected-status > div:first-child > div:first-child {
    width: 40px !important;
    height: 40px !important;
  }

  .stripe-connect-prompt > div:first-child > div:first-child i,
  .stripe-disabled-prompt > div:first-child > div:first-child i,
  .stripe-onboarding-prompt > div:first-child > div:first-child i,
  .stripe-connected-status > div:first-child > div:first-child i {
    font-size: 1.2rem !important;
  }

  .stripe-connect-prompt h3,
  .stripe-disabled-prompt h3,
  .stripe-onboarding-prompt h3,
  .stripe-connected-status h3 {
    font-size: 0.9rem !important;
  }

  .stripe-connect-prompt p,
  .stripe-disabled-prompt p,
  .stripe-onboarding-prompt p,
  .stripe-connected-status p {
    font-size: 0.8rem !important;
  }
}

/* Very small mobile (up to 360px) */
@media (max-width: 360px) {
  .stripe-connect-prompt,
  .stripe-disabled-prompt,
  .stripe-onboarding-prompt,
  .stripe-connected-status {
    padding: 12px !important;
    gap: 10px !important;
  }

  .stripe-connect-prompt > div:first-child,
  .stripe-disabled-prompt > div:first-child,
  .stripe-onboarding-prompt > div:first-child,
  .stripe-connected-status > div:first-child {
    gap: 8px !important;
  }

  .stripe-connect-prompt > div:first-child > div:first-child,
  .stripe-disabled-prompt > div:first-child > div:first-child,
  .stripe-onboarding-prompt > div:first-child > div:first-child,
  .stripe-connected-status > div:first-child > div:first-child {
    width: 36px !important;
    height: 36px !important;
  }

  .stripe-connect-prompt h3,
  .stripe-disabled-prompt h3,
  .stripe-onboarding-prompt h3,
  .stripe-connected-status h3 {
    font-size: 0.85rem !important;
  }

  .stripe-connect-prompt p,
  .stripe-disabled-prompt p,
  .stripe-onboarding-prompt p,
  .stripe-connected-status p {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
  }
}

/* Landscape mode on mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .stripe-connect-prompt,
  .stripe-disabled-prompt,
  .stripe-onboarding-prompt,
  .stripe-connected-status {
    padding: 12px !important;
  }

  .stripe-connect-prompt > div:first-child,
  .stripe-disabled-prompt > div:first-child,
  .stripe-onboarding-prompt > div:first-child,
  .stripe-connected-status > div:first-child {
    gap: 12px !important;
  }

  .stripe-connect-prompt > div:first-child > div:first-child,
  .stripe-disabled-prompt > div:first-child > div:first-child,
  .stripe-onboarding-prompt > div:first-child > div:first-child,
  .stripe-connected-status > div:first-child > div:first-child {
    width: 40px !important;
    height: 40px !important;
  }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .stripe-connect-prompt,
  .stripe-disabled-prompt,
  .stripe-onboarding-prompt,
  .stripe-connected-status {
    border-width: 0.5px !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .stripe-connect-prompt .btn-primary,
  .stripe-disabled-prompt .btn-primary,
  .stripe-onboarding-prompt .btn-primary,
  .stripe-connected-status .btn-primary,
  .stripe-connect-prompt button,
  .stripe-disabled-prompt button,
  .stripe-onboarding-prompt button,
  .stripe-connected-status button {
    min-height: 48px !important;
  }
}
/* ========================================================================
   LISTINGS SECTION - PREMIUM REDESIGN FOR DESKTOP
   ======================================================================== */

/* Main container */
.listings-section {
  background: linear-gradient(135deg, #ffffff 0%, #faf9f7 100%);
  border-radius: 32px;
  padding: 32px;
  margin-bottom: 40px;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(183, 140, 90, 0.15);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.listings-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #b78c5a, #dab88f, #b78c5a);
  background-size: 200% 100%;
  animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.listings-section:hover {
  box-shadow: 0 30px 60px -15px rgba(183, 140, 90, 0.2);
  border-color: rgba(183, 140, 90, 0.3);
  transform: translateY(-2px);
}

/* Section header with premium styling */
.listings-section .section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(183, 140, 90, 0.2);
  position: relative;
}

.listings-section .section-header-row::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: #b78c5a;
  border-radius: 2px;
}

/* Premium section title */
.listings-section .section-title-serif {
  font-family: "Playfair Display", "Times New Roman", Georgia, serif;
  font-size: 1.8rem;
  font-weight: 500;
  color: #2e2a28;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.02em;
  position: relative;
}

.listings-section .section-title-serif i {
  font-size: 1.6rem;
  line-height: 1;
  color: #b78c5a;
  background: rgba(183, 140, 90, 0.1);
  padding: 12px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.15);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.listings-section:hover .section-title-serif i {
  transform: rotate(5deg) scale(1.05);
  background: rgba(183, 140, 90, 0.15);
  box-shadow: 0 6px 16px rgba(183, 140, 90, 0.25);
}

/* Section badge - elegant counter */
.listings-section .section-badge {
  background: #b78c5a;
  color: white;
  padding: 6px 16px;
  border-radius: 40px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-left: 12px;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 10px rgba(183, 140, 90, 0.3);
  position: relative;
  overflow: hidden;
}

.listings-section .section-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% {
    left: 100%;
  }
}

/* Add button - refined */
.listings-section .btn-outline.btn-sm {
  padding: 12px 28px;
  border-radius: 40px;
  font-size: 0.95rem;
  font-weight: 600;
  background: #b78c5a;
  border: 2px solid #b78c5a;
  color: white;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 8px;
  min-height: 48px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.1);
}

.listings-section .btn-outline.btn-sm:hover {
  background: white;
  color: #b78c5a;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -8px rgba(183, 140, 90, 0.4);
  border-color: #b78c5a;
}

.listings-section .btn-outline.btn-sm:active {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -4px rgba(183, 140, 90, 0.3);
}

.listings-section .btn-outline.btn-sm i {
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.listings-section .btn-outline.btn-sm:hover i {
  transform: translateX(4px);
}

/* Services grid - premium card layout */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 24px;
}

/* Premium service card */
.services-grid .listing-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(183, 140, 90, 0.1);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.services-grid .listing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 50px -20px rgba(183, 140, 90, 0.25);
  border-color: rgba(183, 140, 90, 0.3);
}

.services-grid .listing-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #b78c5a, #dab88f);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.services-grid .listing-card:hover::before {
  opacity: 1;
}

/* Card media */
.services-grid .listing-media {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #f8fafc;
}

.services-grid .listing-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.services-grid .listing-card:hover .listing-media img {
  transform: scale(1.08);
}

/* Service type badge */
.services-grid .listing-type {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(183, 140, 90, 0.95);
  color: white;
  padding: 6px 14px;
  border-radius: 40px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Status badge */
.services-grid .listing-status {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 14px;
  border-radius: 40px;
  font-size: 0.7rem;
  font-weight: 600;
  z-index: 2;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.services-grid .listing-status.published {
  background: rgba(46, 125, 50, 0.95);
  color: white;
}

.services-grid .listing-status.unpublished {
  background: rgba(198, 40, 40, 0.95);
  color: white;
}

/* Card content */
.services-grid .listing-content {
  padding: 24px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, white 0%, #fcfcfc 100%);
}

/* Title */
.services-grid .listing-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2e2a28;
  margin: 0 0 8px 0;
  line-height: 1.4;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.services-grid .listing-card:hover .listing-title {
  color: #b78c5a;
}

/* Description */
.services-grid .listing-description {
  color: #5e5a58;
  font-size: 0.9rem;
  margin-bottom: 16px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* Price - prominent */
.services-grid .listing-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: #b78c5a;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.services-grid .listing-price::before {
  content: "Starting from";
  font-size: 0.75rem;
  font-weight: 400;
  color: #5e5a58;
  margin-right: 4px;
}

/* Meta information row */
.services-grid .listing-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 0.8rem;
  color: #5e5a58;
  background: #f8fafc;
  padding: 10px 14px;
  border-radius: 40px;
  border: 1px solid rgba(183, 140, 90, 0.1);
}

.services-grid .listing-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.services-grid .listing-meta i {
  color: #b78c5a;
  font-size: 0.75rem;
}

/* Stats row */
.services-grid .listing-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
  font-size: 0.75rem;
  color: #5e5a58;
  padding: 12px 0;
  border-top: 1px dashed rgba(183, 140, 90, 0.2);
  border-bottom: 1px dashed rgba(183, 140, 90, 0.2);
}

.services-grid .listing-stats span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.services-grid .listing-stats i {
  color: #b78c5a;
  font-size: 0.7rem;
}

/* Action buttons - modern design */
.services-grid .listing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.services-grid .listing-actions .btn-outline.btn-sm {
  flex: 1 1 calc(50% - 4px);
  padding: 10px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 40px;
  background: white;
  border: 1px solid rgba(183, 140, 90, 0.3);
  color: #2e2a28;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
}

.services-grid .listing-actions .btn-outline.btn-sm i {
  font-size: 0.75rem;
  color: #b78c5a;
  transition: all 0.3s ease;
}

.services-grid .listing-actions .btn-outline.btn-sm:hover {
  background: #b78c5a;
  border-color: #b78c5a;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -4px rgba(183, 140, 90, 0.3);
}

.services-grid .listing-actions .btn-outline.btn-sm:hover i {
  color: white;
}

/* Danger button (delete) */
.services-grid .listing-actions .btn-outline.btn-sm.danger {
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.services-grid .listing-actions .btn-outline.btn-sm.danger i {
  color: #ef4444;
}

.services-grid .listing-actions .btn-outline.btn-sm.danger:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
}

.services-grid .listing-actions .btn-outline.btn-sm.danger:hover i {
  color: white;
}

/* Empty state */
.services-grid .empty-section {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 24px;
  border: 2px dashed rgba(183, 140, 90, 0.2);
  grid-column: 1 / -1;
}

.services-grid .empty-section i {
  font-size: 3.5rem;
  color: #b78c5a;
  opacity: 0.3;
  margin-bottom: 16px;
}

.services-grid .empty-section h3 {
  font-size: 1.4rem;
  color: #2e2a28;
  margin-bottom: 8px;
  font-family: "Playfair Display", serif;
}

.services-grid .empty-section p {
  color: #5e5a58;
  margin-bottom: 24px;
  font-size: 1rem;
}

.services-grid .empty-section .btn-primary {
  padding: 14px 32px;
  font-size: 1rem;
  background: #b78c5a;
  color: white;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.services-grid .empty-section .btn-primary:hover {
  background: #9a6e3c;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(183, 140, 90, 0.4);
}
/* ========================================================================
   QUICK STATS - PREMIUM REDESIGN
   ======================================================================== */

.quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 30px 0 40px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Main stat cards */
.quick-stats .stat-item {
  background: white;
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(183, 140, 90, 0.1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.quick-stats .stat-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #b78c5a, #dab88f);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.quick-stats .stat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(183, 140, 90, 0.25);
  border-color: rgba(183, 140, 90, 0.3);
}

.quick-stats .stat-item:hover::before {
  opacity: 1;
}

/* Stat label */
.quick-stats .stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5e5a58;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.quick-stats .stat-label i {
  color: #b78c5a;
  font-size: 0.7rem;
}

/* Stat value - main number */
.quick-stats .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #2e2a28;
  line-height: 1.2;
  margin-bottom: 4px;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  letter-spacing: -0.02em;
  word-break: break-word;
}

/* Small helper text */
.quick-stats small {
  font-size: 0.65rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

/* VAT stat - special styling */
.quick-stats .vat-stat {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0fa 100%);
  border: 1px solid rgba(37, 99, 235, 0.15);
  position: relative;
}

.quick-stats .vat-stat::before {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.quick-stats .vat-stat .stat-label {
  color: #2563eb;
}

.quick-stats .vat-stat .stat-label i {
  color: #2563eb;
}

.quick-stats .vat-stat .stat-value {
  color: #2563eb;
}

/* Currency note - full width banner */
.quick-stats .currency-note {
  grid-column: 1 / -1;
  background: #f8fafc;
  border: 1px dashed rgba(183, 140, 90, 0.3);
  border-radius: 60px;
  padding: 14px 24px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.quick-stats .currency-note span {
  color: #5e5a58;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.quick-stats .currency-note i {
  color: #b78c5a;
  font-size: 0.9rem;
}

/* Responsive adjustments */

/* Large desktop */
@media (min-width: 1400px) {
  .quick-stats {
    gap: 24px;
  }

  .quick-stats .stat-item {
    padding: 28px 24px;
  }

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

/* Desktop */
@media (min-width: 1200px) and (max-width: 1399px) {
  .quick-stats {
    gap: 20px;
  }
}

/* Small desktop / Large tablet */
@media (min-width: 992px) and (max-width: 1199px) {
  .quick-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .quick-stats .stat-item {
    padding: 22px 18px;
  }

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

  .quick-stats .currency-note {
    grid-column: 1 / -1;
  }
}

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

  .quick-stats .stat-item {
    padding: 20px 16px;
    border-radius: 20px;
  }

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

  .quick-stats .currency-note {
    grid-column: 1 / -1;
    padding: 12px 20px;
  }
}

/* Mobile landscape */
@media (min-width: 576px) and (max-width: 767px) {
  .quick-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .quick-stats .stat-item {
    padding: 16px 14px;
    border-radius: 18px;
  }

  .quick-stats .stat-label {
    font-size: 0.7rem;
    margin-bottom: 4px;
  }

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

  .quick-stats .currency-note {
    grid-column: 1 / -1;
    padding: 12px 16px;
    border-radius: 40px;
  }

  .quick-stats .currency-note span {
    font-size: 0.75rem;
  }
}

/* Mobile portrait */
@media (max-width: 575px) {
  .quick-stats {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 20px 0 30px;
  }

  .quick-stats .stat-item {
    padding: 18px 16px;
    border-radius: 20px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .quick-stats .stat-label {
    width: 100%;
    font-size: 0.7rem;
    margin-bottom: 4px;
  }

  .quick-stats .stat-value {
    font-size: 1.4rem;
    margin-right: 8px;
    display: inline-block;
  }

  .quick-stats small {
    display: inline-block;
    font-size: 0.6rem;
  }

  .quick-stats .vat-stat {
    flex-wrap: wrap;
  }

  .quick-stats .currency-note {
    grid-column: 1 / -1;
    padding: 12px 16px;
    border-radius: 30px;
    margin-top: 8px;
  }

  .quick-stats .currency-note span {
    font-size: 0.7rem;
    flex-direction: column;
    gap: 4px;
  }
}

/* Small mobile */
@media (max-width: 360px) {
  .quick-stats .stat-item {
    padding: 14px 12px;
  }

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

  .quick-stats .currency-note {
    padding: 10px 12px;
  }

  .quick-stats .currency-note span {
    font-size: 0.65rem;
  }
}

/* Animation for stat values */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quick-stats .stat-value {
  animation: countUp 0.5s ease forwards;
}
/* Toast notifications must layer above modals — uses the --z-toast token */
.toast-notification {
  z-index: var(--z-toast, 1100);
  position: fixed;
  top: 20px;
  right: 20px;
  background: #b78c5a;
  color: white;
  padding: 12px 20px;
  border-radius: 40px;
  font-size: 0.9rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideInRight 0.3s ease;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.toast-notification.show {
  opacity: 0.95;
}

.toast-notification.success {
  background: #2f6e4a;
}

.toast-notification.error {
  background: #991b1b;
}

.toast-notification.warning {
  background: #b45309;
}

.toast-notification.info {
  background: #b78c5a;
}

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

/* Modal layering — tokens keep modal (1000) < toast (1100) consistent. */
.modal-overlay,
.modal-content {
  z-index: var(--z-modal, 1000);
}
/* Tier Page Styles */
.tier-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.tier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 15px;
}

.current-tier-card {
  margin-bottom: 30px;
}

.tier-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 25px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #ece9e5;
}

.tier-icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tier-info {
  flex: 1;
  min-width: 200px;
}

.tier-info h2 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #64748b;
  margin-bottom: 8px;
}

.tier-name {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.tier-stats {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.tier-stats .stat {
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
}

.stat-label {
  font-size: 0.7rem;
  color: #64748b;
}

.progress-card {
  background: white;
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 30px;
  border: 1px solid #ece9e5;
}

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

.progress-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.progress-percent {
  font-size: 1.5rem;
  font-weight: 700;
  color: #b78c5a;
}

.progress-bar-container {
  height: 8px;
  background: #ece9e5;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.progress-requirements {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.requirement {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #ece9e5;
}

.requirement-value {
  font-weight: 600;
  color: #b78c5a;
}

.next-tier-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: #f8fafc;
  border-radius: 12px;
  color: #64748b;
}

.tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.tier-item {
  background: white;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #ece9e5;
  position: relative;
  transition: all 0.3s ease;
}

.tier-item.completed {
  background: #e3f2e9;
  border-color: #2f6e4a;
}

.tier-item.current {
  border: 2px solid #b78c5a;
  background: #fef3e2;
}

.tier-icon-small {
  font-size: 2rem;
  margin-bottom: 12px;
}

.tier-info-small h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
}

.tier-info-small p {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.tier-requirements {
  margin-top: 12px;
  font-size: 0.75rem;
  color: #b78c5a;
}

.checkmark {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #2f6e4a;
  font-size: 1.2rem;
}

.current-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #b78c5a;
  color: white;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
}

.stats-card {
  background: white;
  border-radius: 20px;
  padding: 25px;
  border: 1px solid #ece9e5;
}

.stats-card h2 {
  margin-bottom: 20px;
  font-size: 1.2rem;
}

.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 12px;
}

.achievement-item i {
  font-size: 1.5rem;
}

.achievement-info {
  flex: 1;
}

.achievement-name {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.achievement-date {
  font-size: 0.7rem;
  color: #64748b;
}

.no-achievements {
  text-align: center;
  color: #64748b;
  padding: 20px;
}

@media (max-width: 768px) {
  .tier-card {
    flex-direction: column;
    text-align: center;
  }

  .tier-stats {
    justify-content: center;
  }

  .tiers-grid {
    grid-template-columns: 1fr;
  }
}
/* ========================================================================
   SERVICE REQUESTS DASHBOARD - PREMIUM REDESIGN
   ======================================================================== */

/* Main Container */
.service-requests-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
  width: 100%;
  animation: fadeInUp 0.4s ease;
}

@media (min-width: 768px) {
  .service-requests-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

/* Header Section */
.requests-header-premium {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
  position: relative;
}

@media (min-width: 640px) {
  .requests-header-premium {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: calc(var(--spacer) * 3);
  }
}

.header-content-premium {
  flex: 1;
}

.page-title-premium {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 5vw, 2rem);
  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;
}

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

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

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

/* Stats Section */
.requests-stats-premium {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: calc(var(--spacer) * 4);
}

.stat-card-premium-sm {
  background: white;
  border-radius: 20px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  cursor: pointer;
  flex: 1;
  min-width: 140px;
}

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

.stat-icon-premium-sm {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    rgba(183, 140, 90, 0.1) 100%
  );
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.stat-content-premium-sm {
  flex: 1;
}

.stat-value-premium-sm {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
}

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

@media (max-width: 768px) {
  .requests-stats-premium {
    gap: 8px;
  }

  .stat-card-premium-sm {
    padding: 12px 14px;
    min-width: 110px;
  }

  .stat-icon-premium-sm {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

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

/* Filter Bar */
.requests-filters-premium {
  background: white;
  border-radius: 60px;
  padding: 8px 16px;
  margin-bottom: calc(var(--spacer) * 4);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

@media (max-width: 768px) {
  .requests-filters-premium {
    border-radius: 24px;
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
  }
}

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

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

.search-wrapper-premium input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  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-premium input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 140, 90, 0.1);
  background: white;
}

.filter-select-premium {
  padding: 10px 32px 10px 16px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.85rem;
  background: var(--bg);
  min-height: 44px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' 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 14px center;
  background-size: 14px;
  min-width: 130px;
}

.clear-filters-premium {
  padding: 10px 20px;
  border-radius: 40px;
  font-size: 0.85rem;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

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

/* Requests Grid - Premium Cards */
.requests-grid-premium {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 24px;
  margin-bottom: 30px;
}

@media (max-width: 1024px) {
  .requests-grid-premium {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
  }
}

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

/* Premium Clickable Card */
.request-card-premium {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 25px -12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.request-card-premium::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--accent-light),
    var(--accent),
    var(--accent-light)
  );
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
  z-index: 2;
}

.request-card-premium:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -12px rgba(183, 140, 90, 0.2);
  border-color: var(--accent-light);
}

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

/* Card Header */
.request-card-header-premium {
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .request-card-header-premium {
    padding: 14px 16px;
  }
}

.status-badge-premium {
  padding: 6px 14px;
  border-radius: 40px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

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

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

.request-date-premium {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.7rem;
  background: white;
  padding: 4px 12px;
  border-radius: 30px;
  border: 1px solid var(--border-light);
}

.request-date-premium i {
  font-size: 0.65rem;
  color: var(--accent);
}

/* Card Body */
.request-card-body-premium {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 480px) {
  .request-card-body-premium {
    padding: 16px;
    gap: 12px;
  }
}

/* Customer Info Section */
.customer-info-premium {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.customer-avatar-premium {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  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;
  flex-shrink: 0;
  box-shadow: 0 6px 12px -6px rgba(183, 140, 90, 0.3);
  transition: all 0.3s ease;
}

.request-card-premium:hover .customer-avatar-premium {
  transform: scale(1.02);
  box-shadow: 0 8px 16px -6px rgba(183, 140, 90, 0.4);
}

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

.customer-name-premium {
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .customer-name-premium {
    font-size: 1.05rem;
  }
}

.service-name-premium {
  color: var(--accent);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Contact Info Compact */
.contact-info-premium {
  background: var(--bg);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border-light);
}

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

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

.contact-row-premium span {
  word-break: break-all;
  flex: 1;
}

/* Schedule Preview */
.schedule-preview-premium {
  background: var(--bg);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid var(--border-light);
}

.schedule-item-premium {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-dark);
}

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

/* Note Preview */
.note-preview-premium {
  background: #fef3e2;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.75rem;
  color: #b45309;
  border-left: 3px solid #b45309;
}

.note-preview-premium i {
  font-size: 0.7rem;
  margin-top: 2px;
}

.note-preview-premium span {
  flex: 1;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Custom Offer Badge */
.custom-offer-badge-premium {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(183, 140, 90, 0.3);
}

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

.custom-price-premium {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 4px;
}

/* Card Footer */
.request-card-footer-premium {
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}

@media (max-width: 480px) {
  .request-card-footer-premium {
    padding: 14px 16px;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
}

.order-ref-premium {
  font-family: monospace;
  font-size: 0.7rem;
  color: var(--text-soft);
  background: white;
  padding: 4px 10px;
  border-radius: 30px;
  border: 1px solid var(--border-light);
}

.action-buttons-premium {
  display: flex;
  gap: 10px;
  align-items: center;
}

@media (max-width: 480px) {
  .action-buttons-premium {
    justify-content: space-between;
  }
}

.btn-primary-premium {
  padding: 8px 20px;
  background: #2f6e4a;
  color: white;
  border: none;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary-premium:hover {
  background: #1e4a3c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(47, 110, 74, 0.3);
}

.btn-outline-premium {
  padding: 8px 20px;
  background: white;
  border: 2px solid #ef4444;
  color: #ef4444;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-outline-premium:hover {
  background: #ef4444;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-icon-premium {
  width: 36px;
  height: 36px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-soft);
}

.btn-icon-premium:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: scale(1.05);
}

/* Empty State */
.empty-state-premium {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 32px;
  border: 1px solid var(--border-light);
  animation: fadeInUp 0.4s ease;
}

.empty-icon-premium {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, var(--bg), white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: var(--accent);
  font-size: 2.5rem;
  border: 1px solid var(--border-light);
  box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.05);
}

.empty-state-premium h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.empty-state-premium p {
  color: var(--text-soft);
  margin-bottom: 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.9rem;
}

.btn-primary-lg {
  padding: 12px 32px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary-lg:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(183, 140, 90, 0.3);
}

/* Click Hint */
.click-hint-premium {
  text-align: center;
  margin-top: 24px;
  padding: 12px 20px;
  background: var(--bg);
  border-radius: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-soft);
  font-size: 0.8rem;
  border: 1px dashed var(--border-light);
}

.click-hint-premium i {
  color: var(--accent);
  font-size: 0.85rem;
  animation: handWave 2s ease-in-out infinite;
}

@keyframes handWave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(12deg);
  }
  75% {
    transform: rotate(-8deg);
  }
}

/* Loading Skeleton */
.skeleton-card-premium {
  background: white;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid var(--border-light);
  animation: shimmer 1.5s infinite;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  min-height: 280px;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading Spinner */
.loading-spinner-premium {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Add to dashboard-provider.css */

.stat-card-premium-sm.active {
  border: 2px solid var(--accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(183, 140, 90, 0.15);
  background: linear-gradient(135deg, white, #fefaf5);
}

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

.stat-card-premium-sm.active .stat-value-premium-sm {
  color: var(--accent);
}
/* ========================================================================
   PRODUCT ORDERS DASHBOARD - PREMIUM REDESIGN
   (SCOPED WITH .product-orders-dashboard)
   ======================================================================== */

/* Main Container */
.product-orders-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
  width: 100%;
  animation: fadeInUp 0.4s ease;
}

@media (min-width: 768px) {
  .product-orders-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

/* Header Section */
.product-orders-dashboard .orders-header-premium {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 4);
  position: relative;
}

@media (min-width: 640px) {
  .product-orders-dashboard .orders-header-premium {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: calc(var(--spacer) * 3);
  }
}

.product-orders-dashboard .header-content-premium {
  flex: 1;
}

.product-orders-dashboard .page-title-premium {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 8px 0;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text-dark) 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.product-orders-dashboard .page-title-premium::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 50px;
  height: 2px;
  background: #3b82f6;
  border-radius: 2px;
}

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

@media (min-width: 768px) {
  .product-orders-dashboard .page-subtitle-premium {
    font-size: 0.95rem;
  }
}

/* Stats Section */
.product-orders-dashboard .orders-stats-premium {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: calc(var(--spacer) * 4);
}

.product-orders-dashboard .stat-card-premium-sm {
  background: white;
  border-radius: 20px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  cursor: pointer;
  flex: 1;
  min-width: 140px;
}

.product-orders-dashboard .stat-card-premium-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.product-orders-dashboard .stat-card-premium-sm.active {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
  background: linear-gradient(135deg, white, rgba(59, 130, 246, 0.02));
}

.product-orders-dashboard .stat-card-premium-sm.active .stat-icon-premium-sm {
  transform: scale(1.05);
}

.product-orders-dashboard .stat-card-premium-sm.active .stat-value-premium-sm {
  color: #3b82f6;
}

.product-orders-dashboard .stat-icon-premium-sm {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.1) 0%,
    rgba(59, 130, 246, 0.05) 100%
  );
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.product-orders-dashboard .stat-content-premium-sm {
  flex: 1;
}

.product-orders-dashboard .stat-value-premium-sm {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
}

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

@media (max-width: 768px) {
  .product-orders-dashboard .orders-stats-premium {
    gap: 8px;
  }

  .product-orders-dashboard .stat-card-premium-sm {
    padding: 12px 14px;
    min-width: 110px;
  }

  .product-orders-dashboard .stat-icon-premium-sm {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .product-orders-dashboard .stat-value-premium-sm {
    font-size: 1.2rem;
  }
}

/* Filter Bar */
.product-orders-dashboard .orders-filters-premium {
  background: white;
  border-radius: 60px;
  padding: 8px 16px;
  margin-bottom: calc(var(--spacer) * 4);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

@media (max-width: 768px) {
  .product-orders-dashboard .orders-filters-premium {
    border-radius: 24px;
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
  }
}

.product-orders-dashboard .search-wrapper-premium {
  flex: 1;
  position: relative;
  min-width: 200px;
}

.product-orders-dashboard .search-wrapper-premium i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.85rem;
  pointer-events: none;
}

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

.product-orders-dashboard .search-wrapper-premium input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: white;
}

.product-orders-dashboard .filter-select-premium {
  padding: 10px 32px 10px 16px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.85rem;
  background: var(--bg);
  min-height: 44px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' 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 14px center;
  background-size: 14px;
  min-width: 130px;
}

.product-orders-dashboard .filter-select-premium:focus {
  outline: none;
  border-color: #3b82f6;
}

.product-orders-dashboard .clear-filters-premium {
  padding: 10px 20px;
  border-radius: 40px;
  font-size: 0.85rem;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

.product-orders-dashboard .clear-filters-premium:hover {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

/* Orders Grid - Premium Cards */
.product-orders-dashboard .orders-grid-premium {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 24px;
  margin-bottom: 30px;
}

@media (max-width: 1024px) {
  .product-orders-dashboard .orders-grid-premium {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .product-orders-dashboard .orders-grid-premium {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Premium Clickable Order Card */
.product-orders-dashboard .order-card-premium {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 25px -12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-orders-dashboard .order-card-premium::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6);
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
  z-index: 2;
}

.product-orders-dashboard .order-card-premium:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -12px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.3);
}

.product-orders-dashboard .order-card-premium:hover::before {
  transform: scaleX(1);
}

/* Card Header */
.product-orders-dashboard .order-card-header-premium {
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .product-orders-dashboard .order-card-header-premium {
    padding: 14px 16px;
  }
}

.product-orders-dashboard .order-status-badge-premium {
  padding: 6px 14px;
  border-radius: 40px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.product-orders-dashboard .order-status-badge-premium.pending {
  background: #fef3e2;
  color: #b45309;
}

.product-orders-dashboard .order-status-badge-premium.accepted {
  background: #e3f2e9;
  color: #2f6e4a;
}

.product-orders-dashboard .order-status-badge-premium i {
  font-size: 0.7rem;
}

.product-orders-dashboard .order-date-premium {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.7rem;
  background: white;
  padding: 4px 12px;
  border-radius: 30px;
  border: 1px solid var(--border-light);
}

.product-orders-dashboard .order-date-premium i {
  font-size: 0.65rem;
  color: #3b82f6;
}

/* Card Body */
.product-orders-dashboard .order-card-body-premium {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 480px) {
  .product-orders-dashboard .order-card-body-premium {
    padding: 16px;
    gap: 12px;
  }
}

/* Customer Info Section */
.product-orders-dashboard .customer-info-premium {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.product-orders-dashboard .customer-avatar-premium {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 6px 12px -6px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.product-orders-dashboard .order-card-premium:hover .customer-avatar-premium {
  transform: scale(1.02);
  box-shadow: 0 8px 16px -6px rgba(59, 130, 246, 0.4);
}

.product-orders-dashboard .customer-details-premium {
  flex: 1;
  min-width: 0;
}

.product-orders-dashboard .customer-name-premium {
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .product-orders-dashboard .customer-name-premium {
    font-size: 1.05rem;
  }
}

.product-orders-dashboard .product-name-premium {
  color: #3b82f6;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Contact Info Compact */
.product-orders-dashboard .contact-info-premium {
  background: var(--bg);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border-light);
}

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

.product-orders-dashboard .contact-row-premium i {
  width: 16px;
  color: #3b82f6;
  font-size: 0.7rem;
}

.product-orders-dashboard .contact-row-premium span {
  word-break: break-all;
  flex: 1;
}

/* Order Details Grid */
.product-orders-dashboard .order-details-grid-premium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: var(--bg);
  border-radius: 14px;
  padding: 12px;
  border: 1px solid var(--border-light);
}

.product-orders-dashboard .detail-item-premium {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.product-orders-dashboard .detail-label-premium {
  font-size: 0.6rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.product-orders-dashboard .detail-value-premium {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
}

.product-orders-dashboard .detail-value-premium.highlight {
  color: #3b82f6;
  font-size: 0.9rem;
}

/* Delivery Address Preview */
.product-orders-dashboard .delivery-address-premium {
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-dark);
  border: 1px solid var(--border-light);
}

.product-orders-dashboard .delivery-address-premium i {
  color: #3b82f6;
  font-size: 0.7rem;
  margin-top: 2px;
}

.product-orders-dashboard .delivery-address-premium span {
  flex: 1;
  line-height: 1.4;
  word-break: break-word;
}

/* SKU Badge */
.product-orders-dashboard .sku-badge-premium {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 30px;
  padding: 6px 12px;
  width: fit-content;
  font-size: 0.7rem;
  color: var(--text-soft);
}

.product-orders-dashboard .sku-badge-premium i {
  color: #3b82f6;
  font-size: 0.65rem;
}

/* Note Preview */
.product-orders-dashboard .note-preview-premium {
  background: #fef3e2;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.75rem;
  color: #b45309;
  border-left: 3px solid #b45309;
}

.product-orders-dashboard .note-preview-premium i {
  font-size: 0.7rem;
  margin-top: 2px;
}

.product-orders-dashboard .note-preview-premium span {
  flex: 1;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* High Value Badge */
.product-orders-dashboard .high-value-badge-premium {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.product-orders-dashboard .high-value-badge-premium i {
  font-size: 0.65rem;
}

/* Card Footer */
.product-orders-dashboard .order-card-footer-premium {
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}

@media (max-width: 480px) {
  .product-orders-dashboard .order-card-footer-premium {
    padding: 14px 16px;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
}

.product-orders-dashboard .order-ref-premium {
  font-family: monospace;
  font-size: 0.7rem;
  color: var(--text-soft);
  background: white;
  padding: 4px 10px;
  border-radius: 30px;
  border: 1px solid var(--border-light);
}

.product-orders-dashboard .action-buttons-premium {
  display: flex;
  gap: 10px;
  align-items: center;
}

@media (max-width: 480px) {
  .product-orders-dashboard .action-buttons-premium {
    justify-content: space-between;
  }
}

.product-orders-dashboard .btn-primary-premium {
  padding: 8px 20px;
  background: #2f6e4a;
  color: white;
  border: none;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-orders-dashboard .btn-primary-premium:hover {
  background: #1e4a3c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(47, 110, 74, 0.3);
}

.product-orders-dashboard .btn-outline-premium {
  padding: 8px 20px;
  background: white;
  border: 2px solid #ef4444;
  color: #ef4444;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-orders-dashboard .btn-outline-premium:hover {
  background: #ef4444;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.product-orders-dashboard .btn-icon-premium {
  width: 36px;
  height: 36px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-soft);
}

.product-orders-dashboard .btn-icon-premium:hover {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
  transform: scale(1.05);
}

/* Empty State */
.product-orders-dashboard .empty-state-premium {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 32px;
  border: 1px solid var(--border-light);
  animation: fadeInUp 0.4s ease;
}

.product-orders-dashboard .empty-icon-premium {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, var(--bg), white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: #3b82f6;
  font-size: 2.5rem;
  border: 1px solid var(--border-light);
  box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.05);
}

.product-orders-dashboard .empty-state-premium h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.product-orders-dashboard .empty-state-premium p {
  color: var(--text-soft);
  margin-bottom: 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.9rem;
}

.product-orders-dashboard .btn-primary-lg {
  padding: 12px 32px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.product-orders-dashboard .btn-primary-lg:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

/* Click Hint */
.product-orders-dashboard .click-hint-premium {
  text-align: center;
  margin-top: 24px;
  padding: 12px 20px;
  background: var(--bg);
  border-radius: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-soft);
  font-size: 0.8rem;
  border: 1px dashed var(--border-light);
}

.product-orders-dashboard .click-hint-premium i {
  color: #3b82f6;
  font-size: 0.85rem;
  animation: handWave 2s ease-in-out infinite;
}

@keyframes handWave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(12deg);
  }
  75% {
    transform: rotate(-8deg);
  }
}

/* Loading Skeleton */
.product-orders-dashboard .skeleton-card-premium {
  background: white;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid var(--border-light);
  animation: shimmer 1.5s infinite;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  min-height: 280px;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Active Stat Card Styling - PRODUCT ORDERS ONLY */
.product-orders-dashboard .stat-card-premium-sm.active {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
  background: linear-gradient(135deg, white, rgba(59, 130, 246, 0.02));
}

.product-orders-dashboard .stat-card-premium-sm.active .stat-icon-premium-sm {
  transform: scale(1.05);
}

.product-orders-dashboard .stat-card-premium-sm.active .stat-value-premium-sm {
  color: #3b82f6;
}

/* For pending stat card when active - PRODUCT ORDERS ONLY */
.product-orders-dashboard .stat-card-premium-sm[data-filter="pending"].active {
  border-left: 3px solid #f59e0b !important;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.15);
}

.product-orders-dashboard
  .stat-card-premium-sm[data-filter="pending"].active
  .stat-value-premium-sm {
  color: #f59e0b;
}

/* For high-value stat card when active - PRODUCT ORDERS ONLY */
.product-orders-dashboard
  .stat-card-premium-sm[data-filter="high-value"].active {
  border-left: 3px solid #10b981 !important;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
}

.product-orders-dashboard
  .stat-card-premium-sm[data-filter="high-value"].active
  .stat-value-premium-sm {
  color: #10b981;
}
/* ========================================================================
   EARNINGS DASHBOARD - COMPACT METRICS GRID
   ======================================================================== */

/* Main Container */
.earnings-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--spacer) * 2);
  width: 100%;
}

@media (min-width: 768px) {
  .earnings-dashboard {
    padding: calc(var(--spacer) * 3);
  }
}

/* Header Section */
.earnings-header {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2);
  margin-bottom: calc(var(--spacer) * 3);
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .earnings-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 4);
  }
}

.earnings-header .page-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 400;
  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;
}

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

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

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

/* Header Actions */
.earnings-header .header-actions {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
  width: 100%;
}

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

.earnings-header .btn-outline,
.earnings-header .btn-primary {
  padding: calc(var(--spacer) * 1.2) calc(var(--spacer) * 2);
  min-height: 44px;
  border-radius: 40px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacer) * 0.8);
  white-space: nowrap;
  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;
  line-height: 1.4;
}

.earnings-header .btn-primary {
  background: var(--text-dark);
  color: white;
  border-color: var(--text-dark);
}

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

.earnings-header .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);
}

/* Compact Metrics Grid - 2x2 on desktop, 1x2 on mobile */
.metrics-grid-compact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

@media (min-width: 1024px) {
  .metrics-grid-compact {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* Metric Card - Compact Design */
.metric-card-compact {
  background: white;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-height: 90px;
}

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

.metric-card-compact.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  border: none;
}

.metric-card-compact.primary .metric-icon-compact {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.metric-card-compact.primary .metric-label-compact,
.metric-card-compact.primary .metric-value-compact,
.metric-card-compact.primary .metric-subtitle-compact,
.metric-card-compact.primary .metric-trend-compact {
  color: white;
}

/* Metric Icon */
.metric-icon-compact {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.metric-card-compact:hover .metric-icon-compact {
  transform: scale(1.05);
}

/* Metric Content */
.metric-content-compact {
  flex: 1;
  min-width: 0;
}

.metric-label-compact {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 4px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.metric-value-compact {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
  margin-bottom: 2px;
  white-space: normal;
  word-break: break-word;
}

@media (min-width: 768px) {
  .metric-value-compact {
    font-size: 1.3rem;
  }
}

.metric-subtitle-compact {
  font-size: 0.65rem;
  color: var(--text-soft);
  display: block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

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

.metric-trend-compact.positive {
  color: #10b981;
  background: #e3f2e9;
}

.metric-trend-compact.negative {
  color: #ef4444;
  background: #fee2e2;
}

.metric-trend-compact.neutral {
  color: #64748b;
  background: #f1f5f9;
}

.metric-trend-compact i {
  font-size: 0.55rem;
}

/* Currency Note */
.currency-note-compact {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 8px;
  padding: 10px 16px;
  background: var(--bg);
  border-radius: 40px;
  border: 1px dashed var(--border-light);
  font-size: 0.7rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.currency-note-compact i {
  color: var(--accent);
  font-size: 0.7rem;
}

/* VAT Card Special Styling */
.metric-card-compact.vat-card {
  border-left: 3px solid #2563eb;
  background: linear-gradient(135deg, white, #e8f0fe);
}

.metric-card-compact.vat-card .metric-icon-compact {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

.metric-card-compact.vat-card .metric-value-compact {
  color: #2563eb;
}

/* Responsive */
@media (max-width: 768px) {
  .metrics-grid-compact {
    gap: 12px;
    margin-bottom: 24px;
  }

  .metric-card-compact {
    padding: 12px;
    gap: 10px;
    min-height: 80px;
  }

  .metric-icon-compact {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    border-radius: 12px;
  }

  .metric-value-compact {
    font-size: 1rem;
  }

  .metric-label-compact {
    font-size: 0.65rem;
  }

  .metric-subtitle-compact {
    font-size: 0.6rem;
  }

  .metric-trend-compact {
    font-size: 0.6rem;
    padding: 2px 6px;
  }
}

@media (max-width: 480px) {
  .metrics-grid-compact {
    gap: 10px;
  }

  .metric-card-compact {
    padding: 10px;
    gap: 8px;
    min-height: 75px;
  }

  .metric-icon-compact {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .metric-value-compact {
    font-size: 0.9rem;
  }

  .metric-label-compact {
    font-size: 0.6rem;
  }

  .metric-trend-compact {
    font-size: 0.55rem;
    padding: 1px 5px;
  }
}

/* Mobile: Show 2 cards per row */
@media (max-width: 640px) {
  .metrics-grid-compact {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Extra small: Still 2 cards per row, but smaller */
@media (max-width: 380px) {
  .metrics-grid-compact {
    gap: 8px;
  }

  .metric-card-compact {
    padding: 8px;
    gap: 6px;
    min-height: 70px;
  }

  .metric-icon-compact {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

  .metric-value-compact {
    font-size: 0.85rem;
  }

  .metric-label-compact {
    font-size: 0.55rem;
  }
}
/* ========================================================================
   QUICK STATS - COMPACT WIDTH-WISE DESIGN
   ======================================================================== */

/* Quick Stats Container */
.earnings-dashboard .quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 32px 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Quick Stat Card - Compact Design */
.earnings-dashboard .quick-stat-card {
  background: white;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-height: 80px;
}

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

/* VAT Stat Card Special Styling */
.earnings-dashboard .quick-stat-card.vat-stat {
  background: linear-gradient(135deg, white, #e8f0fe);
  border-left: 3px solid #2563eb;
}

.earnings-dashboard .quick-stat-card.vat-stat .quick-stat-icon {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

.earnings-dashboard .quick-stat-card.vat-stat .quick-stat-value {
  color: #2563eb;
}

/* Quick Stat Icon */
.earnings-dashboard .quick-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.earnings-dashboard .quick-stat-card:hover .quick-stat-icon {
  transform: scale(1.05);
}

/* Quick Stat Content */
.earnings-dashboard .quick-stat-content {
  flex: 1;
  min-width: 0;
}

.earnings-dashboard .quick-stat-label {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 4px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.earnings-dashboard .quick-stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  display: block;
  margin-bottom: 2px;
  white-space: normal;
  word-break: break-word;
}

@media (min-width: 768px) {
  .earnings-dashboard .quick-stat-value {
    font-size: 1.3rem;
  }
}

.earnings-dashboard .quick-stat-subtitle {
  font-size: 0.65rem;
  color: var(--text-soft);
  display: block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

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

.earnings-dashboard .quick-stat-trend.positive {
  color: #10b981;
  background: #e3f2e9;
}

.earnings-dashboard .quick-stat-trend.negative {
  color: #ef4444;
  background: #fee2e2;
}

.earnings-dashboard .quick-stat-trend.neutral {
  color: #64748b;
  background: #f1f5f9;
}

.earnings-dashboard .quick-stat-trend i {
  font-size: 0.55rem;
}

/* Responsive - Desktop 4 columns */
@media (min-width: 1200px) {
  .earnings-dashboard .quick-stats {
    gap: 20px;
  }
}

/* Tablet - 2x2 grid */
@media (min-width: 768px) and (max-width: 1199px) {
  .earnings-dashboard .quick-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Mobile - 2 columns */
@media (max-width: 767px) {
  .earnings-dashboard .quick-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 24px 0;
  }

  .earnings-dashboard .quick-stat-card {
    padding: 12px;
    gap: 10px;
    min-height: 75px;
  }

  .earnings-dashboard .quick-stat-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    border-radius: 12px;
  }

  .earnings-dashboard .quick-stat-value {
    font-size: 1rem;
  }

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

  .earnings-dashboard .quick-stat-subtitle {
    font-size: 0.6rem;
  }
}

/* Small Mobile - Still 2 columns */
@media (max-width: 480px) {
  .earnings-dashboard .quick-stats {
    gap: 10px;
    margin: 20px 0;
  }

  .earnings-dashboard .quick-stat-card {
    padding: 10px;
    gap: 8px;
    min-height: 70px;
  }

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

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

  .earnings-dashboard .quick-stat-label {
    font-size: 0.6rem;
  }

  .earnings-dashboard .quick-stat-subtitle {
    font-size: 0.55rem;
  }
}

/* Extra Small - Still 2 columns but tighter */
@media (max-width: 380px) {
  .earnings-dashboard .quick-stats {
    gap: 8px;
  }

  .earnings-dashboard .quick-stat-card {
    padding: 8px;
    gap: 6px;
    min-height: 65px;
  }

  .earnings-dashboard .quick-stat-icon {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

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

  .earnings-dashboard .quick-stat-label {
    font-size: 0.55rem;
  }

  .earnings-dashboard .quick-stat-subtitle {
    font-size: 0.5rem;
  }
}
/* ========================================================================
   TRANSACTIONS SECTION - COMPACT WIDTH-WISE DESIGN
   ======================================================================== */

/* Transactions Section Container */
.earnings-dashboard .transactions-section {
  background: white;
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 32px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .earnings-dashboard .transactions-section {
    padding: 24px;
    margin-bottom: 40px;
  }
}

/* Section Tabs - Compact */
.earnings-dashboard .section-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .earnings-dashboard .section-tabs {
    gap: 12px;
    margin-bottom: 24px;
    overflow-x: visible;
    white-space: normal;
  }
}

.earnings-dashboard .section-tabs .tab-btn {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 0.8rem;
  color: var(--text-soft);
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 30px;
  font-weight: 500;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .earnings-dashboard .section-tabs .tab-btn {
    padding: 10px 20px;
    font-size: 0.85rem;
    min-height: 40px;
    gap: 8px;
  }
}

.earnings-dashboard .section-tabs .tab-btn i {
  font-size: 0.75rem;
}

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

.earnings-dashboard .section-tabs .tab-btn.active {
  color: var(--accent);
  background: rgba(183, 140, 90, 0.1);
}

/* Transactions List - Compact */
.earnings-dashboard .transactions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 4px;
}

@media (min-width: 768px) {
  .earnings-dashboard .transactions-list {
    gap: 10px;
    max-height: 550px;
  }
}

/* Custom Scrollbar */
.earnings-dashboard .transactions-list::-webkit-scrollbar {
  width: 4px;
}

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

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

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

/* Transaction Item - Compact */
.earnings-dashboard .transaction-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border-radius: 16px;
  transition: all 0.2s;
  border: 1px solid transparent;
}

@media (min-width: 768px) {
  .earnings-dashboard .transaction-item {
    gap: 16px;
    padding: 14px 16px;
    border-radius: 18px;
  }
}

.earnings-dashboard .transaction-item:hover {
  background: white;
  border-color: var(--border-light);
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

/* Transaction Icon - Compact */
.earnings-dashboard .transaction-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: all 0.2s;
}

@media (min-width: 768px) {
  .earnings-dashboard .transaction-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    border-radius: 12px;
  }
}

.earnings-dashboard .transaction-icon.success {
  background: #e3f2e9;
  color: #2f6e4a;
}

.earnings-dashboard .transaction-icon.warning {
  background: #fef3e2;
  color: #b45309;
}

.earnings-dashboard .transaction-icon.danger {
  background: #fee2e2;
  color: #991b1b;
}

.earnings-dashboard .transaction-icon.info {
  background: #e1f0fa;
  color: #1e4a6b;
}

/* Transaction Details - Compact */
.earnings-dashboard .transaction-details {
  flex: 1;
  min-width: 0;
}

.earnings-dashboard .transaction-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 768px) {
  .earnings-dashboard .transaction-header {
    margin-bottom: 6px;
  }
}

.earnings-dashboard .transaction-type {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.85rem;
  word-break: break-word;
}

@media (min-width: 768px) {
  .earnings-dashboard .transaction-type {
    font-size: 0.9rem;
  }
}

.earnings-dashboard .transaction-amount {
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .earnings-dashboard .transaction-amount {
    font-size: 0.9rem;
  }
}

.earnings-dashboard .transaction-amount.positive {
  color: #10b981;
}

.earnings-dashboard .transaction-amount.negative {
  color: #ef4444;
}

.earnings-dashboard .transaction-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.65rem;
  color: var(--text-soft);
  align-items: center;
}

@media (min-width: 768px) {
  .earnings-dashboard .transaction-meta {
    gap: 16px;
    font-size: 0.7rem;
  }
}

.earnings-dashboard .transaction-meta i {
  margin-right: 2px;
  font-size: 0.6rem;
  color: var(--accent);
}

.earnings-dashboard .transaction-description {
  color: var(--text-soft);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .earnings-dashboard .transaction-description {
    max-width: 300px;
  }
}

.earnings-dashboard .transaction-reference {
  font-family: monospace;
  font-size: 0.6rem;
  color: var(--accent);
}

/* Transaction Status Badge - Compact */
.earnings-dashboard .transaction-status {
  padding: 3px 10px;
  border-radius: 30px;
  font-size: 0.6rem;
  font-weight: 600;
  background: #e3f2e9;
  color: #2f6e4a;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .earnings-dashboard .transaction-status {
    padding: 4px 12px;
    font-size: 0.65rem;
  }
}

.earnings-dashboard .transaction-status.pending {
  background: #fef3e2;
  color: #b45309;
}

.earnings-dashboard .transaction-status.completed {
  background: #e3f2e9;
  color: #2f6e4a;
}

.earnings-dashboard .transaction-status.failed {
  background: #fee2e2;
  color: #991b1b;
}

/* VAT Indicator */
.earnings-dashboard .vat-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  padding: 2px 8px;
  border-radius: 30px;
  margin-left: 8px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .earnings-dashboard .vat-indicator {
    font-size: 0.65rem;
    padding: 2px 10px;
  }
}

/* VAT Summary Footer */
.earnings-dashboard .vat-summary-footer {
  text-align: center;
  margin-top: 20px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid var(--border-light);
  font-size: 0.7rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .earnings-dashboard .vat-summary-footer {
    margin-top: 24px;
    padding: 14px;
    font-size: 0.75rem;
  }
}

.earnings-dashboard .vat-summary-footer i {
  color: #2563eb;
  font-size: 0.75rem;
}

/* Empty State for Transactions */
.earnings-dashboard .empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-soft);
}

@media (min-width: 768px) {
  .earnings-dashboard .empty-state {
    padding: 60px 20px;
  }
}

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

.earnings-dashboard .empty-state p {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Loading State */
.earnings-dashboard .loading-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-soft);
}

.earnings-dashboard .loading-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px 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);
  }
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .earnings-dashboard .transaction-item {
    flex-wrap: wrap;
    padding: 10px;
  }

  .earnings-dashboard .transaction-icon {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .earnings-dashboard .transaction-header {
    width: 100%;
  }

  .earnings-dashboard .transaction-meta {
    width: 100%;
    justify-content: space-between;
  }

  .earnings-dashboard .transaction-status {
    margin-left: auto;
  }

  .earnings-dashboard .vat-indicator {
    margin-left: 0;
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  .earnings-dashboard .transactions-section {
    padding: 16px;
  }

  .earnings-dashboard .section-tabs .tab-btn {
    padding: 6px 12px;
    font-size: 0.7rem;
    min-height: 32px;
  }

  .earnings-dashboard .transaction-type {
    font-size: 0.8rem;
  }

  .earnings-dashboard .transaction-amount {
    font-size: 0.8rem;
  }

  .earnings-dashboard .transaction-meta {
    gap: 8px;
    font-size: 0.6rem;
  }

  .earnings-dashboard .transaction-description {
    max-width: 150px;
  }
}
/* ========================================================================
   UPCOMING PAYOUTS - COMPACT WIDTH-WISE DESIGN
   ======================================================================== */

/* Upcoming Payouts Container */
.earnings-dashboard .upcoming-payouts {
  background: white;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .earnings-dashboard .upcoming-payouts {
    padding: 24px;
  }
}

/* Header */
.earnings-dashboard .upcoming-payouts h3 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .earnings-dashboard .upcoming-payouts h3 {
    font-size: 1.1rem;
    margin-bottom: 24px;
    padding-bottom: 16px;
  }
}

.earnings-dashboard .upcoming-payouts h3 i {
  color: var(--accent);
  font-size: 0.9rem;
}

/* Payout Timeline - Grid Layout */
.earnings-dashboard .payout-timeline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .earnings-dashboard .payout-timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .earnings-dashboard .payout-timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

/* Timeline Item - Compact Card */
.earnings-dashboard .timeline-item {
  background: var(--bg);
  border-radius: 16px;
  padding: 14px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  min-height: 100px;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .earnings-dashboard .timeline-item {
    padding: 16px;
    min-height: 110px;
  }
}

.earnings-dashboard .timeline-item:hover {
  transform: translateY(-2px);
  background: white;
  border-color: var(--border-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Status-specific styling */
.earnings-dashboard .timeline-item.upcoming {
  border-left: 3px solid var(--accent);
}

.earnings-dashboard .timeline-item.scheduled {
  border-left: 3px solid #94a3b8;
}

.earnings-dashboard .timeline-item.soon {
  background: linear-gradient(135deg, #fef3e2 0%, white 100%);
  border-left: 3px solid #f59e0b;
}

/* Timeline Marker (Dot) */
.earnings-dashboard .timeline-marker {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .earnings-dashboard .timeline-marker {
    top: 16px;
    right: 16px;
    width: 12px;
    height: 12px;
  }
}

.earnings-dashboard .timeline-marker.upcoming {
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(183, 140, 90, 0.2);
  animation: pulse 2s infinite;
}

.earnings-dashboard .timeline-marker.scheduled {
  background: #94a3b8;
}

.earnings-dashboard .timeline-marker.soon {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
  animation: pulse 2s infinite;
}

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

/* Timeline Content */
.earnings-dashboard .timeline-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.earnings-dashboard .timeline-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.8);
  padding: 4px 8px;
  border-radius: 30px;
  width: fit-content;
}

@media (min-width: 768px) {
  .earnings-dashboard .timeline-date {
    font-size: 0.75rem;
    padding: 4px 10px;
  }
}

.earnings-dashboard .timeline-date i {
  font-size: 0.6rem;
  color: var(--accent);
}

.earnings-dashboard .timeline-amount {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
  margin-top: 4px;
}

@media (min-width: 768px) {
  .earnings-dashboard .timeline-amount {
    font-size: 1.1rem;
  }
}

.earnings-dashboard .timeline-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 30px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  width: fit-content;
  background: white;
  border: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .earnings-dashboard .timeline-status {
    padding: 4px 10px;
    font-size: 0.65rem;
  }
}

.earnings-dashboard .timeline-status.upcoming {
  background: rgba(183, 140, 90, 0.1);
  color: var(--accent);
  border-color: rgba(183, 140, 90, 0.2);
}

.earnings-dashboard .timeline-status.scheduled {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}

.earnings-dashboard .timeline-status.soon {
  background: #fef3e2;
  color: #b45309;
  border-color: #fde6c9;
}

.earnings-dashboard .timeline-customer {
  font-size: 0.7rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (min-width: 768px) {
  .earnings-dashboard .timeline-customer {
    font-size: 0.75rem;
  }
}

.earnings-dashboard .timeline-customer i {
  font-size: 0.6rem;
  color: var(--accent);
}

/* Empty State for Payouts */
.earnings-dashboard .empty-state.small {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 20px;
  background: var(--bg);
  border-radius: 20px;
  color: var(--text-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.earnings-dashboard .empty-state.small i {
  font-size: 2rem;
  color: var(--accent);
  opacity: 0.3;
}

.earnings-dashboard .empty-state.small p {
  font-size: 0.85rem;
  margin: 0;
}

.earnings-dashboard .empty-state.small small {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* Loading State */
.earnings-dashboard .payout-timeline .loading-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px;
  background: var(--bg);
  border-radius: 20px;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .earnings-dashboard .upcoming-payouts {
    padding: 16px;
  }

  .earnings-dashboard .payout-timeline {
    gap: 10px;
  }

  .earnings-dashboard .timeline-item {
    padding: 12px;
    min-height: 90px;
  }

  .earnings-dashboard .timeline-amount {
    font-size: 0.9rem;
  }

  .earnings-dashboard .timeline-date {
    font-size: 0.65rem;
    padding: 3px 6px;
  }

  .earnings-dashboard .timeline-status {
    font-size: 0.55rem;
    padding: 2px 6px;
  }

  .earnings-dashboard .timeline-customer {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .earnings-dashboard .payout-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .earnings-dashboard .timeline-item {
    padding: 10px;
    min-height: 85px;
  }

  .earnings-dashboard .timeline-amount {
    font-size: 0.85rem;
  }

  .earnings-dashboard .timeline-date {
    font-size: 0.6rem;
    padding: 2px 5px;
  }

  .earnings-dashboard .timeline-status {
    font-size: 0.5rem;
    padding: 2px 5px;
  }

  .earnings-dashboard .timeline-customer {
    font-size: 0.6rem;
  }
}

@media (max-width: 380px) {
  .earnings-dashboard .payout-timeline {
    gap: 6px;
  }

  .earnings-dashboard .timeline-item {
    padding: 8px;
    min-height: 80px;
  }

  .earnings-dashboard .timeline-amount {
    font-size: 0.8rem;
  }

  .earnings-dashboard .timeline-date {
    font-size: 0.55rem;
    padding: 2px 4px;
  }
}
/* ========================================================================
   TEAM FILTERS - REDESIGNED WITH SEARCH ON TOP
   ======================================================================== */

/* Team Filters Container */
.team-filters {
  background: white;
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  width: 100%;
}

/* Search Box - Full width on top */
.team-filters .search-box {
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}

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

.team-filters .search-box input {
  width: 100%;
  padding: 14px 18px 14px 48px;
  border: 1px solid var(--border-light);
  border-radius: 50px;
  font-size: 0.95rem;
  background: var(--bg);
  transition: all 0.2s;
  min-height: 52px;
  font-family: var(--font-sans);
}

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

.team-filters .search-box input::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
  font-size: 0.9rem;
}

/* Filter Options Row - Equal Width */
.team-filters .filter-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  width: 100%;
}

/* Filter Select Styles */
.team-filters .filter-select-wrapper {
  position: relative;
  width: 100%;
}

.team-filters .filter-select-wrapper i {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 1;
}

.team-filters .filter-select {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 50px;
  font-size: 0.9rem;
  background: var(--bg);
  min-height: 48px;
  cursor: pointer;
  appearance: none;
  font-family: var(--font-sans);
  color: var(--text-dark);
  transition: all 0.2s;
}

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

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

/* Clear Filters Button */
.team-filters .clear-filters-btn {
  width: 100%;
  padding: 12px 20px;
  border-radius: 50px;
  font-size: 0.9rem;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  font-weight: 500;
}

.team-filters .clear-filters-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.2);
}

.team-filters .clear-filters-btn i {
  font-size: 0.85rem;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
  .team-filters {
    padding: 16px;
    border-radius: 20px;
  }

  .team-filters .search-box {
    margin-bottom: 16px;
  }

  .team-filters .search-box input {
    padding: 12px 16px 12px 44px;
    min-height: 48px;
    font-size: 0.9rem;
  }

  .team-filters .search-box i {
    left: 16px;
    font-size: 0.85rem;
  }

  .team-filters .filter-row {
    gap: 12px;
  }

  .team-filters .filter-select {
    padding: 10px 35px 10px 14px;
    min-height: 44px;
    font-size: 0.85rem;
  }

  .team-filters .filter-select-wrapper i {
    right: 14px;
    font-size: 0.75rem;
  }

  .team-filters .clear-filters-btn {
    padding: 10px 16px;
    min-height: 44px;
    font-size: 0.85rem;
  }
}

/* Responsive - Mobile (Stack vertically) */
@media (max-width: 640px) {
  .team-filters .filter-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .team-filters .filter-select {
    width: 100%;
  }

  .team-filters .clear-filters-btn {
    width: 100%;
    margin-top: 4px;
  }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
  .team-filters {
    padding: 14px;
    border-radius: 18px;
  }

  .team-filters .search-box input {
    padding: 10px 14px 10px 40px;
    min-height: 44px;
    font-size: 0.85rem;
  }

  .team-filters .search-box i {
    left: 14px;
    font-size: 0.8rem;
  }

  .team-filters .filter-select {
    padding: 9px 32px 9px 12px;
    min-height: 42px;
    font-size: 0.8rem;
  }

  .team-filters .clear-filters-btn {
    padding: 9px 14px;
    min-height: 42px;
    font-size: 0.8rem;
  }
}
/* Add to dashboard-provider.css */

/* Breakdown Section Styles */
.breakdown-items-section,
.discounts-section {
  margin-bottom: 20px;
}

.breakdown-header,
.discounts-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.breakdown-header i,
.discounts-header i {
  color: var(--accent);
  font-size: 0.75rem;
}

.breakdown-items-list,
.discounts-list {
  background: var(--bg);
  border-radius: 12px;
  padding: 8px;
}

.breakdown-item-row,
.discount-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--border-light);
}

.breakdown-item-row:last-child,
.discount-item-row:last-child {
  border-bottom: none;
}

.breakdown-item-row .item-info,
.discount-item-row .discount-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.breakdown-item-row .item-info i,
.discount-item-row .discount-info i {
  color: var(--accent);
  font-size: 0.75rem;
  width: 20px;
}

.breakdown-item-row .item-name,
.discount-item-row .discount-name {
  font-size: 0.85rem;
  color: var(--text-dark);
}

.breakdown-item-row .item-amount {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.85rem;
}

.discount-item-row .discount-amount {
  font-weight: 600;
  color: #b45309;
  font-size: 0.85rem;
}

/* Calculation Flow */
.calculation-flow {
  background: var(--bg);
  border-radius: 16px;
  padding: 16px;
  margin: 16px 0;
}

.flow-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.flow-row:not(:last-child) {
  border-bottom: 1px dashed var(--border-light);
}

/* Responsive */
@media (max-width: 768px) {
  .breakdown-item-row,
  .discount-item-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .breakdown-item-row .item-amount,
  .discount-item-row .discount-amount {
    align-self: flex-end;
  }
}

@media (max-width: 480px) {
  .breakdown-header,
  .discounts-header {
    font-size: 0.75rem;
  }

  .breakdown-item-row .item-name,
  .discount-item-row .discount-name {
    font-size: 0.8rem;
  }

  .breakdown-item-row .item-amount,
  .discount-item-row .discount-amount {
    font-size: 0.8rem;
  }
}
/* ========================================================================
   BOOKING CALENDAR FILTERS - FIXED ALIGNMENT
   ======================================================================== */

/* Calendar Filters Enhanced */
.calendar-filters-enhanced {
  background: white;
  border-radius: 20px;
  padding: 16px 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
}

/* Filter Group - Full width with equal spacing */
.calendar-filters-enhanced .filter-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex: 2;
  margin: 0;
  padding: 0;
}

/* Search Box */
.calendar-filters-enhanced .search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
  margin: 0;
}

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

.calendar-filters-enhanced .search-box input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.85rem;
  background: var(--bg);
  min-height: 42px;
  transition: all 0.2s;
}

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

/* Filter Selects */
.calendar-filters-enhanced .filter-select {
  padding: 9px 32px 9px 16px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  background: var(--bg);
  min-width: 130px;
  min-height: 42px;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' 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 14px center;
  background-size: 14px;
  flex: 0 0 auto;
}

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

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

/* Clear Filters Button */
.calendar-filters-enhanced .btn-outline.btn-sm {
  padding: 8px 20px;
  min-height: 42px;
  border-radius: 40px;
  font-size: 0.85rem;
  white-space: nowrap;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.calendar-filters-enhanced .btn-outline.btn-sm:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.15);
}

/* Date Navigation - Right Side */
.calendar-filters-enhanced .date-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 40px;
  border: 1px solid var(--border-light);
  flex: 0 0 auto;
}

.calendar-filters-enhanced .date-navigation .btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.calendar-filters-enhanced .date-navigation .btn-icon:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: scale(1.05);
}

.calendar-filters-enhanced .date-navigation h2 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dark);
  margin: 0;
  min-width: 140px;
  text-align: center;
  white-space: nowrap;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
  .calendar-filters-enhanced {
    padding: 16px 20px;
    gap: 16px;
  }

  .calendar-filters-enhanced .filter-group {
    gap: 10px;
    flex: 1.5;
  }

  .calendar-filters-enhanced .search-box {
    min-width: 180px;
  }

  .calendar-filters-enhanced .filter-select {
    min-width: 120px;
    padding: 8px 28px 8px 14px;
    font-size: 0.8rem;
    background-size: 12px;
  }

  .calendar-filters-enhanced .date-navigation h2 {
    min-width: 120px;
    font-size: 0.9rem;
  }
}

/* Responsive - Mobile (Stack vertically) */
@media (max-width: 768px) {
  .calendar-filters-enhanced {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 12px;
  }

  .calendar-filters-enhanced .filter-group {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .calendar-filters-enhanced .search-box {
    width: 100%;
    min-width: unset;
  }

  .calendar-filters-enhanced .search-box input {
    width: 100%;
  }

  .calendar-filters-enhanced .filter-select {
    width: 100%;
    min-width: unset;
  }

  .calendar-filters-enhanced .btn-outline.btn-sm {
    width: 100%;
    justify-content: center;
  }

  .calendar-filters-enhanced .date-navigation {
    width: 100%;
    justify-content: space-between;
    padding: 8px 12px;
  }

  .calendar-filters-enhanced .date-navigation h2 {
    min-width: unset;
    flex: 1;
    text-align: center;
  }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
  .calendar-filters-enhanced {
    padding: 12px;
    border-radius: 16px;
  }

  .calendar-filters-enhanced .search-box input {
    padding: 8px 12px 8px 36px;
    min-height: 38px;
    font-size: 0.8rem;
  }

  .calendar-filters-enhanced .search-box i {
    left: 12px;
    font-size: 0.75rem;
  }

  .calendar-filters-enhanced .filter-select {
    padding: 7px 28px 7px 12px;
    min-height: 38px;
    font-size: 0.75rem;
  }

  .calendar-filters-enhanced .btn-outline.btn-sm {
    padding: 7px 16px;
    min-height: 38px;
    font-size: 0.75rem;
  }

  .calendar-filters-enhanced .date-navigation .btn-icon {
    width: 32px;
    height: 32px;
  }

  .calendar-filters-enhanced .date-navigation h2 {
    font-size: 0.85rem;
  }
}
/* ========================================================================
   COMPANY INFORMATION TABS
   ======================================================================== */

/* Company Tabs Container */
.company-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-light);
  flex-wrap: wrap;
}

/* Tab Buttons */
.company-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-radius: 40px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  min-height: 44px;
}

.company-tab-btn i {
  font-size: 1rem;
  color: currentColor;
}

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

.company-tab-btn.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 12px rgba(183, 140, 90, 0.2);
}

/* Tab Panes */
.company-tab-pane {
  animation: fadeIn 0.3s ease;
}

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

/* Responsive */
@media (max-width: 768px) {
  .company-tabs {
    gap: 6px;
    margin-bottom: 20px;
  }

  .company-tab-btn {
    padding: 8px 16px;
    font-size: 0.8rem;
    min-height: 40px;
  }

  .company-tab-btn i {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .company-tabs {
    flex-direction: column;
    gap: 8px;
    border-bottom: none;
    padding-bottom: 0;
  }

  .company-tab-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid var(--border-light);
  }

  .company-tab-btn.active {
    border-color: var(--accent);
  }
}
/* ========================================================================
   ORDERS FILTERS BAR - CONSISTENT WIDTH & CENTERED
   ======================================================================== */

/* Main Container for Orders Section */
.service-requests-dashboard,
.product-orders-dashboard,
.orders-dashboard-enhanced {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: calc(var(--spacer) * 2);
}

@media (min-width: 768px) {
  .service-requests-dashboard,
  .product-orders-dashboard,
  .orders-dashboard-enhanced {
    padding: calc(var(--spacer) * 3);
  }
}

/* Orders Filters Bar - Consistent Width */
.orders-filters-premium {
  background: white;
  border-radius: 60px;
  padding: 8px 20px;
  margin-bottom: calc(var(--spacer) * 4);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Desktop - Full width with max-width constraint */
@media (min-width: 1024px) {
  .orders-filters-premium {
    padding: 8px 24px;
    gap: 20px;
  }
}

/* Tablet - Adjust padding and gap */
@media (min-width: 768px) and (max-width: 1023px) {
  .orders-filters-premium {
    padding: 8px 20px;
    gap: 14px;
  }
}

/* Mobile - Stack vertically with full width */
@media (max-width: 767px) {
  .orders-filters-premium {
    border-radius: 24px;
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }
}

/* Search Wrapper - Consistent Width */
.orders-filters-premium .search-wrapper-premium {
  flex: 2;
  min-width: 200px;
  position: relative;
}

@media (min-width: 768px) {
  .orders-filters-premium .search-wrapper-premium {
    min-width: 240px;
  }
}

@media (min-width: 1024px) {
  .orders-filters-premium .search-wrapper-premium {
    min-width: 280px;
  }
}

/* Search Input */
.orders-filters-premium .search-wrapper-premium i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 0.85rem;
  pointer-events: none;
}

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

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

/* Filter Select - Consistent Width */
.orders-filters-premium .filter-select-premium {
  padding: 10px 32px 10px 16px;
  border: 1px solid var(--border-light);
  border-radius: 40px;
  font-size: 0.85rem;
  background: var(--bg);
  min-height: 44px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' 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 14px center;
  background-size: 14px;
  min-width: 130px;
}

@media (min-width: 768px) {
  .orders-filters-premium .filter-select-premium {
    min-width: 140px;
  }
}

@media (min-width: 1024px) {
  .orders-filters-premium .filter-select-premium {
    min-width: 150px;
  }
}

.orders-filters-premium .filter-select-premium:focus {
  outline: none;
  border-color: var(--accent);
}

/* Clear Filters Button */
.orders-filters-premium .clear-filters-premium {
  padding: 10px 24px;
  border-radius: 40px;
  font-size: 0.85rem;
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .orders-filters-premium .clear-filters-premium {
    padding: 10px 28px;
  }
}

.orders-filters-premium .clear-filters-premium:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Mobile - Make buttons full width */
@media (max-width: 767px) {
  .orders-filters-premium .search-wrapper-premium {
    width: 100%;
  }

  .orders-filters-premium .filter-select-premium {
    width: 100%;
    min-width: auto;
  }

  .orders-filters-premium .clear-filters-premium {
    width: 100%;
    justify-content: center;
  }
}
/* ========================================================================
   EVENT MODAL - FIXED SCROLLABLE
   ======================================================================== */

/* Modal Overlay */
.modal-overlay.event-modal {
  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, 1000);
  backdrop-filter: blur(4px);
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Modal Content */
.modal-overlay.event-modal .modal-content {
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  background: white;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: slideUp 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto;
}

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

/* Modal Body - Scrollable */
.modal-overlay.event-modal .modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  max-height: calc(90vh - 140px);
}

/* Modal Footer - Sticky */
.modal-overlay.event-modal .modal-footer {
  position: sticky;
  bottom: 0;
  background: white;
  z-index: 10;
  padding: 20px 24px;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-shrink: 0;
  border-radius: 0 0 24px 24px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .modal-overlay.event-modal {
    padding: 10px;
  }

  .modal-overlay.event-modal .modal-content {
    max-height: 95vh;
    border-radius: 20px;
  }

  .modal-overlay.event-modal .modal-header {
    padding: 16px 20px;
  }

  .modal-overlay.event-modal .modal-body {
    padding: 20px;
    max-height: calc(95vh - 120px);
  }

  .modal-overlay.event-modal .modal-footer {
    padding: 16px 20px;
    flex-direction: column;
  }

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

@media (max-width: 480px) {
  .modal-overlay.event-modal {
    padding: 8px;
  }

  .modal-overlay.event-modal .modal-header {
    padding: 14px 16px;
  }

  .modal-overlay.event-modal .modal-body {
    padding: 16px;
  }

  .modal-overlay.event-modal .modal-footer {
    padding: 14px 16px;
  }
}
/* ========================================================================
   EARNINGS OVERVIEW CHART - WITH WORKING TOOLTIPS
   ======================================================================== */

/* Charts grid - equal width for both charts */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin-bottom: 32px;
  width: 100%;
}

/* Both chart cards take full width of their column */
.chart-card {
  background: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  margin-bottom: 0;
  overflow: visible !important; /* Allow tooltips to show outside */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Chart container - needs relative positioning for tooltips */
.chart-container {
  position: relative;
  min-height: 250px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible !important;
  padding: 10px 0 20px 0;
}

/* Chart bars container */
.chart-bars-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 200px;
  width: 100%;
  padding: 0 10px;
  gap: 12px;
  position: relative;
  overflow: visible !important;
}

/* Bar group - relative positioning for tooltips */
.chart-bar-group {
  flex: 1;
  min-width: 35px;
  max-width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 100%;
  cursor: pointer;
}

/* Bar stack - contains the bars */
.chart-bar-stack {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  background: #f1f5f9;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  position: relative;
  min-height: 4px;
  height: 100%;
}

/* Individual bars */
.chart-bar {
  width: 100%;
  transition: height 0.3s ease;
  min-height: 2px;
}

.chart-bar.releases {
  background: var(--accent);
}

.chart-bar.holds {
  background: #94a3b8;
}

/* Tooltip - fixed to show on hover */
.chart-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #2e2a28;
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 100;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  font-weight: normal;
  line-height: 1.4;
}

/* Show tooltip on hover */
.chart-bar-group:hover .chart-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(-5px);
}

/* Tooltip arrow */
.chart-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #2e2a28 transparent transparent transparent;
}

/* Bar labels */
.chart-label {
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--text-soft);
  text-align: center;
  white-space: nowrap;
  font-weight: 500;
}

/* Ensure hover on entire bar group works */
.chart-bar-group {
  cursor: pointer;
}

.chart-bar-group:hover .chart-bar-stack {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

/* Desktop - larger tooltip */
@media (min-width: 768px) {
  .chart-tooltip {
    padding: 10px 14px;
    font-size: 0.75rem;
    margin-bottom: 10px;
  }

  .chart-tooltip strong {
    font-size: 0.8rem;
    display: block;
    margin-bottom: 4px;
  }
}

/* Tablet - adjust spacing */
@media (min-width: 641px) and (max-width: 767px) {
  .chart-bars-container {
    gap: 8px;
    padding: 0 5px;
  }

  .chart-bar-group {
    min-width: 30px;
  }

  .chart-tooltip {
    padding: 6px 10px;
    font-size: 0.65rem;
  }
}

/* Mobile - ensure tooltips still work */
@media (max-width: 640px) {
  .chart-bars-container {
    gap: 6px;
    height: 180px;
  }

  .chart-bar-group {
    min-width: 25px;
  }

  .chart-tooltip {
    padding: 5px 8px;
    font-size: 0.6rem;
    white-space: normal;
    min-width: 120px;
    text-align: center;
  }

  .chart-tooltip br {
    display: none;
  }

  .chart-tooltip span {
    display: block;
    font-size: 0.55rem;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .chart-bars-container {
    gap: 4px;
    height: 160px;
  }

  .chart-bar-group {
    min-width: 22px;
  }

  .chart-tooltip {
    padding: 4px 6px;
    font-size: 0.55rem;
    min-width: 100px;
  }

  .chart-label {
    font-size: 0.6rem;
  }
}

/* Ensure chart container doesn't clip tooltips */
.chart-container {
  overflow: visible !important;
}

.chart-card {
  overflow: visible !important;
}

/* Make sure parent containers don't clip */
.earnings-dashboard {
  overflow: visible !important;
}

/* Responsive - Tablet and below for grid */
@media (max-width: 768px) {
  .charts-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* For larger screens, maintain equal width */
@media (min-width: 769px) and (max-width: 1024px) {
  .charts-grid {
    gap: 20px !important;
  }
}

@media (min-width: 1400px) {
  .charts-grid {
    gap: 32px !important;
  }

  .chart-container {
    min-height: 280px;
  }

  .chart-bars-container {
    height: 220px;
  }
}
/* ========================================================================
   PAYMENT DISTRIBUTION - MOBILE OPTIMIZATION
   ======================================================================== */

/* Tablet and below - optimize Payment Distribution */
@media (max-width: 768px) {
  /* Payment Distribution Chart Card */
  .chart-card:last-child {
    padding: 16px !important;
  }

  /* Distribution container */
  .distribution-container {
    min-height: auto !important;
    padding: 0 !important;
  }

  /* Distribution pie layout - column on mobile */
  .distribution-pie {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Legend container - centered with wrap */
  .distribution-legend {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 12px !important;
    width: 100% !important;
    padding: 0 4px !important;
  }

  /* Legend items - compact pills */
  .distribution-legend .legend-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    font-size: 0.65rem !important;
    padding: 4px 10px !important;
    background: var(--bg) !important;
    border-radius: 30px !important;
    border: 1px solid var(--border-light) !important;
    flex-shrink: 0 !important;
  }

  /* Legend dots */
  .distribution-legend .dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  /* Legend values */
  .distribution-legend .legend-value {
    font-weight: 600 !important;
    margin-left: 2px !important;
    white-space: nowrap !important;
    font-size: 0.65rem !important;
  }

  /* Pie chart - smaller */
  .pie-chart {
    width: 120px !important;
    height: 120px !important;
    flex-shrink: 0;
  }
}

/* Mobile Portrait (below 640px) */
@media (max-width: 640px) {
  /* Payment Distribution Chart Card */
  .chart-card:last-child {
    padding: 14px !important;
  }

  /* Legend items - even smaller */
  .distribution-legend .legend-item {
    font-size: 0.6rem !important;
    padding: 3px 8px !important;
    gap: 3px !important;
  }

  .distribution-legend .legend-value {
    font-size: 0.6rem !important;
  }

  .distribution-legend .dot {
    width: 7px !important;
    height: 7px !important;
  }

  /* Pie chart - smaller */
  .pie-chart {
    width: 100px !important;
    height: 100px !important;
  }
}

/* Small Mobile (below 480px) */
@media (max-width: 480px) {
  /* Payment Distribution Chart Card */
  .chart-card:last-child {
    padding: 12px !important;
  }

  /* Legend items - very compact */
  .distribution-legend {
    gap: 6px 10px !important;
  }

  .distribution-legend .legend-item {
    font-size: 0.55rem !important;
    padding: 2px 6px !important;
    gap: 2px !important;
  }

  .distribution-legend .legend-value {
    font-size: 0.55rem !important;
  }

  .distribution-legend .dot {
    width: 6px !important;
    height: 6px !important;
  }

  /* Pie chart - smaller */
  .pie-chart {
    width: 90px !important;
    height: 90px !important;
  }
}

/* Very Small Mobile (below 380px) */
@media (max-width: 380px) {
  /* Legend items - ultra compact */
  .distribution-legend {
    gap: 5px 8px !important;
  }

  .distribution-legend .legend-item {
    font-size: 0.5rem !important;
    padding: 2px 5px !important;
    gap: 2px !important;
  }

  .distribution-legend .legend-value {
    font-size: 0.5rem !important;
  }

  .distribution-legend .dot {
    width: 5px !important;
    height: 5px !important;
  }

  /* Pie chart - smallest */
  .pie-chart {
    width: 80px !important;
    height: 80px !important;
  }
}

/* Extra Small Mobile (below 320px) */
@media (max-width: 320px) {
  .distribution-legend {
    gap: 4px 6px !important;
  }

  .distribution-legend .legend-item {
    font-size: 0.45rem !important;
    padding: 2px 4px !important;
  }

  .distribution-legend .legend-value {
    font-size: 0.45rem !important;
  }

  .distribution-legend .dot {
    width: 4px !important;
    height: 4px !important;
  }

  .pie-chart {
    width: 70px !important;
    height: 70px !important;
  }
}

/* Ensure Earnings Overview chart remains unchanged on mobile */
@media (max-width: 768px) {
  /* Keep Earnings Overview chart layout unchanged */
  .chart-card:first-child .chart-container {
    min-height: 250px;
  }

  .chart-card:first-child .chart-bars-container {
    height: 200px;
    gap: 8px;
  }

  .chart-card:first-child .chart-bar-group {
    min-width: 30px;
  }

  .chart-card:first-child .chart-label {
    font-size: 0.65rem;
  }
}

/* ========================================================================
   FIX: CENTER ADD PROJECT BUTTON ICON IN MY GALLERY SECTION
   ======================================================================== */

/* Target the specific Add Project button in the portfolio section */
.portfolio-header .portfolio-actions .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.portfolio-header .portfolio-actions .btn-primary i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Ensure consistent alignment on all screen sizes */
@media (max-width: 768px) {
  .portfolio-header .portfolio-actions .btn-primary {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ================================================================
   MOBILE FIXES — Android display issues
   ================================================================ */

/* Listing card action buttons — proper spacing on mobile */
@media (max-width: 480px) {
  .listing-actions {
    gap: 8px !important;
    padding-top: 12px !important;
  }

  .listing-actions .btn-outline {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  .listing-actions .btn-outline.danger {
    flex: 0 0 36px !important;
    padding: 8px !important;
  }

  /* Listing card badges — prevent overlap */
  .listing-badge,
  .listing-status-badge {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
  }

  /* Listing header with icon and count */
  .listings-header,
  .section-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* Modal fixes — prevent text selection from closing modal on mobile */
.modal-overlay .modal-content textarea,
.modal-overlay .modal-content input,
.modal-overlay .modal-content select {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* ================================================================
   MOBILE LISTING CARDS — Responsive action buttons & section headers
   ================================================================ */

/* Section header row: ensure button is always vertically centered with title */
.listings-section > div:first-child {
  align-items: center;
}

/* Listing action buttons: 3 in a row + delete icon aligned right */
.listing-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

.listing-actions .btn-outline.btn-sm {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
  justify-content: center !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Delete button — icon only, fixed small size, same row */
.listing-actions .btn-outline.btn-sm.danger {
  flex: 0 0 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  padding: 8px !important;
}

@media (max-width: 480px) {
  /* Stack Edit + Unpublish on one row, Media + Delete on second row */
  .listing-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .listing-actions .btn-outline.btn-sm {
    flex: unset !important;
    width: 100% !important;
    font-size: 0.75rem !important;
    padding: 10px 8px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
  }

  .listing-actions .btn-outline.btn-sm.danger {
    flex: unset !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Section headers (Services/Products with icon + count + ADD button) */
  .listings-section > div:first-child {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .listings-section .section-title-serif {
    font-size: 1.1rem !important;
    width: 100% !important;
  }

  .listings-section .section-badge {
    font-size: 0.7rem !important;
    padding: 2px 10px !important;
  }

  /* Services/Products grid single column on mobile */
  .services-grid,
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Listing card content padding */
  .listing-content {
    padding: 14px !important;
  }

  .listing-title {
    font-size: 1rem !important;
  }

  .listing-price {
    font-size: 1rem !important;
  }

  .listing-stats {
    font-size: 0.75rem !important;
    gap: 12px !important;
  }
}

/* ========================================================================
   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;
  }
}

/* ========================================================================
   TEAM ACTIVITY WIDGET
   ======================================================================== */
.team-activity-widget {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.team-activity-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.team-activity-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
.team-activity-subtitle {
  color: var(--text-muted, #888);
  font-size: 0.85rem;
}
.team-activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.team-activity-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--bg-secondary, #f8f9fa);
}
.team-activity-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary, #6366f1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.team-activity-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.team-activity-name {
  font-weight: 600;
  font-size: 0.9rem;
}
.team-activity-role {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}
.team-activity-times {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.team-activity-login,
.team-activity-logout {
  font-size: 0.78rem;
  color: var(--text-muted, #666);
}
.team-activity-login i {
  color: #22c55e;
  margin-right: 4px;
}
.team-activity-logout i {
  color: #ef4444;
  margin-right: 4px;
}
@media (max-width: 640px) {
  .team-activity-row {
    flex-wrap: wrap;
  }
  .team-activity-times {
    align-items: flex-start;
    width: 100%;
  }
}