/* VaultLister - Main Styles */
/* Nano CSS approach - minimal, performant styles */

/* ============================================
   CSS Variables / Design Tokens
   ============================================ */
:root {
    /* Colors - Primary */
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;
    --primary-900: #312e81;

    /* Colors - Gray */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Colors - Semantic */
    --success: #10b981;
    --success-light: #d1fae5;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --error: #ef4444;
    --error-light: #fee2e2;
    --info: #3b82f6;
    --info-light: #dbeafe;

    /* Colors - Blue (for comparison bars) */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;

    /* Colors - Green (for comparison bars) */
    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-300: #86efac;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;

    /* Colors - Success (extended palette) */
    --success-50: #f0fdf4;
    --success-100: #dcfce7;
    --success-200: #bbf7d0;
    --success-300: #86efac;
    --success-400: #4ade80;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;

    /* Colors - Error (extended palette) */
    --error-50: #fef2f2;
    --error-100: #fee2e2;
    --error-200: #fecaca;
    --error-300: #fca5a5;
    --error-400: #f87171;
    --error-500: #ef4444;
    --error-600: #dc2626;
    --error-700: #b91c1c;

    /* Platform Colors */
    --poshmark: #7f0353;
    --ebay: #e53238;
    --mercari: #4dc7ec;
    --depop: #ff2300;
    --grailed: #000000;
    --facebook: #1877f2;
    --etsy: #f56400;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Layout */
    --sidebar-width: 256px;
    --header-height: 64px;
    --max-content-width: 1400px;

    /* Semantic text colors */
    --text-secondary: var(--gray-500);
}

/* Dark Mode */
body.dark-mode {
    background-color: #4b5563 !important;
    color: #ffffff !important;

    --gray-50: #6b7280;
    --gray-100: #4b5563;
    --gray-200: #374151;
    --gray-300: #374151;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #ffffff;

    --text-secondary: #9ca3af;
}

body.dark-mode .sidebar,
body.dark-mode .header,
body.dark-mode .card {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode .sidebar-title,
body.dark-mode .page-title,
body.dark-mode .card-title,
body.dark-mode .nav-item,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode p, body.dark-mode span, body.dark-mode div,
body.dark-mode label, body.dark-mode td {
    color: #ffffff !important;
}

body.dark-mode .nav-item:hover {
    background: #4b5563 !important;
}

body.dark-mode .nav-item.active {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

body.dark-mode .nav-item.active:hover {
    background: #2563eb !important;
}

body.dark-mode .text-gray-500,
body.dark-mode .page-description {
    color: #d1d5db !important;
}

body.dark-mode .stat-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .stat-card-icon {
    background: var(--primary-600) !important;
    color: white !important;
}

body.dark-mode .stat-card-title {
    color: #d1d5db !important;
}

body.dark-mode .stat-card-value {
    color: #ffffff !important;
}

body.dark-mode .stat-card-change {
    color: inherit !important;
}

body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .form-textarea {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

body.dark-mode .form-input::placeholder,
body.dark-mode .form-textarea::placeholder {
    color: #9ca3af !important;
}

body.dark-mode .btn-secondary {
    background: #4b5563 !important;
    color: #ffffff !important;
    border-color: #6b7280 !important;
}

body.dark-mode .btn-ghost {
    color: #d1d5db !important;
}

body.dark-mode .btn-ghost:hover {
    background: #4b5563 !important;
}

body.dark-mode .table th {
    background: #1f2937 !important;
    color: #d1d5db !important;
}

body.dark-mode .table tbody tr:hover {
    background: #374151 !important;
}

body.dark-mode .badge-primary {
    background: var(--primary-400) !important;
    color: #000000 !important;
}

body.dark-mode .badge-success {
    background: #6ee7b7 !important;
    color: #000000 !important;
}

body.dark-mode .btn-ghost {
    color: #d1d5db !important;
}

body.dark-mode .btn-ghost:hover {
    background: #4b5563 !important;
}

/* Dark mode: White background, black text - ALREADY CORRECT */
body.dark-mode .table .btn-ghost {
    background: white !important;
    color: #000000 !important;
}

body.dark-mode .table .btn-ghost:hover:not(:disabled) {
    background: #f3f4f6 !important;  /* Light gray on hover */
    color: #000000 !important;
}

body.dark-mode .table .btn-ghost svg {
    color: #000000 !important;
    fill: currentColor !important;
    stroke: #000000 !important;
}

.table .btn-ghost svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

body.dark-mode .btn-danger {
    background: var(--error) !important;
    color: white !important;
}

body.dark-mode .btn-danger svg {
    stroke: white !important;
}

body.dark-mode .modal {
    background: #1f2937 !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: #374151 !important;
}

body.dark-mode .modal-title {
    color: #ffffff !important;
}

body.dark-mode .modal-close {
    color: #d1d5db !important;
}

body.dark-mode .modal-close:hover {
    color: #ffffff !important;
}

/* Dark mode - Template modal form fields */
body.dark-mode .modal .form-input,
body.dark-mode .modal .form-select,
body.dark-mode .modal .form-textarea,
body.dark-mode .modal input[type="text"],
body.dark-mode .modal input[type="number"],
body.dark-mode .modal textarea,
body.dark-mode .modal select {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

body.dark-mode .modal .form-input::placeholder,
body.dark-mode .modal .form-textarea::placeholder,
body.dark-mode .modal input::placeholder,
body.dark-mode .modal textarea::placeholder {
    color: #9ca3af !important;
}

body.dark-mode .modal .form-label,
body.dark-mode .modal label {
    color: #e5e7eb !important;
}

body.dark-mode .modal button:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-error):not(.btn-success):not(.btn-ghost):not(.modal-close) {
    color: #000000 !important;
}

body.dark-mode .modal button:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-error):not(.btn-success):not(.btn-ghost):not(.modal-close) svg {
    stroke: #000000 !important;
}

body.dark-mode #filter-menu {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #ffffff !important;
}

body.dark-mode #filter-menu h4 {
    color: #ffffff !important;
}

body.dark-mode #filter-menu label {
    color: #ffffff !important;
}

body.dark-mode #filter-menu span {
    color: #ffffff !important;
}

body.dark-mode #filter-menu button {
    color: #ffffff !important;
}

body.dark-mode #filter-menu select,
body.dark-mode #filter-menu input {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

body.dark-mode #active-filters-list {
    color: #ffffff !important;
}

body.dark-mode #active-filters-list > div {
    background: #374151 !important;
    color: #ffffff !important;
}

body.dark-mode #active-filters-list > div span {
    color: #ffffff !important;
}

body.dark-mode #active-filters-list button {
    color: #d1d5db !important;
}

body.dark-mode #active-filters-list button svg {
    stroke: #d1d5db !important;
}

body.dark-mode #active-filters-list button:hover {
    color: #ffffff !important;
}

body.dark-mode #active-filters-list button:hover svg {
    stroke: #ffffff !important;
}

#selection-menu {
    z-index: 1000 !important;
}

body.dark-mode #selection-menu {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode #selection-menu span {
    color: #ffffff !important;
}

/* Image Bank Dark Mode Fixes */
body.dark-mode .image-bank-sidebar {
    background: #374151 !important;
}

body.dark-mode .sidebar-header {
    border-color: #4b5563 !important;
}

body.dark-mode .sidebar-header h3 {
    color: #d1d5db !important;
}

body.dark-mode .folder-item {
    color: #e5e7eb !important;
}

body.dark-mode .folder-item:hover {
    background: #4b5563 !important;
}

body.dark-mode .folder-item.active {
    background: #4338ca !important;
    color: #ffffff !important;
}

body.dark-mode .folder-item .badge {
    background: #4b5563 !important;
    color: #d1d5db !important;
}

body.dark-mode .folder-item.active .badge {
    background: #6366f1 !important;
    color: #ffffff !important;
}

body.dark-mode .image-bank-main {
    background: #374151 !important;
}

body.dark-mode .image-bank-toolbar {
    border-color: #4b5563 !important;
    background: #1f2937 !important;
}

body.dark-mode .image-bank-toolbar .form-input,
body.dark-mode .image-bank-toolbar .form-select {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

body.dark-mode .image-bank-toolbar .form-input::placeholder {
    color: #9ca3af !important;
}

body.dark-mode .image-bank-toolbar .form-input:focus,
body.dark-mode .image-bank-toolbar .form-select:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

body.dark-mode .bulk-actions {
    background: #4b5563 !important;
}

body.dark-mode .bulk-actions .text-sm {
    color: #ffffff !important;
}

body.dark-mode .empty-state h3,
body.dark-mode .empty-state p {
    color: #e5e7eb !important;
}

body.dark-mode .image-card {
    background: #4b5563 !important;
    border-color: #6b7280 !important;
}

body.dark-mode .image-card:hover {
    border-color: #6366f1 !important;
}

body.dark-mode .image-card.selected {
    background: #4338ca !important;
    border-color: #6366f1 !important;
}

body.dark-mode .image-card-title {
    color: #ffffff !important;
}

body.dark-mode .image-card-meta {
    color: #d1d5db !important;
}

body.dark-mode .image-card-thumbnail {
    background: #374151 !important;
}

body.dark-mode .image-card-tags .tag {
    background: #374151;
    color: #9ca3af;
}

body.dark-mode .image-card-actions {
    background: #1f2937 !important;
    border-top-color: #4b5563 !important;
}

body.dark-mode .image-detail-preview {
    background: #374151 !important;
}

body.dark-mode .image-detail-meta {
    background: #1f2937 !important;
}

body.dark-mode .image-detail-meta strong {
    color: #9ca3af !important;
}

/* Dark mode - Search bar */
body.dark-mode .search-bar {
    background: #374151 !important;
}

body.dark-mode .search-bar input {
    color: #ffffff !important;
}

body.dark-mode .search-bar input::placeholder {
    color: #9ca3af !important;
}

body.dark-mode .search-bar svg {
    color: #9ca3af !important;
}

/* Dark mode - Icon buttons (grid/list view) */
body.dark-mode .btn-icon {
    color: #d1d5db !important;
    background: #374151 !important;
    border: 1px solid #6b7280 !important;
}

body.dark-mode .btn-icon:hover {
    background: #6b7280 !important;
    color: #ffffff !important;
}

body.dark-mode .btn-icon.active {
    background: var(--primary-600) !important;
    color: #ffffff !important;
    border-color: var(--primary-600) !important;
}

body.dark-mode .btn-icon svg {
    color: inherit !important;
}

/* Dark mode - Dropdown menu icons */
body.dark-mode .dropdown-item svg {
    color: #1f2937 !important;  /* Darker grey for better visibility */
}

body.dark-mode .user-menu .dropdown-item svg {
    color: #111827 !important;  /* Near-black for user menu icons */
}

/* Dark mode - Notifications page */
body.dark-mode .notification-list {
    background: #1f2937 !important;
}

body.dark-mode .notification-item {
    border-color: #374151 !important;
}

body.dark-mode .notification-item.unread {
    background: rgba(99, 102, 241, 0.1) !important;
}

body.dark-mode .notification-item.read {
    background: transparent !important;
}

body.dark-mode .notification-item [style*="font-weight: 600"] {
    color: #e5e7eb !important;
}

body.dark-mode .notification-item [style*="color: var(--gray-600)"] {
    color: #9ca3af !important;
}

body.dark-mode .notification-item [style*="color: var(--gray-400)"] {
    color: #6b7280 !important;
}

body.dark-mode .notification-item .btn-ghost {
    color: #9ca3af !important;
}

body.dark-mode .notification-item .btn-ghost:hover {
    background: #374151 !important;
    color: #ffffff !important;
}

/* Dark mode - Tabs (body.dark-mode override for [data-theme] rules) */
body.dark-mode .tabs {
    border-bottom-color: #374151 !important;
}

body.dark-mode .tab {
    color: #9ca3af !important;
}

body.dark-mode .tab:hover {
    color: #e5e7eb !important;
    background: #374151 !important;
}

body.dark-mode .tab.active {
    color: var(--primary-400) !important;
    border-bottom-color: var(--primary-400) !important;
}

/* Dark mode - Stock indicator badges (ensure text is always readable) */
body.dark-mode .badge-danger {
    background: #fecaca !important;
    color: #000000 !important;
}

body.dark-mode .badge-warning {
    background: #fde68a !important;
    color: #000000 !important;
}

/* Dark mode - Selection menu buttons */
body.dark-mode #selection-menu .btn-ghost {
    color: #e5e7eb !important;
}

body.dark-mode #selection-menu .btn-ghost:hover {
    background: #374151 !important;
    color: #ffffff !important;
}

body.dark-mode #selection-menu .btn-ghost svg {
    color: #e5e7eb !important;
    stroke: #e5e7eb !important;
}

body.dark-mode #selection-menu .btn-danger {
    background: var(--error) !important;
    color: white !important;
}

/* Dark mode - Form elements global */
body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .form-textarea,
body.dark-mode textarea.form-input {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

body.dark-mode .form-label {
    color: #d1d5db !important;
}

/* Dark mode - Card and page backgrounds */
body.dark-mode .card {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .card-header {
    border-color: #374151 !important;
}

body.dark-mode .page-title {
    color: #ffffff !important;
}

body.dark-mode .page-description {
    color: #9ca3af !important;
}

/* Dark mode - Orders status labels */
body.dark-mode .badge {
    color: #000000 !important;
}

body.dark-mode .badge-primary {
    background: var(--primary-400) !important;
    color: #000000 !important;
}

body.dark-mode .badge-gray {
    background: #6b7280 !important;
    color: #ffffff !important;
}

/* Dark mode - Crosslist buttons */
body.dark-mode .crosslist-method-btn,
body.dark-mode [onclick*="crosslist"] .btn-secondary {
    color: #ffffff !important;
}

/* Dark mode - Calendar grid */
body.dark-mode .calendar-grid td,
body.dark-mode .calendar-grid th {
    border-color: #374151 !important;
    color: #d1d5db !important;
}

body.dark-mode .calendar-grid {
    border-color: #374151 !important;
}

body.dark-mode .calendar-day {
    background: #1f2937 !important;
    color: #d1d5db !important;
}

body.dark-mode .calendar-day:hover {
    background: #374151 !important;
}

body.dark-mode .calendar-day.today {
    background: var(--primary-900) !important;
    color: #ffffff !important;
}

/* Dark mode - Size charts */
body.dark-mode .size-chart-table th {
    background: #374151 !important;
    color: #d1d5db !important;
}

body.dark-mode .size-chart-table td {
    background: #1f2937 !important;
    color: #d1d5db !important;
    border-color: #374151 !important;
}

/* Dark mode - Transactions filters */
body.dark-mode .transaction-filters select,
body.dark-mode .transaction-filters input {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

/* Dark mode - Text visibility fixes */
body.dark-mode .text-gray-500 {
    color: #9ca3af !important;
}

body.dark-mode .text-gray-600 {
    color: #9ca3af !important;
}

body.dark-mode .text-gray-700 {
    color: #d1d5db !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4 {
    color: #f3f4f6 !important;
}

body.dark-mode p {
    color: #d1d5db !important;
}

body.dark-mode .font-medium {
    color: #e5e7eb !important;
}

body.dark-mode .text-sm {
    color: #d1d5db !important;
}

body.dark-mode .text-xs {
    color: #9ca3af !important;
}

/* Dark mode - Dropdown menus */
body.dark-mode .dropdown-menu {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .dropdown-item {
    color: #d1d5db !important;
}

body.dark-mode .dropdown-item:hover {
    background: #374151 !important;
    color: #ffffff !important;
}

/* Dark mode - Table rows */
body.dark-mode .table td {
    color: #d1d5db !important;
    border-color: #374151 !important;
}

body.dark-mode .table tbody tr {
    border-color: #374151 !important;
}

/* Dark mode - Crosslist method buttons */
body.dark-mode .method-btn,
body.dark-mode [class*="crosslist"] .btn,
body.dark-mode .listing-method-btn {
    color: #ffffff !important;
}

body.dark-mode .method-btn svg,
body.dark-mode [class*="crosslist"] .btn svg,
body.dark-mode .listing-method-btn svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Dark mode - Crosslist template modal fields */
body.dark-mode .modal .form-group label {
    color: #d1d5db !important;
}

body.dark-mode .modal select,
body.dark-mode .modal input[type="text"],
body.dark-mode .modal input[type="number"],
body.dark-mode .modal input[type="date"],
body.dark-mode .modal input[type="password"],
body.dark-mode .modal input[type="email"],
body.dark-mode .modal textarea {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

/* Dark mode - Receipt parser upload area */
body.dark-mode .upload-zone,
body.dark-mode .upload-area,
body.dark-mode [class*="upload-zone"],
body.dark-mode [class*="drop-zone"] {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #d1d5db !important;
}

body.dark-mode .upload-zone *,
body.dark-mode .upload-area *,
body.dark-mode [class*="upload-zone"] *,
body.dark-mode [class*="drop-zone"] * {
    color: #d1d5db !important;
}

body.dark-mode .upload-zone svg,
body.dark-mode .upload-area svg,
body.dark-mode [class*="upload-zone"] svg,
body.dark-mode [class*="drop-zone"] svg {
    stroke: #9ca3af !important;
}

/* Dark mode - Size charts */
body.dark-mode .size-chart-container {
    color: #d1d5db !important;
}

body.dark-mode .size-chart-table {
    border-color: #374151 !important;
}

body.dark-mode .size-chart-table th {
    background: #374151 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
}

body.dark-mode .size-chart-table td {
    background: #1f2937 !important;
    color: #d1d5db !important;
    border-color: #374151 !important;
}

/* Image bank toolbar alignment */
.image-bank-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    gap: 12px !important;
}

.image-bank-toolbar .flex {
    align-items: center !important;
}

/* Dark mode - Calendar grid */
body.dark-mode .calendar-grid,
body.dark-mode .calendar-grid td,
body.dark-mode .calendar-grid th,
body.dark-mode [class*="calendar"] td,
body.dark-mode [class*="calendar"] th {
    border-color: #374151 !important;
    color: #d1d5db !important;
}

body.dark-mode [class*="calendar"] .day-number {
    color: #e5e7eb !important;
}

body.dark-mode [class*="calendar"] td[style*="background"] {
    background: #374151 !important;
}

/* Dark mode - Inventory selection popup buttons */
body.dark-mode #selection-menu .btn,
body.dark-mode .selection-popup .btn {
    border: 1px solid #9ca3af !important;
    color: #f3f4f6 !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Dark mode - Quick Cross List button text */
body.dark-mode .btn-crosslist,
body.dark-mode [onclick*="crossList"] .btn,
body.dark-mode .quick-crosslist-btn {
    color: #ffffff !important;
}

/* Dark mode - Shipped status badge (dark text on light background) */
body.dark-mode .badge-shipped,
body.dark-mode .badge[class*="shipped"],
body.dark-mode span[class*="shipped"] {
    color: #000000 !important;
    background: #86efac !important;
}

/* Dark mode - Calendar header row with day names */
body.dark-mode .calendar-header th,
body.dark-mode .calendar-days-header th,
body.dark-mode [class*="calendar"] thead th {
    background: #374151 !important;
    color: #e5e7eb !important;
}

/* Dark mode - Size chart tabs (inactive state) */
body.dark-mode .size-chart-tabs .tab:not(.active),
body.dark-mode .size-chart-categories button:not(.active) {
    color: #d1d5db !important;
    background: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode .size-chart-tabs .tab:not(.active):hover,
body.dark-mode .size-chart-categories button:not(.active):hover {
    background: #4b5563 !important;
    color: #ffffff !important;
}

/* Dark mode - Receipt parser dropzone */
body.dark-mode .receipt-dropzone,
body.dark-mode .receipt-upload-zone,
body.dark-mode [class*="receipt-dropzone"] {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode .receipt-dropzone *,
body.dark-mode .receipt-upload-zone *,
body.dark-mode [class*="receipt-dropzone"] * {
    color: #e5e7eb !important;
}

body.dark-mode .receipt-dropzone svg,
body.dark-mode .receipt-upload-zone svg,
body.dark-mode [class*="receipt-dropzone"] svg {
    stroke: #9ca3af !important;
}

body.dark-mode .receipt-dropzone-content {
    color: #e5e7eb !important;
}

body.dark-mode .receipt-dropzone-content h3 {
    color: #ffffff !important;
}

body.dark-mode .receipt-dropzone-content p {
    color: #9ca3af !important;
}

/* Dark mode - Inventory selected popup buttons (need visible border) */
body.dark-mode .inventory-actions-popup .btn,
body.dark-mode .bulk-actions-bar .btn,
body.dark-mode .selection-popup .btn {
    border: 1px solid #6b7280 !important;
}

body.dark-mode .inventory-actions-popup .btn:hover,
body.dark-mode .bulk-actions-bar .btn:hover,
body.dark-mode .selection-popup .btn:hover {
    border-color: #9ca3af !important;
}

/* Dark mode - Bulk action buttons in selection popup */
body.dark-mode .bulk-action-btn {
    border: 2px solid #d1d5db !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #f9fafb !important;
}

body.dark-mode .bulk-action-btn:hover {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode .bulk-action-btn.danger {
    border-color: var(--red-500) !important;
}

body.dark-mode .bulk-action-btn.danger:hover {
    background: var(--red-600) !important;
    border-color: var(--red-400) !important;
}

/* Dark mode - Quick Cross List image upload tabs */
body.dark-mode .tabs-header .tab-btn,
body.dark-mode .tabs-header button.tab-btn,
body.dark-mode .tabs-container .tabs-header .tab-btn {
    color: #ffffff !important;
    background: #4b5563 !important;
    border-radius: 6px 6px 0 0 !important;
}

body.dark-mode .tabs-header .tab-btn.active,
body.dark-mode .tabs-header button.tab-btn.active,
body.dark-mode .tabs-container .tabs-header .tab-btn.active {
    color: #93c5fd !important;
    background: #1f2937 !important;
    border-bottom-color: #93c5fd !important;
}

body.dark-mode .tabs-header .tab-btn:hover:not(.active),
body.dark-mode .tabs-header button.tab-btn:hover:not(.active) {
    background: #6b7280 !important;
    color: #ffffff !important;
}

body.dark-mode .tab-pane {
    background: #1f2937 !important;
}

body.dark-mode .dropzone {
    background: #374151 !important;
    border-color: #6b7280 !important;
    color: #e5e7eb !important;
}

body.dark-mode .dropzone p,
body.dark-mode .dropzone span {
    color: #e5e7eb !important;
}

/* Dark mode - Template modal fields */
body.dark-mode .template-modal .form-input,
body.dark-mode [class*="template"] .modal .form-input,
body.dark-mode .modal[data-modal-type="template"] input,
body.dark-mode .modal[data-modal-type="template"] textarea,
body.dark-mode .modal[data-modal-type="template"] select {
    background: #374151 !important;
    color: #ffffff !important;
    border-color: #4b5563 !important;
}

body.dark-mode .template-modal .form-input::placeholder,
body.dark-mode [class*="template"] .modal .form-input::placeholder {
    color: #9ca3af !important;
}

/* Dark mode - Template selection modal buttons */
body.dark-mode .modal-body button.text-left {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

body.dark-mode .modal-body button.text-left:hover {
    background: #4b5563 !important;
}

body.dark-mode .modal-body button.text-left .font-semibold {
    color: #ffffff !important;
}

body.dark-mode .modal-body button.text-left .text-gray-600,
body.dark-mode .modal-body button.text-left .text-gray-500 {
    color: #9ca3af !important;
}

body.dark-mode .modal-body .text-gray-500 {
    color: #9ca3af !important;
}

/* Dark mode - Input focus states in modals */
body.dark-mode .modal .form-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

/* Dark mode - Select a Template modal (enhanced) */
body.dark-mode .modal-body button.text-left .badge {
    color: #e5e7eb !important;
}

body.dark-mode .modal-body button.text-left .badge-gray {
    background: #4b5563 !important;
    color: #d1d5db !important;
}

body.dark-mode .modal-body button.text-left .badge-warning {
    background: #92400e !important;
    color: #fde68a !important;
}

/* Dark mode - Modal form selects */
body.dark-mode .modal .form-select {
    background: #374151 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
}

body.dark-mode .modal .form-select option {
    background: #374151;
    color: #e5e7eb;
}

/* Dark mode - Modal labels and text */
body.dark-mode .modal .form-label {
    color: #d1d5db !important;
}

body.dark-mode .modal .form-hint,
body.dark-mode .modal .text-xs {
    color: #9ca3af !important;
}

/* Dark mode - Dropzone in modals */
body.dark-mode .modal .dropzone,
body.dark-mode .dropzone {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #d1d5db !important;
}

body.dark-mode .dropzone p,
body.dark-mode .dropzone .dropzone-content {
    color: #d1d5db !important;
}

/* Image Bank - folder name alignment */
.folder-item .folder-item-label {
    text-align: left;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background-color: #f9fafb;
    overflow-x: hidden;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: #111827 !important;
    background-color: #f9fafb !important;
    min-height: 100vh;
    overflow-x: hidden;
}

/*
@media (prefers-color-scheme: dark) {
    body {
        color: var(--gray-100);
        background-color: var(--gray-900);
    }
}
*/

a {
    color: var(--primary-600);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    font-family: inherit;
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
    image-orientation: from-image;
}

/* ============================================
   Loading Screen
   ============================================ */
.loading-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-800) 100%);
    z-index: 9999;
    transition: opacity var(--transition-slow);
}

.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.loading-content {
    text-align: center;
    color: white;
}

.loading-logo {
    margin-bottom: var(--space-4);
    animation: pulse 2s infinite;
}

.loading-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--space-6);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    margin: 0 auto var(--space-4);
    animation: spin 1s linear infinite;
}

.loading-text {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

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

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

.btn-secondary .btn-spinner {
    border-color: rgba(0,0,0,0.2);
    border-top-color: var(--gray-700);
}

/* Generic spinner class for inline loading indicators */
.spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner.sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.spinner.lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

body.dark-mode .spinner {
    border-color: #374151;
    border-top-color: var(--primary-400);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   Accessibility - Focus Visible
   ============================================ */
:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}

.nav-item:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: -2px;
}

/* Icon buttons focus */
.btn-icon:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Input focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 0;
    border-color: var(--primary-500);
}

/* Cards and interactive elements */
.card:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Skip to main content link */
.skip-link,
.skip-nav {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-600);
    color: white;
    padding: 8px 16px;
    z-index: 10000;
    font-weight: 600;
    transition: top 0.2s;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}

.skip-link:focus,
.skip-nav:focus {
    top: 0;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   Layout - App Shell
   ============================================ */
.app-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: white;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform var(--transition-base);
}

/*
@media (prefers-color-scheme: dark) {
    .sidebar {
        background: var(--gray-800);
        border-color: var(--gray-700);
    }
}
*/

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }
}

/* Sidebar backdrop for mobile */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    transition: opacity 0.2s ease;
    opacity: 0;
}

@media (max-width: 1024px) {
    .sidebar-backdrop.active {
        display: block;
        opacity: 1;
    }
}

/* Sidebar collapse feature - fully hidden */
.sidebar-collapsed {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-right: none !important;
    transition: width 0.25s ease-in-out, padding 0.25s ease-in-out;
}

/* Smooth transition for non-collapsed sidebar */
.sidebar {
    transition: width 0.25s ease-in-out, padding 0.25s ease-in-out;
}

/* Hide all content when sidebar is collapsed */
.sidebar-collapsed .sidebar-title,
.sidebar-collapsed .nav-section-title,
.sidebar-collapsed .nav-item,
.sidebar-collapsed .nav-section,
.sidebar-collapsed .sidebar-header,
.sidebar-collapsed .sidebar-nav,
.sidebar-collapsed .user-info {
    display: none !important;
    visibility: hidden;
}

/* Keep only the expand button visible when collapsed */
.sidebar-collapsed .sidebar-footer {
    position: fixed;
    left: 0;
    bottom: 16px;
    padding: 0;
    z-index: 102;
    width: auto;
}

.sidebar-collapsed .sidebar-collapse-btn {
    position: fixed;
    left: 8px;
    bottom: 20px;
    right: auto;
    width: 32px;
    height: 32px;
    font-size: 16px;
    z-index: 102;
}

/* Adjust main content margin when collapsed */
.app-layout .sidebar-collapsed ~ .main-wrapper {
    margin-left: 0;
}

/* Collapse toggle button */
.sidebar-collapse-btn {
    position: absolute;
    bottom: 20px;
    right: -12px;
    width: 24px;
    height: 24px;
    background: var(--primary-500);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    z-index: 101;
    border: none;
}

body.dark-mode .sidebar-collapse-btn {
    border-color: var(--gray-800);
}

.sidebar-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sidebar-logo {
    width: 40px;
    height: 40px;
    background: var(--primary-600);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.sidebar-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #111827 !important;
}

.sidebar-nav {
    flex: 1;
    padding: var(--space-4) 0;
    overflow-y: auto;
}

/* Shop Quick-Switch in Sidebar */
.shop-quick-switch {
    padding: 8px 16px;
    border-bottom: 1px solid var(--gray-200);
}

.shop-switch-dropdown {
    position: relative;
}

.shop-switch-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.shop-switch-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

.shop-switch-current {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-switch-platform {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: 600;
}

.shop-switch-all {
    width: 22px;
    height: 22px;
    background: var(--primary-100);
    color: var(--primary-600);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-switch-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
}

.shop-switch-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px;
    z-index: 200;
    display: none;
}

.shop-switch-dropdown.open .shop-switch-menu {
    display: block;
}

.shop-switch-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 13px;
    color: var(--gray-700);
    text-align: left;
}

.shop-switch-item:hover {
    background: var(--gray-100);
}

.shop-switch-item.active {
    background: var(--primary-50);
    color: var(--primary-700);
}

.shop-switch-item .icon {
    margin-left: auto;
    color: var(--success);
}

.shop-switch-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 4px 0;
}

/* Dark mode for shop quick-switch */
body.dark-mode .shop-quick-switch {
    border-color: var(--gray-700);
}

body.dark-mode .shop-switch-btn {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .shop-switch-btn:hover {
    background: var(--gray-700);
    border-color: var(--gray-600);
}

body.dark-mode .shop-switch-name {
    color: var(--gray-200);
}

body.dark-mode .shop-switch-menu {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .shop-switch-item {
    color: var(--gray-200);
}

body.dark-mode .shop-switch-item:hover {
    background: var(--gray-700);
}

body.dark-mode .shop-switch-item.active {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-400);
}

body.dark-mode .shop-switch-divider {
    background: var(--gray-700);
}

/* Hide shop switcher when sidebar is collapsed */
.sidebar-collapsed .shop-quick-switch {
    display: none;
}

.nav-section {
    margin-bottom: var(--space-6);
}

.nav-section-title {
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280 !important;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.nav-item:hover {
    background: var(--gray-100);
    color: var(--gray-900);
    text-decoration: none;
}

.nav-item.active {
    background: var(--primary-50);
    color: var(--primary-700);
}

.nav-item-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.nav-item-badge {
    margin-left: auto;
    background: var(--error);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.nav-item-badge-warning {
    background: var(--warning);
    color: var(--gray-900);
}

.nav-item-badge-primary {
    background: var(--primary);
    color: white;
}

.nav-item-badge-info {
    background: var(--info, #3b82f6);
    color: white;
}

.nav-item-badge-success {
    background: var(--success);
    color: white;
}

.sidebar-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--gray-200);
}

/* Logout button — always in DOM / tab order, sits just below user info */
.sidebar-logout-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md, 6px);
    color: var(--gray-600);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sidebar-logout-btn:hover {
    background: var(--red-50, #fef2f2);
    border-color: var(--red-200, #fecaca);
    color: var(--red-600, #dc2626);
}

.sidebar-logout-btn:focus-visible {
    outline: 3px solid var(--primary-500);
    outline-offset: 2px;
}

/* Hide in collapsed state alongside .user-info */
.sidebar-collapsed .sidebar-logout-btn {
    display: none;
}

body.dark-mode .sidebar-logout-btn {
    border-color: var(--gray-700);
    color: var(--gray-400);
}

body.dark-mode .sidebar-logout-btn:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: var(--red-800, #991b1b);
    color: var(--red-400, #f87171);
}

/* Main Content */
/* .main-wrapper takes the flex-child role so <header> sits above <main>
   at the same DOM level — giving <header> its implicit role="banner" landmark. */
.main-wrapper {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

@media (max-width: 1024px) {
    .main-wrapper {
        margin-left: 0;
    }
}

/* Header */
.header {
    height: var(--header-height);
    background: white;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    padding: 0 var(--space-6);
    position: sticky;
    top: 0;
    z-index: 50;
}

/*
@media (prefers-color-scheme: dark) {
    .header {
        background: var(--gray-800);
        border-color: var(--gray-700);
    }
}
*/

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.menu-button {
    display: none;
    padding: var(--space-2);
    background: none;
    border: none;
    color: var(--gray-600);
}

@media (max-width: 1024px) {
    .menu-button {
        display: flex;
    }
}

.search-bar {
    display: flex;
    align-items: center;
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-4);
    width: 400px;
    max-width: 100%;
}

.search-bar input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: var(--font-size-sm);
    color: var(--gray-900);
}

.search-bar input:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: 4px;
}

.search-bar input::placeholder {
    color: var(--gray-500);
}

.header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.header-icon-btn {
    position: relative;
    padding: var(--space-2);
    background: none;
    border: none;
    color: var(--gray-600);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.header-icon-btn:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.header-icon-btn .badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    background: var(--error);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-100);
    color: var(--primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* Page Content */
.page-content {
    flex: 1;
    padding: var(--space-6);
    max-width: var(--max-content-width);
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.page-header {
    margin-bottom: var(--space-6);
}

.page-header.flex {
    flex-wrap: wrap;
    gap: var(--space-3);
}

.page-header.flex > .flex {
    flex-wrap: wrap;
}

/* Disable ALL transitions during window resize to prevent rubber-banding/flash. */
html.is-resizing,
html.is-resizing *,
html.is-resizing *::before,
html.is-resizing *::after {
    transition: none !important;
    animation-duration: 0s !important;
}

/* Lock desktop layout when zoom is active — prevents CSS breakpoint layout jumps.
   JS adds this class when viewport < 1100px so the page zooms smoothly instead
   of jumping between mobile/tablet/desktop layouts. */
html.desktop-lock .sidebar {
    transform: translateX(0) !important;
}
html.desktop-lock .sidebar-backdrop.active {
    display: none !important;
}
html.desktop-lock .main-wrapper {
    margin-left: var(--sidebar-width) !important;
}
html.desktop-lock .menu-button {
    display: none !important;
}
html.desktop-lock .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}
html.desktop-lock .dashboard-hero-today {
    flex-direction: row !important;
}
html.desktop-lock .today-stat {
    width: auto !important;
}
html.desktop-lock .dashboard-hero-greeting h1 {
    font-size: var(--font-size-2xl) !important;
}
html.desktop-lock .page-content {
    padding: var(--space-6) !important;
}
html.desktop-lock .card-header {
    flex-direction: row !important;
    align-items: center !important;
}
html.desktop-lock .platform-performance-items {
    flex-direction: row !important;
}
html.desktop-lock .page-header {
    flex-direction: row !important;
}
html.desktop-lock .mobile-bottom-nav {
    display: none !important;
}
html.desktop-lock .app-layout {
    flex-direction: row !important;
}
html.desktop-lock .sidebar {
    width: var(--sidebar-width) !important;
    transition: none !important;
}
html.desktop-lock .sidebar-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
html.desktop-lock .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}
html.desktop-lock .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}
html.desktop-lock .masonry-grid {
    column-count: 3 !important;
}
html.desktop-lock .main-wrapper {
    width: auto !important;
}
html.desktop-lock .settings-container {
    grid-template-columns: 240px 1fr !important;
}
html.desktop-lock .image-bank-container {
    grid-template-columns: 240px 1fr !important;
}
html.desktop-lock .performance-metrics-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}
html.desktop-lock .offers-insights-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}
html.desktop-lock .sidebar-backdrop {
    display: none !important;
}
/* Override 480px mobile-portrait rules */
html.desktop-lock .page-header-actions {
    flex-direction: row !important;
    width: auto !important;
}
html.desktop-lock .page-header-actions .btn {
    width: auto !important;
}
html.desktop-lock .filter-bar {
    flex-direction: row !important;
}
/* Override 768px hero-section rules (tools + business pages) */
html.desktop-lock .automations-hero-main,
html.desktop-lock .checklist-hero-greeting,
html.desktop-lock .shops-hero-main,
html.desktop-lock .shops-connection-status,
html.desktop-lock .transactions-hero-flow,
html.desktop-lock .financials-hero-main,
html.desktop-lock .calendar-hero-header,
html.desktop-lock .snapshot-header {
    flex-direction: row !important;
    text-align: start !important;
}
html.desktop-lock .automations-hero,
html.desktop-lock .checklist-hero,
html.desktop-lock .calendar-hero,
html.desktop-lock .size-charts-hero,
html.desktop-lock .image-bank-hero,
html.desktop-lock .shops-hero,
html.desktop-lock .transactions-hero,
html.desktop-lock .financials-hero,
html.desktop-lock .analytics-hero {
    padding: var(--space-6) !important;
}
html.desktop-lock .automations-hero-stats,
html.desktop-lock .checklist-hero-metrics,
html.desktop-lock .transactions-hero-metrics,
html.desktop-lock .financials-summary-grid,
html.desktop-lock .shops-hero-stats,
html.desktop-lock .snapshot-metrics {
    grid-template-columns: repeat(4, 1fr) !important;
}
html.desktop-lock .automations-categories {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}
html.desktop-lock .financials-insights {
    flex-direction: row !important;
}
html.desktop-lock .flow-connector {
    transform: none !important;
}
/* Override 768px resource/info page rules */
html.desktop-lock .help-stats-row,
html.desktop-lock .roadmap-progress-cards,
html.desktop-lock .help-options-grid,
html.desktop-lock .integrations-grid,
html.desktop-lock .tools-grid,
html.desktop-lock .feedback-actions-grid,
html.desktop-lock .contact-methods-grid,
html.desktop-lock .popular-articles-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}
html.desktop-lock .dashboard-hero-content {
    flex-direction: row !important;
    text-align: start !important;
}
html.desktop-lock .feedback-impact-dashboard,
html.desktop-lock .changelog-filters-bar,
html.desktop-lock .changelog-subscribe-cta {
    flex-direction: row !important;
}
html.desktop-lock .impact-arrow {
    transform: none !important;
}
html.desktop-lock .pipeline-connector {
    display: block !important;
}
html.desktop-lock .listings-platform-mini {
    margin-left: auto !important;
    margin-top: 0 !important;
    width: auto !important;
}
html.desktop-lock .subscribe-form {
    flex-direction: row !important;
    width: auto !important;
}
/* Override 768px touch-target, font-size, and layout rules */
html.desktop-lock .nav-item {
    min-height: unset !important;
}
html.desktop-lock .btn {
    min-height: unset !important;
    font-size: var(--font-size-sm) !important;
}
html.desktop-lock .form-select,
html.desktop-lock .form-input {
    min-height: unset !important;
    font-size: var(--font-size-sm) !important;
}
html.desktop-lock .stat-card {
    min-width: auto !important;
}
html.desktop-lock .stat-cards {
    flex-direction: row !important;
}
html.desktop-lock .quick-actions {
    flex-direction: row !important;
}
html.desktop-lock .quick-actions .btn {
    width: auto !important;
}
html.desktop-lock .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}
html.desktop-lock .main-content {
    padding: 0 !important;
}
html.desktop-lock .flex {
    flex-direction: row !important;
}

.page-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.page-description {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

/* ============================================
   Components - Cards
   ============================================ */
.card {
    background: white;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

/*
@media (prefers-color-scheme: dark) {
    .card {
        background: var(--gray-800);
        border-color: var(--gray-700);
    }
}
*/

.card-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-900);
}

.card-body {
    padding: var(--space-5);
}

.card-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* ============================================
   Components - Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;
}

.btn:disabled,
.btn.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: var(--primary-600);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-700);
}

.btn-secondary {
    background: white;
    color: var(--gray-700);
    border-color: var(--gray-300);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-danger {
    background: var(--error);
    color: white;
}

.btn-ghost {
    background: transparent;
    color: var(--gray-700);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--gray-100);
}

/* Light mode: Black background, white text */
.table .btn-ghost {
    background: #000000 !important;
    color: #ffffff !important;
}

.table .btn-ghost:hover:not(:disabled) {
    background: #1f2937 !important;  /* Slightly lighter gray on hover */
    color: #ffffff !important;
}

.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
}

.btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
}

.btn-icon {
    padding: var(--space-2);
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover {
    background: var(--gray-200);
    color: var(--gray-800);
    border-color: var(--gray-400);
}

.btn-icon.active {
    background: var(--primary-600);
    color: white;
    border-color: var(--primary-600);
}

.btn-icon.active:hover {
    background: var(--primary-700);
}

/* ============================================
   Components - Forms
   ============================================ */
.form-group {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: white;
    color: var(--gray-900);
    transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

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

.form-helper {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    margin-top: var(--space-1);
}

.form-error {
    color: var(--error);
}

/* ============================================
   Components - Tables
   ============================================ */
.table-container {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--gray-100);
}

.table th {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-600);
    background: var(--gray-50);
    position: sticky;
    top: 0;
    z-index: 1;
}

.table th:first-child {
    border-top-left-radius: var(--radius-lg);
}

.table th:last-child {
    border-top-right-radius: var(--radius-lg);
}

/* Alternating row colors */
.table tbody tr:nth-child(even) {
    background: var(--gray-50);
}

.table tbody tr:hover {
    background: var(--primary-50);
    transition: background 0.15s ease;
}

/* Row selection */
.table tbody tr.selected,
.table tbody tr.row-selected {
    background: var(--primary-50);
    border-left: 3px solid var(--primary-500);
}

.dark-mode .table tbody tr.selected,
.dark-mode .table tbody tr.row-selected {
    background: var(--primary-900);
}

/* Best offer highlight */
.table tbody tr.best-offer-row {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.1) 0%, transparent 50%);
    border-left: 3px solid #f59e0b;
}

.dark-mode .table tbody tr.best-offer-row {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.15) 0%, transparent 50%);
}

.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-lg);
}

.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-lg);
}

.table td:nth-child(3) {
    max-width: 250px;
    word-wrap: break-word;
    white-space: normal;
}

/* Table action buttons */
.table-actions {
    display: flex;
    gap: var(--space-1);
    opacity: 0.6;
    transition: opacity 0.15s;
}

.table tbody tr:hover .table-actions {
    opacity: 1;
}

.table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.15s;
}

.table-action-btn:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.table-action-btn.edit:hover {
    background: var(--primary-100);
    color: var(--primary-600);
}

.table-action-btn.delete:hover {
    background: var(--error-100);
    color: var(--error-600);
}

.table-action-btn.view:hover {
    background: var(--info-100);
    color: var(--info-600);
}

/* Sort indicator */
.table th.sortable {
    cursor: pointer;
    user-select: none;
}

.table th.sortable:hover {
    background: var(--gray-100);
}

.table th .sort-icon {
    margin-left: var(--space-1);
    opacity: 0.4;
    transition: opacity 0.15s;
}

.table th.sorted .sort-icon {
    opacity: 1;
    color: var(--primary-600);
}

/* Data density options */
.table.compact th,
.table.compact td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
}

.table.spacious th,
.table.spacious td {
    padding: var(--space-4) var(--space-5);
}

/* ============================================
   Components - Badges & Tags
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
}

.badge-primary {
    background: var(--primary-100);
    color: var(--primary-700);
}

.badge-success {
    background: var(--success-light);
    color: var(--success);
}

.badge-warning {
    background: var(--warning-light);
    color: var(--warning);
}

.badge-error {
    background: var(--error-light);
    color: var(--error);
}

.badge-gray {
    background: var(--gray-100);
    color: var(--gray-700);
}

/* Status badges - Force all text to be black for better readability on colored backgrounds */
.badge-primary,
.badge-success,
.badge-warning,
.badge-info {
    color: #000000 !important;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: var(--radius-md);
}

.tag-remove {
    cursor: pointer;
    opacity: 0.6;
}

.tag-remove:hover {
    opacity: 1;
}

/* ============================================
   Components - Tabs
   ============================================ */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 0;
}

.tab {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-600);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -1px;
}

.tab:hover {
    color: var(--gray-900);
    background: var(--gray-50);
}

.tab.active {
    color: var(--primary-600);
    border-bottom-color: var(--primary-600);
}

/* Dark mode tabs */
[data-theme="dark"] .tabs {
    border-bottom-color: var(--gray-700);
}

[data-theme="dark"] .tab {
    color: var(--gray-400);
}

[data-theme="dark"] .tab:hover {
    color: var(--gray-200);
    background: var(--gray-800);
}

[data-theme="dark"] .tab.active {
    color: var(--primary-400);
    border-bottom-color: var(--primary-400);
}

/* ============================================
   Components - Stats Cards
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.stat-card {
    background: white;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    padding: var(--space-5);
}

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.stat-card-title {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.stat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--gray-900);
}

.stat-card-change {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
}

.stat-card-change.positive {
    color: var(--success);
}

.stat-card-change.negative {
    color: var(--error);
}

/* ============================================
   Components - Platform Icons
   ============================================ */
.platform-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 700;
}

.platform-icon.poshmark { background: var(--poshmark); }
.platform-icon.ebay { background: var(--ebay); }
.platform-icon.mercari { background: var(--mercari); }
.platform-icon.depop { background: var(--depop); }
.platform-icon.grailed { background: var(--grailed); }
.platform-icon.facebook { background: var(--facebook); }
.platform-icon.etsy { background: var(--etsy); }

/* Platform logos (SVG-based) */
.platform-logo {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: white;
    padding: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.platform-logo:hover {
    transform: scale(1.1);
}

.platform-logo svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Dark mode adjustments */
body.dark-mode .platform-logo {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.dark-mode .platform-logo.grailed {
    background: white;
}

/* ============================================
   Components - Empty States
   ============================================ */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    position: relative;
}

.empty-state::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--primary-50) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    opacity: 0.5;
}

body.dark-mode .empty-state::before {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    color: var(--primary-400);
    position: relative;
    z-index: 1;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.empty-state-illustration {
    width: 180px;
    height: 140px;
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.empty-state-illustration svg {
    width: 100%;
    height: 100%;
}

.empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
    position: relative;
    z-index: 1;
}

.empty-state-description {
    color: var(--gray-600);
    margin-bottom: var(--space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.empty-state-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    position: relative;
    z-index: 1;
}

.empty-state-tip {
    margin-top: var(--space-8);
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--gray-200);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.empty-state-tip-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
}

.empty-state-tip-text {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    text-align: left;
}

/* Empty state variants */
.empty-state.compact {
    padding: var(--space-8) var(--space-4);
}

.empty-state.compact .empty-state-icon {
    width: 48px;
    height: 48px;
}

.empty-state.compact .empty-state-title {
    font-size: var(--font-size-base);
}

.empty-state.inline {
    padding: var(--space-6) var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--gray-200);
}

.empty-state.inline::before {
    display: none;
}

/* ============================================
   Components - Toasts (Enhanced)
   ============================================ */
.toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 420px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    pointer-events: auto;
    padding: var(--space-4);
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 320px;
    max-width: 420px;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.toast-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast.toast-success .toast-icon {
    background: var(--success-100);
    color: var(--success-600);
}

.toast.toast-error .toast-icon {
    background: var(--error-100);
    color: var(--error-600);
}

.toast.toast-warning .toast-icon {
    background: var(--warning-100);
    color: var(--warning-600);
}

.toast.toast-info .toast-icon {
    background: var(--info-100);
    color: var(--info-600);
}

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

.toast-message {
    font-weight: 500;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.4;
}

.toast-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.toast-action-btn {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.toast-action-btn.undo {
    background: var(--primary-100);
    color: var(--primary-700);
}

.toast-action-btn.undo:hover {
    background: var(--primary-200);
}

.toast-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 24px;
    height: 24px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.toast-close:hover {
    background: var(--gray-100);
    color: var(--gray-600);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--primary-500);
    animation: toastProgress linear forwards;
}

.toast.toast-success .toast-progress {
    background: var(--success-500);
}

.toast.toast-error .toast-progress {
    background: var(--error-500);
}

.toast.toast-warning .toast-progress {
    background: var(--warning-500);
}

/* Legacy border-left style support */
.toast.success {
    border-left: none;
}

.toast.error {
    border-left: none;
}

.toast.warning {
    border-left: none;
}

.toast.info {
    border-left: none;
}

.toast-exit {
    animation: toastSlideOut 0.2s ease-in forwards;
}

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

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

@keyframes toastProgress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Stacked toasts */
.toast-container .toast:nth-child(n+4) {
    opacity: 0;
    pointer-events: none;
}

.toast-container .toast:nth-child(3) {
    transform: scale(0.95) translateY(8px);
    opacity: 0.7;
}

.toast-container .toast:nth-child(2) {
    transform: scale(0.97) translateY(4px);
    opacity: 0.85;
}

body.dark-mode .toast {
    background: var(--gray-800) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .toast-message {
    color: var(--gray-100);
}

body.dark-mode .toast-close {
    color: var(--gray-500);
}

body.dark-mode .toast-close:hover {
    background: var(--gray-700);
    color: var(--gray-300);
}

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

/* ============================================
   Components - Modal
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: var(--space-4);
}

.modal {
    background: white;
    border-radius: var(--radius-xl);
    max-width: 600px;
    width: 95%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Modal size variants */
.modal.modal-sm {
    max-width: 400px;
}

.modal.modal-md {
    max-width: 560px;
}

.modal.modal-lg {
    max-width: 800px;
}

.modal.modal-xl {
    max-width: 1200px;
    width: 95%;
}

.modal.modal-fullscreen {
    max-width: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.modal-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.modal-close {
    padding: var(--space-1);
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body {
    padding: var(--space-5);
    overflow-y: auto;
}

.modal-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* ============================================
   Components - Dropdowns
   ============================================ */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-2);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
}

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

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--gray-100);
}

.dropdown-divider {
    height: 1px;
    background: var(--gray-200);
    margin: var(--space-2) 0;
}

/* Dark mode dropdown styles */
body.dark-mode .dropdown-menu {
    background: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .dropdown-item {
    background: transparent !important;
    color: #e5e7eb !important;
    margin: 2px 4px;
    border-radius: 6px;
}

body.dark-mode .dropdown-item:hover {
    background: #374151 !important;
    color: #ffffff !important;
}

body.dark-mode .dropdown-item svg {
    color: #9ca3af !important;
    stroke: #9ca3af !important;
}

body.dark-mode .dropdown-item:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

body.dark-mode .dropdown-divider {
    background: #374151 !important;
}

/* Dark mode dropdown header text */
body.dark-mode .dropdown-menu [style*="font-weight: 600"] {
    color: #9ca3af !important;
}

/* ============================================
   Utilities - Offline Indicator
   ============================================ */
.offline-indicator {
    position: fixed;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    background: var(--warning);
    color: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    z-index: 1000;
}

/* ============================================
   Utilities - Voice Indicator
   ============================================ */
.voice-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    z-index: 1000;
}

body.dark-mode .voice-indicator {
    background: #1f2937;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.voice-pulse {
    width: 80px;
    height: 80px;
    background: var(--primary-500);
    border-radius: 50%;
    animation: voicePulse 1.5s infinite;
}

@keyframes voicePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

/* ============================================
   Utilities - Hidden
   ============================================ */
.hidden {
    display: none !important;
}

/* ============================================
   Utilities - Flex & Grid
   ============================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================
   Utilities - Spacing
   ============================================ */
.m-0 { margin: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.ml-auto { margin-left: auto; }

.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }

/* ============================================
   Utilities - Text
   ============================================ */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

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

.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-900 { color: var(--gray-900); }
.text-primary { color: var(--primary-600); }
.text-success { color: var(--success) !important; }
.text-error { color: var(--error) !important; }
.text-green-600 { color: #16a34a !important; }
.text-red-600 { color: #dc2626 !important; }
.text-blue-500 { color: #3b82f6 !important; }
.text-warning { color: var(--warning, #d97706) !important; }

/* Dark mode profit/status colors - must override table/text-xs rules */
body.dark-mode .text-green-600,
body.dark-mode .table .text-green-600,
body.dark-mode td .text-green-600 { color: #4ade80 !important; }

body.dark-mode .text-red-600,
body.dark-mode .table .text-red-600,
body.dark-mode td .text-red-600 { color: #f87171 !important; }

body.dark-mode .text-success,
body.dark-mode .table .text-success,
body.dark-mode td .text-success { color: #4ade80 !important; }

body.dark-mode .text-error,
body.dark-mode .table .text-error,
body.dark-mode td .text-error { color: #f87171 !important; }

body.dark-mode .text-warning,
body.dark-mode .table .text-warning,
body.dark-mode td .text-warning { color: #fbbf24 !important; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   Responsive
   ============================================ */
/* ============================================
   Charts
   ============================================ */

.line-chart,
.bar-chart {
    overflow: visible;
}

.chart-dot {
    cursor: pointer;
    transition: r 0.2s;
}

.chart-dot:hover {
    r: 6;
}

.chart-bar {
    cursor: pointer;
    transition: opacity 0.2s;
}

.chart-bar:hover {
    opacity: 0.8;
}

.chart-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--gray-500);
    font-size: 14px;
}

body.dark-mode .line-chart text,
body.dark-mode .bar-chart text {
    fill: var(--gray-400);
}

body.dark-mode .line-chart line,
body.dark-mode .bar-chart line {
    stroke: var(--gray-700);
}

/* Pie chart styles */
.pie-chart {
    overflow: visible;
}

.chart-slice {
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.chart-slice:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

body.dark-mode .pie-chart text {
    fill: var(--gray-400);
}

/* Chart type toggle */
.chart-type-toggle {
    display: flex;
    gap: 4px;
}

.chart-type-toggle .btn {
    padding: 4px 10px;
    font-size: 12px;
}

/* ============================================
   Dropzone & Media Upload
   ============================================ */

.dropzone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--gray-50);
}

.dropzone:hover {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.dropzone.dragover {
    border-color: var(--primary-600);
    background: var(--primary-100);
    transform: scale(1.02);
}

.dropzone-content {
    color: var(--gray-600);
    pointer-events: none;
}

.dropzone-content svg {
    margin: 0 auto;
    color: var(--primary-500);
}

body.dark-mode .dropzone {
    border-color: var(--gray-600);
    background: var(--gray-800);
}

body.dark-mode .dropzone:hover {
    border-color: var(--primary-400);
    background: var(--gray-700);
}

body.dark-mode .dropzone.dragover {
    border-color: var(--primary-500);
    background: var(--gray-700);
}

body.dark-mode .dropzone-content {
    color: #e5e7eb !important;
}

body.dark-mode .dropzone-content p {
    color: #e5e7eb !important;
}

body.dark-mode .dropzone-content svg {
    stroke: #d1d5db !important;
    color: #d1d5db !important;
}

/* Dark mode - Cross-list image upload tab buttons */
body.dark-mode .tabs-container .tab-btn {
    color: #ffffff !important;
    background: rgba(255,255,255,0.05) !important;
}

body.dark-mode .tabs-container .tab-btn.active {
    color: var(--primary-400) !important;
    border-bottom-color: var(--primary-400) !important;
    background: rgba(255,255,255,0.1) !important;
}

body.dark-mode .tabs-container .tabs-header {
    border-bottom-color: #4b5563 !important;
}

body.dark-mode .tab-pane {
    background: #1f2937 !important;
    color: #e5e7eb !important;
}

body.dark-mode .tab-pane p {
    color: #9ca3af !important;
}

body.dark-mode .tab-pane input {
    background: #374151 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
}

.media-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.media-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--gray-200);
    background: var(--gray-100);
}

.media-preview-item img,
.media-preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-preview-item .media-label {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.media-remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--error);
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s;
    padding: 0;
}

.media-remove-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

body.dark-mode .media-preview-item {
    border-color: var(--gray-600);
    background: var(--gray-700);
}

@media (max-width: 768px) {
    .page-content {
        padding: var(--space-4);
    }

    .stats-grid {
        grid-template-columns: 1fr !important;  /* Stack all stat cards */
    }

    .table-container {
        overflow-x: auto;  /* Allow horizontal scroll for tables */
        -webkit-overflow-scrolling: touch;
    }

    .card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }

    .card-header .flex {
        width: 100%;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    .page-header .flex {
        width: 100%;
        flex-direction: column;
    }

    .grid {
        grid-template-columns: 1fr !important;  /* Stack all grid items */
    }

    .modal {
        max-width: 95%;  /* Wider modals on mobile */
        margin: 20px;
    }

    /* Make form inputs full width on mobile */
    .form-group {
        margin-bottom: 16px;
    }

    .grid.grid-cols-2,
    .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    .hide-mobile {
        display: none;
    }

    .media-preview-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .dropzone {
        padding: 20px;
    }

    .media-preview-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    .table {
        font-size: 13px;
    }
}

/* ============================================
   Image Bank Styles
   ============================================ */

.image-bank-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1.5rem;
    height: calc(100vh - 300px);
    min-height: 500px;
}

.image-bank-sidebar {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    overflow-y: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.sidebar-header h3 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b7280;
}

.folder-tree {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.folder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.875rem;
    color: #374151;
    gap: 8px;
}

.folder-item-label {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-item:hover {
    background: #f3f4f6;
}

.folder-item.active {
    background: #ede9fe;
    color: #6366f1;
    font-weight: 500;
}

.folder-item .badge {
    background: #e5e7eb;
    color: #6b7280;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
}

.folder-item.active .badge {
    background: #c7d2fe;
    color: #6366f1;
}

.image-bank-main {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    overflow-y: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.image-bank-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.image-bank-toolbar .form-input {
    flex: 0 0 auto;
}

.bulk-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border-radius: 6px;
}

.bulk-actions .text-sm {
    font-weight: 500;
    color: #374151;
}

/* Image Grid View */
.image-bank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.image-card {
    position: relative;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
}

.image-card:hover {
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

.image-card.selected {
    border-color: #6366f1;
    background: #ede9fe;
}

.image-card-checkbox {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 10;
}

.image-card-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.image-card-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: #f3f4f6;
    cursor: pointer;
    overflow: hidden;
}

.image-card-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.image-card:hover .image-card-thumbnail img {
    transform: scale(1.05);
}

.image-card-info {
    padding: 0.75rem;
}

.image-card-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.image-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.image-card-tags .tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: #e5e7eb;
    color: #6b7280;
    border-radius: 4px;
    font-size: 0.75rem;
}

.image-card-actions {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.image-card-actions .btn {
    flex: 1;
}

/* Image List View */
.image-bank-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.image-bank-list .image-card {
    display: grid;
    grid-template-columns: auto 80px 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
}

.image-bank-list .image-card-thumbnail {
    width: 80px;
    height: 80px;
    padding-top: 0;
}

.image-bank-list .image-card-info {
    padding: 0;
}

.image-bank-list .image-card-actions {
    border: none;
    background: transparent;
    padding: 0;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

/* Image Detail Modal */
.image-detail-modal {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 2rem;
    max-height: 80vh;
}

.image-detail-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 2rem;
    overflow: hidden;
}

.image-detail-preview img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 4px;
}

.image-detail-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.image-detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 0.875rem;
}

.image-detail-meta strong {
    color: #6b7280;
    font-weight: 500;
}

.image-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ============================================
   Photo Editor Styles
   ============================================ */

.photo-editor {
    width: 100%;
    max-width: 1400px;
    height: 85vh;
    display: flex;
    flex-direction: column;
}

.photo-editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.photo-editor-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    flex: 1;
    overflow: hidden;
}

.photo-editor-sidebar {
    background: white;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    padding: 1rem;
}

.editor-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.editor-section:last-child {
    border-bottom: none;
}

.editor-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.dark-mode .editor-section-title {
    color: #d1d5db;
}

.editor-tools {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.editor-tools .btn {
    justify-content: flex-start;
    text-align: left;
}

.editor-control {
    margin-bottom: 1rem;
}

.editor-control label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.editor-control input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #e5e7eb;
    outline: none;
    -webkit-appearance: none;
}

.editor-control input[type="range"]:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 4px;
}

.editor-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #6366f1;
    cursor: pointer;
    transition: background 0.15s;
}

.editor-control input[type="range"]::-webkit-slider-thumb:hover {
    background: #4f46e5;
}

.editor-control input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #6366f1;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}

.editor-control input[type="range"]::-moz-range-thumb:hover {
    background: #4f46e5;
}

body.dark-mode .editor-control input[type="range"] {
    background: #4b5563;
}

.photo-editor-canvas-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1f2937;
    padding: 2rem;
    overflow: auto;
}

#photo-editor-canvas {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

/* Responsive Adjustments for Image Bank */
@media (max-width: 1024px) {
    .image-bank-container {
        grid-template-columns: 200px 1fr;
    }

    .image-bank-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .image-detail-modal {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .image-bank-container {
        grid-template-columns: 1fr;
    }

    .image-bank-sidebar {
        max-height: 200px;
    }

    .image-bank-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .photo-editor-container {
        grid-template-columns: 1fr;
    }

    .photo-editor-sidebar {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        max-height: 250px;
    }

    .photo-editor {
        height: 95vh;
    }
}

/* ============================================
   Chat Widget Styles
   ============================================ */

#chat-widget-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.chat-widget-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    border: none;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-widget-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.5);
}

.chat-widget-button.active {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.chat-widget-modal {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 400px;
    height: 600px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

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

.chat-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
}

.chat-widget-header-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chat-widget-avatar {
    font-size: 2rem;
}

.chat-widget-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.chat-widget-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.chat-widget-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-message {
    display: flex;
    gap: 0.75rem;
    animation: fadeIn 0.3s ease;
}

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

.chat-message.user {
    flex-direction: row-reverse;
}

.chat-message-avatar {
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-message-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 75%;
}

.chat-message.user .chat-message-content {
    align-items: flex-end;
}

.chat-message-bubble {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 0.875rem;
    line-height: 1.5;
}

.chat-message.user .chat-message-bubble {
    background: #6366f1;
    color: white;
}

.chat-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chat-quick-action-btn {
    padding: 0.5rem 1rem;
    background: #ede9fe;
    color: #6366f1;
    border: 1px solid #c7d2fe;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-quick-action-btn:hover {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

.chat-message-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.chat-rate-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
}

.chat-rate-btn:hover {
    opacity: 1;
    transform: scale(1.2);
}

.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 0.5rem 0;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6b7280;
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-10px);
    }
}

.chat-widget-input {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    background: white;
    border-top: 1px solid #e5e7eb;
}

.chat-widget-input textarea {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    resize: none;
    font-family: inherit;
    max-height: 100px;
}

.chat-widget-input textarea:focus {
    outline: none;
    border-color: #6366f1;
}

.chat-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6366f1;
    color: white;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-send-btn:hover {
    background: #4f46e5;
    transform: scale(1.05);
}

.chat-send-btn:active {
    transform: scale(0.95);
}

/* Dark Mode Support */
.dark-mode .chat-widget-modal {
    background: #1f2937;
}

.dark-mode .chat-messages {
    background: #111827;
}

.dark-mode .chat-message-bubble {
    background: #374151;
    color: #f3f4f6;
}

.dark-mode .chat-message.user .chat-message-bubble {
    background: #6366f1;
    color: white;
}

.dark-mode .chat-widget-input {
    background: #1f2937;
    border-top-color: #374151;
}

.dark-mode .chat-widget-input textarea {
    background: #374151;
    color: #f3f4f6;
    border-color: #4b5563;
}

.dark-mode .chat-quick-action-btn {
    background: #374151;
    color: #a5b4fc;
    border-color: #4b5563;
}

.dark-mode .chat-quick-action-btn:hover {
    background: #6366f1;
    color: white;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .chat-widget-modal {
        width: calc(100vw - 40px);
        height: calc(100vh - 120px);
        max-height: 600px;
    }

    .chat-message-content {
        max-width: 85%;
    }
}

/* ============================================
   Community Styles
   ============================================ */

.community-posts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.community-post-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s;
}

.community-post-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.post-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.post-meta {
    font-size: 0.875rem;
    color: #6b7280;
}

.post-content-preview {
    color: #374151;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.post-tags {
    display: flex;
    gap: 0.5rem;
}

.post-detail-content {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.success-details {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

body.dark-mode .success-details {
    background: rgba(5, 150, 105, 0.1) !important;
    border-color: #065f46 !important;
}

.post-reactions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.reaction-btn {
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reaction-btn:hover {
    background: #e5e7eb;
}

.reaction-btn.active {
    background: #ede9fe;
    border-color: #6366f1;
    color: #6366f1;
}

.reaction-btn .count {
    font-weight: 600;
}

.post-replies {
    margin-top: 2rem;
}

.reply-item {
    padding: 1rem;
    background: #f9fafb;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.reply-author {
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

body.dark-mode .reply-author {
    color: #f3f4f6;
}

.reply-date {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.reply-content {
    color: #374151;
    line-height: 1.6;
}

body.dark-mode .reply-content {
    color: #d1d5db;
}

.reply-form {
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 6px;
    transition: all 0.2s;
}

.leaderboard-item:hover {
    background: #f3f4f6;
}

.leaderboard-rank {
    font-size: 1.5rem;
    font-weight: 700;
    min-width: 50px;
    text-align: center;
}

.leaderboard-rank.top-3 {
    font-size: 2rem;
}

.leaderboard-user {
    flex: 1;
}

.leaderboard-score {
    text-align: center;
}

/* Dark Mode */
.dark-mode .community-post-card {
    background: #1f2937;
}

.dark-mode .post-title {
    color: #f3f4f6;
}

.dark-mode .post-content-preview {
    color: #d1d5db;
}

.dark-mode .reaction-btn {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.dark-mode .reaction-btn:hover {
    background: #4b5563;
}

.dark-mode .reply-item {
    background: #374151;
}

.dark-mode .leaderboard-item {
    background: #1f2937;
}

.dark-mode .leaderboard-item:hover {
    background: #374151;
}

/* ============================================
   Checklist Items
   ============================================ */
.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s;
}

.checklist-item:hover {
    background: var(--gray-50);
}

.checklist-item.completed {
    opacity: 0.6;
}

.checklist-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checklist-item .flex-1 {
    flex: 1;
}

.checklist-actions {
    display: flex;
    gap: 4px;
}

/* Dark mode */
.dark-mode .checklist-item {
    border-color: #4b5563;
}

.dark-mode .checklist-item:hover {
    background: #374151;
}

.dark-mode .checklist-item.completed {
    opacity: 0.5;
}

/* Checklist Subtasks */
.checklist-item-wrapper {
    position: relative;
}

.checklist-item-wrapper.subtask {
    margin-left: 32px;
}

.checklist-item.has-subtasks {
    padding-left: 8px;
}

.subtask-expand-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.subtask-expand-btn:hover {
    background: var(--gray-200);
    color: var(--gray-600);
}

.subtask-progress {
    display: inline-block;
    width: 60px;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 6px;
}

.subtask-progress-bar {
    height: 100%;
    background: var(--success);
    border-radius: 2px;
    transition: width 0.3s;
}

.subtask-count {
    color: var(--gray-500);
    font-size: 11px;
}

.subtasks-list {
    margin-top: 4px;
    padding-left: 16px;
    border-left: 2px solid var(--gray-200);
    margin-left: 20px;
}

.subtasks-list .checklist-item {
    padding: 8px 12px;
    font-size: 13px;
}

.subtasks-list .checklist-item .font-medium {
    font-weight: 500;
}

.subtask-parent-info {
    background: var(--gray-50);
    padding: 12px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Subtasks - Dark Mode */
.dark-mode .subtask-expand-btn {
    color: var(--gray-500);
}

.dark-mode .subtask-expand-btn:hover {
    background: var(--gray-700);
    color: var(--gray-300);
}

.dark-mode .subtask-progress {
    background: var(--gray-700);
}

.dark-mode .subtasks-list {
    border-color: var(--gray-700);
}

.dark-mode .subtask-parent-info {
    background: var(--gray-800);
}

/* ============================================
   Vault Buddy - Floating Chat Button & Modal
   ============================================ */

/* Floating button */
.vault-buddy-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vault-buddy-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5);
}

.vault-buddy-fab svg {
    width: 28px;
    height: 28px;
    color: white;
}

.vault-buddy-fab .buddy-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

body.dark-mode .vault-buddy-fab .buddy-avatar {
    background: #374151;
}

/* Chat Modal */
.vault-buddy-modal {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 380px;
    height: 550px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    z-index: 999;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.vault-buddy-modal.open {
    display: flex;
}

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

/* Modal Header */
.vault-buddy-header {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vault-buddy-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vault-buddy-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.vault-buddy-header-info h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.vault-buddy-header-info span {
    font-size: 12px;
    opacity: 0.9;
}

.vault-buddy-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.vault-buddy-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.vault-buddy-close svg {
    width: 18px;
    height: 18px;
    color: white;
}

/* Tab Navigation */
.vault-buddy-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
}

.vault-buddy-tab {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-500);
    transition: all 0.2s;
}

.vault-buddy-tab:hover {
    color: var(--primary-500);
    background: var(--gray-50);
}

.vault-buddy-tab.active {
    color: var(--primary-600);
    border-bottom-color: var(--primary-600);
}

/* Tab Content */
.vault-buddy-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.vault-buddy-tab-content {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

.vault-buddy-tab-content.active {
    display: flex;
}

/* Home Tab - Start New Chat */
.vault-buddy-home {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

.vault-buddy-home-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-200) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin-bottom: 16px;
}

.vault-buddy-home h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: var(--gray-900);
}

.vault-buddy-home p {
    margin: 0 0 20px 0;
    color: var(--gray-600);
    font-size: 14px;
}

.vault-buddy-start-btn {
    background: var(--primary-600);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.vault-buddy-start-btn:hover {
    background: var(--primary-700);
}

/* My Chats Tab - Conversation List */
.vault-buddy-chats {
    flex: 1;
    overflow-y: auto;
}

.vault-buddy-chat-item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background 0.2s;
}

.vault-buddy-chat-item:hover {
    background: var(--gray-50);
}

.vault-buddy-chat-item h5 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
}

.vault-buddy-chat-item p {
    margin: 0;
    font-size: 13px;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vault-buddy-chat-item-time {
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 4px;
}

.vault-buddy-no-chats {
    padding: 40px 20px;
    text-align: center;
    color: var(--gray-500);
}

/* Chat View */
.vault-buddy-chat-view {
    display: none;
    flex-direction: column;
    height: 100%;
}

.vault-buddy-chat-view.active {
    display: flex;
}

.vault-buddy-chat-back {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
    color: var(--primary-600);
}

.vault-buddy-chat-back:hover {
    background: var(--gray-50);
}

.vault-buddy-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vault-buddy-message {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.vault-buddy-message.user {
    background: var(--primary-600);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.vault-buddy-message.assistant {
    background: var(--gray-100);
    color: var(--gray-900);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.vault-buddy-message-time {
    font-size: 10px;
    opacity: 0.7;
    margin-top: 4px;
}

/* Quick Actions */
.vault-buddy-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.vault-buddy-quick-action {
    background: white;
    border: 1px solid var(--primary-300);
    color: var(--primary-600);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.vault-buddy-quick-action:hover {
    background: var(--primary-50);
    border-color: var(--primary-400);
}

/* Input Area */
.vault-buddy-input {
    padding: 16px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: 8px;
}

.vault-buddy-input input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 24px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.vault-buddy-input input:focus {
    border-color: var(--primary-500);
}

.vault-buddy-input button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-600);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.vault-buddy-input button:hover {
    background: var(--primary-700);
}

.vault-buddy-input button svg {
    width: 20px;
    height: 20px;
    color: white;
}

/* Loading indicator */
.vault-buddy-typing {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: var(--gray-100);
    border-radius: 12px;
    align-self: flex-start;
    width: fit-content;
}

.vault-buddy-typing span {
    width: 8px;
    height: 8px;
    background: var(--gray-400);
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.vault-buddy-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.vault-buddy-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

/* Dark mode */
.dark-mode .vault-buddy-modal {
    background: #1f2937;
}

.dark-mode .vault-buddy-tabs {
    border-bottom-color: #374151;
}

.dark-mode .vault-buddy-tab {
    color: #9ca3af;
}

.dark-mode .vault-buddy-tab:hover {
    background: #374151;
}

.dark-mode .vault-buddy-tab.active {
    color: var(--primary-400);
    border-bottom-color: var(--primary-400);
}

.dark-mode .vault-buddy-home h4 {
    color: #f3f4f6;
}

.dark-mode .vault-buddy-home p {
    color: #9ca3af;
}

.dark-mode .vault-buddy-chat-item {
    border-bottom-color: #374151;
}

.dark-mode .vault-buddy-chat-item:hover {
    background: #374151;
}

.dark-mode .vault-buddy-chat-item h5 {
    color: #f3f4f6;
}

.dark-mode .vault-buddy-chat-item p {
    color: #9ca3af;
}

.dark-mode .vault-buddy-no-chats {
    color: #9ca3af;
}

.dark-mode .vault-buddy-chat-back {
    border-bottom-color: #374151;
}

.dark-mode .vault-buddy-chat-back:hover {
    background: #374151;
}

.dark-mode .vault-buddy-message.assistant {
    background: #374151;
    color: #f3f4f6;
}

.dark-mode .vault-buddy-input {
    border-top-color: #374151;
}

.dark-mode .vault-buddy-input input {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

.dark-mode .vault-buddy-input input:focus {
    border-color: var(--primary-400);
}

.dark-mode .vault-buddy-typing {
    background: #374151;
}

.dark-mode .vault-buddy-typing span {
    background: #6b7280;
}

.dark-mode .vault-buddy-quick-action {
    background: #374151;
    border-color: var(--primary-400);
    color: var(--primary-300);
}

.dark-mode .vault-buddy-quick-action:hover {
    background: #4b5563;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .vault-buddy-fab {
        bottom: 16px;
        right: 16px;
        width: 56px;
        height: 56px;
    }

    .vault-buddy-modal {
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

/* ============================================
   Photo Editor (Cloudinary AI)
   ============================================ */

/* AI Edit button in Image Bank cards */
.btn-ai-edit {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

.btn-ai-edit:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    transform: scale(1.05);
}

.ai-sparkle {
    font-size: 14px;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* Photo Editor Overlay */
.photo-editor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

/* Photo Editor Modal */
.photo-editor-modal {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.photo-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.photo-editor-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.photo-editor-header .btn-icon {
    color: white;
    opacity: 0.8;
}

.photo-editor-header .btn-icon:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* Setup Notice (Cloudinary not configured) */
.photo-editor-setup {
    padding: 48px 24px;
    text-align: center;
}

.photo-editor-setup .setup-icon {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--gray-400);
}

.photo-editor-setup h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    color: var(--gray-800);
}

.photo-editor-setup > p {
    color: var(--gray-600);
    margin-bottom: 24px;
}

.photo-editor-setup .setup-steps {
    text-align: left;
    background: var(--gray-50);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.photo-editor-setup .setup-steps ol {
    margin: 0;
    padding-left: 20px;
}

.photo-editor-setup .setup-steps li {
    margin-bottom: 12px;
    color: var(--gray-700);
}

.photo-editor-setup .setup-steps code {
    display: block;
    background: var(--gray-800);
    color: var(--gray-100);
    padding: 12px;
    border-radius: 6px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.6;
}

/* Photo Editor Body */
.photo-editor-body {
    display: flex;
    gap: 24px;
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.photo-editor-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.photo-editor-original,
.photo-editor-preview {
    flex: 1;
}

.photo-editor-original h4,
.photo-editor-preview h4 {
    margin: 0 0 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
}

.photo-editor-img-container {
    position: relative;
    background: var(--gray-100);
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-editor-img-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.photo-editor-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    color: var(--primary-600);
}

/* Photo Editor Controls */
.photo-editor-controls {
    width: 280px;
    flex-shrink: 0;
}

.photo-editor-upload-notice {
    background: var(--warning-light);
    border: 1px solid var(--warning);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: center;
}

.photo-editor-upload-notice p {
    margin: 0 0 12px;
    font-size: 0.875rem;
    color: var(--gray-700);
}

.photo-editor-section {
    margin-bottom: 24px;
}

.photo-editor-section h4 {
    margin: 0 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
}

.photo-editor-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.photo-editor-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.photo-editor-option:hover {
    background: var(--gray-100);
}

.photo-editor-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-600);
}

.photo-editor-option input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.photo-editor-option .option-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
}

.photo-editor-option .option-icon {
    font-size: 16px;
}

.photo-editor-preset {
    width: 100%;
    margin-bottom: 12px;
}

.photo-editor-dimensions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.photo-editor-dimensions input {
    width: 80px;
    text-align: center;
}

.photo-editor-dimensions span {
    color: var(--gray-500);
    font-size: 0.875rem;
}

/* Photo Editor Footer */
.photo-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* Dark Mode */
.dark-mode .photo-editor-modal {
    background: var(--gray-800);
}

.dark-mode .photo-editor-header {
    border-bottom-color: var(--gray-700);
}

.dark-mode .photo-editor-setup h3 {
    color: var(--gray-100);
}

.dark-mode .photo-editor-setup > p {
    color: var(--gray-400);
}

.dark-mode .photo-editor-setup .setup-steps {
    background: var(--gray-700);
}

.dark-mode .photo-editor-setup .setup-steps li {
    color: var(--gray-300);
}

.dark-mode .photo-editor-original h4,
.dark-mode .photo-editor-preview h4 {
    color: var(--gray-400);
}

.dark-mode .photo-editor-img-container {
    background: var(--gray-700);
}

.dark-mode .photo-editor-loading {
    background: rgba(31, 41, 55, 0.8);
    color: var(--primary-400);
}

.dark-mode .photo-editor-upload-notice {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--warning);
}

.dark-mode .photo-editor-upload-notice p {
    color: var(--gray-300);
}

.dark-mode .photo-editor-section h4 {
    color: var(--gray-300);
}

.dark-mode .photo-editor-option {
    background: var(--gray-700);
}

.dark-mode .photo-editor-option:hover {
    background: var(--gray-600);
}

.dark-mode .photo-editor-option .option-label {
    color: var(--gray-200);
}

.dark-mode .photo-editor-dimensions span {
    color: var(--gray-400);
}

.dark-mode .photo-editor-footer {
    background: var(--gray-700);
    border-top-color: var(--gray-600);
}

.dark-mode .photo-editor-toolbar {
    background: #374151;
    border-bottom-color: #4b5563;
}

.dark-mode .photo-editor-sidebar {
    background: var(--gray-800);
    border-right-color: var(--gray-700);
}

/* Mobile responsiveness for Photo Editor */
@media (max-width: 768px) {
    .photo-editor-modal {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .photo-editor-body {
        flex-direction: column;
        padding: 16px;
    }

    .photo-editor-controls {
        width: 100%;
    }

    .photo-editor-images {
        flex-direction: row;
    }

    .photo-editor-img-container {
        aspect-ratio: 1;
        max-height: 200px;
    }
}

/* ============================================
   Batch Photo Processing Styles
   ============================================ */

/* Batch Photo Overlay */
.batch-photo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 1rem;
}

/* Batch Photo Modal */
.batch-photo-modal {
    background: white;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2xl);
}

.batch-photo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.batch-photo-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.batch-photo-header .btn-icon {
    padding: 0.5rem;
}

/* Batch Photo Body */
.batch-photo-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Preview Grid */
.batch-photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    max-height: 180px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.batch-photo-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid var(--gray-200);
}

.batch-photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.batch-photo-preview-item.processing {
    border-color: var(--primary-400);
}

.batch-photo-preview-item.completed {
    border-color: var(--success-500);
}

.batch-photo-preview-item.failed {
    border-color: var(--error-500);
}

.batch-photo-preview-item .status-icon {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.batch-photo-preview-item.processing .status-icon {
    background: var(--primary-500);
    color: white;
    animation: pulse 1s infinite;
}

.batch-photo-preview-item.completed .status-icon {
    background: var(--success-500);
    color: white;
}

.batch-photo-preview-item.failed .status-icon {
    background: var(--error-500);
    color: white;
}

/* Selected count badge */
.batch-photo-selected-count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-50);
    color: var(--primary-700);
    border-radius: var(--radius-full);
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* Transformation Options */
.batch-photo-section {
    margin-bottom: 1.5rem;
}

.batch-photo-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.batch-photo-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.batch-photo-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.batch-photo-option:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
}

.batch-photo-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-500);
}

.batch-photo-option .option-label {
    flex: 1;
}

.batch-photo-option .option-label strong {
    display: block;
    font-weight: 600;
    color: var(--gray-800);
}

.batch-photo-option .option-label span {
    font-size: 0.875rem;
    color: var(--gray-500);
}

/* Crop Presets */
.batch-photo-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.batch-photo-preset {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.batch-photo-preset:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
}

.batch-photo-preset.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
}

.batch-photo-dimensions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.batch-photo-dimensions input {
    width: 80px;
    padding: 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    text-align: center;
}

.batch-photo-dimensions span {
    color: var(--gray-500);
    font-weight: 500;
}

/* Saved Presets Dropdown */
.batch-photo-saved-presets {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.batch-photo-saved-presets select {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: white;
}

/* Progress Section */
.batch-photo-progress {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.batch-photo-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.batch-photo-progress-header h4 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.batch-photo-progress-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
}

.batch-photo-progress-stats .stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.batch-photo-progress-stats .stat.success {
    color: var(--success-600);
}

.batch-photo-progress-stats .stat.error {
    color: var(--error-600);
}

.batch-photo-progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.batch-photo-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.batch-photo-progress-text {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* Batch Photo Footer */
.batch-photo-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* Save Preset Input */
.batch-photo-save-preset {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.batch-photo-save-preset input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
}

/* Dark Mode */
.dark-mode .batch-photo-modal {
    background: var(--gray-800);
}

.dark-mode .batch-photo-header {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

.dark-mode .batch-photo-header h2 {
    color: var(--gray-100);
}

.dark-mode .batch-photo-preview-grid {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

.dark-mode .batch-photo-preview-item {
    border-color: var(--gray-600);
}

.dark-mode .batch-photo-selected-count {
    background: var(--primary-900);
    color: var(--primary-200);
}

.dark-mode .batch-photo-section h4 {
    color: var(--gray-300);
}

.dark-mode .batch-photo-option {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

.dark-mode .batch-photo-option:hover {
    background: var(--gray-700);
    border-color: var(--primary-500);
}

.dark-mode .batch-photo-option .option-label strong {
    color: var(--gray-100);
}

.dark-mode .batch-photo-option .option-label span {
    color: var(--gray-400);
}

.dark-mode .batch-photo-preset {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-200);
}

.dark-mode .batch-photo-preset:hover {
    background: var(--gray-600);
}

.dark-mode .batch-photo-preset.active {
    background: var(--primary-600);
    border-color: var(--primary-600);
}

.dark-mode .batch-photo-dimensions input {
    background: var(--gray-900);
    border-color: var(--gray-600);
    color: var(--gray-100);
}

.dark-mode .batch-photo-dimensions span {
    color: var(--gray-400);
}

.dark-mode .batch-photo-saved-presets select {
    background: var(--gray-900);
    border-color: var(--gray-600);
    color: var(--gray-100);
}

.dark-mode .batch-photo-progress {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

.dark-mode .batch-photo-progress-header h4 {
    color: var(--gray-200);
}

.dark-mode .batch-photo-progress-bar {
    background: var(--gray-700);
}

.dark-mode .batch-photo-progress-text {
    color: var(--gray-400);
}

.dark-mode .batch-photo-footer {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

.dark-mode .batch-photo-save-preset {
    border-color: var(--gray-700);
}

.dark-mode .batch-photo-save-preset input {
    background: var(--gray-900);
    border-color: var(--gray-600);
    color: var(--gray-100);
}

/* Mobile responsiveness for Batch Photo */
@media (max-width: 640px) {
    .batch-photo-modal {
        max-height: 100vh;
        border-radius: 0;
    }

    .batch-photo-body {
        padding: 1rem;
    }

    .batch-photo-preview-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        max-height: 120px;
    }

    .batch-photo-presets {
        flex-direction: column;
    }

    .batch-photo-preset {
        width: 100%;
        text-align: center;
    }

    .batch-photo-dimensions {
        flex-wrap: wrap;
    }

    .batch-photo-footer {
        flex-direction: column;
    }

    .batch-photo-footer .btn {
        width: 100%;
    }
}

/* ============================================
   SKU Rules Builder Styles
   ============================================ */

/* Pattern variable chip */
.sku-var-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    gap: 2px;
}

.sku-var-chip code {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-600);
}

.sku-var-chip .text-xs {
    font-size: 11px;
    color: var(--gray-500);
}

/* SKU Rule card */
.sku-rule-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sku-rule-card:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-md);
}

/* Default rule styling */
.sku-rule-default {
    border: 2px solid var(--primary-400);
    background: linear-gradient(to bottom right, var(--primary-50), white);
}

.sku-default-star {
    color: #fbbf24;
    font-size: 1.25rem;
}

/* Pattern display */
.sku-rule-pattern {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    margin-top: 8px;
}

.sku-rule-pattern code {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
}

/* Rule metadata badges */
.sku-rule-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sku-rule-meta .badge-sm {
    font-size: 11px;
    padding: 2px 8px;
}

/* Preview sections */
.sku-preview,
.sku-live-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.sku-preview code,
.sku-live-preview code {
    font-family: 'Courier New', monospace;
}

/* Rule example preview */
.sku-rule-example {
    border-top: 1px solid var(--gray-100);
    padding-top: 12px;
}

/* Pattern token buttons */
.sku-pattern-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sku-pattern-buttons .btn-xs {
    font-size: 11px;
    padding: 2px 6px;
    font-family: 'Courier New', monospace;
}

/* Button extra-small variant */
.btn-xs {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

/* Alert warning */
.alert-warning {
    background: var(--warning-light);
    border: 1px solid var(--warning);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    color: var(--gray-800);
}

.alert-warning strong {
    color: var(--warning);
}

/* Dark mode SKU Rules */
.dark-mode .sku-var-chip {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .sku-var-chip code {
    color: var(--primary-400);
}

.dark-mode .sku-var-chip .text-xs {
    color: var(--gray-400);
}

.dark-mode .sku-rule-default {
    background: linear-gradient(to bottom right, rgba(79, 70, 229, 0.1), var(--gray-900));
}

.dark-mode .sku-rule-pattern {
    background: var(--gray-800);
}

.dark-mode .sku-rule-pattern code {
    color: var(--gray-200);
}

.dark-mode .sku-rule-example {
    border-top-color: var(--gray-700);
}

.dark-mode .alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--warning);
}

/* ========================================
   Receipt Parser Styles
   ======================================== */

/* Dropzone */
.receipt-dropzone {
    min-height: 180px;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--gray-50);
    margin: 1rem;
}

.receipt-dropzone:hover,
.receipt-dropzone.dragover {
    border-color: var(--primary);
    background: var(--primary-50);
}

.receipt-dropzone-active {
    pointer-events: none;
    opacity: 0.8;
}

.receipt-dropzone-content {
    text-align: center;
    padding: 2rem;
}

.receipt-dropzone-content h3 {
    margin: 1rem 0 0.5rem;
    color: var(--gray-700);
}

.receipt-upload-progress {
    text-align: center;
    padding: 2rem;
}

.receipt-upload-progress .spinner {
    margin: 0 auto 1rem;
}

/* Receipt Queue Cards */
.receipt-queue {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.receipt-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    transition: all 0.2s ease;
}

.receipt-card:hover {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-sm);
}

.receipt-card-pending {
    border-left: 3px solid var(--warning);
}

.receipt-card-processed {
    border-left: 3px solid var(--success);
    opacity: 0.8;
}

.receipt-card-preview {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.receipt-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
}

.receipt-thumbnail-placeholder {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    color: var(--gray-400);
}

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

.receipt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.receipt-card-header h4 {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.receipt-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}

.receipt-card-confidence {
    font-size: 0.8rem;
}

.receipt-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Review Receipt Modal Layout */
.receipt-review-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .receipt-review-layout {
        grid-template-columns: 1fr;
    }
}

.receipt-image-preview {
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}

.receipt-full-image {
    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid var(--gray-200);
}

.receipt-no-image {
    padding: 3rem 1rem;
    color: var(--gray-400);
}

.receipt-no-image p {
    margin-top: 0.5rem;
}

.receipt-details-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Line Items */
.receipt-line-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.receipt-line-item-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
}

.receipt-line-item-row input[name="itemDescription"] {
    flex: 1;
    min-width: 120px;
}

/* Totals Grid */
.receipt-totals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

@media (max-width: 600px) {
    .receipt-totals-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* Dark Mode Receipt Parser */
body.dark-mode .receipt-dropzone {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
}

body.dark-mode .receipt-dropzone:hover,
body.dark-mode .receipt-dropzone.dragover {
    border-color: var(--primary-400) !important;
    background: rgba(79, 70, 229, 0.15) !important;
}

body.dark-mode .receipt-dropzone-content h3 {
    color: #ffffff !important;
}

body.dark-mode .receipt-dropzone-content p {
    color: #9ca3af !important;
}

body.dark-mode .receipt-dropzone-content svg {
    color: #d1d5db !important;
    stroke: #d1d5db !important;
    fill: #d1d5db !important;
}

.dark-mode .receipt-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .receipt-card:hover {
    border-color: var(--primary-500);
}

/* Import dropzone styles */
.import-dropzone.dragover {
    border-color: var(--primary-500) !important;
    background: var(--primary-50) !important;
    transform: scale(1.01);
}

body.dark-mode .import-dropzone {
    border-color: var(--gray-600);
    background: var(--gray-800);
}

body.dark-mode .import-dropzone:hover {
    border-color: var(--gray-500);
    background: var(--gray-750);
}

body.dark-mode .import-dropzone.dragover {
    border-color: var(--primary-400) !important;
    background: rgba(79, 70, 229, 0.15) !important;
}

.dark-mode .receipt-thumbnail {
    border-color: var(--gray-600);
}

.dark-mode .receipt-thumbnail-placeholder {
    background: var(--gray-700);
    color: var(--gray-500);
}

.dark-mode .receipt-card-header h4 {
    color: var(--gray-100);
}

.dark-mode .receipt-card-meta {
    color: var(--gray-400);
}

.dark-mode .receipt-image-preview {
    background: var(--gray-800);
}

.dark-mode .receipt-full-image {
    border-color: var(--gray-600);
}

.dark-mode .receipt-no-image {
    color: var(--gray-500);
}

.dark-mode .receipt-line-item-row {
    background: var(--gray-800);
}

.dark-mode .receipt-totals-grid {
    border-top-color: var(--gray-700);
}

/* ============================================
   Calendar Styles - Month Grid View
   ============================================ */

/* Calendar day headers (Sun, Mon, Tue...) */
.card .calendar-header {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 0 !important;
    background: var(--gray-100) !important;
    border-bottom: 1px solid var(--gray-200);
}

.card .calendar-header-day {
    background: var(--gray-50);
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-right: 1px solid var(--gray-200);
}

.card .calendar-header-day:last-child {
    border-right: none;
}

/* Calendar grid container */
.card .calendar-grid {
    background: var(--gray-200);
    border: 1px solid var(--gray-200);
    border-top: none;
}

/* Each week row */
.card .calendar-week {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 1px;
    background: var(--gray-200);
}

/* Individual day cells */
.card .calendar-day {
    background: white;
    min-height: 110px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    position: relative;
}

.card .calendar-day:hover {
    background: var(--primary-50);
    z-index: 1;
}

/* Empty day cells (previous/next month) */
.card .calendar-day-empty {
    background: var(--gray-50);
    cursor: default;
    min-height: 110px;
}

.card .calendar-day-empty:hover {
    background: var(--gray-50);
}

/* Today's date highlight */
.card .calendar-day-today {
    background: var(--primary-50);
    box-shadow: inset 0 0 0 2px var(--primary-500);
}

.card .calendar-day-today:hover {
    background: var(--primary-100);
}

/* Day number styling */
.card .calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-weight: 500;
    font-size: 14px;
    color: var(--gray-700);
    margin-bottom: 6px;
    border-radius: 50%;
}

.card .calendar-day-number.today {
    background: var(--primary-500);
    color: white;
    font-weight: 600;
}

/* Event pills in day cells */
.card .calendar-event {
    font-size: 11px;
    padding: 3px 6px;
    margin-bottom: 3px;
    border-radius: 4px;
    color: var(--gray-800);
    background: var(--primary-100);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* More events indicator */
.card .calendar-more {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 500;
    padding: 2px 0;
}

/* Calendar Dark Mode */
.dark-mode .card .calendar-header {
    background: var(--gray-800) !important;
    border-bottom-color: var(--gray-700);
}

.dark-mode .card .calendar-header-day {
    background: var(--gray-800);
    color: #1f2937;
    border-color: var(--gray-700);
}

.dark-mode .card .calendar-grid {
    background: var(--gray-700);
    border-color: var(--gray-700);
}

.dark-mode .card .calendar-week {
    background: var(--gray-700);
}

.dark-mode .card .calendar-day {
    background: var(--gray-800);
}

.dark-mode .card .calendar-day:hover {
    background: var(--gray-700);
}

.dark-mode .card .calendar-day-empty {
    background: var(--gray-900);
}

.dark-mode .card .calendar-day-empty:hover {
    background: var(--gray-900);
}

.dark-mode .card .calendar-day-today {
    background: rgba(99, 102, 241, 0.15);
    box-shadow: inset 0 0 0 2px var(--primary-400);
}

.dark-mode .card .calendar-day-today:hover {
    background: rgba(99, 102, 241, 0.25);
}

.dark-mode .card .calendar-day-number {
    color: var(--gray-300);
}

.dark-mode .card .calendar-day-number.today {
    background: var(--primary-500);
    color: white;
}

.dark-mode .card .calendar-event {
    background: var(--primary-900);
    color: var(--gray-200);
}

.dark-mode .card .calendar-more {
    color: var(--gray-400);
}

/* Calendar Week View */
.calendar-week-view {
    display: flex;
    flex-direction: column;
    min-height: 600px;
    max-height: 700px;
    overflow: hidden;
}

.calendar-week-header {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    position: sticky;
    top: 0;
    z-index: 10;
}

.calendar-week-time-col {
    width: 60px;
}

.calendar-week-day-header {
    padding: 12px 8px;
    text-align: center;
    border-left: 1px solid var(--gray-200);
}

.calendar-week-day-header.today {
    background: var(--primary-50);
}

.week-header-name {
    font-size: 12px;
    color: var(--gray-500);
    text-transform: uppercase;
}

.week-header-date {
    font-size: 20px;
    font-weight: 600;
    color: var(--gray-900);
}

.calendar-week-day-header.today .week-header-date {
    color: var(--primary-600);
}

.calendar-week-body {
    flex: 1;
    overflow-y: auto;
}

.calendar-week-row {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    min-height: 50px;
    border-bottom: 1px solid var(--gray-100);
}

.calendar-week-time {
    padding: 4px 8px;
    font-size: 11px;
    color: var(--gray-400);
    text-align: right;
    border-right: 1px solid var(--gray-200);
}

.calendar-week-cell {
    border-left: 1px solid var(--gray-100);
    padding: 2px;
    min-height: 50px;
    cursor: pointer;
    transition: background 0.15s;
}

.calendar-week-cell:hover {
    background: var(--gray-50);
}

.calendar-week-cell.today {
    background: var(--primary-50);
}

.calendar-week-event {
    padding: 4px 6px;
    margin-bottom: 2px;
    border-radius: 4px;
    font-size: 11px;
}

.calendar-week-event-title {
    font-weight: 500;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-week-event-time {
    font-size: 10px;
    color: var(--gray-500);
}

/* Calendar Day View */
.calendar-day-view {
    display: flex;
    flex-direction: column;
    min-height: 600px;
    max-height: 700px;
    overflow: hidden;
}

.calendar-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.day-header-name {
    font-size: 14px;
    color: var(--gray-500);
    text-transform: uppercase;
}

.day-header-date {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
}

.day-header-events {
    font-size: 14px;
    color: var(--gray-500);
}

.calendar-day-body {
    flex: 1;
    overflow-y: auto;
}

.calendar-day-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    min-height: 60px;
    border-bottom: 1px solid var(--gray-100);
}

.calendar-day-time {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--gray-400);
    text-align: right;
    border-right: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.calendar-day-cell {
    padding: 4px 8px;
    min-height: 60px;
    cursor: pointer;
    transition: background 0.15s;
}

.calendar-day-cell:hover {
    background: var(--gray-50);
}

.calendar-day-event {
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 6px;
}

.calendar-day-event-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-800);
    margin-bottom: 2px;
}

.calendar-day-event-time {
    font-size: 12px;
    color: var(--gray-500);
}

.calendar-day-event-notes {
    font-size: 12px;
    color: var(--gray-600);
    margin-top: 4px;
}

/* Dark mode for week and day views */
.dark-mode .calendar-week-header,
.dark-mode .calendar-day-header {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .calendar-week-day-header {
    border-color: var(--gray-700);
}

.dark-mode .calendar-week-day-header.today {
    background: var(--primary-900);
}

.dark-mode .week-header-name,
.dark-mode .day-header-name {
    color: var(--gray-400);
}

.dark-mode .week-header-date,
.dark-mode .day-header-date {
    color: var(--gray-100);
}

.dark-mode .calendar-week-row,
.dark-mode .calendar-day-row {
    border-color: var(--gray-700);
}

.dark-mode .calendar-week-time,
.dark-mode .calendar-day-time {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .calendar-week-cell,
.dark-mode .calendar-day-cell {
    border-color: var(--gray-700);
}

.dark-mode .calendar-week-cell:hover,
.dark-mode .calendar-day-cell:hover {
    background: var(--gray-700);
}

.dark-mode .calendar-week-cell.today {
    background: var(--primary-900);
}

.dark-mode .calendar-week-event-title,
.dark-mode .calendar-day-event-title {
    color: var(--gray-100);
}

/* ============================================
   Batch Photo Processing Styles
   ============================================ */

/* Batch photo modal thumbnail preview */
.batch-photo-preview-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--gray-50);
}

.dark-mode .batch-photo-preview-strip {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

.batch-photo-preview-strip img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    border: 2px solid transparent;
    transition: border-color var(--transition-fast);
}

.batch-photo-preview-strip img:hover {
    border-color: var(--primary-600);
}

/* Batch transformations grid */
.batch-transformations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.batch-transformation-item {
    padding: 12px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--gray-50);
}

.dark-mode .batch-transformation-item {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

.batch-transformation-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}

.batch-transformation-item input[type="checkbox"] {
    cursor: pointer;
}

.batch-transformation-item p {
    margin-top: 6px;
    font-size: 12px;
    color: var(--gray-500);
}

/* Batch job history card */
.batch-job-card {
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--gray-50);
}

.dark-mode .batch-job-card {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

.batch-job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.batch-job-info h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.dark-mode .batch-job-info h4 {
    color: var(--gray-100);
}

.batch-job-info p {
    font-size: 12px;
    color: var(--gray-500);
}

.batch-job-progress-container {
    margin-bottom: 8px;
}

.batch-job-progress-label {
    font-size: 12px;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.dark-mode .batch-job-progress-label {
    color: var(--gray-400);
}

.batch-job-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.dark-mode .batch-job-progress-bar {
    background: var(--gray-700);
}

.batch-job-progress-fill {
    height: 100%;
    background: var(--primary-600);
    transition: width 0.3s ease;
}

.batch-job-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
}

/* ===== HEATMAP STYLES ===== */
.heatmap-container {
    overflow-x: auto;
    padding: 1rem 0;
}

.heatmap-grid {
    display: grid;
    grid-template-columns: 50px repeat(24, 1fr);
    gap: 2px;
    min-width: 600px;
}

.heatmap-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.heatmap-label.hour-label {
    justify-content: center;
    padding-bottom: 4px;
}

.heatmap-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    min-width: 16px;
    min-height: 16px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
}

.heatmap-cell:hover {
    transform: scale(1.3);
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.heatmap-cell[data-intensity="0"] { background: var(--bg-secondary); }
.heatmap-cell[data-intensity="1"] { background: #c6e48b; }
.heatmap-cell[data-intensity="2"] { background: #7bc96f; }
.heatmap-cell[data-intensity="3"] { background: #449d44; }
.heatmap-cell[data-intensity="4"] { background: #196c2e; }
.heatmap-cell[data-intensity="5"] { background: #003820; }

.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.heatmap-legend-cell {
    width: 14px;
    height: 14px;
    border-radius: 2px;
}

.peak-times-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.peak-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: var(--primary);
    color: white;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* ===== PREDICTION STYLES ===== */
.prediction-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow 0.2s;
}

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

.confidence-bar {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.confidence-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.confidence-bar-fill.high { background: var(--success); }
.confidence-bar-fill.medium { background: var(--warning); }
.confidence-bar-fill.low { background: var(--danger); }

.recommendation-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recommendation-badge.increase { background: rgba(34,197,94,0.15); color: #16a34a; }
.recommendation-badge.decrease { background: rgba(239,68,68,0.15); color: #dc2626; }
.recommendation-badge.maintain { background: rgba(59,130,246,0.15); color: #2563eb; }
.recommendation-badge.hold { background: rgba(234,179,8,0.15); color: #ca8a04; }

.demand-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
}

.demand-score.high { background: rgba(34,197,94,0.15); color: #16a34a; }
.demand-score.medium { background: rgba(234,179,8,0.15); color: #ca8a04; }
.demand-score.low { background: rgba(239,68,68,0.15); color: #dc2626; }

.forecast-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
}

.forecast-trend {
    font-size: 0.85rem;
    font-weight: 500;
}

.forecast-trend.up { color: var(--success); }
.forecast-trend.down { color: var(--danger); }
.forecast-trend.stable { color: var(--text-secondary); }

/* ===== SUPPLIER STYLES ===== */
.supplier-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    transition: box-shadow 0.2s;
}

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

.supplier-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.supplier-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}

.supplier-status.active { background: rgba(34,197,94,0.15); color: #16a34a; }
.supplier-status.inactive { background: rgba(156,163,175,0.15); color: #6b7280; }

.sparkline-container {
    display: inline-block;
    vertical-align: middle;
}

.sparkline {
    width: 80px;
    height: 24px;
}

.sparkline polyline {
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.price-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--danger);
}

.price-change {
    font-weight: 600;
    font-size: 0.85rem;
}

.price-change.up { color: var(--danger); }
.price-change.down { color: var(--success); }
.price-change.neutral { color: var(--text-secondary); }

.supplier-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.supplier-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 0.85rem;
}

/* ===== MARKET INTEL STYLES ===== */
.competitor-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    transition: box-shadow 0.2s;
}

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

.competitor-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.opportunity-meter {
    width: 100%;
    height: 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.opportunity-meter-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--success), var(--primary));
    transition: width 0.6s ease;
}

.saturation-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.saturation-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.saturation-bar-fill.low { background: var(--success); }
.saturation-bar-fill.medium { background: var(--warning); }
.saturation-bar-fill.high { background: var(--danger); }

.insight-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    border-left: 4px solid var(--primary);
}

.insight-card.opportunity { border-left-color: var(--success); }
.insight-card.warning { border-left-color: var(--warning); }
.insight-card.trend { border-left-color: var(--primary); }
.insight-card.alert { border-left-color: var(--danger); }

.insight-relevance {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(99,102,241,0.1);
    color: var(--primary);
}

.platform-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.competitor-table {
    width: 100%;
    border-collapse: collapse;
}

.competitor-table th {
    text-align: left;
    padding: 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.competitor-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.competitor-table tr:hover td {
    background: var(--bg-secondary);
}

/* ===== DARK MODE - PHASE 4 COMPONENTS ===== */
.dark-mode .heatmap-cell[data-intensity="0"] { background: #1a1a2e; }
.dark-mode .heatmap-cell[data-intensity="1"] { background: #0e4429; }
.dark-mode .heatmap-cell[data-intensity="2"] { background: #006d32; }
.dark-mode .heatmap-cell[data-intensity="3"] { background: #26a641; }
.dark-mode .heatmap-cell[data-intensity="4"] { background: #39d353; }
.dark-mode .heatmap-cell[data-intensity="5"] { background: #45f360; }

.dark-mode .prediction-card,
.dark-mode .supplier-card,
.dark-mode .competitor-card,
.dark-mode .forecast-card,
.dark-mode .insight-card {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

.dark-mode .prediction-card:hover,
.dark-mode .supplier-card:hover,
.dark-mode .competitor-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.dark-mode .confidence-bar {
    background: rgba(255,255,255,0.08);
}

.dark-mode .supplier-item-row {
    background: rgba(255,255,255,0.04);
}

.dark-mode .price-alert {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.25);
}

.dark-mode .recommendation-badge.increase { background: rgba(34,197,94,0.2); }
.dark-mode .recommendation-badge.decrease { background: rgba(239,68,68,0.2); }
.dark-mode .recommendation-badge.maintain { background: rgba(59,130,246,0.2); }
.dark-mode .recommendation-badge.hold { background: rgba(234,179,8,0.2); }

.dark-mode .opportunity-meter {
    background: rgba(255,255,255,0.08);
}

.dark-mode .saturation-bar {
    background: rgba(255,255,255,0.08);
}

.dark-mode .competitor-table th {
    border-bottom-color: rgba(255,255,255,0.1);
}

.dark-mode .competitor-table td {
    border-bottom-color: rgba(255,255,255,0.06);
}

.dark-mode .competitor-table tr:hover td {
    background: rgba(255,255,255,0.04);
}

.dark-mode .platform-badge {
    background: rgba(255,255,255,0.08);
}

.dark-mode .sparkline polyline {
    stroke: var(--primary);
}

/* ===== WEBHOOK MANAGEMENT STYLES ===== */
.webhook-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    transition: box-shadow 0.2s;
}

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

.webhook-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.webhook-url {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    word-break: break-all;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.webhook-events-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.5rem 0;
}

.webhook-event-tag {
    display: inline-flex;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(99,102,241,0.1);
    color: var(--primary);
}

.webhook-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0.5rem 0;
}

.webhook-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.webhook-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}

.webhook-status.enabled { background: rgba(34,197,94,0.15); color: #16a34a; }
.webhook-status.disabled { background: rgba(156,163,175,0.15); color: #6b7280; }

.event-status-badge {
    display: inline-flex;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}

.event-status-badge.delivered { background: rgba(34,197,94,0.15); color: #16a34a; }
.event-status-badge.pending { background: rgba(234,179,8,0.15); color: #ca8a04; }
.event-status-badge.failed { background: rgba(239,68,68,0.15); color: #dc2626; }
.event-status-badge.processing { background: rgba(59,130,246,0.15); color: #2563eb; }

.events-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.events-log-table th {
    text-align: left;
    padding: 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.events-log-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.events-log-table tr:hover td {
    background: var(--bg-secondary);
}

.payload-preview {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.failure-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.failure-count.has-failures { background: rgba(239,68,68,0.15); color: #dc2626; }
.failure-count.no-failures { background: rgba(34,197,94,0.08); color: #16a34a; }

/* ===== PUSH NOTIFICATIONS STYLES ===== */
.push-status-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.push-status-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.push-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.push-status-dot.active { background: #16a34a; box-shadow: 0 0 8px rgba(34,197,94,0.4); }
.push-status-dot.inactive { background: #9ca3af; }
.push-status-dot.unsupported { background: #dc2626; }

.push-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: background 0.2s, color 0.2s;
}

.push-toggle-btn.subscribe {
    background: var(--primary);
    color: white;
}

.push-toggle-btn.subscribe:hover { opacity: 0.9; }

.push-toggle-btn.unsubscribe {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.push-toggle-btn.unsubscribe:hover { background: rgba(239,68,68,0.08); color: #dc2626; border-color: rgba(239,68,68,0.3); }

.notification-prefs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notification-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.notification-pref-label {
    font-weight: 500;
    font-size: 0.9rem;
}

.notification-pref-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ccc;
    border-radius: 24px;
    transition: background 0.3s;
}

.toggle-slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.subscription-device {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 0.85rem;
}

.subscription-device-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.subscription-ua {
    font-size: 0.75rem;
    color: var(--text-secondary);
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browser-support-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.browser-support-badge.supported { background: rgba(34,197,94,0.15); color: #16a34a; }
.browser-support-badge.not-supported { background: rgba(239,68,68,0.15); color: #dc2626; }

/* ===== DARK MODE - WEBHOOKS & PUSH NOTIFICATIONS ===== */
.dark-mode .webhook-card,
.dark-mode .push-status-card {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

.dark-mode .webhook-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.dark-mode .webhook-url {
    background: rgba(255,255,255,0.06);
}

.dark-mode .webhook-event-tag {
    background: rgba(99,102,241,0.2);
}

.dark-mode .events-log-table th {
    border-bottom-color: rgba(255,255,255,0.1);
}

.dark-mode .events-log-table td {
    border-bottom-color: rgba(255,255,255,0.06);
}

.dark-mode .events-log-table tr:hover td {
    background: rgba(255,255,255,0.04);
}

.dark-mode .notification-pref-row,
.dark-mode .subscription-device {
    background: rgba(255,255,255,0.04);
}

.dark-mode .toggle-slider {
    background: rgba(255,255,255,0.15);
}

.dark-mode .push-toggle-btn.unsubscribe {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}

/* Listing Mode Cards (Quick vs Advanced chooser) */
.listing-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 180px;
    justify-content: center;
}

.listing-mode-card:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.listing-mode-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary);
}

/* Platform Select Grid */
.platform-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
}

/* Advanced Platform Tabs */
.advanced-platform-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 16px;
    padding-bottom: 0;
    flex-wrap: wrap;
}

.advanced-platform-tab {
    padding: 8px 14px;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    border-radius: 6px 6px 0 0;
    font-size: 13px;
}

.advanced-platform-tab:hover {
    background: rgba(99, 102, 241, 0.06);
}

.advanced-platform-tab.active {
    border-bottom-color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
    font-weight: 600;
}

/* Advanced Platform Panel */
.advanced-platform-panel {
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Dark mode variants */
.dark-mode .listing-mode-card {
    border-color: rgba(255,255,255,0.1);
}

.dark-mode .listing-mode-card:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.dark-mode .listing-mode-card-icon {
    background: rgba(99, 102, 241, 0.2);
}

.dark-mode .advanced-platform-tabs {
    border-bottom-color: rgba(255,255,255,0.1);
}

.dark-mode .advanced-platform-tab:hover {
    background: rgba(255,255,255,0.06);
}

.dark-mode .advanced-platform-tab.active {
    background: rgba(99, 102, 241, 0.15);
}

.dark-mode .advanced-platform-panel {
    border-color: rgba(255,255,255,0.1);
}

/* ============================================
   Size Charts Styles
   ============================================ */

.size-charts-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 16px 0;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 24px;
}

.size-charts-tabs::-webkit-scrollbar {
    height: 4px;
}

.size-charts-tabs::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 4px;
}

.size-chart-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.size-chart-tab:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

.size-chart-tab.active {
    background: var(--primary-50);
    border-color: var(--primary-500);
    color: var(--primary-700);
}

.size-chart-tab svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.size-chart-content {
    display: none;
}

.size-chart-content.active {
    display: block;
}

.size-chart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.size-chart-table th {
    background: var(--gray-100);
    color: var(--gray-700);
    font-weight: 600;
    font-size: var(--font-size-sm);
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid var(--gray-200);
}

.size-chart-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    font-size: var(--font-size-sm);
}

.size-chart-table tr:nth-child(even) td {
    background: var(--gray-50);
}

.size-chart-table tr:hover td {
    background: var(--primary-50);
}

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

@media (max-width: 768px) {
    .size-chart-table th,
    .size-chart-table td {
        padding: 8px 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .size-charts-hero {
        display: none;
    }

    .size-charts-tabs {
        gap: 4px;
    }

    .size-chart-tab {
        padding: 6px 10px;
        font-size: 12px;
    }
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.tip-card {
    padding: 20px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.tip-card:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-md);
}

.tip-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--gray-800);
    font-size: var(--font-size-base);
    font-weight: 600;
}

.tip-card h4 svg {
    width: 20px;
    height: 20px;
    color: var(--primary-500);
}

.tip-card p {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Size Charts Dark Mode */
.dark-mode .size-charts-tabs {
    border-bottom-color: var(--gray-600);
}

.dark-mode .size-charts-tabs::-webkit-scrollbar-thumb {
    background: var(--gray-600);
}

.dark-mode .size-chart-tab,
body.dark-mode .size-chart-tab {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

.dark-mode .size-chart-tab:hover,
body.dark-mode .size-chart-tab:hover {
    background: #4b5563 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
}

.dark-mode .size-chart-tab.active,
body.dark-mode .size-chart-tab.active {
    background: rgba(99, 102, 241, 0.25) !important;
    border-color: var(--primary-500) !important;
    color: var(--primary-300) !important;
}

.dark-mode .size-chart-table {
    background: var(--gray-800);
}

.dark-mode .size-chart-table th {
    background: var(--gray-700);
    color: var(--gray-100);
    border-bottom-color: var(--gray-600);
}

.dark-mode .size-chart-table td {
    border-bottom-color: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .size-chart-table tr:nth-child(even) td {
    background: var(--gray-750, #2d3748);
}

.dark-mode .size-chart-table tr:hover td {
    background: rgba(99, 102, 241, 0.15);
}

.dark-mode .tip-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .tip-card:hover {
    border-color: var(--primary-500);
}

.dark-mode .tip-card h4 {
    color: var(--gray-100);
}

.dark-mode .tip-card h4 svg {
    color: var(--primary-400);
}

.dark-mode .tip-card p {
    color: var(--gray-400);
}

/* ============================================
   Duplicates Detection Styles
   ============================================ */

.duplicate-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--warning-light);
    border: 1px solid var(--warning);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}

.duplicate-warning svg {
    width: 20px;
    height: 20px;
    color: var(--warning);
    flex-shrink: 0;
    margin-top: 2px;
}

.duplicate-warning-content h4 {
    color: var(--gray-800);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: 4px;
}

.duplicate-warning-content p {
    color: var(--gray-600);
    font-size: var(--font-size-xs);
}

.duplicate-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
}

.duplicate-card-items {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.duplicate-item-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    max-width: 120px;
}

.duplicate-item-preview img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.duplicate-item-preview span {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.duplicate-arrow {
    color: var(--gray-400);
}

.duplicate-confidence {
    padding: 4px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.duplicate-confidence.high {
    background: var(--error-light);
    color: var(--error);
}

.duplicate-confidence.medium {
    background: var(--warning-light);
    color: var(--warning);
}

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

.dark-mode .duplicate-warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--warning);
}

.dark-mode .duplicate-warning-content h4 {
    color: var(--gray-100);
}

.dark-mode .duplicate-warning-content p {
    color: var(--gray-400);
}

.dark-mode .duplicate-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .duplicate-item-preview img {
    border-color: var(--gray-600);
}

.dark-mode .duplicate-item-preview span {
    color: var(--gray-400);
}

/* ============================================
   Barcode Scanner Styles
   ============================================ */

.barcode-scanner-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.barcode-scanner-video {
    width: 100%;
    border-radius: var(--radius-lg);
    background: #000;
}

.barcode-scanner-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 100px;
    border: 2px dashed var(--primary-500);
    border-radius: var(--radius-md);
    pointer-events: none;
}

.barcode-scanner-instructions {
    text-align: center;
    margin-top: 16px;
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

.barcode-manual-entry {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.barcode-manual-entry label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--gray-700);
}

.barcode-result {
    padding: 16px;
    background: var(--success-light);
    border: 1px solid var(--success);
    border-radius: var(--radius-lg);
    margin-top: 16px;
}

.barcode-result h4 {
    color: var(--gray-800);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: 8px;
}

.barcode-result-data {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: var(--font-size-sm);
}

.barcode-result-data dt {
    color: var(--gray-500);
}

.barcode-result-data dd {
    color: var(--gray-800);
    font-weight: 500;
}

.dark-mode .barcode-scanner-instructions {
    color: var(--gray-400);
}

.dark-mode .barcode-manual-entry {
    border-top-color: var(--gray-700);
}

.dark-mode .barcode-manual-entry label {
    color: var(--gray-300);
}

.dark-mode .barcode-result {
    background: rgba(16, 185, 129, 0.15);
}

.dark-mode .barcode-result h4 {
    color: var(--gray-100);
}

.dark-mode .barcode-result-data dt {
    color: var(--gray-500);
}

.dark-mode .barcode-result-data dd {
    color: var(--gray-200);
}

/* ============================================
   Team Feature Styles
   ============================================ */

.team-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--gray-100);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.team-selector:hover {
    background: var(--gray-200);
}

.team-selector-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--primary-500);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.team-selector-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-700);
}

.team-selector-dropdown {
    width: 16px;
    height: 16px;
    color: var(--gray-500);
}

.team-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.team-member-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

.team-member-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--primary-100);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.team-member-info {
    flex: 1;
}

.team-member-name {
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 2px;
}

.team-member-email {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    margin-bottom: 4px;
}

.team-member-role {
    display: inline-block;
    padding: 2px 8px;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--gray-600);
    text-transform: capitalize;
}

.team-member-role.owner {
    background: var(--primary-100);
    color: var(--primary-700);
}

.team-member-role.admin {
    background: var(--info-light);
    color: var(--info);
}

.team-invite-form {
    padding: 20px;
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    text-align: center;
}

.team-invite-form h4 {
    margin-bottom: 16px;
    color: var(--gray-700);
}

.team-permissions-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.team-permissions-table th,
.team-permissions-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid var(--gray-200);
}

.team-permissions-table th:first-child,
.team-permissions-table td:first-child {
    text-align: left;
}

.team-permissions-table th {
    background: var(--gray-50);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-700);
}

.team-permissions-table td {
    font-size: var(--font-size-sm);
}

.permission-check {
    color: var(--success);
}

.permission-x {
    color: var(--gray-300);
}

.dark-mode .team-selector {
    background: var(--gray-700);
}

.dark-mode .team-selector:hover {
    background: var(--gray-600);
}

.dark-mode .team-selector-name {
    color: var(--gray-200);
}

.dark-mode .team-member-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .team-member-name {
    color: var(--gray-100);
}

.dark-mode .team-member-role {
    background: var(--gray-700);
    color: var(--gray-300);
}

.dark-mode .team-invite-form {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

.dark-mode .team-invite-form h4 {
    color: var(--gray-200);
}

.dark-mode .team-permissions-table th {
    background: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .team-permissions-table th,
.dark-mode .team-permissions-table td {
    border-bottom-color: var(--gray-700);
}

/* ============================================
   Smart Relisting Styles
   ============================================ */
.relisting-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.relisting-rule-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--gray-50);
    transition: box-shadow 0.15s;
}

.relisting-rule-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.relisting-rule-card.inactive {
    opacity: 0.6;
}

.relisting-rule-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-3);
}

.relisting-rule-header h4 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
}

.relisting-rule-actions {
    display: flex;
    gap: var(--space-1);
}

.relisting-rule-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.relisting-rule-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.relisting-rule-stat .label {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.relisting-rule-stat .value {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* Dark mode - Relisting */
.dark-mode .relisting-rule-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .relisting-rule-header h4 {
    color: var(--gray-100);
}

.dark-mode .relisting-rule-stat .value {
    color: var(--gray-200);
}

/* ============================================
   Shipping Labels Styles
   ============================================ */
.shipping-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.shipping-address-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: white;
    transition: box-shadow 0.15s;
}

.shipping-address-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.shipping-address-card.is-default {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.shipping-address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.shipping-address-body {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    line-height: 1.5;
    margin-bottom: var(--space-3);
}

.shipping-address-actions {
    display: flex;
    gap: var(--space-2);
    border-top: 1px solid var(--gray-100);
    padding-top: var(--space-3);
}

/* Dark mode - Shipping Labels */
.dark-mode .shipping-address-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .shipping-address-card.is-default {
    border-color: var(--primary-600);
    background: rgba(99, 102, 241, 0.1);
}

.dark-mode .shipping-address-body {
    color: var(--gray-400);
}

.dark-mode .shipping-address-actions {
    border-top-color: var(--gray-700);
}

/* ============================================
   Inventory Import Styles
   ============================================ */
.import-upload-zone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-xl);
    padding: var(--space-12) var(--space-8);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.import-upload-zone:hover,
.import-upload-zone.dragover {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.import-upload-zone .import-upload-icon {
    color: var(--gray-400);
    margin-bottom: var(--space-3);
}

.import-mapping-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

.import-mapping-table {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.import-mapping-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: var(--space-1);
}

.import-mapping-header .import-mapping-col-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
}

.import-mapping-header .import-mapping-col-label:first-child {
    min-width: 180px;
    max-width: 240px;
}

.import-mapping-header .import-mapping-col-label:last-child {
    flex: 1;
}

.import-mapping-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--gray-100);
}

.import-mapping-row .form-label {
    min-width: 180px;
    max-width: 240px;
    margin-bottom: 0;
    font-size: var(--font-size-sm);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray-800);
}

.import-mapping-arrow {
    color: var(--gray-400);
    flex-shrink: 0;
}

.import-mapping-row .form-input {
    flex: 1;
}

.dark-mode .import-mapping-header {
    border-bottom-color: var(--gray-700);
}

.dark-mode .import-mapping-row {
    border-bottom-color: var(--gray-800);
}

.dark-mode .import-mapping-row .form-label {
    color: var(--gray-200);
}

.import-mappings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.import-mapping-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: white;
}

.import-mapping-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

/* Dark mode - Inventory Import */
.dark-mode .import-upload-zone {
    border-color: var(--gray-600);
    background: var(--gray-800);
}

.dark-mode .import-upload-zone:hover,
.dark-mode .import-upload-zone.dragover {
    border-color: var(--primary-500);
    background: rgba(99, 102, 241, 0.1);
}

.dark-mode .import-upload-zone .import-upload-icon {
    color: var(--gray-500);
}

.dark-mode .import-mapping-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .import-mapping-card-header strong {
    color: var(--gray-100);
}

/* Import Preview Table */
.import-preview-table th {
    user-select: none;
}

.import-preview-table th > div[onmousedown]:hover {
    background: rgba(99, 102, 241, 0.3);
}

.import-preview-table td > div[onmousedown]:hover {
    background: rgba(99, 102, 241, 0.3);
}

.dark-mode .import-preview-table th {
    background: var(--gray-800) !important;
    border-color: var(--gray-600) !important;
    color: var(--gray-200);
}

.dark-mode .import-preview-table td {
    border-color: var(--gray-600) !important;
    color: var(--gray-300);
    background: var(--gray-800) !important;
}

.dark-mode .import-table-wrap {
    border-color: var(--gray-600) !important;
}

/* ============================================
   Financial Statements Styles
   ============================================ */
.financial-statement {
    max-width: 700px;
    margin: 0 auto;
}

.financial-statement h4 {
    margin: 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--gray-200);
}

/* Dark mode - Financial Statements */
.dark-mode .financial-statement h4 {
    border-bottom-color: var(--gray-700);
}

.dark-mode .financial-statement .text-sm {
    color: var(--gray-300);
}

.dark-mode .financial-statement .text-xs.text-gray-400 {
    color: var(--gray-500);
}

.dark-mode .financial-statement [style*="border-bottom: 1px solid var(--gray-100)"] {
    border-bottom-color: var(--gray-700) !important;
}

.dark-mode .financial-statement [style*="border-top: 1px solid var(--gray-200)"] {
    border-top-color: var(--gray-600) !important;
}

/* ============================================
   Dark Mode Fixes - Session 24
   ============================================ */

/* Calendar - Grid lines and text visibility */
body.dark-mode .calendar-week {
    border-color: #4b5563 !important;
}

body.dark-mode .calendar-day {
    background: #1f2937 !important;
    border: 1px solid #4b5563 !important;
    color: #e5e7eb !important;
}

body.dark-mode .calendar-day:hover {
    background: #374151 !important;
}

body.dark-mode .calendar-day-empty {
    background: #111827 !important;
    border: 1px solid #374151 !important;
}

body.dark-mode .calendar-day-today,
body.dark-mode .calendar-day.today {
    background: var(--primary-700) !important;
    color: #ffffff !important;
}

body.dark-mode .calendar-day-number,
body.dark-mode .today {
    color: inherit !important;
}

body.dark-mode .calendar-header-day,
body.dark-mode .card .calendar-header-day {
    color: #ffffff !important;
    background: #374151 !important;
    border-color: #4b5563 !important;
}

/* Type-specific dark mode calendar event colors are defined below (~line 17877) */
/* Default fallback for untyped events */
body.dark-mode .calendar-event:not([class*="calendar-event-"]) {
    background: var(--primary-600) !important;
    color: #ffffff !important;
}

body.dark-mode .calendar-more {
    color: #9ca3af !important;
}

/* Receipt Parser - Button and form visibility */
body.dark-mode .receipt-list,
body.dark-mode .receipt-item {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .receipt-item:hover {
    background: #374151 !important;
}

body.dark-mode .receipt-item .text-gray-600,
body.dark-mode .receipt-item .text-gray-500 {
    color: #9ca3af !important;
}

body.dark-mode .receipt-details {
    background: #1f2937 !important;
    color: #e5e7eb !important;
}

body.dark-mode .receipt-table th {
    background: #374151 !important;
    color: #d1d5db !important;
}

body.dark-mode .receipt-table td {
    background: #1f2937 !important;
    color: #d1d5db !important;
    border-color: #374151 !important;
}

body.dark-mode .dropzone,
body.dark-mode [class*="dropzone"] {
    background: #374151 !important;
    border-color: #6b7280 !important;
    color: #d1d5db !important;
}

body.dark-mode .dropzone:hover,
body.dark-mode [class*="dropzone"]:hover {
    border-color: var(--primary-500) !important;
    background: #3f4d5e !important;
}

body.dark-mode .dropzone *,
body.dark-mode [class*="dropzone"] * {
    color: #d1d5db !important;
}

/* Size Charts - Tab text visibility */
body.dark-mode .size-chart-tabs .tab,
body.dark-mode [data-page="size-charts"] .tab {
    color: #9ca3af !important;
}

body.dark-mode .size-chart-tabs .tab:hover,
body.dark-mode [data-page="size-charts"] .tab:hover {
    color: #e5e7eb !important;
    background: #374151 !important;
}

body.dark-mode .size-chart-tabs .tab.active,
body.dark-mode [data-page="size-charts"] .tab.active {
    color: var(--primary-400) !important;
    border-bottom-color: var(--primary-400) !important;
}

/* Button outlines - Improved visibility in dark mode */
body.dark-mode .btn-outline,
body.dark-mode .btn-secondary {
    border: 1px solid #6b7280 !important;
    color: #e5e7eb !important;
}

body.dark-mode .btn-outline:hover,
body.dark-mode .btn-secondary:hover:not(:disabled) {
    background: #4b5563 !important;
    border-color: #9ca3af !important;
    color: #ffffff !important;
}

body.dark-mode .btn-outline:disabled,
body.dark-mode .btn-secondary:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

body.dark-mode .btn:disabled,
body.dark-mode .btn.btn-disabled {
    opacity: 0.6;
}

/* Orders page - Status badges visibility */
body.dark-mode .badge-info {
    background: #60a5fa !important;
    color: #000000 !important;
}

body.dark-mode .badge-success {
    background: #6ee7b7 !important;
    color: #000000 !important;
}

body.dark-mode .badge-error {
    background: #fca5a5 !important;
    color: #000000 !important;
}

/* Checklist - Tab highlight improvement */
body.dark-mode .checklist-item {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .checklist-item:hover {
    background: #374151 !important;
}

body.dark-mode .checklist-item.completed {
    background: #1a2e1a !important;
    border-color: #2d4a2d !important;
}

/* Quick Cross List - Dark mode visibility */
body.dark-mode .platform-card,
body.dark-mode .crosslist-panel {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .platform-card:hover {
    border-color: var(--primary-500) !important;
}

body.dark-mode .platform-fields input,
body.dark-mode .platform-fields select,
body.dark-mode .platform-fields textarea {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

/* Analytics timeline - Dropdown visibility */
body.dark-mode .analytics-controls select,
body.dark-mode #analytics-period,
body.dark-mode [name="timeline"] {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

/* Financials - Tab visibility improvements */
body.dark-mode .financials-tabs .tab {
    color: #9ca3af !important;
}

body.dark-mode .financials-tabs .tab.active {
    color: var(--primary-400) !important;
    border-bottom-color: var(--primary-400) !important;
}

/* Image Bank - Folder icons and grid icon visibility */
body.dark-mode .folder-item svg {
    color: #9ca3af !important;
    stroke: #9ca3af !important;
}

body.dark-mode .folder-item.active svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

body.dark-mode .btn-icon svg {
    stroke: currentColor !important;
}

/* Help Chatbot - Timestamp and formatting */
body.dark-mode .chat-message {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .chat-message.assistant {
    background: #374151 !important;
}

body.dark-mode .chat-message .timestamp {
    color: #6b7280 !important;
}

body.dark-mode .chat-message ul,
body.dark-mode .chat-message ol {
    color: #d1d5db !important;
}

/* Transactions - Filter visibility */
body.dark-mode .transaction-filter-row select,
body.dark-mode .transaction-filter-row input {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

/* Modal improvements for dark mode */
body.dark-mode .modal .text-gray-600,
body.dark-mode .modal .text-gray-500 {
    color: #9ca3af !important;
}

body.dark-mode .modal .bg-gray-50,
body.dark-mode .modal [style*="background: var(--gray-50)"] {
    background: #374151 !important;
}

/* Photo Editor modal */
body.dark-mode .photo-editor-preview {
    background: #1f2937 !important;
}

body.dark-mode .photo-editor-controls {
    background: #374151 !important;
}

/* ============================================
   UI ENHANCEMENT COMPONENTS
   ============================================ */

/* Empty State Component */
.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    min-height: 300px;
}

.empty-state-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--gray-400);
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 8px 0;
}

.empty-state-description {
    font-size: 14px;
    color: var(--gray-500);
    max-width: 360px;
    margin: 0;
    line-height: 1.5;
}

body.dark-mode .empty-state-icon-wrapper {
    background: #374151;
    color: #6b7280;
}

body.dark-mode .empty-state-title {
    color: #f3f4f6;
}

body.dark-mode .empty-state-description {
    color: #9ca3af;
}

/* Skeleton Loader Component */
.skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

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

.skeleton-text {
    height: 14px;
    width: 100%;
}

.skeleton-title {
    height: 24px;
    width: 60%;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-image {
    height: 120px;
    width: 100%;
    border-radius: 8px;
}

.skeleton-card {
    padding: 16px;
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

.skeleton-table {
    padding: 16px;
}

body.dark-mode .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

body.dark-mode .skeleton-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .skeleton-row {
    border-color: #374151;
}

/* Loading Button Component */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    display: inline-block;
}

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

/* Page Loading Overlay */
.page-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.page-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.page-loader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary-600);
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

.page-loader-message {
    font-size: 14px;
    color: var(--gray-600);
    margin: 0;
}

@media (prefers-color-scheme: dark) {
    .page-loader-overlay {
        background: rgba(17, 24, 39, 0.9);
    }
}

body.dark-mode .page-loader-overlay {
    background: rgba(17, 24, 39, 0.9);
}

body.dark-mode .page-loader-spinner {
    border-color: #374151;
    border-top-color: var(--primary-500);
}

body.dark-mode .page-loader-message {
    color: #9ca3af;
}

/* Tooltip Component */
.tooltip-wrapper {
    position: relative;
    display: inline-flex;
}

.tooltip-wrapper::before,
.tooltip-wrapper::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: 1000;
}

.tooltip-wrapper::before {
    content: attr(data-tooltip);
    background: var(--gray-900);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    max-width: 200px;
}

.tooltip-wrapper::after {
    content: '';
    border: 5px solid transparent;
}

/* Tooltip positions */
.tooltip-wrapper[data-tooltip-position="top"]::before {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-wrapper[data-tooltip-position="top"]::after {
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--gray-900);
}

.tooltip-wrapper[data-tooltip-position="bottom"]::before {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-wrapper[data-tooltip-position="bottom"]::after {
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--gray-900);
}

.tooltip-wrapper[data-tooltip-position="left"]::before {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.tooltip-wrapper[data-tooltip-position="left"]::after {
    right: calc(100% + 3px);
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--gray-900);
}

.tooltip-wrapper[data-tooltip-position="right"]::before {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.tooltip-wrapper[data-tooltip-position="right"]::after {
    left: calc(100% + 3px);
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--gray-900);
}

.tooltip-wrapper:hover::before,
.tooltip-wrapper:hover::after {
    opacity: 1;
    visibility: visible;
}

body.dark-mode .tooltip-wrapper::before {
    background: #1f2937;
    color: #f3f4f6;
    border: 1px solid #374151;
}

body.dark-mode .tooltip-wrapper[data-tooltip-position="top"]::after {
    border-top-color: #1f2937;
}

body.dark-mode .tooltip-wrapper[data-tooltip-position="bottom"]::after {
    border-bottom-color: #1f2937;
}

body.dark-mode .tooltip-wrapper[data-tooltip-position="left"]::after {
    border-left-color: #1f2937;
}

body.dark-mode .tooltip-wrapper[data-tooltip-position="right"]::after {
    border-right-color: #1f2937;
}

/* Breadcrumb Component */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.breadcrumb-link {
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumb-link:hover {
    color: var(--primary-600);
}

.breadcrumb-separator {
    color: var(--gray-300);
}

.breadcrumb-current {
    color: var(--gray-900);
    font-weight: 500;
}

body.dark-mode .breadcrumb-link {
    color: #9ca3af;
}

body.dark-mode .breadcrumb-link:hover {
    color: var(--primary-400);
}

body.dark-mode .breadcrumb-separator {
    color: #4b5563;
}

body.dark-mode .breadcrumb-current {
    color: #f3f4f6;
}

/* Confirmation Dialog */
.confirm-dialog {
    text-align: center;
}

.confirm-dialog-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 8px 0;
}

.confirm-dialog-message {
    font-size: 14px;
    color: var(--gray-600);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.confirm-dialog-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

body.dark-mode .confirm-dialog-title {
    color: #f3f4f6;
}

body.dark-mode .confirm-dialog-message {
    color: #9ca3af;
}

/* Danger Button */
.btn-danger {
    background: var(--red-600);
    color: white;
    border: none;
}

.btn-danger:hover {
    background: var(--red-700);
}

/* Enhanced Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: toast-slide-in 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

@keyframes toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-exit {
    animation: toast-slide-out 0.2s ease-in forwards;
}

@keyframes toast-slide-out {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.toast-message {
    font-size: 14px;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s;
}

.toast-close:hover {
    color: var(--gray-600);
}

.toast-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.toast-action-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}

.toast-action-btn.undo {
    background: var(--primary-100);
    color: var(--primary-700);
}

.toast-action-btn.undo:hover {
    background: var(--primary-200);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--primary-500);
    animation: toast-progress linear forwards;
}

@keyframes toast-progress {
    from { width: 100%; }
    to { width: 0%; }
}

.toast.toast-success .toast-icon { color: var(--green-600); }
.toast.toast-error .toast-icon { color: var(--red-600); }
.toast.toast-warning .toast-icon { color: var(--yellow-600); }
.toast.toast-info .toast-icon { color: var(--blue-600); }

.toast.toast-success .toast-progress { background: var(--green-500); }
.toast.toast-error .toast-progress { background: var(--red-500); }
.toast.toast-warning .toast-progress { background: var(--yellow-500); }
.toast.toast-info .toast-progress { background: var(--blue-500); }

body.dark-mode .toast {
    background: #1f2937;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .toast-message {
    color: #f3f4f6;
}

body.dark-mode .toast-close {
    color: #6b7280;
}

body.dark-mode .toast-close:hover {
    color: #9ca3af;
}

/* Table Enhancements */
.table-container {
    position: relative;
    overflow: auto;
    max-height: calc(100vh - 300px);
}

.table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
}

.table thead::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--gray-200);
}

body.dark-mode .table thead {
    background: #1f2937;
}

body.dark-mode .table thead::after {
    border-color: #374151;
}

/* Bulk Actions Floating Bar */
.bulk-actions-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-900);
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    animation: bulk-bar-slide-up 0.3s ease-out;
}

@keyframes bulk-bar-slide-up {
    from {
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.bulk-actions-count {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.bulk-actions-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
}

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

.bulk-action-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}

.bulk-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.bulk-action-btn.danger:hover {
    background: var(--red-600);
}

.bulk-clear-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 4px;
    display: flex;
    transition: color 0.15s;
}

.bulk-clear-btn:hover {
    color: white;
}

/* Keyboard Shortcuts Modal */
.keyboard-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.keyboard-shortcut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
}

.keyboard-shortcut-label {
    font-size: 14px;
    color: var(--gray-700);
}

.keyboard-shortcut-keys {
    display: flex;
    gap: 4px;
}

.keyboard-key {
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-family: monospace;
    color: var(--gray-700);
}

body.dark-mode .keyboard-shortcut-item {
    border-color: #374151;
}

body.dark-mode .keyboard-shortcut-label {
    color: #d1d5db;
}

body.dark-mode .keyboard-key {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

/* Global Search (Cmd+K) */
.global-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.global-search-modal {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.global-search-input-wrapper {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--gray-200);
    gap: 12px;
}

.global-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    background: transparent;
}

.global-search-input::placeholder {
    color: var(--gray-400);
}

.global-search-shortcut {
    display: flex;
    align-items: center;
    gap: 2px;
}

.global-search-results {
    max-height: 400px;
    overflow-y: auto;
}

.global-search-section {
    padding: 8px 0;
}

.global-search-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    padding: 8px 16px;
}

.global-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.1s;
}

.global-search-item:hover,
.global-search-item.selected {
    background: var(--gray-50);
}

.global-search-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
}

.global-search-item-content {
    flex: 1;
    min-width: 0;
}

.global-search-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-900);
}

.global-search-item-subtitle {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 2px;
}

.global-search-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--gray-500);
}

body.dark-mode .global-search-modal {
    background: #1f2937;
}

body.dark-mode .global-search-input-wrapper {
    border-color: #374151;
}

body.dark-mode .global-search-input {
    color: #f3f4f6;
}

body.dark-mode .global-search-item:hover,
body.dark-mode .global-search-item.selected {
    background: #374151;
}

body.dark-mode .global-search-item-icon {
    background: #374151;
    color: #9ca3af;
}

body.dark-mode .global-search-item-title {
    color: #f3f4f6;
}

body.dark-mode .global-search-footer {
    border-color: #374151;
}

/* Card Hover Effects */
.card-hover {
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

body.dark-mode .card-hover:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Button Click Ripple Effect */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.4s, opacity 0.6s;
}

.btn-ripple:active::after {
    transform: scale(0, 0);
    opacity: 1;
    transition: 0s;
}

/* Smooth Page Transitions */
.page-transition-enter {
    animation: page-fade-in 0.2s ease-out;
}

@keyframes page-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accordion Animation */
.accordion-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s;
}

.accordion-content.collapsed {
    max-height: 0;
    opacity: 0;
}

.accordion-content.expanded {
    max-height: 1000px;
    opacity: 1;
}

/* Focus Visible for Keyboard Navigation */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* Mobile Responsive Improvements */
@media (max-width: 768px) {
    .bulk-actions-bar {
        left: 16px;
        right: 16px;
        transform: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    .global-search-overlay {
        padding: 60px 16px;
    }

    .keyboard-shortcuts-grid {
        grid-template-columns: 1fr;
    }

    .toast-container {
        left: 16px;
        right: 16px;
        max-width: none;
    }

    .empty-state-container {
        padding: 32px 16px;
        min-height: 200px;
    }
}

/* ============================================
   FORM VALIDATION STYLES
   ============================================ */

/* Form group with validation state */
.form-group.has-error .form-input,
.form-group.has-error .form-select,
.form-group.has-error .form-textarea {
    border-color: var(--red-500);
    background-color: var(--red-50);
}

.form-group.has-error .form-input:focus,
.form-group.has-error .form-select:focus,
.form-group.has-error .form-textarea:focus {
    border-color: var(--red-500);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-group.has-success .form-input,
.form-group.has-success .form-select,
.form-group.has-success .form-textarea {
    border-color: var(--green-500);
}

/* Error message */
.form-error {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--red-600);
    animation: form-error-shake 0.3s ease-out;
}

@keyframes form-error-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Input with validation icon */
.form-input-wrapper {
    position: relative;
}

.form-input-wrapper .form-input {
    padding-right: 36px;
}

.form-validation-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

.form-validation-icon.success {
    color: var(--green-500);
}

.form-validation-icon.error {
    color: var(--red-500);
}

/* Validation summary */
.validation-summary {
    background: var(--red-50);
    border: 1px solid var(--red-200);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.validation-summary-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--red-700);
    margin-bottom: 8px;
}

.validation-summary-list {
    margin: 0;
    padding-left: 24px;
    font-size: 13px;
    color: var(--red-600);
}

/* Required field indicator */
.form-label.required::after {
    content: ' *';
    color: var(--red-500);
}

/* Character counter */
.form-char-counter {
    display: flex;
    justify-content: flex-end;
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 4px;
}

.form-char-counter.warning {
    color: var(--yellow-600);
}

.form-char-counter.error {
    color: var(--red-600);
}

/* Dark mode form validation */
body.dark-mode .form-group.has-error .form-input,
body.dark-mode .form-group.has-error .form-select {
    border-color: var(--red-500);
    background-color: rgba(239, 68, 68, 0.1);
}

body.dark-mode .form-error {
    color: var(--red-400);
}

body.dark-mode .validation-summary {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

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

/* Card hover lift effect */
.card-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

body.dark-mode .card-lift:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Fade in animation */
.fade-in {
    animation: fadeIn 0.25s ease-out;
}

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

/* Slide up animation */
.slide-up {
    animation: slideUp 0.3s ease-out;
}

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

/* Pulse animation */
.pulse {
    animation: pulseAnimation 2s infinite;
}

@keyframes pulseAnimation {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Scale in animation */
.scale-in {
    animation: scaleIn 0.2s ease-out;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   DARK MODE REFINEMENTS
   ============================================ */

body.dark-mode {
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Subtle gradient backgrounds */
body.dark-mode .card {
    background: linear-gradient(180deg, #1f2937 0%, #1a202c 100%);
}

body.dark-mode .sidebar {
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
}

/* Improved focus states */
body.dark-mode *:focus-visible {
    outline-color: var(--primary-400);
}

/* ============================================
   DATA VISUALIZATION COMPONENTS
   ============================================ */

/* Stat card value row with sparkline */
.stat-card-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Sparkline chart */
.sparkline {
    flex-shrink: 0;
}

.sparkline svg {
    display: block;
}

/* Progress Ring */
.progress-ring-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.progress-ring-percent {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
}

.progress-ring-text {
    font-size: 10px;
    color: var(--gray-500);
    text-transform: uppercase;
}

body.dark-mode .progress-ring-percent {
    color: #f3f4f6;
}

body.dark-mode .progress-ring-bg {
    stroke: #374151;
}

/* Progress Bar */
.progress-bar-container {
    width: 100%;
}

.progress-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.progress-bar-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
}

.progress-bar-percent {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-900);
}

.progress-bar-track {
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

body.dark-mode .progress-bar-label {
    color: #d1d5db;
}

body.dark-mode .progress-bar-percent {
    color: #f3f4f6;
}

body.dark-mode .progress-bar-track {
    background: #374151;
}

/* Comparison Bar */
.comparison-bar {
    padding: 12px 0;
}

.comparison-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.comparison-bar-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
}

.comparison-bar-change {
    font-size: 13px;
    font-weight: 600;
}

.comparison-bar-change.positive {
    color: var(--green-600);
}

.comparison-bar-change.negative {
    color: var(--red-600);
}

.comparison-bar-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comparison-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comparison-bar-period {
    width: 80px;
    font-size: 12px;
    color: var(--gray-500);
    flex-shrink: 0;
}

.comparison-bar-track {
    flex: 1;
    height: 20px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.comparison-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

.comparison-bar-value {
    width: 60px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
}

body.dark-mode .comparison-bar-label {
    color: #f3f4f6;
}

body.dark-mode .comparison-bar-track {
    background: #374151;
}

body.dark-mode .comparison-bar-value {
    color: #d1d5db;
}

/* Activity Feed */
.activity-feed {
    display: flex;
    flex-direction: column;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.activity-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-900);
}

.activity-description {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 2px;
}

.activity-time {
    font-size: 12px;
    color: var(--gray-400);
    white-space: nowrap;
}

.activity-empty {
    padding: 24px;
    text-align: center;
    color: var(--gray-500);
    font-size: 14px;
}

body.dark-mode .activity-item {
    border-color: #374151;
}

body.dark-mode .activity-title {
    color: #f3f4f6;
}

body.dark-mode .activity-description {
    color: #9ca3af;
}

/* ============================================
   INLINE EDITING
   ============================================ */

.inline-edit {
    display: inline-flex;
    align-items: center;
}

.inline-edit-display {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all 0.15s;
}

.inline-edit-display:hover {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

.inline-edit-input {
    width: auto;
    min-width: 60px;
    padding: 2px 6px;
    font-size: inherit;
    border: 1px solid var(--primary-500);
    border-radius: 4px;
    outline: none;
    background: white;
}

.inline-edit-input.hidden {
    display: none;
}

body.dark-mode .inline-edit-display:hover {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .inline-edit-input {
    background: #1f2937;
    color: #f3f4f6;
}

/* ============================================
   AUTOCOMPLETE
   ============================================ */

.autocomplete-wrapper {
    position: relative;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

.autocomplete-dropdown.hidden {
    display: none;
}

.autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.1s;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
    background: var(--gray-50);
}

.autocomplete-item-highlight {
    font-weight: 600;
    color: var(--primary-600);
}

.search-highlight {
    background: #fef08a;
    padding: 0 2px;
    border-radius: 2px;
}

body.dark-mode .search-highlight {
    background: rgba(250, 204, 21, 0.3);
    color: #fef08a;
}

.autocomplete-empty {
    padding: 12px;
    text-align: center;
    color: var(--gray-500);
    font-size: 13px;
}

body.dark-mode .autocomplete-dropdown {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .autocomplete-item:hover,
body.dark-mode .autocomplete-item.selected {
    background: #374151;
}

/* ============================================
   HELP TOOLTIP
   ============================================ */

.help-tooltip {
    display: inline-flex;
    align-items: center;
    color: var(--gray-400);
    cursor: help;
    margin-left: 4px;
    position: relative;
}

.help-tooltip:hover {
    color: var(--gray-600);
}

.help-tooltip[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-900);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    max-width: 250px;
    white-space: normal;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    margin-bottom: 6px;
    animation: tooltipFadeIn 0.15s ease-out;
}

.help-tooltip[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--gray-900);
    margin-bottom: -6px;
    z-index: 1001;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.help-link {
    font-size: 12px;
    margin-left: 8px;
    color: var(--primary-600);
    text-decoration: none;
}

.help-link:hover {
    text-decoration: underline;
}

body.dark-mode .help-tooltip[data-tooltip]:hover::after {
    background: #374151;
}

body.dark-mode .help-tooltip[data-tooltip]:hover::before {
    border-top-color: #374151;
}

/* ============================================
   INLINE BANNER
   ============================================ */

.inline-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    animation: slideDown 0.3s ease-out;
}

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

.inline-banner-info {
    background: var(--blue-50);
    border: 1px solid var(--blue-200);
    color: var(--blue-800);
}

.inline-banner-warning {
    background: var(--yellow-50);
    border: 1px solid var(--yellow-200);
    color: var(--yellow-800);
}

.inline-banner-error {
    background: var(--red-50);
    border: 1px solid var(--red-200);
    color: var(--red-800);
}

.inline-banner-success {
    background: var(--green-50);
    border: 1px solid var(--green-200);
    color: var(--green-800);
}

.inline-banner-icon {
    flex-shrink: 0;
}

.inline-banner-content {
    flex: 1;
    font-size: 14px;
}

.inline-banner-dismiss {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.inline-banner-dismiss:hover {
    opacity: 1;
}

body.dark-mode .inline-banner-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

body.dark-mode .inline-banner-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

body.dark-mode .inline-banner-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

body.dark-mode .inline-banner-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

/* ============================================
   ONBOARDING CHECKLIST
   ============================================ */

.onboarding-checklist {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
    isolation: isolate;
}

.onboarding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--gray-100);
    overflow: visible;
    position: relative;
    z-index: 1;
}

.onboarding-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-900);
}

.onboarding-progress {
    font-size: 13px;
    color: var(--gray-500);
    font-weight: normal;
}

.onboarding-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.onboarding-minimize {
    background: none;
    border: none;
    font-size: 12px;
    color: var(--gray-400);
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    position: relative;
    z-index: 100;
    pointer-events: auto;
}

.onboarding-minimize:hover {
    color: var(--gray-600);
}

.onboarding-dismiss {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--gray-400);
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    position: relative;
    z-index: 100;
    pointer-events: auto;
}

.onboarding-dismiss:hover {
    color: var(--gray-600);
}

.onboarding-checklist.minimized .onboarding-steps {
    display: none;
}

.onboarding-progress-bar {
    height: 4px;
    background: var(--gray-100);
}

.onboarding-progress-fill {
    height: 100%;
    background: var(--primary-500);
    transition: width 0.5s ease-out;
}

.onboarding-steps {
    padding: 8px;
}

.onboarding-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.onboarding-step:hover:not(.completed) {
    background: var(--gray-50);
}

.onboarding-step.completed {
    opacity: 0.6;
}

.onboarding-step-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.onboarding-step:not(.completed) .onboarding-step-check {
    background: var(--gray-100);
    color: var(--gray-600);
}

.onboarding-step.completed .onboarding-step-check {
    background: var(--green-500);
    color: white;
}

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

.onboarding-step-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-900);
}

.onboarding-step-description {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 2px;
}

.onboarding-step-arrow {
    color: var(--gray-400);
}

body.dark-mode .onboarding-checklist {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .onboarding-header {
    border-color: #374151;
}

body.dark-mode .onboarding-title {
    color: #f3f4f6;
}

body.dark-mode .onboarding-progress-bar {
    background: #374151;
}

body.dark-mode .onboarding-step:hover:not(.completed) {
    background: #374151;
}

body.dark-mode .onboarding-step:not(.completed) .onboarding-step-check {
    background: #374151;
    color: #d1d5db;
}

body.dark-mode .onboarding-step-title {
    color: #f3f4f6;
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */

.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gray-900);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: all 0.2s;
    z-index: 100;
    transform: rotate(180deg);
}

.back-to-top:hover {
    background: var(--gray-800);
    transform: rotate(180deg) translateY(2px);
}

.back-to-top.hidden {
    opacity: 0;
    pointer-events: none;
    transform: rotate(180deg) translateY(20px);
}

body.dark-mode .back-to-top {
    background: var(--gray-700);
}

body.dark-mode .back-to-top:hover {
    background: var(--gray-600);
}

/* ============================================
   OFFLINE INDICATOR
   ============================================ */

.offline-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--yellow-500);
    color: var(--yellow-900);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    z-index: 10001;
    animation: slideDown 0.3s ease-out;
}

.offline-indicator.hidden {
    display: none;
}

.offline-icon {
    display: flex;
}

.offline-queue {
    opacity: 0.8;
}

/* ============================================
   CONFETTI CELEBRATION
   ============================================ */

.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg);
    }
}

/* ============================================
   AUTO-SAVE INDICATOR
   ============================================ */

.autosave-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-500);
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--gray-100);
}

.autosave-indicator.saving {
    color: var(--yellow-600);
    background: var(--yellow-50);
}

.autosave-indicator.saved {
    color: var(--green-600);
    background: var(--green-50);
}

.autosave-indicator.error {
    color: var(--red-600);
    background: var(--red-50);
}

.autosave-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* ============================================
   IMAGE UPLOAD ENHANCEMENTS
   ============================================ */

.image-upload-zone {
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}

.image-upload-zone:hover,
.image-upload-zone.dragover {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.image-upload-zone.dragover {
    transform: scale(1.02);
}

.image-upload-icon {
    color: var(--gray-400);
    margin-bottom: 12px;
}

.image-upload-text {
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.image-upload-hint {
    font-size: 12px;
    color: var(--gray-400);
}

.image-upload-progress {
    margin-top: 16px;
}

.image-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.image-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: move;
    transition: transform 0.15s;
}

.image-thumbnail:hover {
    transform: scale(1.05);
}

.image-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-thumbnail-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.image-thumbnail:hover .image-thumbnail-remove {
    opacity: 1;
}

.image-thumbnail.dragging {
    opacity: 0.5;
    transform: scale(1.1);
}

body.dark-mode .image-upload-zone {
    border-color: #4b5563;
}

body.dark-mode .image-upload-zone:hover,
body.dark-mode .image-upload-zone.dragover {
    border-color: var(--primary-400);
    background: rgba(59, 130, 246, 0.1);
}

/* ============================================
   THEME CUSTOMIZATION
   ============================================ */

/* Density options */
body.density-compact {
    --spacing-base: 0.75;
}

body.density-compact .card {
    padding: 12px;
}

body.density-compact .btn {
    padding: 6px 12px;
}

body.density-compact .table td,
body.density-compact .table th {
    padding: 8px 12px;
}

body.density-comfortable {
    --spacing-base: 1.25;
}

body.density-comfortable .card {
    padding: 24px;
}

body.density-comfortable .btn {
    padding: 12px 24px;
}

body.density-comfortable .table td,
body.density-comfortable .table th {
    padding: 16px;
}

/* Font size options */
body.font-small {
    font-size: 13px;
}

body.font-large {
    font-size: 17px;
}

/* Accent colors */
body[data-accent="blue"] {
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
}

body[data-accent="green"] {
    --primary-500: #22c55e;
    --primary-600: #16a34a;
}

body[data-accent="purple"] {
    --primary-500: #8b5cf6;
    --primary-600: #7c3aed;
}

body[data-accent="orange"] {
    --primary-500: #f97316;
    --primary-600: #ea580c;
}

body[data-accent="pink"] {
    --primary-500: #ec4899;
    --primary-600: #db2777;
}

/* ============================================
   NOTIFICATION PREFERENCES UI
   ============================================ */

.notification-prefs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notification-pref-group {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.notification-pref-header {
    padding: 12px 16px;
    background: var(--gray-50);
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-200);
}

.notification-pref-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
}

.notification-pref-item:last-child {
    border-bottom: none;
}

.notification-pref-label {
    font-size: 14px;
    color: var(--gray-700);
}

.notification-pref-channels {
    display: flex;
    gap: 8px;
}

.notification-channel-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    transition: all 0.15s;
}

.notification-channel-btn:hover {
    border-color: var(--gray-300);
}

.notification-channel-btn.active {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

body.dark-mode .notification-pref-group {
    border-color: #374151;
}

body.dark-mode .notification-pref-header {
    background: #374151;
    color: #f3f4f6;
    border-color: #4b5563;
}

body.dark-mode .notification-pref-item {
    border-color: #374151;
}

body.dark-mode .notification-pref-label {
    color: #d1d5db;
}

body.dark-mode .notification-channel-btn {
    background: #1f2937;
    border-color: #374151;
}

/* ============================================
   DASHBOARD WIDGET CUSTOMIZATION
   ============================================ */

.dashboard-widgets {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.dashboard-widget {
    position: relative;
    transition: all 0.2s;
}

.dashboard-widget.dragging {
    opacity: 0.5;
    transform: scale(1.02);
    z-index: 100;
}

.dashboard-widget.drag-over {
    border: 2px dashed var(--primary-500);
}

.dashboard-widget .widget-drag-handle {
    position: absolute;
    top: 12px;
    left: 12px;
    cursor: move;
    opacity: 0;
    color: var(--gray-400);
    transition: opacity 0.15s;
}

.dashboard-widget:hover .widget-drag-handle {
    opacity: 1;
}

.dashboard-widget .widget-hide-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
    opacity: 0;
    color: var(--gray-400);
    background: none;
    border: none;
    padding: 4px;
    transition: opacity 0.15s;
}

.dashboard-widget:hover .widget-hide-btn {
    opacity: 1;
}

.dashboard-widget .widget-hide-btn:hover {
    color: var(--gray-600);
}

/* Collapsible Card Styles */
.collapsible-card {
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.collapsible-card .card-body {
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    overflow: hidden;
    flex: 1;
}

.collapsible-card.collapsed .card-body {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    border: none !important;
    visibility: hidden;
    flex: 0;
}

.collapsible-card.collapsed {
    min-height: 0;
    overflow: hidden;
}

.collapsible-card.collapsed .card-header {
    border-bottom: none;
}

.widget-collapse-btn {
    background: none;
    border: none;
    font-size: 12px;
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}

.widget-collapse-btn:hover {
    color: var(--gray-600);
    background: var(--gray-100);
}

/* Dashboard Widget Resize Handles */
.dashboard-widget {
    position: relative;
}

.widget-resize-handle {
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    z-index: 10;
    user-select: none;
}

.dashboard-widget:hover .widget-resize-handle {
    opacity: 1;
}

/* Right edge handle (width) */
.widget-resize-handle-right {
    right: 0;
    top: 0;
    bottom: 8px;
    width: 8px;
    cursor: ew-resize;
    background: transparent;
}

.widget-resize-handle-right:hover {
    background: var(--primary-200);
}

/* Bottom edge handle (height) */
.widget-resize-handle-bottom {
    bottom: 0;
    left: 0;
    right: 8px;
    height: 8px;
    cursor: ns-resize;
    background: transparent;
}

.widget-resize-handle-bottom:hover {
    background: var(--primary-200);
}

/* Corner handle (both) */
.widget-resize-handle-corner {
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
    background: transparent;
    border-radius: 0 0 var(--radius-lg) 0;
}

.widget-resize-handle-corner::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--gray-300);
    border-bottom: 2px solid var(--gray-300);
}

.widget-resize-handle-corner:hover {
    background: var(--primary-100);
}

.widget-resize-handle-corner:hover::after {
    border-color: var(--primary-500);
}

.dashboard-widget.resizing {
    opacity: 0.9;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.dashboard-widget.resizing .widget-resize-handle {
    opacity: 1;
}

/* Responsive Widget Content - scales with container size */
.dashboard-widget {
    container-type: inline-size;
    container-name: widget;
    overflow: hidden;
}

/* Responsive text scaling based on widget width */
@container widget (max-width: 300px) {
    .stat-value, .gauge-value, .metric-value {
        font-size: clamp(1rem, 4cqw, 1.5rem) !important;
    }
    .stat-label, .metric-label {
        font-size: clamp(0.65rem, 2.5cqw, 0.75rem) !important;
    }
    .card-header h3, .widget-header h3 {
        font-size: clamp(0.75rem, 3cqw, 0.875rem) !important;
    }
    .stat-card, .metric-card {
        padding: 8px !important;
    }
    .stats-grid {
        gap: 8px !important;
    }
}

@container widget (min-width: 301px) and (max-width: 450px) {
    .stat-value, .gauge-value, .metric-value {
        font-size: clamp(1.25rem, 5cqw, 1.75rem) !important;
    }
    .stat-label, .metric-label {
        font-size: clamp(0.7rem, 2.8cqw, 0.8rem) !important;
    }
    .card-header h3, .widget-header h3 {
        font-size: clamp(0.8rem, 3.5cqw, 1rem) !important;
    }
}

@container widget (min-width: 451px) {
    .stat-value, .gauge-value, .metric-value {
        font-size: clamp(1.5rem, 4cqw, 2.25rem) !important;
    }
    .stat-label, .metric-label {
        font-size: clamp(0.75rem, 2cqw, 0.875rem) !important;
    }
}

/* Ensure content stays visible and wraps properly */
.dashboard-widget .card-body {
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Responsive grid layouts within widgets */
.dashboard-widget .stats-grid,
.dashboard-widget .metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 12px;
}

/* Responsive stat cards */
.dashboard-widget .stat-card {
    min-width: 0;
    overflow: hidden;
}

.dashboard-widget .stat-card .stat-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Comparison bars - responsive */
.dashboard-widget .comparison-bar-container {
    min-width: 0;
}

.dashboard-widget .comparison-item {
    min-width: 0;
}

.dashboard-widget .comparison-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Activity feed responsive */
.dashboard-widget .activity-item {
    flex-wrap: wrap;
}

/* Quick actions responsive */
.dashboard-widget .quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
}

/* Gauge/progress responsive */
.dashboard-widget .gauge-container,
.dashboard-widget .progress-ring-container {
    max-width: 100%;
    margin: 0 auto;
}

/* Smooth transitions for widget content */
.dashboard-widget .stat-value,
.dashboard-widget .stat-label,
.dashboard-widget .metric-value,
.dashboard-widget .metric-label,
.dashboard-widget .gauge-value,
.dashboard-widget .card-header h3,
.dashboard-widget .widget-header h3 {
    transition: font-size 0.1s ease-out;
}

/* Widget size transition when not actively resizing */
.dashboard-widget:not(.resizing) {
    transition: width 0.1s ease-out, height 0.1s ease-out;
}

/* No transition during active resize for smooth drag */
.dashboard-widget.resizing {
    transition: none !important;
}

.dashboard-widget.resizing * {
    transition: none !important;
}

/* Dashboard Widget Grid */
.dashboard-widgets-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-start;
}

.dashboard-widgets-container .dashboard-widget {
    flex: 1 1 auto;
    min-width: 280px;
    box-sizing: border-box;
}

/* Activity Feed constrained height */
.activity-feed-body {
    max-height: 250px;
    overflow-y: auto;
}

.collapsible-card.collapsed .activity-feed-body {
    max-height: 0 !important;
}

/* Platform Performance inside card */
.card .platform-performance-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.card .platform-performance-item {
    flex: 1 1 calc(25% - var(--space-3));
    min-width: 150px;
}

body.dark-mode .widget-collapse-btn:hover {
    color: var(--gray-300);
    background: var(--gray-700);
}

.widget-size-full {
    grid-column: span 3;
}

.widget-size-half {
    grid-column: span 2;
}

.widget-size-third {
    grid-column: span 1;
}

.widget-settings-panel {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.widget-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.widget-settings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    transition: all 0.15s;
}

.widget-settings-row:hover {
    background: var(--gray-50);
}

.widget-settings-row.hidden-widget {
    opacity: 0.5;
}

.widget-settings-row.hidden-widget span {
    text-decoration: line-through;
}

.widget-settings-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.widget-settings-toggle input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
}

.widget-size-select {
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 13px;
    background: white;
    cursor: pointer;
}

.widget-size-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.widget-settings-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.widget-settings-item:hover {
    background: var(--gray-50);
}

.widget-settings-item.hidden-widget {
    opacity: 0.5;
    text-decoration: line-through;
}

.widget-settings-item input[type="checkbox"] {
    margin: 0;
}

body.dark-mode .widget-settings-panel {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .widget-settings-item {
    border-color: #374151;
}

body.dark-mode .widget-settings-item:hover {
    background: #374151;
}

body.dark-mode .widget-settings-row {
    border-color: #374151;
}

body.dark-mode .widget-settings-row:hover {
    background: #374151;
}

body.dark-mode .widget-size-select {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

/* ============================================
   ENHANCED IMAGE UPLOAD ZONE
   ============================================ */

.image-upload-paste-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--gray-400);
}

.image-upload-paste-hint kbd {
    background: var(--gray-100);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
}

body.dark-mode .image-upload-paste-hint kbd {
    background: #374151;
}

/* ============================================
   COMMAND PALETTE (Cmd+K)
   ============================================ */

.command-palette-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    animation: fadeIn 0.15s ease-out;
}

.command-palette {
    width: 100%;
    max-width: 600px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: slideDown 0.2s ease-out;
}

.command-palette-input-wrapper {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--gray-200);
    gap: 12px;
}

.command-palette-icon {
    color: var(--gray-400);
}

.command-palette-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 18px;
    background: transparent;
}

.command-palette-shortcut {
    font-size: 12px;
    color: var(--gray-400);
    background: var(--gray-100);
    padding: 4px 8px;
    border-radius: 4px;
}

.command-palette-results {
    max-height: 400px;
    overflow-y: auto;
}

.command-palette-group {
    padding: 8px;
}

.command-palette-group-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    padding: 8px 12px;
    letter-spacing: 0.5px;
}

.command-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
}

.command-palette-item:hover,
.command-palette-item.selected {
    background: var(--gray-100);
}

.command-palette-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary-100);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
}

.command-palette-item-content {
    flex: 1;
}

.command-palette-item-title {
    font-weight: 500;
    color: var(--gray-900);
}

.command-palette-item-description {
    font-size: 13px;
    color: var(--gray-500);
}

.command-palette-item-shortcut {
    font-size: 12px;
    color: var(--gray-400);
}

.command-palette-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--gray-500);
}

.command-palette-footer kbd {
    background: var(--gray-100);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: inherit;
}

body.dark-mode .command-palette {
    background: #1f2937;
}

body.dark-mode .command-palette-input-wrapper {
    border-color: #374151;
}

body.dark-mode .command-palette-input {
    color: #f3f4f6;
}

body.dark-mode .command-palette-item:hover,
body.dark-mode .command-palette-item.selected {
    background: #374151;
}

body.dark-mode .command-palette-item-title {
    color: #f3f4f6;
}

body.dark-mode .command-palette-footer {
    border-color: #374151;
}

/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.breadcrumb-item {
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumb-item:hover {
    color: var(--primary-600);
}

.breadcrumb-item.active {
    color: var(--gray-900);
    font-weight: 500;
}

.breadcrumb-separator {
    color: var(--gray-300);
}

body.dark-mode .breadcrumb-item.active {
    color: #f3f4f6;
}

/* ============================================
   KEYBOARD SHORTCUTS PANEL
   ============================================ */

.shortcuts-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    padding: 16px;
    min-width: 300px;
    z-index: 1000;
    animation: slideUp 0.2s ease-out;
}

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

.shortcuts-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.shortcuts-panel-title {
    font-weight: 600;
    color: var(--gray-900);
}

.shortcuts-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
}

.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shortcut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
}

.shortcut-item:last-child {
    border-bottom: none;
}

.shortcut-label {
    font-size: 14px;
    color: var(--gray-700);
}

.shortcut-keys {
    display: flex;
    gap: 4px;
}

.shortcut-key {
    background: var(--gray-100);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    min-width: 24px;
    text-align: center;
}

body.dark-mode .shortcuts-panel {
    background: #1f2937;
}

body.dark-mode .shortcuts-panel-title {
    color: #f3f4f6;
}

body.dark-mode .shortcut-item {
    border-color: #374151;
}

body.dark-mode .shortcut-label {
    color: #d1d5db;
}

body.dark-mode .shortcut-key {
    background: #374151;
    color: #d1d5db;
}

/* ============================================
   KANBAN BOARD
   ============================================ */

.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
    min-height: 500px;
}

.kanban-column {
    flex: 0 0 300px;
    background: var(--gray-50);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
}

.kanban-column-header {
    padding: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--gray-200);
}

.kanban-column-count {
    background: var(--gray-200);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}

.kanban-column-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kanban-card {
    background: white;
    border-radius: 8px;
    padding: 12px;
    box-shadow: var(--shadow-sm);
    cursor: grab;
    transition: all 0.15s;
}

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

.kanban-card.dragging {
    opacity: 0.5;
    transform: rotate(3deg);
}

.kanban-card-title {
    font-weight: 500;
    margin-bottom: 8px;
}

.kanban-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--gray-500);
}

.kanban-column.drag-over {
    background: var(--primary-50);
    border: 2px dashed var(--primary-300);
}

body.dark-mode .kanban-column {
    background: #374151;
}

body.dark-mode .kanban-column-header {
    border-color: #4b5563;
}

body.dark-mode .kanban-column-count {
    background: #4b5563;
}

body.dark-mode .kanban-card {
    background: #1f2937;
}

/* ============================================
   CALENDAR HEATMAP
   ============================================ */

.calendar-heatmap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendar-heatmap-row {
    display: flex;
    gap: 4px;
}

.calendar-heatmap-cell {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--gray-100);
    cursor: pointer;
    transition: transform 0.1s;
}

.calendar-heatmap-cell:hover {
    transform: scale(1.2);
}

.calendar-heatmap-cell.level-1 { background: var(--green-100); }
.calendar-heatmap-cell.level-2 { background: var(--green-300); }
.calendar-heatmap-cell.level-3 { background: var(--green-500); }
.calendar-heatmap-cell.level-4 { background: var(--green-700); }

.calendar-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 8px;
}

.calendar-heatmap-months {
    display: flex;
    gap: 4px;
    font-size: 11px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.calendar-heatmap-days {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    color: var(--gray-400);
    margin-right: 8px;
}

body.dark-mode .calendar-heatmap-cell {
    background: #374151;
}

/* ============================================
   BULK SELECTION TOOLBAR
   ============================================ */

.bulk-toolbar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-900);
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    animation: slideUp 0.2s ease-out;
}

.bulk-toolbar-count {
    font-weight: 600;
    padding-right: 16px;
    border-right: 1px solid rgba(255,255,255,0.2);
}

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

.bulk-toolbar-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    transition: background 0.15s, border-color 0.15s;
}

.bulk-toolbar-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
}

.bulk-toolbar-btn.danger:hover {
    background: var(--red-600);
}

.bulk-toolbar-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 4px;
    margin-left: 8px;
}

.bulk-toolbar-close:hover {
    color: white;
}

/* ============================================
   CONTEXT MENU
   ============================================ */

.context-menu {
    position: fixed;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: 10000;
    overflow: hidden;
    animation: scaleIn 0.1s ease-out;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.1s;
}

.context-menu-item:hover {
    background: var(--gray-50);
}

.context-menu-item.danger {
    color: var(--red-600);
}

.context-menu-item.danger:hover {
    background: var(--red-50);
}

.context-menu-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 4px 0;
}

.context-menu-item-icon {
    width: 16px;
    color: var(--gray-400);
}

.context-menu-item-shortcut {
    margin-left: auto;
    font-size: 12px;
    color: var(--gray-400);
}

body.dark-mode .context-menu {
    background: #1f2937;
}

body.dark-mode .context-menu-item {
    color: #d1d5db;
}

body.dark-mode .context-menu-item:hover {
    background: #374151;
}

body.dark-mode .context-menu-divider {
    background: #374151;
}

/* ============================================
   SKELETON LOADING
   ============================================ */

.skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

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

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-text.short {
    width: 40%;
}

.skeleton-text.medium {
    width: 70%;
}

.skeleton-title {
    height: 24px;
    width: 50%;
    margin-bottom: 12px;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    border-radius: 8px;
}

.skeleton-card {
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.skeleton-table-row {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

.skeleton-table-cell {
    height: 20px;
    flex: 1;
}

body.dark-mode .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

/* ============================================
   MICRO-ANIMATIONS
   ============================================ */

/* Button ripple effect */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10);
    opacity: 0;
    transition: transform 0.4s, opacity 0.4s;
}

.btn-ripple:active::after {
    transform: scale(0);
    opacity: 1;
    transition: 0s;
}

/* Checkbox animation */
.checkbox-animated {
    position: relative;
    width: 20px;
    height: 20px;
}

.checkbox-animated input {
    opacity: 0;
    position: absolute;
}

.checkbox-animated .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-radius: 4px;
    transition: all 0.2s;
}

.checkbox-animated input:checked + .checkmark {
    background: var(--primary-600);
    border-color: var(--primary-600);
}

.checkbox-animated .checkmark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s ease-out;
}

.checkbox-animated input:checked + .checkmark::after {
    transform: rotate(45deg) scale(1);
}

/* Card hover lift */
.card-lift {
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Success checkmark draw */
.success-checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: var(--green-500);
    stroke-miterlimit: 10;
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.success-checkmark circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--green-500);
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-checkmark path {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% { stroke-dashoffset: 0; }
}

@keyframes fill {
    100% { box-shadow: inset 0px 0px 0px 30px transparent; }
}

@keyframes scale {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.1, 1.1, 1); }
}

/* Pulse badge */
.badge-pulse {
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

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

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

.status-dot.synced {
    background: var(--green-500);
}

.status-dot.syncing {
    background: var(--yellow-500);
    animation: pulse 1.5s infinite;
}

.status-dot.error {
    background: var(--red-500);
}

.status-dot.offline {
    background: var(--gray-400);
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-600);
}

/* ============================================
   NOTIFICATION CENTER
   ============================================ */

.notification-center {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100vh;
    background: white;
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

.notification-center.open {
    transform: translateX(0);
}

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

.notification-center-title {
    font-size: 18px;
    font-weight: 600;
}

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

.notification-center-content {
    overflow-y: auto;
    height: calc(100vh - 70px);
}

.notification-group {
    padding: 12px 20px;
}

.notification-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.notification-item:hover {
    background: var(--gray-50);
}

.notification-item.unread {
    background: var(--primary-50);
}

.notification-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.notification-item-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.notification-item-message {
    font-size: 13px;
    color: var(--gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-item-time {
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 4px;
}

body.dark-mode .notification-center {
    background: #1f2937;
}

body.dark-mode .notification-center-header {
    border-color: #374151;
}

body.dark-mode .notification-item:hover {
    background: #374151;
}

body.dark-mode .notification-item.unread {
    background: rgba(99, 102, 241, 0.1);
}

/* ============================================
   QUICK FILTERS PILLS
   ============================================ */

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.filter-pill:hover {
    background: var(--gray-200);
}

.filter-pill.active {
    background: var(--primary-100);
    border-color: var(--primary-300);
    color: var(--primary-700);
}

.filter-pill-count {
    background: var(--gray-200);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.filter-pill.active .filter-pill-count {
    background: var(--primary-200);
}

.filter-pills-clear {
    color: var(--gray-500);
    font-size: 13px;
    cursor: pointer;
    padding: 6px 12px;
}

.filter-pills-clear:hover {
    color: var(--primary-600);
}

body.dark-mode .filter-pill {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

body.dark-mode .filter-pill.active {
    background: rgba(99, 102, 241, 0.2);
    border-color: var(--primary-500);
}

/* ============================================
   SAVED VIEWS
   ============================================ */

.saved-views-dropdown {
    position: relative;
}

.saved-views-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.saved-views-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    z-index: 100;
}

body.dark-mode .saved-views-menu {
    background: #374151;
    border-color: #4b5563;
}

.saved-view-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.saved-view-item:hover {
    background: var(--gray-50);
}

.saved-view-item.active {
    background: var(--primary-50);
    color: var(--primary-700);
}

.saved-view-pin {
    color: var(--yellow-500);
}

/* ============================================
   RICH TEXT EDITOR
   ============================================ */

.rich-text-editor {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.rich-text-toolbar {
    display: flex;
    gap: 4px;
    padding: 8px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.rich-text-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--gray-600);
    transition: all 0.15s;
}

.rich-text-btn:hover {
    background: var(--gray-200);
}

.rich-text-btn.active {
    background: var(--primary-100);
    color: var(--primary-600);
}

.rich-text-divider {
    width: 1px;
    height: 24px;
    background: var(--gray-300);
    margin: 0 4px;
}

.rich-text-content {
    min-height: 150px;
    padding: 12px;
    outline: none;
}

.rich-text-content:focus {
    background: var(--primary-50);
}

.rich-text-footer {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    font-size: 12px;
    color: var(--gray-500);
}

body.dark-mode .rich-text-editor {
    border-color: #374151;
}

body.dark-mode .rich-text-toolbar {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .rich-text-btn {
    color: #d1d5db;
}

body.dark-mode .rich-text-btn:hover {
    background: #4b5563;
}

body.dark-mode .rich-text-content {
    background: #1f2937;
    color: #f3f4f6;
}

body.dark-mode .rich-text-footer {
    background: #374151;
    border-color: #4b5563;
}

/* ============================================
   IMAGE LIGHTBOX
   ============================================ */

.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.lightbox-container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.lightbox-close:hover {
    opacity: 1;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.lightbox-nav:hover {
    background: rgba(255,255,255,0.2);
}

.lightbox-nav.prev {
    left: -60px;
}

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

.lightbox-thumbnails {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    overflow-x: auto;
    padding: 8px 0;
}

.lightbox-thumb {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
    border: 2px solid transparent;
}

.lightbox-thumb:hover,
.lightbox-thumb.active {
    opacity: 1;
}

.lightbox-thumb.active {
    border-color: white;
}

.lightbox-actions {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
}

.lightbox-action {
    background: none;
    border: none;
    color: white;
    opacity: 0.7;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.lightbox-action:hover {
    opacity: 1;
}

/* ============================================
   INSIGHTS CARDS
   ============================================ */

.insight-card {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    padding: 16px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.insight-card.success {
    background: linear-gradient(135deg, var(--green-500), var(--green-600));
}

.insight-card.warning {
    background: linear-gradient(135deg, var(--yellow-500), var(--yellow-600));
}

.insight-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.insight-content {
    flex: 1;
}

.insight-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.insight-description {
    font-size: 14px;
    opacity: 0.9;
}

.insight-action {
    margin-top: 12px;
}

.insight-action-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
}

.insight-action-btn:hover {
    background: rgba(255,255,255,0.3);
}

/* ============================================
   FOCUS MODE
   ============================================ */

body.focus-mode .sidebar {
    transform: translateX(-100%);
}

body.focus-mode .main-wrapper {
    margin-left: 0;
    max-width: 100%;
}

body.focus-mode .page-header {
    display: none;
}

.focus-mode-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--gray-900);
    color: white;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10000;
}

.focus-mode-title {
    font-weight: 500;
}

.focus-mode-exit {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.focus-mode-exit:hover {
    background: rgba(255,255,255,0.2);
}

/* ============================================
   AUDIT LOG
   ============================================ */

.audit-log {
    display: flex;
    flex-direction: column;
}

.audit-log-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-100);
}

.audit-log-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    flex-shrink: 0;
}

.audit-log-content {
    flex: 1;
}

.audit-log-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.audit-log-user {
    font-weight: 500;
}

.audit-log-time {
    font-size: 13px;
    color: var(--gray-500);
}

.audit-log-action {
    font-size: 14px;
    color: var(--gray-700);
}

.audit-log-changes {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: 6px;
    font-size: 13px;
}

.audit-log-change {
    display: flex;
    gap: 8px;
}

.audit-log-field {
    font-weight: 500;
    color: var(--gray-600);
}

.audit-log-old {
    color: var(--red-600);
    text-decoration: line-through;
}

.audit-log-new {
    color: var(--green-600);
}

body.dark-mode .audit-log-item {
    border-color: #374151;
}

body.dark-mode .audit-log-icon {
    background: #374151;
}

body.dark-mode .audit-log-changes {
    background: #374151;
}

/* ============================================
   QUICK NOTES
   ============================================ */

.quick-notes {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.quick-notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.quick-notes-title {
    font-weight: 600;
    font-size: 14px;
}

.quick-notes-list {
    max-height: 200px;
    overflow-y: auto;
}

.quick-note-item {
    padding: 12px;
    border-bottom: 1px solid var(--gray-100);
}

.quick-note-item:last-child {
    border-bottom: none;
}

.quick-note-text {
    font-size: 14px;
    margin-bottom: 4px;
}

.quick-note-meta {
    font-size: 12px;
    color: var(--gray-500);
}

.quick-notes-input {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--gray-200);
}

.quick-notes-input input {
    flex: 1;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
}

body.dark-mode .quick-notes {
    border-color: #374151;
}

body.dark-mode .quick-notes-header {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .quick-note-item {
    border-color: #374151;
}

body.dark-mode .quick-notes-input {
    border-color: #374151;
}

body.dark-mode .quick-notes-input input {
    background: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

/* ============================================
   GOAL TRACKING WIDGET
   ============================================ */

.goal-widget {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    color: white;
    border-radius: 12px;
    padding: 20px;
}

.goal-widget-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.goal-widget-title {
    font-weight: 600;
}

.goal-widget-streak {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.2);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
}

.goal-widget-progress {
    margin-bottom: 12px;
}

.goal-widget-bar {
    height: 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    overflow: hidden;
}

.goal-widget-fill {
    height: 100%;
    background: white;
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

body.dark-mode .goal-widget-fill {
    background: var(--primary-400);
}

.goal-widget-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.9;
}

.goal-widget-projected {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.2);
    font-size: 13px;
    opacity: 0.8;
}

/* ============================================
   STICKY TABLE HEADERS
   ============================================ */

.table-sticky thead th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    box-shadow: 0 1px 0 var(--gray-200);
}

body.dark-mode .table-sticky thead th {
    background: #1f2937;
    box-shadow: 0 1px 0 #374151;
}

/* Table with sticky header container */
.table-sticky-header {
    position: relative;
    overflow: auto;
}

.table-sticky-header thead th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    box-shadow: 0 1px 0 var(--gray-200);
}

body.dark-mode .table-sticky-header thead th {
    background: #1f2937;
    box-shadow: 0 1px 0 #374151;
}

/* ============================================
   LOADING BUTTON STATE
   ============================================ */

.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.btn-loading.btn-primary::after {
    border-color: white;
    border-right-color: transparent;
}

/* ============================================
   FORM VALIDATION ICONS
   ============================================ */

.form-input-wrapper {
    position: relative;
}

.form-input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.form-input-icon.valid {
    color: var(--green-500);
}

.form-input-icon.invalid {
    color: var(--red-500);
}

.form-input.valid {
    border-color: var(--green-500);
}

.form-input.invalid {
    border-color: var(--red-500);
}

/* ============================================
   TOAST WITH UNDO
   ============================================ */

.toast-undo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-undo-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: inherit;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s;
}

.toast-undo-btn:hover {
    background: rgba(255,255,255,0.3);
}

/* ============================================
   MOBILE STYLES
   ============================================ */

@media (max-width: 768px) {
    /* Bottom navigation */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid var(--gray-200);
        display: flex;
        justify-content: space-around;
        padding: 8px 0;
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 1000;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px 16px;
        color: var(--gray-500);
        text-decoration: none;
        font-size: 11px;
    }

    .mobile-nav-item.active {
        color: var(--primary-600);
    }

    /* Floating action button */
    .fab {
        position: fixed;
        bottom: 80px;
        right: 16px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--primary-600);
        color: white;
        border: none;
        box-shadow: var(--shadow-lg);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }

    .fab:active {
        transform: scale(0.95);
    }

    /* Card-based layouts */
    .mobile-card-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        box-shadow: var(--shadow-sm);
    }

    /* Swipe actions */
    .swipe-container {
        position: relative;
        overflow: hidden;
    }

    .swipe-actions {
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
    }

    .swipe-actions.left {
        left: 0;
        transform: translateX(-100%);
    }

    .swipe-actions.right {
        right: 0;
        transform: translateX(100%);
    }

    .swipe-action {
        height: 100%;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
    }

    .swipe-action.sold {
        background: var(--green-500);
    }

    .swipe-action.delete {
        background: var(--red-500);
    }

    body.dark-mode .mobile-bottom-nav {
        background: #1f2937;
        border-color: #374151;
    }

    body.dark-mode .mobile-card {
        background: #1f2937;
    }
}

/* ============================================
   PULL TO REFRESH
   ============================================ */

.pull-to-refresh {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.2s;
    z-index: 999;
}

.pull-to-refresh.visible {
    transform: translateY(0);
}

.pull-to-refresh-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--primary-600);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================
   EMOJI PICKER
   ============================================ */

.emoji-picker {
    position: absolute;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    width: 320px;
    z-index: 1000;
}

.emoji-picker-header {
    padding: 12px;
    border-bottom: 1px solid var(--gray-200);
}

.emoji-picker-search {
    width: 100%;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
}

.emoji-picker-categories {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-100);
}

.emoji-category-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
}

.emoji-category-btn:hover,
.emoji-category-btn.active {
    background: var(--gray-100);
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    padding: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.emoji-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    font-size: 20px;
}

.emoji-item:hover {
    background: var(--gray-100);
}

body.dark-mode .emoji-picker {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .emoji-picker-header {
    border-color: #374151;
}

body.dark-mode .emoji-picker-search {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

body.dark-mode .emoji-category-btn:hover,
body.dark-mode .emoji-category-btn.active {
    background: #374151;
}

body.dark-mode .emoji-item:hover {
    background: #374151;
}

/* ============================================
   MAIN SECTION - DASHBOARD ENHANCEMENTS
   ============================================ */

/* Revenue Forecast Chart */
.forecast-chart {
    background: white;
    border-radius: 12px;
    padding: 20px;
    height: 300px;
}

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

.forecast-chart-title {
    font-weight: 600;
    font-size: 16px;
}

.forecast-chart-legend {
    display: flex;
    gap: 16px;
    font-size: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Sales Funnel Widget */
.sales-funnel {
    padding: 16px;
}

.funnel-stage {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

.funnel-stage:last-child {
    border-bottom: none;
}

.funnel-bar-container {
    flex: 1;
    height: 24px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.funnel-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

.funnel-bar.views { background: var(--blue-500); }
.funnel-bar.likes { background: var(--purple-500); }
.funnel-bar.offers { background: var(--yellow-500); }
.funnel-bar.sales { background: var(--green-500); }

.funnel-label {
    width: 60px;
    font-size: 13px;
    font-weight: 500;
}

.funnel-value {
    width: 60px;
    text-align: right;
    font-weight: 600;
}

/* Profit Margin Gauge */
.gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.gauge {
    position: relative;
    width: 160px;
    height: 80px;
    overflow: hidden;
}

.gauge-bg {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 16px solid var(--gray-200);
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(-45deg);
}

.gauge-fill {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 16px solid var(--green-500);
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(-45deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: transform 0.5s ease-out;
}

.gauge-value {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    font-weight: 700;
}

.gauge-label {
    margin-top: 8px;
    font-size: 13px;
    color: var(--gray-500);
}

/* Cash Flow Ticker */
.cash-flow-ticker {
    background: var(--gray-900);
    color: white;
    padding: 10px 0;
    overflow: hidden;
    border-radius: 8px;
}

.ticker-content {
    display: flex;
    animation: tickerScroll 20s linear infinite;
    white-space: nowrap;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    font-size: 14px;
}

.ticker-item.income { color: var(--green-400); }
.ticker-item.expense { color: var(--red-400); }

/* Today's Tasks Widget */
.tasks-widget {
    padding: 16px;
}

.task-item-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
}

.task-item-mini:last-child {
    border-bottom: none;
}

.task-checkbox-mini {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    cursor: pointer;
    transition: all 0.15s;
}

.task-checkbox-mini.completed {
    background: var(--green-500);
    border-color: var(--green-500);
}

.task-text-mini {
    flex: 1;
    font-size: 14px;
}

.task-text-mini.completed {
    text-decoration: line-through;
    color: var(--gray-400);
}

/* Shipping Queue Widget */
.shipping-queue {
    padding: 16px;
}

.shipping-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--yellow-50);
    border: 1px solid var(--yellow-200);
    border-radius: 8px;
    margin-bottom: 8px;
}

.shipping-item:last-child {
    margin-bottom: 0;
}

.shipping-countdown {
    font-size: 12px;
    font-weight: 600;
    color: var(--yellow-700);
    background: var(--yellow-200);
    padding: 4px 8px;
    border-radius: 4px;
}

.shipping-countdown.urgent {
    background: var(--red-500);
    color: white;
}

/* Milestone Tracker */
.milestone-tracker {
    padding: 16px;
}

.milestone-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.milestone-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.milestone-icon.completed {
    background: var(--green-100);
    color: var(--green-600);
}

.milestone-icon.pending {
    background: var(--gray-100);
    color: var(--gray-400);
}

.milestone-content {
    flex: 1;
}

.milestone-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.milestone-progress {
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.milestone-progress-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: 3px;
    transition: width 0.5s ease-out;
}

/* Smart Suggestions Panel */
.suggestions-panel {
    background: linear-gradient(135deg, var(--primary-50), var(--blue-50));
    border: 1px solid var(--primary-200);
    border-radius: 12px;
    padding: 16px;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

body.dark-mode .suggestion-item {
    background: #374151;
}

.suggestion-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.suggestion-item:last-child {
    margin-bottom: 0;
}

.suggestion-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary-100);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
}

.suggestion-content {
    flex: 1;
}

.suggestion-title {
    font-weight: 500;
    font-size: 14px;
}

.suggestion-description {
    font-size: 12px;
    color: var(--gray-500);
}

/* Period Toggle */
.period-toggle {
    display: inline-flex;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 4px;
}

.period-toggle-btn {
    padding: 6px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.period-toggle-btn.active {
    background: white;
    box-shadow: var(--shadow-sm);
}

/* ============================================
   MAIN SECTION - INVENTORY ENHANCEMENTS
   ============================================ */

/* View Mode Toggle */
.view-mode-toggle {
    display: inline-flex;
    gap: 4px;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 4px;
}

.view-mode-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--gray-500);
    transition: all 0.15s;
}

.view-mode-btn.active {
    background: white;
    color: var(--primary-600);
    box-shadow: var(--shadow-sm);
}

/* Inventory Grid View */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.inventory-grid-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: all 0.2s;
}

.inventory-grid-item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.inventory-grid-image {
    position: relative;
    padding-top: 100%;
    background: var(--gray-100);
}

.inventory-grid-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inventory-grid-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 4px;
}

.inventory-grid-checkbox {
    position: absolute;
    top: 8px;
    right: 8px;
}

.inventory-grid-body {
    padding: 12px;
}

.inventory-grid-title {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inventory-grid-meta {
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.inventory-grid-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inventory-grid-price {
    font-weight: 600;
    color: var(--green-600);
}

.inventory-grid-platforms {
    display: flex;
    gap: 4px;
}

/* Compact View */
.inventory-compact {
    display: flex;
    flex-direction: column;
}

.inventory-compact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-100);
}

.inventory-compact-row:hover {
    background: var(--gray-50);
}

/* Row Expansion */
.row-expandable {
    cursor: pointer;
}

.row-expanded-content {
    background: var(--gray-50);
    padding: 16px 24px;
    display: none;
}

.row-expanded-content.visible {
    display: block;
}

.expanded-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.expanded-detail-item {
    display: flex;
    flex-direction: column;
}

.expanded-detail-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.expanded-detail-value {
    font-weight: 500;
}

/* Thumbnail Size Slider */
.thumbnail-slider {
    display: flex;
    align-items: center;
    gap: 8px;
}

.thumbnail-slider input[type="range"] {
    width: 80px;
}

.thumbnail-slider-label {
    font-size: 12px;
    color: var(--gray-500);
}

/* Smart Search */
.smart-search-wrapper {
    position: relative;
}

.smart-search-input {
    padding-left: 40px;
    padding-right: 80px;
}

.smart-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
}

.smart-search-hint {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--gray-400);
    background: var(--gray-100);
    padding: 2px 6px;
    border-radius: 4px;
}

.smart-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    margin-top: 4px;
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
}

.smart-search-suggestion {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.smart-search-suggestion:hover {
    background: var(--gray-50);
}

.smart-search-suggestion-icon {
    color: var(--gray-400);
}

/* Filter Presets */
.filter-presets {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.filter-preset-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.filter-preset-btn:hover {
    background: var(--gray-200);
}

.filter-preset-btn.active {
    background: var(--primary-100);
    border-color: var(--primary-300);
    color: var(--primary-700);
}

/* Price Range Slider */
.price-range-slider {
    padding: 16px 0;
}

.price-range-inputs {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.price-range-input {
    width: 80px;
    padding: 6px 10px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    text-align: center;
}

.price-range-track {
    position: relative;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
}

.price-range-fill {
    position: absolute;
    height: 100%;
    background: var(--primary-500);
    border-radius: 3px;
}

/* Visual Indicators */
.photo-quality-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.photo-quality-badge.good {
    background: var(--green-100);
    color: var(--green-700);
}

.photo-quality-badge.fair {
    background: var(--yellow-100);
    color: var(--yellow-700);
}

.photo-quality-badge.poor {
    background: var(--red-100);
    color: var(--red-700);
}

.days-listed-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.days-listed-badge.fresh {
    background: var(--green-100);
    color: var(--green-700);
}

.days-listed-badge.aging {
    background: var(--yellow-100);
    color: var(--yellow-700);
}

.days-listed-badge.stale {
    background: var(--red-100);
    color: var(--red-700);
}

.profit-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}

.profit-indicator.positive {
    color: var(--green-600);
}

.profit-indicator.negative {
    color: var(--red-600);
}

.stock-level-bar {
    width: 60px;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.stock-level-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.stock-level-fill.high { background: var(--green-500); }
.stock-level-fill.medium { background: var(--yellow-500); }
.stock-level-fill.low { background: var(--red-500); }

.completeness-ring {
    position: relative;
    width: 32px;
    height: 32px;
}

.completeness-ring svg {
    transform: rotate(-90deg);
}

.completeness-ring-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 600;
}

/* ============================================
   MAIN SECTION - LISTINGS ENHANCEMENTS
   ============================================ */

/* Listing Cards Enhanced */
.listing-card-enhanced {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.2s;
}

.listing-card-enhanced:hover {
    box-shadow: var(--shadow-lg);
}

.listing-card-image {
    position: relative;
    padding-top: 75%;
    background: var(--gray-100);
}

.listing-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-card-sync-status {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
}

.sync-status-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.sync-status-dot.synced { color: var(--green-500); }
.sync-status-dot.syncing { color: var(--yellow-500); animation: pulse 1.5s infinite; }
.sync-status-dot.error { color: var(--red-500); }

body.dark-mode .sync-status-dot {
    background: #374151;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.listing-card-body {
    padding: 16px;
}

.listing-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.listing-card-title {
    font-weight: 600;
    font-size: 15px;
    flex: 1;
}

.listing-card-price {
    font-weight: 700;
    color: var(--green-600);
}

.listing-card-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.listing-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--gray-600);
}

.listing-stat-icon {
    color: var(--gray-400);
}

.listing-card-sparkline {
    margin-bottom: 12px;
}

.listing-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
}

.listing-freshness {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-500);
}

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

/* Platform Preview */
.listing-preview-modal {
    max-width: 500px;
}

.listing-preview-frame {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

body.dark-mode .listing-preview-frame {
    background: #374151;
    border-color: #4b5563;
}

.listing-preview-header {
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.listing-preview-platform {
    font-weight: 600;
}

.listing-preview-content {
    padding: 16px;
}

/* Timeline View */
.listing-timeline {
    position: relative;
    padding-left: 40px;
}

.listing-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.timeline-item {
    position: relative;
    padding: 16px 0;
}

.timeline-dot {
    position: absolute;
    left: -33px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-500);
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--primary-500);
}

.timeline-content {
    background: white;
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid var(--gray-200);
}

.timeline-date {
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.timeline-title {
    font-weight: 500;
}

/* Engagement Score */
.engagement-score {
    display: flex;
    align-items: center;
    gap: 8px;
}

.engagement-score-bar {
    flex: 1;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.engagement-score-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--yellow-500), var(--green-500));
}

.engagement-score-value {
    font-weight: 600;
    font-size: 14px;
    min-width: 40px;
}

/* SEO Score */
.seo-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.seo-score.excellent {
    background: var(--green-100);
    color: var(--green-700);
}

.seo-score.good {
    background: var(--blue-100);
    color: var(--blue-700);
}

.seo-score.fair {
    background: var(--yellow-100);
    color: var(--yellow-700);
}

.seo-score.poor {
    background: var(--red-100);
    color: var(--red-700);
}

/* Competitor Price Indicator */
.competitor-price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.competitor-price.below {
    color: var(--green-600);
}

.competitor-price.above {
    color: var(--red-600);
}

.competitor-price.same {
    color: var(--gray-500);
}

/* ============================================
   MAIN SECTION - ORDERS ENHANCEMENTS
   ============================================ */

/* Order Timeline */
.order-timeline {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background: var(--gray-50);
    border-radius: 8px;
    margin-bottom: 16px;
}

.order-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.order-timeline-step::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--gray-300);
    z-index: 0;
}

.order-timeline-step:last-child::after {
    display: none;
}

.order-timeline-step.completed::after {
    background: var(--green-500);
}

.order-timeline-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin-bottom: 8px;
}

.order-timeline-step.completed .order-timeline-icon {
    background: var(--green-500);
    color: white;
}

.order-timeline-step.current .order-timeline-icon {
    background: var(--primary-500);
    color: white;
    animation: pulse 2s infinite;
}

.order-timeline-label {
    font-size: 12px;
    color: var(--gray-600);
    text-align: center;
}

/* Order Card */
.order-card {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-bottom: 12px;
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--gray-100);
}

.order-card-id {
    font-weight: 600;
    font-size: 15px;
}

.order-card-platform {
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-card-body {
    padding: 16px;
}

.order-card-items {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.order-item-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--gray-100);
}

.order-card-customer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 8px;
}

.customer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-100);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.customer-info {
    flex: 1;
}

.customer-name {
    font-weight: 500;
}

.customer-rating {
    font-size: 12px;
    color: var(--gray-500);
}

.order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
}

.order-total {
    font-size: 18px;
    font-weight: 700;
}

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

/* Countdown Timer */
.countdown-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
}

.countdown-timer.urgent {
    background: var(--red-100);
    color: var(--red-700);
    animation: pulse 1s infinite;
}

.countdown-timer.warning {
    background: var(--yellow-100);
    color: var(--yellow-700);
}

.countdown-timer.normal {
    background: var(--green-100);
    color: var(--green-700);
}

/* Priority Flag */
.priority-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-flag.high {
    background: var(--red-100);
    color: var(--red-700);
}

.priority-flag.medium {
    background: var(--yellow-100);
    color: var(--yellow-700);
}

.priority-flag.low {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* Tracking Progress */
.tracking-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 8px;
}

.tracking-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.tracking-progress-fill {
    height: 100%;
    background: var(--green-500);
    border-radius: 4px;
    transition: width 0.5s;
}

.tracking-progress-label {
    font-size: 12px;
    color: var(--gray-600);
    min-width: 80px;
}

/* Quick Message Templates */
.message-templates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.message-template-btn {
    padding: 6px 12px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.message-template-btn:hover {
    background: var(--primary-100);
    border-color: var(--primary-300);
    color: var(--primary-700);
}

/* ============================================
   MAIN SECTION - OFFERS ENHANCEMENTS
   ============================================ */

/* Offer Card */
.offer-card {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-bottom: 12px;
}

.offer-card.pending {
    border-left: 4px solid var(--yellow-500);
}

.offer-card.accepted {
    border-left: 4px solid var(--green-500);
}

.offer-card.declined {
    border-left: 4px solid var(--red-500);
}

.offer-card-header {
    display: flex;
    gap: 16px;
    padding: 16px;
}

.offer-item-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--gray-100);
}

.offer-item-info {
    flex: 1;
}

.offer-item-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.offer-item-sku {
    font-size: 12px;
    color: var(--gray-500);
}

.offer-prices {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.offer-price {
    display: flex;
    flex-direction: column;
}

.offer-price-label {
    font-size: 11px;
    color: var(--gray-500);
}

.offer-price-value {
    font-weight: 600;
    font-size: 18px;
}

.offer-price-value.original {
    color: var(--gray-400);
    text-decoration: line-through;
}

.offer-price-value.offer {
    color: var(--primary-600);
}

.offer-card-body {
    padding: 16px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
}

.offer-buyer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.offer-buyer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-100);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.offer-buyer-info {
    flex: 1;
}

.offer-buyer-name {
    font-weight: 500;
}

.offer-buyer-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--gray-500);
}

.offer-expiration {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-600);
}

.offer-expiration-timer {
    font-weight: 600;
    color: var(--yellow-600);
}

.offer-card-footer {
    display: flex;
    gap: 8px;
    padding: 16px;
}

.offer-card-footer .btn {
    flex: 1;
}

/* Counter Offer Slider */
.counter-slider {
    padding: 16px;
}

.counter-slider-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.counter-slider-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-600);
}

.counter-slider-track {
    position: relative;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    margin-bottom: 8px;
}

.counter-slider-fill {
    position: absolute;
    height: 100%;
    background: var(--primary-500);
    border-radius: 4px;
}

.counter-slider-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: white;
    border: 3px solid var(--primary-500);
    border-radius: 50%;
    cursor: grab;
    box-shadow: var(--shadow-md);
}

body.dark-mode .counter-slider-handle {
    background: #374151;
}

.counter-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--gray-500);
}

/* Profit Calculator */
.profit-calculator {
    background: var(--gray-50);
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
}

.profit-calculator-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-200);
}

.profit-calculator-row:last-child {
    border-bottom: none;
    font-weight: 600;
}

.profit-calculator-row.negative .profit-value {
    color: var(--red-600);
}

.profit-calculator-row.positive .profit-value {
    color: var(--green-600);
}

/* Offer History */
.offer-history {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.offer-history-header {
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offer-history-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
}

.offer-history-content.expanded {
    max-height: 300px;
}

.offer-history-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
}

.offer-history-item:last-child {
    border-bottom: none;
}

/* Smart Counter Suggestion */
.smart-counter {
    background: linear-gradient(135deg, var(--primary-50), var(--blue-50));
    border: 1px solid var(--primary-200);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.smart-counter-icon {
    width: 32px;
    height: 32px;
    background: var(--primary-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
}

.smart-counter-content {
    flex: 1;
}

.smart-counter-label {
    font-size: 12px;
    color: var(--gray-600);
}

.smart-counter-value {
    font-weight: 600;
    color: var(--primary-700);
}

/* Urgency Indicator */
.urgency-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--red-50);
    border: 1px solid var(--red-200);
    border-radius: 6px;
    font-size: 12px;
    color: var(--red-700);
}

.urgency-indicator-icon {
    animation: pulse 1s infinite;
}

/* ============================================
   CROSS-PAGE ENHANCEMENTS
   ============================================ */

/* Unified Search Bar */
.unified-search {
    position: relative;
    max-width: 400px;
}

.unified-search-input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.15s;
}

.unified-search-input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.unified-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
}

.unified-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    margin-top: 4px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
}

.unified-search-section {
    padding: 8px;
    border-bottom: 1px solid var(--gray-100);
}

.unified-search-section:last-child {
    border-bottom: none;
}

.unified-search-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    padding: 4px 8px;
}

.unified-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
}

.unified-search-item:hover {
    background: var(--gray-50);
}

/* Quick Stats Bar */
.quick-stats-bar {
    background: var(--gray-900);
    color: white;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    gap: 32px;
    font-size: 13px;
}

.quick-stats-bar.collapsed {
    height: 0;
    padding: 0;
    overflow: hidden;
}

.quick-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-stat-label {
    color: var(--gray-400);
}

.quick-stat-value {
    font-weight: 600;
}

.quick-stat-value.positive {
    color: var(--green-400);
}

.quick-stat-value.negative {
    color: var(--red-400);
}

/* Print Styles */
@media print {
    .sidebar, .header, .bulk-toolbar, .back-to-top, .fab {
        display: none !important;
    }

    .main-wrapper, .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .table {
        font-size: 12px;
    }

    .btn {
        display: none;
    }

    /* Size Charts print-friendly styles */
    .size-charts-hero,
    .size-charts-tabs,
    .size-hero-search,
    .size-hero-categories,
    .size-hero-conversions {
        display: none !important;
    }

    .size-chart-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 11px;
    }

    .size-chart-table th,
    .size-chart-table td {
        border: 1px solid #333;
        padding: 4px 6px;
        color: #000 !important;
        background: #fff !important;
    }

    .size-chart-table th {
        background: #f0f0f0 !important;
        font-weight: bold;
    }

    .size-chart-table tr.even td {
        background: #f8f8f8 !important;
    }
}

/* Dark Mode Extensions */
body.dark-mode .forecast-chart,
body.dark-mode .inventory-grid-item,
body.dark-mode .listing-card-enhanced,
body.dark-mode .order-card,
body.dark-mode .offer-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .funnel-stage,
body.dark-mode .task-item-mini,
body.dark-mode .order-timeline,
body.dark-mode .offer-card-body {
    border-color: #374151;
}

body.dark-mode .smart-search-suggestions,
body.dark-mode .unified-search-results {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .suggestions-panel,
body.dark-mode .smart-counter {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(59, 130, 246, 0.1));
    border-color: #4338ca;
}

body.dark-mode .quick-stats-bar {
    background: #111827;
}

/* ============================================
   TOOLS SECTION UI ENHANCEMENTS
   ============================================ */

/* ----------------------------------------
   Automations Page
   ---------------------------------------- */

/* Automation Flow Diagram */
.automation-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}

.flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: white;
    border-radius: var(--radius-md);
    border: 2px solid var(--primary-200);
    min-width: 100px;
    text-align: center;
}

.flow-node.trigger {
    border-color: var(--success-400);
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.flow-node.condition {
    border-color: var(--warning-400);
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    transform: rotate(45deg);
    padding: 8px;
}

.flow-node.condition > * {
    transform: rotate(-45deg);
}

.flow-node.action {
    border-color: var(--primary-400);
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
}

.flow-node-icon {
    font-size: 20px;
}

.flow-node-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-600);
}

.flow-connector {
    width: 24px;
    height: 2px;
    background: var(--gray-300);
    position: relative;
}

.flow-connector::after {
    content: '';
    position: absolute;
    right: 0;
    top: -4px;
    border: 5px solid transparent;
    border-left-color: var(--gray-300);
}

/* Run History Timeline */
.run-history-timeline {
    position: relative;
    padding-left: 24px;
}

.run-history-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.run-history-item {
    position: relative;
    padding: 12px 0;
    padding-left: 16px;
}

.run-history-item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gray-300);
    border: 2px solid white;
}

.run-history-item.success::before {
    background: var(--success-500);
}

.run-history-item.failed::before {
    background: var(--error-500);
}

.run-history-item.running::before {
    background: var(--primary-500);
    animation: pulse 1.5s infinite;
}

.run-history-time {
    font-size: 12px;
    color: var(--gray-500);
}

.run-history-action {
    font-weight: 500;
    margin: 4px 0;
}

.run-history-result {
    font-size: 13px;
    color: var(--gray-600);
}

/* Automation Card Enhancements */
.automation-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 16px;
    transition: all 0.2s ease;
    cursor: grab;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.automation-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.automation-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

.automation-card:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-md);
}

.automation-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.automation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.automation-card-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.automation-card-sparkline {
    width: 80px;
    height: 24px;
}

.automation-card-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--gray-600);
}

.automation-card-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.automation-test-btn {
    font-size: 12px;
    padding: 4px 8px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.automation-test-btn:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
    color: var(--primary-600);
}

/* Automation Builder Wizard */
.automation-wizard {
    max-width: 600px;
    margin: 0 auto;
}

.wizard-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    position: relative;
}

.wizard-steps::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: var(--gray-200);
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.wizard-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--gray-500);
}

.wizard-step.active .wizard-step-number {
    background: var(--primary-500);
    color: white;
}

.wizard-step.completed .wizard-step-number {
    background: var(--success-500);
    color: white;
}

.wizard-step-label {
    font-size: 12px;
    color: var(--gray-500);
}

.wizard-step.active .wizard-step-label {
    color: var(--primary-600);
    font-weight: 500;
}

/* Conditional Logic Builder */
.condition-builder {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.condition-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.condition-row select,
.condition-row input {
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
}

.condition-connector {
    padding: 4px 12px;
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}

.condition-add-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--primary-600);
    font-size: 13px;
    cursor: pointer;
}

.condition-add-btn:hover {
    color: var(--primary-700);
}

/* Schedule Preview Calendar */
.schedule-preview {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 16px;
}

.schedule-preview-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
}

.schedule-preview-day.has-run {
    background: var(--primary-100);
    color: var(--primary-700);
}

.schedule-preview-day.today {
    border: 2px solid var(--primary-500);
}

/* Activity Log Panel */
.activity-log-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    animation: fadeIn 0.2s ease;
}

.activity-log-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 400px;
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.activity-log-panel.open {
    transform: translateX(0);
}

.activity-log-header .btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

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

.activity-log-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.activity-log-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

.activity-log-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-log-icon.success {
    background: var(--success-100);
    color: var(--success-600);
}

.activity-log-icon.error {
    background: var(--error-100);
    color: var(--error-600);
}

.activity-log-details {
    flex: 1;
}

.activity-log-title {
    font-weight: 500;
    margin-bottom: 2px;
}

.activity-log-time {
    font-size: 12px;
    color: var(--gray-500);
}

/* Pause All Toggle */
.pause-all-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--warning-50);
    border: 1px solid var(--warning-200);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}

.pause-all-toggle.paused {
    background: var(--error-50);
    border-color: var(--error-200);
}

/* ----------------------------------------
   Checklist Page
   ---------------------------------------- */

/* Kanban Board View */
.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
}

.kanban-column {
    min-width: 280px;
    max-width: 320px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 12px;
    flex-shrink: 0;
}

.kanban-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px;
}

.kanban-column-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kanban-column-count {
    background: var(--gray-200);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 12px;
}

.kanban-tasks {
    min-height: 200px;
}

.kanban-task {
    background: white;
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--gray-200);
    cursor: grab;
    transition: all 0.2s;
}

.kanban-task:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-sm);
}

.kanban-task.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

.kanban-task-title {
    font-weight: 500;
    margin-bottom: 8px;
}

.kanban-task-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--gray-500);
}

.kanban-add-task {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-md);
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.kanban-add-task:hover {
    border-color: var(--primary-400);
    color: var(--primary-600);
    background: var(--primary-50);
}

.kanban-task-priority {
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.kanban-task-priority.high {
    background: var(--error-500);
}

.kanban-task-priority.normal {
    background: var(--primary-500);
}

.kanban-task-priority.low {
    background: var(--gray-400);
}

/* Task Progress Ring */
.task-progress-ring {
    display: flex;
    align-items: center;
    gap: 12px;
}

.task-progress-ring svg {
    transform: rotate(-90deg);
}

.task-progress-ring .progress-text {
    font-size: 14px;
    font-weight: 600;
}

/* Streak Counter */
.streak-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: var(--radius-full);
    font-weight: 600;
    color: var(--warning-800);
}

.streak-counter .streak-icon {
    font-size: 20px;
}

.streak-counter .streak-number {
    font-size: 18px;
}

.streak-counter .streak-label {
    font-size: 12px;
    opacity: 0.8;
}

/* Priority Color Coding */
.task-item.priority-high {
    border-left: 4px solid var(--error-500);
}

.task-item.priority-normal {
    border-left: 4px solid var(--primary-500);
}

.task-item.priority-low {
    border-left: 4px solid var(--gray-400);
}

/* Due Date Badges */
.due-badge {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
}

.due-badge.overdue {
    background: var(--error-100);
    color: var(--error-700);
}

.due-badge.today {
    background: var(--warning-100);
    color: var(--warning-700);
}

.due-badge.tomorrow {
    background: var(--primary-100);
    color: var(--primary-700);
}

.due-badge.upcoming {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* Subtask Expansion */
.subtask-list {
    margin-left: 24px;
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid var(--gray-200);
}

.subtask-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
}

.subtask-item.completed {
    text-decoration: line-through;
    color: var(--gray-400);
}

.subtask-toggle {
    cursor: pointer;
    color: var(--gray-500);
    transition: transform 0.2s;
}

.subtask-toggle.expanded {
    transform: rotate(90deg);
}

/* Pomodoro Timer */
.pomodoro-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.pomodoro-display {
    font-size: 48px;
    font-weight: 700;
    font-family: monospace;
    color: var(--gray-800);
    margin-bottom: 16px;
}

.pomodoro-display.running {
    color: var(--error-600);
}

.pomodoro-display.break {
    color: var(--success-600);
}

.pomodoro-controls {
    display: flex;
    gap: 8px;
}

.pomodoro-stats {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--gray-600);
}

/* Task Templates */
.task-templates-container {
    max-height: 60vh;
    overflow-y: auto;
}

.template-category-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-200);
}

.template-tab {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    background: var(--gray-100);
    color: var(--gray-600);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.template-tab:hover {
    background: var(--gray-200);
}

.template-tab.active {
    background: var(--primary-500);
    color: white;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.task-template-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

.task-template-card:hover {
    border-color: var(--primary-400);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.task-template-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.task-template-icon {
    font-size: 28px;
    line-height: 1;
}

.task-template-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--primary-100);
    color: var(--primary-700);
}

.task-template-name {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
    color: var(--gray-900);
}

.task-template-desc {
    font-size: 12px;
    color: var(--gray-500);
    line-height: 1.4;
}

/* Template Preview Modal */
.template-preview-tasks {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 16px;
}

.task-preview-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.task-preview-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-100);
    color: var(--primary-700);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.task-preview-text {
    color: var(--gray-700);
}

/* Daily Review Modal */
.daily-review {
    text-align: center;
}

.daily-review-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 24px 0;
}

.daily-review-stat {
    text-align: center;
}

.daily-review-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-600);
}

.daily-review-stat-label {
    font-size: 12px;
    color: var(--gray-500);
}

.daily-review-celebration {
    font-size: 48px;
    margin-bottom: 16px;
}

/* Weekly Analytics Section */
.weekly-analytics-section {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.weekly-analytics-section .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}

.weekly-chart-container {
    background: white;
    border-radius: var(--radius-md);
    padding: 20px;
}

.weekly-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 120px;
    gap: 8px;
}

.weekly-chart-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
}

.weekly-chart-bar .bar-fill {
    width: 100%;
    max-width: 32px;
    background: linear-gradient(180deg, var(--primary-500), var(--primary-400));
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
    min-height: 4px;
}

.weekly-chart-bar.today .bar-fill {
    background: linear-gradient(180deg, var(--success-500), var(--success-400));
}

.weekly-chart-bar .bar-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 4px;
}

.weekly-chart-bar .bar-label {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 8px;
}

.weekly-chart-bar.today .bar-label {
    color: var(--success-600);
    font-weight: 600;
}

.weekly-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.weekly-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: white;
    border-radius: var(--radius-md);
}

.weekly-stat-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.weekly-stat-icon.success {
    background: var(--success-100);
    color: var(--success-600);
}

.weekly-stat-icon.primary {
    background: var(--primary-100);
    color: var(--primary-600);
}

.weekly-stat-icon.info {
    background: var(--info-100);
    color: var(--info-600);
}

.weekly-stat-icon.warning {
    background: var(--warning-100);
    color: var(--warning-600);
}

.weekly-stat-icon.error {
    background: var(--error-100);
    color: var(--error-600);
}

.weekly-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1;
}

.weekly-stat-label {
    font-size: 11px;
    color: var(--gray-500);
}

.best-day-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
    border-radius: var(--radius-md);
}

.best-day-icon {
    font-size: 24px;
}

.best-day-text {
    font-size: 14px;
    color: var(--warning-700);
}

/* ----------------------------------------
   Image Bank Page
   ---------------------------------------- */

/* Masonry Grid Layout */
.masonry-grid {
    column-count: 4;
    column-gap: 16px;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.masonry-item img {
    width: 100%;
    display: block;
    transition: transform 0.3s;
}

.masonry-item:hover img {
    transform: scale(1.05);
}

.masonry-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
}

.masonry-item:hover .masonry-item-overlay {
    opacity: 1;
}

.masonry-item-name {
    color: white;
    font-size: 13px;
    font-weight: 500;
}

.masonry-item-meta {
    color: rgba(255,255,255,0.7);
    font-size: 11px;
}

/* Image Comparison Slider */
.image-comparison {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.image-comparison-before,
.image-comparison-after {
    width: 100%;
    display: block;
}

.image-comparison-before {
    position: absolute;
    top: 0;
    left: 0;
    clip-path: inset(0 50% 0 0);
}

.image-comparison-slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: white;
    cursor: ew-resize;
    transform: translateX(-50%);
}

.image-comparison-slider::before,
.image-comparison-slider::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
}

.image-comparison-slider::before {
    top: 50%;
    margin-top: -20px;
    border-right-color: white;
}

body.dark-mode .image-comparison-slider::before {
    border-right-color: #d1d5db;
}

.image-comparison-slider::after {
    top: 50%;
    margin-top: 4px;
    border-left-color: white;
}

.image-comparison-label {
    position: absolute;
    top: 12px;
    padding: 4px 12px;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 12px;
    border-radius: var(--radius-full);
}

.image-comparison-label.before {
    left: 12px;
}

.image-comparison-label.after {
    right: 12px;
}

/* Folder Tree with Thumbnails */
.folder-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s;
}

.folder-tree-item:hover {
    background: var(--gray-100);
}

.folder-tree-item.active {
    background: var(--primary-100);
    color: var(--primary-700);
}

.folder-tree-thumbnails {
    display: flex;
    margin-left: auto;
}

.folder-tree-thumb {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    margin-left: -8px;
    border: 2px solid white;
    object-fit: cover;
}

.folder-tree-count {
    font-size: 12px;
    color: var(--gray-500);
    margin-left: 8px;
}

/* Storage Usage Gauge */
.storage-gauge {
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.storage-gauge-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: 12px 0;
}

.storage-gauge-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-500), var(--warning-500), var(--error-500));
    background-size: 300% 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.storage-gauge-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--gray-600);
}

/* Storage gauge color variants */
.storage-gauge-success {
    background: var(--success-500) !important;
}

.storage-gauge-warning {
    background: var(--warning-500) !important;
}

.storage-gauge-error {
    background: var(--error-500) !important;
}

/* Storage gauge threshold markers */
.storage-gauge-bar {
    position: relative;
}

.storage-gauge-marker {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 12px;
    background: var(--gray-400);
    border-radius: 1px;
}

.storage-gauge-marker-critical {
    background: var(--error-500);
}

/* Storage quota alerts */
.storage-quota-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
}

.storage-quota-info {
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    color: var(--primary-700);
}

.storage-quota-warning {
    background: var(--warning-50);
    border: 1px solid var(--warning-200);
    color: var(--warning-700);
}

.storage-quota-error {
    background: var(--error-50);
    border: 1px solid var(--error-200);
    color: var(--error-700);
}

/* Storage upgrade button */
.storage-upgrade-btn {
    margin-top: 12px;
    width: 100%;
}

/* Storage Plans Grid */
.storage-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.storage-plan {
    position: relative;
    padding: 20px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    text-align: center;
}

.storage-plan-popular {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 1px var(--primary-500);
}

.plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    background: var(--primary-500);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
}

.plan-header {
    margin-bottom: 16px;
}

.plan-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.plan-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-800);
}

.plan-price span {
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-500);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left;
}

.plan-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-100);
}

.plan-features li:last-child {
    border-bottom: none;
}

/* Dark mode storage gauge */
body.dark-mode .storage-gauge {
    background: var(--gray-800);
}

body.dark-mode .storage-gauge-labels {
    color: var(--gray-400);
}

body.dark-mode .storage-quota-info {
    background: rgba(79, 70, 229, 0.1);
    border-color: var(--primary-700);
    color: var(--primary-300);
}

body.dark-mode .storage-quota-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--warning-700);
    color: var(--warning-300);
}

body.dark-mode .storage-quota-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error-700);
    color: var(--error-300);
}

body.dark-mode .storage-plan {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .storage-plan-popular {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 1px var(--primary-500);
}

body.dark-mode .plan-price {
    color: var(--gray-200);
}

body.dark-mode .plan-price span {
    color: var(--gray-400);
}

body.dark-mode .plan-features li {
    color: var(--gray-400);
    border-color: var(--gray-700);
}

body.dark-mode .plan-badge {
    background: var(--primary-400);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Image Quality Indicators */
.image-quality-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
}

.image-quality-badge.hd {
    background: var(--success-500);
    color: white;
}

.image-quality-badge.sd {
    background: var(--warning-500);
    color: white;
}

.image-quality-badge.low {
    background: var(--error-500);
    color: white;
}

/* AI Auto-Tag Panel */
.ai-tag-panel {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}

.ai-tag-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ai-tag-icon {
    width: 32px;
    height: 32px;
    background: var(--primary-500);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-tag-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-tag-suggestion {
    padding: 4px 12px;
    background: white;
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-full);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

body.dark-mode .ai-tag-suggestion {
    background: #374151;
    border-color: rgba(99, 102, 241, 0.3);
}

.ai-tag-suggestion:hover {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
}

/* Color Palette Extraction */
.color-palette {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition: transform 0.2s;
}

.color-swatch:hover {
    transform: scale(1.2);
    z-index: 1;
}

.color-swatch-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--gray-900);
    color: white;
    font-size: 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.color-swatch:hover .color-swatch-tooltip {
    opacity: 1;
}

/* Bulk Operations Bar */
.bulk-operations-bar {
    position: sticky;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background: var(--gray-900);
    color: white;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-xl);
    z-index: 100;
    animation: slideUp 0.3s ease;
}

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

.bulk-operations-count {
    font-weight: 600;
}

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

.bulk-operations-actions button {
    padding: 6px 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: white;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.bulk-operations-actions button:hover {
    background: rgba(255,255,255,0.1);
}

/* ----------------------------------------
   Calendar Page
   ---------------------------------------- */

/* Week/Day View Toggles */
.calendar-view-toggle {
    display: flex;
    background: var(--gray-100);
    border-radius: var(--radius-md);
    padding: 4px;
}

.calendar-view-btn {
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent;
    color: var(--gray-600);
}

.calendar-view-btn.active {
    background: white;
    color: var(--gray-900);
    box-shadow: var(--shadow-sm);
}

/* Event Color Legend */
.calendar-legend {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-600);
}

.calendar-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.calendar-legend-dot.sales { background: var(--success-500); }
.calendar-legend-dot.shipments { background: var(--primary-500); }
.calendar-legend-dot.restocks { background: var(--warning-500); }
.calendar-legend-dot.lives { background: var(--error-500); }
.calendar-legend-dot.custom { background: var(--gray-500); }

/* Color-coded Calendar Events */
.calendar-event-sale {
    background: var(--success-100) !important;
    border-left: 3px solid var(--success-500) !important;
    color: var(--success-700) !important;
}

.calendar-event-shipment {
    background: var(--primary-100) !important;
    border-left: 3px solid var(--primary-500) !important;
    color: var(--primary-700) !important;
}

.calendar-event-restock {
    background: var(--warning-100) !important;
    border-left: 3px solid var(--warning-500) !important;
    color: var(--warning-700) !important;
}

.calendar-event-live {
    background: var(--error-100) !important;
    border-left: 3px solid var(--error-500) !important;
    color: var(--error-700) !important;
}

.calendar-event-custom {
    background: var(--gray-100) !important;
    border-left: 3px solid var(--gray-500) !important;
    color: var(--gray-700) !important;
}

/* Dark mode event colors */
body.dark-mode .calendar-event-sale {
    background: rgba(16, 185, 129, 0.2) !important;
    border-left: 3px solid var(--success-400) !important;
    color: var(--success-300) !important;
}

body.dark-mode .calendar-event-shipment {
    background: rgba(79, 70, 229, 0.2) !important;
    border-left: 3px solid var(--primary-400) !important;
    color: var(--primary-300) !important;
}

body.dark-mode .calendar-event-restock {
    background: rgba(245, 158, 11, 0.2) !important;
    border-left: 3px solid var(--warning-400) !important;
    color: var(--warning-300) !important;
}

body.dark-mode .calendar-event-live {
    background: rgba(239, 68, 68, 0.2) !important;
    border-left: 3px solid var(--error-400) !important;
    color: var(--error-300) !important;
}

body.dark-mode .calendar-event-custom {
    background: rgba(107, 114, 128, 0.2) !important;
    border-left: 3px solid var(--gray-400) !important;
    color: var(--gray-300) !important;
}

body.dark-mode .calendar-event-expiration {
    background: rgba(245, 158, 11, 0.15) !important;
    border-left: 3px solid #f59e0b !important;
    color: #fbbf24 !important;
}

/* Date Range Presets */
.date-range-presets {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.preset-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    white-space: nowrap;
}

.preset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preset-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.preset-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

.preset-btn.active {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

.preset-btn.active:hover {
    background: var(--primary-600);
    border-color: var(--primary-600);
}

/* Dark mode date range presets */
body.dark-mode .date-range-presets {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .preset-label {
    color: var(--gray-400);
}

body.dark-mode .preset-btn {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-300);
}

body.dark-mode .preset-btn:hover {
    background: var(--gray-600);
    border-color: var(--gray-500);
    color: var(--gray-100);
}

body.dark-mode .preset-btn.active {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: white;
}

/* Mini Month Preview */
.mini-calendar {
    width: 200px;
    padding: 12px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.mini-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
}

.mini-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    font-size: 10px;
}

.mini-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

.mini-calendar-day:hover {
    background: var(--gray-100);
}

.mini-calendar-day.today {
    background: var(--primary-500);
    color: white;
}

.mini-calendar-day.selected {
    border: 2px solid var(--primary-500);
}

.mini-calendar-day.has-events::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    background: var(--primary-500);
    border-radius: 50%;
}

/* Revenue Heatmap Overlay */
.calendar-heatmap-day {
    position: relative;
}

.calendar-heatmap-day .heatmap-indicator {
    position: absolute;
    inset: 2px;
    border-radius: var(--radius-sm);
    opacity: 0.3;
    pointer-events: none;
}

.calendar-heatmap-day.revenue-high .heatmap-indicator { background: var(--success-500); }
.calendar-heatmap-day.revenue-medium .heatmap-indicator { background: var(--success-300); }
.calendar-heatmap-day.revenue-low .heatmap-indicator { background: var(--success-100); }

/* Timeline Sidebar */
.calendar-timeline {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.calendar-timeline-header {
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-event {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-200);
}

.timeline-event:last-child {
    border-bottom: none;
}

.timeline-event-time {
    font-size: 12px;
    color: var(--gray-500);
    min-width: 60px;
}

.timeline-event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.timeline-event-content {
    flex: 1;
}

.timeline-event-title {
    font-weight: 500;
    margin-bottom: 2px;
}

.timeline-event-description {
    font-size: 12px;
    color: var(--gray-600);
}

/* Drag-to-Schedule */
.calendar-drop-zone {
    position: relative;
}

.calendar-drop-zone.drag-over {
    background: var(--primary-50);
    border: 2px dashed var(--primary-400);
}

.calendar-drop-zone.drag-over::after {
    content: 'Drop to schedule';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--primary-600);
    font-weight: 500;
}

/* Holiday Overlay */
.calendar-holiday {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
}

.calendar-day.holiday {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
}

.calendar-day.holiday .day-number {
    color: var(--error-600);
}

/* Week View */
.calendar-week-view {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.calendar-week-header {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.calendar-week-day-header {
    padding: 12px;
    text-align: center;
    font-size: 12px;
}

.calendar-week-day-header .day-name {
    font-weight: 600;
    color: var(--gray-600);
}

.calendar-week-day-header .day-number {
    font-size: 20px;
    font-weight: 700;
}

.calendar-time-slots {
    display: contents;
}

.calendar-time-label {
    padding: 8px;
    font-size: 11px;
    color: var(--gray-500);
    text-align: right;
    border-right: 1px solid var(--gray-200);
}

.calendar-week-slot {
    border-right: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    min-height: 48px;
    position: relative;
}

.calendar-week-event {
    position: absolute;
    left: 2px;
    right: 2px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

/* ----------------------------------------
   Size Charts Page
   ---------------------------------------- */

/* Interactive Body Diagram */
.body-diagram {
    position: relative;
    width: 200px;
    margin: 0 auto 24px;
}

.body-diagram-svg {
    width: 100%;
    height: auto;
}

.body-diagram-point {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-500);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.body-diagram-point:hover {
    transform: scale(1.2);
}

.body-diagram-point.active {
    background: var(--error-500);
    animation: pulse 1.5s infinite;
}

.body-diagram-tooltip {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    padding: 8px 12px;
    background: var(--gray-900);
    color: white;
    font-size: 12px;
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.body-diagram-point:hover .body-diagram-tooltip {
    opacity: 1;
}

/* Size Comparison Overlay */
.size-comparison {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}

.size-comparison-select {
    flex: 1;
}

.size-comparison-select label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--gray-600);
}

.size-comparison-result {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: white;
    border-radius: var(--radius-md);
    margin-top: 12px;
}

body.dark-mode .size-comparison-result {
    background: #374151;
}

.size-difference {
    font-size: 24px;
    font-weight: 700;
}

.size-difference.larger {
    color: var(--error-500);
}

.size-difference.smaller {
    color: var(--success-500);
}

/* Conversion Calculator */
.conversion-calculator {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}

.conversion-calculator-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-weight: 600;
}

.conversion-input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.conversion-input-group input,
.conversion-input-group select {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
}

.conversion-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.conversion-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}

.conversion-result {
    background: white;
    padding: 12px;
    border-radius: var(--radius-md);
    text-align: center;
}

.conversion-result-card {
    background: white;
    padding: 14px 12px;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.conversion-result-card:hover {
    border-color: var(--primary-300);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.conversion-result-card.selected {
    border-color: var(--primary-500);
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.conversion-result-flag {
    font-size: 24px;
    margin-bottom: 6px;
    line-height: 1;
}

.conversion-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conversion-result-country {
    font-size: 10px;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.conversion-result-region {
    font-size: 11px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.conversion-result-size {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-600);
}

/* Visual Size Slider */
.size-slider {
    margin: 16px 0;
}

.size-slider-track {
    height: 4px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    position: relative;
}

.size-slider-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: var(--primary-500);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.size-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--gray-500);
}

/* Size Chart Table Highlighting */
.size-chart-table tr.highlighted {
    background: var(--primary-50);
}

.size-chart-table td.highlighted {
    background: var(--primary-100);
    font-weight: 600;
}

/* Brand-Specific Tabs */
.brand-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.brand-tab {
    padding: 6px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-full);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.brand-tab:hover {
    border-color: var(--primary-400);
}

.brand-tab.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
}

.brand-tab-logo {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

/* Measurement Input Tool */
.measurement-tool {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.measurement-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.measurement-input {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.measurement-input label {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
}

.measurement-input input {
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
}

.measurement-result {
    background: white;
    border: 2px solid var(--success-400);
    border-radius: var(--radius-lg);
    padding: 16px;
    text-align: center;
}

body.dark-mode .measurement-result {
    background: #374151;
}

.measurement-result-size {
    font-size: 32px;
    font-weight: 700;
    color: var(--success-600);
}

.measurement-result-label {
    font-size: 12px;
    color: var(--gray-600);
}

/* Copy to Clipboard */
.copy-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-button:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
    color: var(--primary-600);
}

.copy-button.copied {
    background: var(--success-100);
    border-color: var(--success-400);
    color: var(--success-700);
}

/* QR Code Generator */
.qr-code-panel {
    text-align: center;
    padding: 24px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.qr-code-preview {
    width: 150px;
    height: 150px;
    background: white;
    margin: 0 auto 16px;
    padding: 12px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.qr-code-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* ----------------------------------------
   Cross-Tool Enhancements
   ---------------------------------------- */

/* Tool Favorites */
.tool-favorites {
    padding: 8px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--gray-200);
}

.tool-favorites-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.tool-favorites-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tool-favorite-item {
    padding: 4px 8px;
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--primary-700);
    cursor: pointer;
    transition: all 0.2s;
}

.tool-favorite-item:hover {
    background: var(--primary-100);
}

/* Tool Search */
.tool-search {
    padding: 8px 16px;
    margin-bottom: 8px;
}

.tool-search-input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 13px;
    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='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
}

.tool-search-results {
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
}

.tool-search-result {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-search-result:hover {
    background: var(--gray-50);
}

.tool-search-result-icon {
    width: 24px;
    height: 24px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-search-result-name {
    font-weight: 500;
}

.tool-search-result-path {
    font-size: 11px;
    color: var(--gray-500);
}

/* Tool Tips/Tutorials */
.tool-tip-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.tool-tip-highlight {
    position: relative;
    z-index: 10000;
    box-shadow: 0 0 0 4px var(--primary-500), 0 0 0 9999px rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-md);
}

.tool-tip-popover {
    position: absolute;
    width: 300px;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 20px;
    z-index: 10001;
}

.tool-tip-popover::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
}

.tool-tip-popover.top::before {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
}

.tool-tip-popover.bottom::before {
    top: -6px;
    left: 50%;
    margin-left: -6px;
}

.tool-tip-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.tool-tip-description {
    font-size: 13px;
    color: var(--gray-600);
    margin-bottom: 16px;
}

.tool-tip-progress {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.tool-tip-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-300);
}

.tool-tip-progress-dot.active {
    background: var(--primary-500);
}

.tool-tip-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Tool Usage Analytics */
.tool-usage-chart {
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.tool-usage-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.tool-usage-name {
    width: 100px;
    font-size: 12px;
    font-weight: 500;
}

.tool-usage-track {
    flex: 1;
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.tool-usage-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.tool-usage-count {
    width: 40px;
    font-size: 12px;
    color: var(--gray-600);
    text-align: right;
}

/* Keyboard Shortcuts Panel */
.shortcuts-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    max-height: 80vh;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    z-index: 10000;
}

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

.shortcuts-panel-content {
    padding: 16px 20px;
    max-height: calc(80vh - 60px);
    overflow-y: auto;
}

.shortcuts-group {
    margin-bottom: 20px;
}

.shortcuts-group-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.shortcut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.shortcut-label {
    font-size: 13px;
}

.shortcut-keys {
    display: flex;
    gap: 4px;
}

.shortcut-key {
    padding: 4px 8px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-family: monospace;
    box-shadow: 0 2px 0 var(--gray-300);
}

/* Dark Mode Extensions for Tools */
body.dark-mode .automation-flow {
    background: linear-gradient(135deg, #1e3a5f, #1e293b);
}

body.dark-mode .flow-node {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .automation-card,
body.dark-mode .kanban-column,
body.dark-mode .kanban-task {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .activity-log-panel,
body.dark-mode .shortcuts-panel,
body.dark-mode .tool-tip-popover {
    background: #1f2937;
    color: #e5e7eb;
}

body.dark-mode .pomodoro-timer,
body.dark-mode .calendar-timeline,
body.dark-mode .measurement-tool,
body.dark-mode .conversion-calculator {
    background: #111827;
}

body.dark-mode .conversion-result,
body.dark-mode .conversion-result-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .conversion-result-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

body.dark-mode .conversion-result-card.selected {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
}

body.dark-mode .conversion-result-country {
    color: #9ca3af;
}

body.dark-mode .conversion-result-size {
    color: #60a5fa;
}

/* Weekly Analytics Dark Mode */
body.dark-mode .weekly-analytics-section {
    background: #1f2937;
}

body.dark-mode .weekly-analytics-section .section-title {
    color: #e5e7eb;
}

body.dark-mode .weekly-chart-container {
    background: #111827;
}

body.dark-mode .weekly-chart-bar .bar-value {
    color: #e5e7eb;
}

body.dark-mode .weekly-chart-bar .bar-label {
    color: #9ca3af;
}

body.dark-mode .weekly-stat-card {
    background: #111827;
}

body.dark-mode .weekly-stat-value {
    color: #e5e7eb;
}

body.dark-mode .best-day-highlight {
    background: linear-gradient(135deg, #451a03, #422006);
}

body.dark-mode .best-day-text {
    color: #fbbf24;
}

body.dark-mode .mini-calendar {
    background: #1f2937;
    border-color: #374151;
}

/* Calendar dark mode - Navigation buttons improved visibility */
body.dark-mode .card-header .btn-outline {
    background: #374151;
    border-color: #6b7280;
    color: #e5e7eb;
}

body.dark-mode .card-header .btn-outline:hover {
    background: #4b5563;
    border-color: #9ca3af;
    color: #ffffff;
}

body.dark-mode .card-header .btn-outline svg {
    color: #e5e7eb;
    stroke: #e5e7eb;
}

/* Mini calendar header buttons */
body.dark-mode .mini-calendar-header {
    color: #e5e7eb;
}

body.dark-mode .mini-calendar-header button {
    background: #374151;
    border: 1px solid #4b5563;
    border-radius: 4px;
    color: #e5e7eb;
    padding: 4px 8px;
    cursor: pointer;
}

body.dark-mode .mini-calendar-header button:hover {
    background: #4b5563;
    border-color: #6b7280;
    color: #ffffff;
}

body.dark-mode .mini-calendar-header button svg {
    color: #e5e7eb;
    stroke: #e5e7eb;
}

body.dark-mode .mini-calendar-grid {
    color: #d1d5db;
}

body.dark-mode .mini-calendar-day {
    color: #d1d5db;
}

body.dark-mode .mini-calendar-day:hover {
    background: #374151;
}

body.dark-mode .mini-calendar-day.today {
    background: var(--primary-600);
    color: #ffffff;
}

/* Calendar timeline sidebar improved visibility */
body.dark-mode .calendar-timeline-header {
    color: #e5e7eb;
}

body.dark-mode .timeline-event {
    border-color: #374151;
}

body.dark-mode .timeline-event-time {
    color: #9ca3af;
}

body.dark-mode .timeline-event-title {
    color: #e5e7eb;
}

body.dark-mode .timeline-event-description {
    color: #9ca3af;
}

/* This Week panel improved visibility */
body.dark-mode .week-preview-label {
    color: #e5e7eb;
}

body.dark-mode .week-day-name {
    color: #9ca3af;
}

body.dark-mode .week-day-number {
    color: #e5e7eb;
}

body.dark-mode .week-preview-day {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .week-preview-day:hover {
    background: #4b5563;
}

body.dark-mode .week-preview-day.today {
    background: rgba(59, 130, 246, 0.3);
    border-color: var(--primary-400);
}

body.dark-mode .week-preview-day.has-events {
    background: rgba(99, 102, 241, 0.2);
}

body.dark-mode .masonry-item-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}

body.dark-mode .ai-tag-panel {
    background: linear-gradient(135deg, #312e81, #1e3a5f);
    border-color: #4338ca;
}

body.dark-mode .size-comparison,
body.dark-mode .qr-code-panel {
    background: #111827;
}

body.dark-mode .tool-search-results,
body.dark-mode .tool-search-result:hover {
    background: #1f2937;
    border-color: #374151;
}

/* ============================================
   BUSINESS SECTION UI ENHANCEMENTS
   ============================================ */

/* ----------------------------------------
   My Shops Page
   ---------------------------------------- */

/* Shop Health Dashboard */
.shop-health-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.shop-health-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 16px;
    position: relative;
    overflow: hidden;
}

.shop-health-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.shop-health-card.poshmark::before { background: #7c3aed; }
.shop-health-card.ebay::before { background: #0064d2; }
.shop-health-card.mercari::before { background: #ff0211; }
.shop-health-card.depop::before { background: #ff2300; }
.shop-health-card.shopify::before { background: #96bf48; }
.shop-health-card.facebook::before { background: #1877f2; }

.shop-health-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.shop-health-platform {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-health-platform-logo {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
}

.shop-health-platform-name {
    font-weight: 600;
}

.shop-health-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success-500);
}

.shop-health-status.disconnected {
    background: var(--gray-400);
}

.shop-health-status.syncing {
    background: var(--warning-500);
    animation: pulse 1.5s infinite;
}

.shop-health-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
}

.shop-health-metric {
    text-align: center;
}

.shop-health-metric-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
}

.shop-health-metric-label {
    font-size: 10px;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shop-health-sparkline {
    margin-top: 12px;
    height: 40px;
}

/* Sync Status Indicators */
.sync-status-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.sync-status-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sync-status-icon.syncing {
    animation: spin 1s linear infinite;
}

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

.sync-status-text {
    flex: 1;
}

.sync-status-text .sync-label {
    font-weight: 500;
}

.sync-status-text .sync-time {
    font-size: 12px;
    color: var(--gray-500);
}

.sync-progress-bar {
    width: 150px;
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.sync-progress-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

/* Platform Comparison Chart */
.platform-comparison {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.platform-comparison-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.platform-comparison-label {
    width: 100px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.platform-comparison-bar {
    flex: 1;
    height: 24px;
    background: var(--gray-100);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}

.platform-comparison-fill {
    height: 100%;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    transition: width 0.5s ease;
}

.platform-comparison-fill.poshmark { background: linear-gradient(90deg, #7c3aed, #9f7aea); }
.platform-comparison-fill.ebay { background: linear-gradient(90deg, #0064d2, #4299e1); }
.platform-comparison-fill.mercari { background: linear-gradient(90deg, #ff0211, #fc8181); }
.platform-comparison-fill.depop { background: linear-gradient(90deg, #ff2300, #f6ad55); }

/* Shop Actions */
.shop-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.shop-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
}

.shop-action-btn:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
}

.shop-action-btn .action-icon {
    font-size: 24px;
}

.shop-action-btn .action-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-700);
}

/* ----------------------------------------
   Transactions Page
   ---------------------------------------- */

/* Transaction Timeline */
.transaction-timeline {
    position: relative;
    padding-left: 32px;
}

.transaction-timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.transaction-timeline-item {
    position: relative;
    padding: 16px;
    margin-bottom: 16px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

.transaction-timeline-item::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 24px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--primary-500);
}

.transaction-timeline-item.income::before {
    border-color: var(--success-500);
}

.transaction-timeline-item.expense::before {
    border-color: var(--error-500);
}

.transaction-timeline-date {
    font-size: 11px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.transaction-timeline-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.transaction-timeline-details {
    flex: 1;
}

.transaction-timeline-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.transaction-timeline-category {
    font-size: 12px;
    color: var(--gray-500);
}

.transaction-timeline-amount {
    font-size: 18px;
    font-weight: 700;
}

.transaction-timeline-amount.income {
    color: var(--success-600);
}

.transaction-timeline-amount.expense {
    color: var(--error-600);
}

/* Expense Category Chart */
.expense-pie-chart {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.expense-pie-chart svg {
    transform: rotate(-90deg);
}

.expense-pie-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.expense-pie-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.expense-pie-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Monthly Comparison Chart */
.monthly-comparison-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 150px;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-200);
}

.monthly-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.monthly-bars {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 120px;
}

.monthly-bar {
    width: 20px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height 0.3s ease;
}

.monthly-bar.income {
    background: var(--success-500);
}

.monthly-bar.expense {
    background: var(--error-400);
}

.monthly-label {
    font-size: 11px;
    color: var(--gray-500);
}

/* Running Balance */
.running-balance {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    padding: 12px 20px;
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.running-balance-label {
    font-size: 13px;
    opacity: 0.9;
}

.running-balance-amount {
    font-size: 24px;
    font-weight: 700;
}

/* Transaction Tags */
.transaction-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.transaction-tag {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 500;
}

.transaction-tag.inventory { background: #dbeafe; color: #1e40af; }
.transaction-tag.shipping { background: #fef3c7; color: #92400e; }
.transaction-tag.supplies { background: #d1fae5; color: #065f46; }
.transaction-tag.fees { background: #fee2e2; color: #991b1b; }
.transaction-tag.sourcing { background: #e0e7ff; color: #3730a3; }

body.dark-mode .transaction-tag.inventory { background: rgba(30, 64, 175, 0.2); color: #93c5fd; }
body.dark-mode .transaction-tag.shipping { background: rgba(146, 64, 14, 0.2); color: #fcd34d; }
body.dark-mode .transaction-tag.supplies { background: rgba(6, 95, 70, 0.2); color: #6ee7b7; }
body.dark-mode .transaction-tag.fees { background: rgba(153, 27, 27, 0.2); color: #fca5a5; }
body.dark-mode .transaction-tag.sourcing { background: rgba(55, 48, 163, 0.2); color: #c4b5fd; }

/* Receipt Thumbnail */
.receipt-thumbnail {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    object-fit: cover;
    border: 1px solid var(--gray-200);
    cursor: pointer;
    transition: transform 0.2s;
}

.receipt-thumbnail:hover {
    transform: scale(1.1);
}

/* Split Transaction Modal */
.split-transaction-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.split-transaction-row {
    display: grid;
    grid-template-columns: 1fr 100px auto;
    gap: 8px;
    align-items: center;
}

.split-total {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    margin-top: 12px;
    font-weight: 600;
}

/* Recurring Transaction */
.recurring-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 500;
}

/* ----------------------------------------
   Financials Page
   ---------------------------------------- */

/* Financial Dashboard Header */
.financial-dashboard-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.financial-metric-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.financial-metric-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.financial-metric-card.revenue::after { background: var(--success-500); }
.financial-metric-card.expenses::after { background: var(--error-500); }
.financial-metric-card.profit::after { background: var(--primary-500); }
.financial-metric-card.cashflow::after { background: var(--info-500); }

.financial-metric-label {
    font-size: 13px;
    color: var(--gray-600);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.financial-metric-value {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
}

.financial-metric-value.positive { color: var(--success-600); }
.financial-metric-value.negative { color: var(--error-600); }

.financial-metric-change {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.financial-metric-change.up { color: var(--success-600); }
.financial-metric-change.down { color: var(--error-600); }

/* Profit Margin Gauge */
.profit-margin-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
}

.profit-margin-gauge svg {
    width: 160px;
    height: 80px;
}

.profit-margin-value {
    font-size: 32px;
    font-weight: 700;
    margin-top: -20px;
}

.profit-margin-label {
    font-size: 13px;
    color: var(--gray-600);
}

/* Cash Flow Waterfall */
.waterfall-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 200px;
    padding: 20px;
    gap: 8px;
}

.waterfall-bar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.waterfall-bar {
    width: 100%;
    max-width: 60px;
    border-radius: var(--radius-sm);
    position: relative;
}

.waterfall-bar.positive {
    background: var(--success-500);
}

.waterfall-bar.negative {
    background: var(--error-500);
}

.waterfall-bar.total {
    background: var(--primary-500);
}

.waterfall-connector {
    position: absolute;
    top: 0;
    right: -12px;
    width: 12px;
    height: 1px;
    background: var(--gray-300);
}

.waterfall-label {
    font-size: 10px;
    color: var(--gray-600);
    text-align: center;
    margin-top: 8px;
    max-width: 60px;
}

.waterfall-value {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Account Balance Treemap */
.balance-treemap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-rows: 80px;
    gap: 4px;
}

.treemap-item {
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    cursor: pointer;
    transition: transform 0.2s;
}

.treemap-item:hover {
    transform: scale(1.02);
}

.treemap-item.large {
    grid-column: span 2;
    grid-row: span 2;
}

.treemap-item.medium {
    grid-column: span 2;
}

.treemap-item-name {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
}

.treemap-item-value {
    font-size: 18px;
    font-weight: 700;
}

.treemap-item.assets { background: linear-gradient(135deg, #10b981, #059669); }
.treemap-item.liabilities { background: linear-gradient(135deg, #ef4444, #dc2626); }
.treemap-item.equity { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.treemap-item.income { background: linear-gradient(135deg, #22c55e, #16a34a); }
.treemap-item.expenses { background: linear-gradient(135deg, #f97316, #ea580c); }

/* Period Comparison */
.period-comparison {
    display: flex;
    gap: 24px;
}

.period-comparison-column {
    flex: 1;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.period-comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-200);
}

.period-comparison-title {
    font-weight: 600;
}

.period-comparison-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
}

.period-comparison-variance {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
}

.period-comparison-variance.positive {
    background: var(--success-100);
    color: var(--success-700);
}

.period-comparison-variance.negative {
    background: var(--error-100);
    color: var(--error-700);
}

/* Budget vs Actual */
.budget-progress {
    margin-bottom: 16px;
}

.budget-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
}

.budget-progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.budget-progress-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.budget-progress-fill.under { background: var(--success-500); }
.budget-progress-fill.warning { background: var(--warning-500); }
.budget-progress-fill.over { background: var(--error-500); }

.budget-progress-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background: var(--gray-600);
}

/* Financial Ratios */
.financial-ratios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.ratio-card {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
    text-align: center;
}

.ratio-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-600);
    margin-bottom: 4px;
}

.ratio-name {
    font-size: 12px;
    color: var(--gray-600);
    margin-bottom: 8px;
}

.ratio-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.ratio-status.good {
    background: var(--success-100);
    color: var(--success-700);
}

.ratio-status.warning {
    background: var(--warning-100);
    color: var(--warning-700);
}

.ratio-status.bad {
    background: var(--error-100);
    color: var(--error-700);
}

/* Drill-Down Modal */
.drill-down-list {
    max-height: 400px;
    overflow-y: auto;
}

.drill-down-item {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid var(--gray-100);
}

.drill-down-item:hover {
    background: var(--gray-50);
}

.drill-down-date {
    font-size: 12px;
    color: var(--gray-500);
}

/* ----------------------------------------
   Analytics Page
   ---------------------------------------- */

/* KPI Dashboard */
.kpi-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 20px;
    position: relative;
}

.kpi-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.kpi-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.kpi-card-icon.sales { background: var(--success-500); }
.kpi-card-icon.revenue { background: var(--primary-500); }
.kpi-card-icon.orders { background: var(--info-500); }
.kpi-card-icon.profit { background: var(--warning-500); }

.kpi-card-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
}

.kpi-card-trend.up {
    background: var(--success-100);
    color: var(--success-700);
}

.kpi-card-trend.down {
    background: var(--error-100);
    color: var(--error-700);
}

.kpi-card-value {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
}

.kpi-card-label {
    font-size: 13px;
    color: var(--gray-600);
}

.kpi-card-sparkline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    opacity: 0.2;
}

/* Sales Funnel */
.sales-funnel-vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 24px;
    width: 100%;
}

.funnel-stage-vertical {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 16px;
    background: var(--primary-500);
    color: white;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    position: relative;
}

.funnel-stage-vertical:nth-child(1) { width: 100%; background: #6366f1; }
.funnel-stage-vertical:nth-child(2) { width: 85%; background: #8b5cf6; }
.funnel-stage-vertical:nth-child(3) { width: 70%; background: #a855f7; }
.funnel-stage-vertical:nth-child(4) { width: 55%; background: #d946ef; }

.funnel-stage-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 16px;
}

.funnel-stage-name {
    font-weight: 500;
}

.funnel-stage-value {
    font-weight: 700;
}

.funnel-conversion {
    font-size: 11px;
    color: var(--gray-500);
    margin: 4px 0;
}

/* Geographic Heatmap */
.geo-heatmap {
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: relative;
    min-height: 300px;
}

.geo-heatmap-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 250px;
    color: var(--gray-500);
}

.geo-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.geo-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.geo-legend-color {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
}

/* Time of Day Heatmap */
.time-heatmap {
    display: grid;
    grid-template-columns: 40px repeat(7, 1fr);
    gap: 2px;
}

.time-heatmap-label {
    font-size: 10px;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
}

.time-heatmap-cell {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    transition: transform 0.2s;
    cursor: pointer;
}

.time-heatmap-cell:hover {
    transform: scale(1.1);
    z-index: 1;
}

.time-heatmap-cell.level-0 { background: var(--gray-100); }
.time-heatmap-cell.level-1 { background: #bbf7d0; }
.time-heatmap-cell.level-2 { background: #86efac; }
.time-heatmap-cell.level-3 { background: #4ade80; }
.time-heatmap-cell.level-4 { background: #22c55e; }
.time-heatmap-cell.level-5 { background: #16a34a; }

/* Platform Radar Chart */
.radar-chart-container {
    display: flex;
    justify-content: center;
    padding: 24px;
}

.radar-chart {
    width: 300px;
    height: 300px;
}

/* Goal Tracking */
.goal-tracker {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.goal-tracker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.goal-tracker-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.goal-progress-ring {
    display: flex;
    align-items: center;
    gap: 20px;
}

.goal-details {
    flex: 1;
}

.goal-current {
    font-size: 24px;
    font-weight: 700;
}

.goal-target {
    font-size: 13px;
    color: var(--gray-600);
}

.goal-remaining {
    font-size: 12px;
    color: var(--primary-600);
    margin-top: 4px;
}

/* Report Builder */
.report-builder {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 24px;
    min-height: 500px;
}

.report-builder-sidebar {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.report-builder-section {
    margin-bottom: 16px;
}

.report-builder-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.report-builder-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    cursor: grab;
    transition: all 0.2s;
}

.report-builder-item:hover {
    border-color: var(--primary-400);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .report-builder-item {
    background: #374151;
    border-color: #4b5563;
}

.report-builder-canvas {
    background: white;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 24px;
    min-height: 400px;
}

body.dark-mode .report-builder-canvas {
    background: #1f2937;
    border-color: #6b7280;
}

.report-builder-canvas.drag-over {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

body.dark-mode .report-builder-canvas.drag-over {
    background: rgba(99, 102, 241, 0.1);
}

.report-widget {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
    position: relative;
}

.report-widget-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.report-widget:hover .report-widget-controls {
    opacity: 1;
}

/* Comparison Mode */
.comparison-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--gray-100);
    border-radius: var(--radius-full);
}

.comparison-toggle label {
    font-size: 13px;
    cursor: pointer;
}

.comparison-period-select {
    display: flex;
    gap: 8px;
}

.comparison-period-btn {
    padding: 6px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.comparison-period-btn.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
}

/* ----------------------------------------
   Cross-Business Enhancements
   ---------------------------------------- */

/* Financial Alerts */
.financial-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
}

.financial-alert.warning {
    background: var(--warning-50);
    border: 1px solid var(--warning-200);
}

.financial-alert.danger {
    background: var(--error-50);
    border: 1px solid var(--error-200);
}

.financial-alert.info {
    background: var(--info-50);
    border: 1px solid var(--info-200);
}

.financial-alert-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.financial-alert.warning .financial-alert-icon {
    background: var(--warning-100);
    color: var(--warning-600);
}

.financial-alert.danger .financial-alert-icon {
    background: var(--error-100);
    color: var(--error-600);
}

.financial-alert-content {
    flex: 1;
}

.financial-alert-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.financial-alert-message {
    font-size: 13px;
    color: var(--gray-600);
}

/* Quick Actions FAB */
.business-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
}

.business-fab-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-500);
    color: white;
    border: none;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.business-fab-btn:hover {
    background: var(--primary-600);
    transform: scale(1.1);
}

.business-fab-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 8px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

.business-fab.open .business-fab-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.business-fab-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s;
}

.business-fab-item:hover {
    background: var(--gray-100);
}

/* Data Export Progress */
.export-progress {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.export-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.export-progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.export-progress-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

/* Dark Mode for Business Section */
body.dark-mode .shop-health-card,
body.dark-mode .financial-metric-card,
body.dark-mode .kpi-card,
body.dark-mode .transaction-timeline-item {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .ratio-card,
body.dark-mode .period-comparison-column,
body.dark-mode .report-builder-sidebar {
    background: #111827;
}

body.dark-mode .running-balance {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
}

body.dark-mode .goal-tracker {
    background: linear-gradient(135deg, #1e3a5f, #1e293b);
}

body.dark-mode .business-fab-menu {
    background: #1f2937;
}

body.dark-mode .business-fab-item:hover {
    background: #374151;
}

/* ============================================
   Intelligence Section Styles
   ============================================ */

/* AI Confidence Gauge */
.ai-confidence-gauge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.ai-confidence-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
    font-size: 28px;
    font-weight: 700;
}

.ai-confidence-label {
    margin-top: 8px;
    font-size: 12px;
    color: var(--gray-500);
}

/* Recommendation Cards */
.recommendation-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.recommendation-card {
    background: var(--gray-50);
    border-radius: 8px;
    padding: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.recommendation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.recommendation-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.recommendation-icon {
    display: flex;
    align-items: center;
}

.recommendation-label {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
}

.recommendation-count {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.recommendation-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recommendation-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 8px;
    background: white;
    border-radius: 4px;
}

.recommendation-more {
    font-size: 12px;
    color: var(--gray-500);
    text-align: center;
    padding-top: 4px;
}

/* Demand Heatmap - Scoped styles to avoid conflicts */
.demand-heatmap {
    padding: 16px;
}

.demand-heatmap .heatmap-header {
    display: grid;
    grid-template-columns: 100px repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

.demand-heatmap .heatmap-corner {
    /* Empty corner cell */
}

.demand-heatmap .heatmap-time {
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-600);
}

.demand-heatmap .heatmap-row {
    display: grid;
    grid-template-columns: 100px repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

.demand-heatmap .heatmap-category {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.demand-heatmap .heatmap-cell {
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;
}

.demand-heatmap .heatmap-cell:hover {
    transform: scale(1.05);
}

.demand-heatmap .heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 11px;
    color: var(--gray-500);
}

.demand-heatmap .heatmap-legend-gradient {
    width: 100px;
    height: 8px;
    background: linear-gradient(to right, var(--gray-300), var(--warning), var(--success));
    border-radius: 4px;
}

/* Forecast Timeline */
.forecast-timeline {
    position: relative;
    padding-left: 20px;
}

.forecast-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.forecast-item {
    position: relative;
    padding: 12px 0 12px 20px;
}

.forecast-item.current .forecast-marker {
    background: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-100);
}

.forecast-marker {
    position: absolute;
    left: -14px;
    top: 16px;
    width: 12px;
    height: 12px;
    background: var(--gray-300);
    border-radius: 50%;
    border: 2px solid white;
}

.forecast-content {
    background: var(--gray-50);
    padding: 12px 16px;
    border-radius: 8px;
}

.forecast-period {
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.forecast-prediction {
    display: flex;
    align-items: center;
    gap: 12px;
}

.forecast-value {
    font-size: 18px;
    font-weight: 700;
}

.forecast-value.positive { color: var(--success); }
.forecast-value.negative { color: var(--error); }

.forecast-category {
    font-size: 13px;
    color: var(--gray-600);
}

/* Price Sparkline */
.price-sparkline {
    width: 100%;
    height: 30px;
}

.no-data-sparkline {
    font-size: 11px;
    color: var(--gray-400);
    text-align: center;
    padding: 8px;
}

/* Supplier Health Dashboard */
.supplier-health-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.supplier-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    transition: box-shadow 0.2s;
}

.supplier-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.supplier-stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.supplier-stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.supplier-stat-label {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 4px;
}

/* Price Drop Banner */
.price-drop-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 12px;
    margin-bottom: 24px;
}

.price-drop-icon {
    color: var(--warning-700);
}

.price-drop-content {
    flex: 1;
}

.price-drop-content strong {
    color: var(--warning-800);
}

.price-drop-content span {
    display: block;
    font-size: 13px;
    color: var(--warning-700);
}

/* Enhanced Supplier Card */
.supplier-card-enhanced {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.supplier-card-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.supplier-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--gray-100);
}

.supplier-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 700;
}

.supplier-info {
    flex: 1;
}

.supplier-name {
    font-weight: 600;
    font-size: 16px;
}

.supplier-link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.supplier-health {
    text-align: center;
}

.supplier-health-score {
    font-size: 24px;
    font-weight: 700;
}

.supplier-health-label {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.8;
}

.supplier-card-body {
    padding: 16px;
}

.supplier-metrics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.supplier-metric {
    text-align: center;
}

.supplier-metric .metric-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
}

.supplier-metric .metric-label {
    font-size: 11px;
    color: var(--gray-500);
}

.supplier-sparkline-container {
    padding: 8px;
    background: var(--gray-50);
    border-radius: 8px;
}

.supplier-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.supplier-rating {
    margin-left: auto;
    display: flex;
    gap: 2px;
}

.rating-star {
    color: var(--gray-300);
    cursor: pointer;
    font-size: 16px;
    transition: color 0.2s, transform 0.2s;
}

.rating-star.active {
    color: #fbbf24;
}

.rating-star:hover {
    transform: scale(1.2);
}

/* Market Radar */
.market-radar {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.radar-chart {
    width: 240px;
    height: 240px;
}

/* Competitor Activity Feed */
.competitor-activity-feed {
    background: var(--gray-50);
    border-radius: 12px;
    overflow: hidden;
}

.activity-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid var(--gray-200);
}

.activity-live-dot {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

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

.activity-feed-list {
    max-height: 300px;
    overflow-y: auto;
}

.activity-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.2s;
}

.activity-feed-item:hover {
    background: white;
}

.activity-icon {
    margin-top: 2px;
}

.activity-content {
    flex: 1;
}

.activity-text {
    font-size: 13px;
    line-height: 1.4;
}

.activity-item {
    color: var(--primary);
}

.activity-time {
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 2px;
}

/* Opportunity Cards */
.opportunity-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.opportunity-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.opportunity-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.opportunity-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.opportunity-category {
    font-weight: 600;
    font-size: 15px;
}

.opportunity-score {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.opportunity-score.high { color: var(--success); }
.opportunity-score.medium { color: var(--warning); }
.opportunity-score.low { color: var(--error); }

.opportunity-body {
    margin-bottom: 16px;
}

.opportunity-trend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    margin-bottom: 12px;
}

.opportunity-trend.up { color: var(--success); }
.opportunity-trend.down { color: var(--error); }
.opportunity-trend.stable { color: var(--gray-500); }

.opportunity-potential {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--gray-100);
}

.potential-label {
    font-size: 12px;
    color: var(--gray-500);
}

.potential-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

/* Opportunity Demand Badge */
.opportunity-demand-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.opportunity-demand-badge.demand-hot {
    background: linear-gradient(135deg, #ff6b6b, #ffa502);
    color: white;
}

.opportunity-demand-badge.demand-warm {
    background: linear-gradient(135deg, #ffa502, #ffc107);
    color: white;
}

.opportunity-demand-badge.demand-cool {
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    color: white;
}

/* Opportunity Demand Thermometer */
.opportunity-demand-thermometer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}

.thermometer-track {
    flex: 1;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.thermometer-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.thermometer-fill.demand-hot {
    background: linear-gradient(90deg, #ffa502, #ff6b6b);
}

.thermometer-fill.demand-warm {
    background: linear-gradient(90deg, #ffc107, #ffa502);
}

.thermometer-fill.demand-cool {
    background: linear-gradient(90deg, #74b9ff, #0984e3);
}

.thermometer-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-700);
    min-width: 30px;
}

/* Opportunity Competition */
.opportunity-competition {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.competition-label {
    font-size: 12px;
    color: var(--gray-500);
}

.competition-value {
    font-size: 12px;
    font-weight: 600;
}

.competition-value.competition-low { color: var(--success); }
.competition-value.competition-medium { color: var(--warning); }
.competition-value.competition-high { color: var(--error); }

/* Category Demand Index */
.demand-index-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.demand-index-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 8px;
    transition: background 0.2s;
}

.demand-index-row:hover {
    background: var(--gray-100);
}

.demand-rank {
    width: 32px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-400);
}

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

.demand-category-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-800);
    display: block;
    margin-bottom: 4px;
}

.demand-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.demand-trend {
    display: flex;
    align-items: center;
    gap: 4px;
}

.demand-competition {
    font-size: 11px;
}

.demand-bar-container {
    width: 150px;
}

.demand-bar {
    height: 10px;
    background: var(--gray-200);
    border-radius: 5px;
    overflow: hidden;
}

.demand-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s ease;
}

.demand-bar-fill.demand-hot {
    background: linear-gradient(90deg, #ffa502, #ff6b6b);
}

.demand-bar-fill.demand-warm {
    background: linear-gradient(90deg, #ffc107, #ffa502);
}

.demand-bar-fill.demand-cool {
    background: linear-gradient(90deg, #74b9ff, #0984e3);
}

.demand-score {
    width: 48px;
    text-align: right;
    font-size: 16px;
    font-weight: 700;
}

.demand-score.demand-hot { color: #ff6b6b; }
.demand-score.demand-warm { color: #ffa502; }
.demand-score.demand-cool { color: #0984e3; }

/* Supplier Reliability Score */
.supplier-reliability {
    text-align: center;
    margin-left: 8px;
}

.reliability-score-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gray-100);
    border: 3px solid var(--reliability-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.reliability-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--reliability-color);
}

.reliability-label {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-top: 2px;
}

/* Trending Keywords */
.trending-keywords {
    background: var(--gray-50);
    border-radius: 12px;
    overflow: hidden;
}

.trending-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    font-size: 14px;
}

.trending-list {
    padding: 8px 0;
}

.trending-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    transition: background 0.2s;
}

.trending-item:hover {
    background: white;
}

.trending-rank {
    width: 28px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-400);
}

.trending-term {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
}

.trending-volume {
    font-size: 12px;
    color: var(--gray-500);
    margin-right: 12px;
}

.trending-change {
    font-size: 12px;
    font-weight: 600;
    min-width: 45px;
    text-align: right;
}

.trending-change.positive { color: var(--success); }
.trending-change.negative { color: var(--error); }

/* Price Position Chart */
.price-position-chart {
    padding: 20px;
}

/* Intelligence Quick Filters */
.intel-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.intel-filter-btn {
    padding: 6px 14px;
    font-size: 13px;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.intel-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.intel-filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Dark Mode for Intelligence Section */
body.dark-mode .recommendation-card,
body.dark-mode .forecast-content,
body.dark-mode .supplier-stat-card,
body.dark-mode .supplier-card-enhanced,
body.dark-mode .opportunity-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .recommendation-item {
    background: #111827;
}

body.dark-mode .competitor-activity-feed,
body.dark-mode .trending-keywords {
    background: #111827;
}

body.dark-mode .activity-feed-header,
body.dark-mode .trending-header,
body.dark-mode .activity-feed-item:hover,
body.dark-mode .trending-item:hover {
    background: #1f2937;
}

body.dark-mode .supplier-card-footer {
    background: #111827;
}

body.dark-mode .demand-index-row {
    background: #111827;
}

body.dark-mode .demand-index-row:hover {
    background: #1f2937;
}

body.dark-mode .demand-category-name {
    color: #e5e7eb;
}

body.dark-mode .demand-bar,
body.dark-mode .thermometer-track {
    background: #374151;
}

body.dark-mode .thermometer-value {
    color: #e5e7eb;
}

body.dark-mode .reliability-score-circle {
    background: #111827;
}

body.dark-mode .opportunity-potential {
    border-color: #374151;
}

body.dark-mode .price-drop-banner {
    background: linear-gradient(135deg, #78350f, #92400e);
}

body.dark-mode .price-drop-content strong,
body.dark-mode .price-drop-content span {
    color: #fef3c7;
}

body.dark-mode .intel-filter-btn {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

body.dark-mode .intel-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

body.dark-mode .intel-filter-btn.active {
    background: var(--primary);
    color: white;
}

/* ==========================================
   Resources Section Styles
   ========================================== */

/* Settings Page - Tabbed Layout */
.settings-container {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
}

.settings-tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 24px;
    height: fit-content;
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-600);
    text-align: left;
    transition: all 0.2s;
}

.settings-tab:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.settings-tab.active {
    background: var(--primary-50);
    color: var(--primary-600);
}

.settings-content {
    min-height: 500px;
}

.settings-section {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--gray-200);
}

.settings-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.settings-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 16px;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
    margin-top: 24px;
}

/* Settings Profile Header */
.settings-profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--gray-50);
    border-radius: 12px;
    margin-bottom: 24px;
}

.settings-avatar {
    position: relative;
}

.settings-avatar-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
    color: white;
}

.settings-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-avatar-edit:hover {
    background: var(--gray-100);
    border-color: var(--primary-500);
}

body.dark-mode .settings-avatar-edit {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .settings-avatar-edit:hover {
    background: #4b5563;
}

.settings-profile-info {
    flex: 1;
}

.settings-profile-info h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
}

.settings-profile-info p {
    margin: 0 0 8px 0;
    color: var(--gray-500);
    font-size: 14px;
}

/* Security Summary Card */
.security-summary-card {
    background: var(--gray-50);
    border-radius: 12px;
    padding: 20px;
}

.security-summary-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.security-score {
    position: relative;
    width: 48px;
    height: 48px;
}

.security-score span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 700;
}

.security-summary-info h5 {
    margin: 0 0 4px 0;
    font-size: 16px;
}

.security-summary-info p {
    margin: 0;
    font-size: 13px;
    color: var(--gray-600);
}

.security-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.security-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: white;
    border-radius: 8px;
    font-size: 14px;
}

.security-check-item.completed {
    color: var(--gray-600);
}

.security-check-item .btn {
    margin-left: auto;
}

/* Theme Options */
.theme-options {
    display: flex;
    gap: 16px;
}

.theme-option {
    cursor: pointer;
    text-align: center;
}

.theme-option input {
    /* Visually hidden but keyboard/AT accessible (sr-only pattern) */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.theme-preview {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    border: 2px solid var(--gray-200);
    overflow: hidden;
    display: flex;
    transition: all 0.2s;
    margin-bottom: 8px;
}

.theme-option.active .theme-preview,
.theme-option:hover .theme-preview {
    border-color: var(--primary-500);
}

/* Keyboard focus ring: show on the preview card when the hidden radio is focused */
.theme-option:has(input:focus-visible) .theme-preview {
    outline: 3px solid var(--primary-500);
    outline-offset: 2px;
    border-color: var(--primary-500);
}

.theme-preview-sidebar {
    width: 24px;
    background: var(--gray-800);
}

.theme-preview-light .theme-preview-sidebar {
    background: var(--gray-100);
}

.theme-preview-content {
    flex: 1;
    padding: 8px;
    background: white;
}

.theme-preview-dark .theme-preview-content {
    background: #1f2937;
}

.theme-preview-system .theme-preview-content {
    background: linear-gradient(135deg, white 50%, #1f2937 50%);
}

.theme-preview-header {
    height: 8px;
    background: var(--gray-200);
    border-radius: 2px;
    margin-bottom: 6px;
}

.theme-preview-dark .theme-preview-header {
    background: #374151;
}

.theme-preview-card {
    height: 24px;
    background: var(--gray-100);
    border-radius: 4px;
}

.theme-preview-dark .theme-preview-card {
    background: #374151;
}

/* Accent Colors */
.accent-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.accent-color-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--gray-50);
    cursor: pointer;
    transition: all 0.2s;
}

.accent-color-option:hover {
    background: var(--gray-100);
}

.accent-color-option.active {
    border-color: var(--accent-preview);
    background: white;
}

.accent-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-preview);
}

.accent-color-name {
    font-size: 12px;
    color: var(--gray-600);
}

/* Keyboard Shortcuts */
.keyboard-shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.keyboard-shortcut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: 6px;
}

.shortcut-action {
    font-size: 14px;
    color: var(--gray-700);
}

.shortcut-keys {
    display: flex;
    gap: 4px;
}

.shortcut-keys kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Notification Preferences Enhanced */
.notification-prefs-enhanced {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.notification-category {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.notification-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--gray-50);
    font-weight: 600;
    font-size: 14px;
}

.notification-items {
    padding: 8px 0;
}

.notification-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
}

.notification-item-row span {
    font-size: 14px;
    color: var(--gray-700);
}

.notification-channels {
    display: flex;
    gap: 8px;
}

.channel-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--gray-300);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--gray-400);
}

body.dark-mode .channel-btn {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

.channel-btn:hover {
    border-color: var(--primary-500);
    color: var(--primary-500);
}

.channel-btn.active {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

/* Integrations Grid */
.integrations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.integration-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    transition: all 0.2s;
}

.integration-card:hover {
    border-color: var(--primary-300);
}

.integration-card.connected {
    background: var(--success-50, #f0fdf4);
    border-color: var(--success-200, #bbf7d0);
}

.integration-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.integration-info {
    flex: 1;
}

.integration-info h5 {
    margin: 0 0 2px 0;
    font-size: 14px;
}

.integration-status {
    font-size: 12px;
    color: var(--gray-500);
}

.integration-status.connected {
    color: var(--success);
}

/* Tools Grid */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.tool-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.tool-card:hover {
    border-color: var(--primary-300);
    background: var(--gray-50);
}

body.dark-mode .tool-card {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .tool-card:hover {
    background: #4b5563;
    border-color: var(--primary-400);
}

.tool-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
}

.tool-info {
    flex: 1;
}

.tool-info h5 {
    margin: 0 0 2px 0;
    font-size: 14px;
}

.tool-info p {
    margin: 0;
    font-size: 12px;
    color: var(--gray-500);
}

/* Data Management */
.data-management-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.data-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
}

.data-option-info h5 {
    margin: 0 0 4px 0;
    font-size: 14px;
}

.data-option-info p {
    margin: 0;
    font-size: 13px;
    color: var(--gray-500);
}

/* Data Retention Settings */
.data-retention-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.retention-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.retention-option:hover {
    border-color: var(--gray-300);
    background: white;
}

.retention-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.retention-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-100);
    color: var(--primary-600);
    border-radius: var(--radius-md);
}

.retention-info h5 {
    margin: 0 0 2px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
}

.retention-auto-cleanup {
    padding: 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}

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

/* Cleanup Preview Modal */
.cleanup-preview-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
    border-radius: var(--radius-lg);
}

.cleanup-summary-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--radius-md);
    color: var(--warning-600);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cleanup-summary-count {
    font-size: 24px;
    font-weight: 700;
    color: var(--warning-700);
}

.cleanup-summary-label {
    font-size: 14px;
    color: var(--warning-600);
}

.cleanup-preview-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cleanup-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
}

.cleanup-preview-category {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cleanup-preview-category .category-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
}

.cleanup-preview-category .category-retention {
    font-size: 12px;
    color: var(--gray-500);
}

.cleanup-preview-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--warning-600);
    padding: 4px 10px;
    background: var(--warning-100);
    border-radius: var(--radius-full);
}

.cleanup-preview-count.zero {
    color: var(--gray-500);
    background: var(--gray-200);
}

/* Account Activity Log */
.activity-log-container {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.activity-log-list {
    max-height: 400px;
    overflow-y: auto;
}

.activity-log-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-200);
    background: white;
    transition: background 0.2s;
}

.activity-log-item:hover {
    background: var(--gray-50);
}

.activity-log-item.current {
    background: var(--success-light);
    border-left: 3px solid var(--success);
}

.activity-log-item.suspicious {
    background: var(--error-light);
    border-left: 3px solid var(--error);
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.activity-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.activity-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-900);
}

.activity-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--gray-600);
    margin-bottom: 2px;
}

.activity-device {
    display: flex;
    align-items: center;
    gap: 4px;
}

.activity-location {
    color: var(--gray-500);
}

.activity-ip {
    font-size: 12px;
    color: var(--gray-400);
    font-family: monospace;
}

.activity-time {
    font-size: 12px;
    color: var(--gray-500);
    white-space: nowrap;
    flex-shrink: 0;
}

.activity-log-footer {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

/* Activity Log - Dark Mode */
body.dark-mode .activity-log-container {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .activity-log-item {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .activity-log-item:hover {
    background: var(--gray-750);
}

body.dark-mode .activity-log-item.current {
    background: rgba(16, 185, 129, 0.1);
}

body.dark-mode .activity-log-item.suspicious {
    background: rgba(239, 68, 68, 0.1);
}

body.dark-mode .activity-icon {
    background: var(--gray-700);
}

body.dark-mode .activity-label {
    color: var(--gray-100);
}

body.dark-mode .activity-meta {
    color: var(--gray-400);
}

body.dark-mode .activity-location {
    color: var(--gray-500);
}

body.dark-mode .activity-ip {
    color: var(--gray-500);
}

body.dark-mode .activity-log-footer {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

/* Data Retention Dark Mode */
body.dark-mode .retention-option {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .retention-option:hover {
    background: #111827;
    border-color: #4b5563;
}

body.dark-mode .retention-icon {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

body.dark-mode .retention-info h5 {
    color: #e5e7eb;
}

body.dark-mode .retention-auto-cleanup {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .cleanup-preview-summary {
    background: linear-gradient(135deg, #451a03, #422006);
}

body.dark-mode .cleanup-summary-icon {
    background: #1f2937;
    color: #fbbf24;
}

body.dark-mode .cleanup-summary-count {
    color: #fbbf24;
}

body.dark-mode .cleanup-summary-label {
    color: #f59e0b;
}

body.dark-mode .cleanup-preview-row {
    background: #1f2937;
}

body.dark-mode .cleanup-preview-category .category-name {
    color: #e5e7eb;
}

body.dark-mode .cleanup-preview-count {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

body.dark-mode .cleanup-preview-count.zero {
    background: #374151;
    color: #9ca3af;
}

/* ==========================================
   Help & Support Page Styles
   ========================================== */

.help-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.help-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
}

.help-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-stat-info {
    display: flex;
    flex-direction: column;
}

.help-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
}

.help-stat-label {
    font-size: 13px;
    color: var(--gray-500);
}

/* Help Search */
.help-search-container {
    position: relative;
    margin-bottom: 24px;
}

.help-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    transition: all 0.2s;
}

.help-search-box:focus-within {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.help-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    background: transparent;
}

.help-search-shortcut {
    padding: 4px 8px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 12px;
    color: var(--gray-500);
}

.help-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    margin-top: 8px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
}

body.dark-mode .help-search-results {
    background: #374151;
    border-color: #4b5563;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Help Options Grid */
.help-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.help-option-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.help-option-card:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
}

.help-option-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-option-content {
    flex: 1;
}

.help-option-content h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
}

.help-option-content p {
    margin: 0;
    font-size: 13px;
    color: var(--gray-500);
}

/* Getting Started Checklist */
.getting-started-progress {
    margin-bottom: 16px;
}

.progress-bar-container {
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

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

.progress-label {
    font-size: 12px;
    color: var(--gray-500);
}

.getting-started-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.getting-started-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.getting-started-item:hover {
    background: var(--gray-50);
}

.getting-started-item.completed {
    opacity: 0.6;
}

.getting-started-item.completed .step-title {
    text-decoration: line-through;
}

.step-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.getting-started-item.completed .step-checkbox {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.step-title {
    font-size: 14px;
    color: var(--gray-700);
}

/* Popular Articles Grid */
.popular-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.popular-article-card {
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.popular-article-card:hover {
    border-color: var(--primary-300);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.article-category {
    display: inline-block;
    padding: 2px 8px;
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
}

.article-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gray-900);
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-500);
}

/* Contact Methods Grid */
.contact-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.contact-method-card {
    text-align: center;
    padding: 24px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
}

.contact-method-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 12px;
    background: var(--primary-100);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-method-card h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
}

.contact-method-card p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: var(--gray-600);
}

.response-time {
    font-size: 12px;
    color: var(--gray-500);
}

/* ==========================================
   Feedback & Suggestions Page Styles
   ========================================== */

.feedback-impact-dashboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 32px;
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border-radius: 16px;
    margin-bottom: 24px;
}

.impact-card {
    text-align: center;
}

.impact-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.impact-icon.submitted {
    background: var(--primary-100);
    color: var(--primary-600);
}

.impact-icon.accepted {
    background: var(--success-100, #d1fae5);
    color: var(--success);
}

.impact-icon.implemented {
    background: var(--info-100, #dbeafe);
    color: var(--info, #3b82f6);
}

.impact-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--gray-900);
}

.impact-label {
    font-size: 13px;
    color: var(--gray-600);
}

.impact-arrow {
    color: var(--gray-300);
}

/* Quick Feedback Form */
.quick-feedback-types {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.feedback-type-option {
    flex: 1;
    cursor: pointer;
}

.feedback-type-option input {
    display: none;
}

.feedback-type-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.feedback-type-option input:checked + .feedback-type-label {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.feedback-type-icon {
    font-size: 18px;
}

/* Your Impact Stats */
.your-impact-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.impact-stat-item {
    text-align: center;
    padding: 16px;
    background: var(--gray-50);
    border-radius: 8px;
}

.impact-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
}

.impact-stat-label {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 4px;
}

.contributor-badge-section {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 12px;
}

.contributor-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--warning);
}

.badge-description {
    margin: 8px 0 0;
    font-size: 13px;
    color: #92400e;
}

/* Feedback Actions Grid */
.feedback-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.feedback-action-card {
    text-align: center;
    padding: 32px 24px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.feedback-action-card:hover {
    border-color: var(--primary-300);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.action-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.feedback-action-card h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
}

.feedback-action-card p {
    margin: 0;
    font-size: 14px;
    color: var(--gray-500);
}

/* Trending Suggestions */
.trending-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trending-suggestion-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    transition: all 0.2s;
}

.trending-suggestion-item:hover {
    border-color: var(--primary-300);
    background: var(--gray-50);
}

.suggestion-rank {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-600);
    min-width: 32px;
}

.suggestion-content {
    flex: 1;
}

.suggestion-content h5 {
    margin: 0 0 4px 0;
    font-size: 15px;
}

.suggestion-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.vote-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

body.dark-mode .vote-btn {
    background: #374151;
    border-color: #4b5563;
}

.vote-btn:hover {
    border-color: var(--primary-500);
    color: var(--primary-500);
}

.vote-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
}

/* ==========================================
   Roadmap Page Styles
   ========================================== */

.whats-new-banner {
    background: linear-gradient(135deg, var(--success-50, #f0fdf4), var(--success-100, #dcfce7));
    border: 1px solid var(--success-200, #bbf7d0);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.whats-new-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.whats-new-badge {
    font-weight: 600;
    color: var(--success);
}

.whats-new-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.whats-new-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: white;
    border-radius: 6px;
    font-size: 14px;
}

body.dark-mode .whats-new-item {
    background: #374151;
}

/* Roadmap Progress Cards */
.roadmap-progress-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.roadmap-progress-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.roadmap-progress-card:hover {
    border-color: var(--primary-300);
}

.progress-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-card-icon.planned {
    background: var(--gray-100);
    color: var(--gray-600);
}

.progress-card-icon.in-progress {
    background: var(--primary-100);
    color: var(--primary-600);
}

.progress-card-icon.completed {
    background: var(--success-100, #d1fae5);
    color: var(--success);
}

.progress-card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
}

.progress-card-label {
    font-size: 13px;
    color: var(--gray-500);
}

/* Roadmap Filters */
.roadmap-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.status-filters {
    display: flex;
    gap: 8px;
}

.filter-pill {
    padding: 8px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 20px;
    background: white;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.filter-pill:hover {
    border-color: var(--primary-500);
}

.filter-pill.active {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

.filter-count {
    font-size: 12px;
    opacity: 0.8;
    margin-left: 4px;
}

/* Roadmap Features List */
.roadmap-features-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.roadmap-feature-card {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    transition: all 0.2s;
}

.roadmap-feature-card:hover {
    border-color: var(--primary-300);
}

.roadmap-feature-card.completed {
    background: var(--success-50, #f0fdf4);
    border-color: var(--success-200, #bbf7d0);
}

.roadmap-feature-card.in_progress {
    border-left: 4px solid var(--primary-500);
}

.feature-vote-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.vote-button {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 2px solid var(--gray-300);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--gray-400);
}

body.dark-mode .vote-button {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

.vote-button:hover {
    border-color: var(--warning);
    color: var(--warning);
}

.vote-button.voted {
    background: var(--warning);
    border-color: var(--warning);
    color: white;
}

.feature-content {
    flex: 1;
}

.feature-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
    margin-bottom: 8px;
}

.feature-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.feature-status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.feature-status-badge.planned {
    background: var(--gray-100);
    color: var(--gray-700);
}

.feature-status-badge.in_progress {
    background: var(--primary-100);
    color: var(--primary-700);
}

.feature-status-badge.completed {
    background: var(--success-100, #d1fae5);
    color: var(--success);
}

.feature-description {
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.feature-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.progress-bar-mini {
    flex: 1;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
}

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

.progress-text {
    font-size: 12px;
    color: var(--gray-500);
    white-space: nowrap;
}

.feature-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.feature-category {
    padding: 3px 10px;
    background: var(--gray-100);
    border-radius: 4px;
    font-size: 12px;
    color: var(--gray-700);
}

.feature-eta,
.feature-comments {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-500);
}

.feature-dependencies,
.feature-blockers {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-600);
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 6px;
}

.feature-dependencies {
    background: var(--warning-50);
    border: 1px solid var(--warning-200);
}

.feature-blockers {
    background: var(--danger-50, #fef2f2);
    border: 1px solid var(--danger-200, #fecaca);
    color: var(--danger, #dc2626);
}

.feature-dependencies em,
.feature-blockers em {
    font-style: normal;
    font-weight: 500;
}

.feature-changelog-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--primary-600);
    cursor: pointer;
    font-weight: 500;
}

.feature-changelog-link:hover {
    color: var(--primary-700);
    text-decoration: underline;
}

/* ==========================================
   Changelog Page Styles
   ========================================== */

.changelog-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
}

.changelog-timeline {
    position: sticky;
    top: 24px;
    height: fit-content;
}

.timeline-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 16px;
    padding-left: 24px;
}

.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    border-radius: 8px;
    position: relative;
}

.timeline-item:hover {
    background: var(--gray-50);
}

.timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-300);
    margin-left: 7px;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 30px;
    bottom: -14px;
    width: 2px;
    background: var(--gray-200);
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-item.latest .timeline-dot {
    background: var(--success);
}

.timeline-content {
    flex: 1;
}

.timeline-version {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-900);
}

.timeline-date {
    font-size: 12px;
    color: var(--gray-500);
}

/* Changelog Filters Bar */
.changelog-filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.changelog-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    min-width: 250px;
}

.changelog-search input {
    border: none;
    outline: none;
    font-size: 14px;
    flex: 1;
    background: transparent;
}

.changelog-type-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.type-filter-btn {
    padding: 8px 14px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.type-filter-btn:hover {
    border-color: var(--primary-500);
}

.type-filter-btn.active {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

.type-filter-btn .filter-count {
    font-size: 11px;
    opacity: 0.7;
}

/* Changelog Version Cards */
.changelog-versions {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.changelog-version-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
}

.version-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.version-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.version-number {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.version-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--gray-500);
}

.version-badges {
    display: flex;
    gap: 8px;
}

.version-changes {
    padding: 8px 0;
}

.change-item {
    display: flex;
    align-items: start;
    gap: 16px;
    padding: 16px 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.change-item:hover {
    background: var(--gray-50);
}

.change-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.change-content {
    flex: 1;
}

.change-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.change-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.change-description {
    margin: 0;
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.5;
}

.change-expand-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    border-radius: 6px;
    transition: all 0.2s;
}

.change-expand-btn:hover {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* Changelog Expand/Collapse Details */
.change-item.expanded {
    background: var(--gray-50);
}

.change-expand-btn svg {
    transition: transform 0.2s;
}

.change-details {
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.change-details-inner {
    padding: 12px 24px 12px 56px;
}

.change-areas {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.change-area-tag {
    font-size: 11px;
    padding: 1px 8px;
    background: var(--primary-50);
    color: var(--primary-700);
    border-radius: 10px;
    border: 1px solid var(--primary-200);
}

.change-vote-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-200);
}

.change-vote-buttons {
    display: flex;
    gap: 8px;
}

.change-vote-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--gray-200);
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--gray-500);
    transition: all 0.15s;
}

.change-vote-btn:hover {
    border-color: var(--gray-300);
    background: var(--gray-50);
}

.change-vote-btn.voted {
    border-color: var(--primary-300);
    background: var(--primary-50);
    color: var(--primary-700);
}

/* Timeline active filter */
.timeline-item.active-filter {
    background: var(--primary-50);
    border-color: var(--primary-300);
}

.timeline-item.active-filter .timeline-dot {
    background: var(--primary-600);
    box-shadow: 0 0 0 3px var(--primary-200);
}

/* Dashboard What's New Banner */
.dashboard-whats-new-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border: 1px solid var(--primary-200);
    border-radius: 10px;
    margin-bottom: 16px;
}

.whats-new-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.whats-new-badge-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    background: var(--primary-600);
    color: white;
    border-radius: 20px;
    white-space: nowrap;
}

.whats-new-banner-text {
    font-size: 13px;
    color: var(--gray-700);
}

.whats-new-banner-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

body.dark-mode .change-details {
    background: var(--gray-800);
    border-top-color: var(--gray-700);
}

body.dark-mode .change-area-tag {
    background: var(--primary-900);
    color: var(--primary-300);
    border-color: var(--primary-700);
}

body.dark-mode .change-vote-section {
    border-top-color: var(--gray-700);
}

body.dark-mode .change-vote-btn {
    background: var(--gray-800);
    border-color: var(--gray-600);
    color: var(--gray-400);
}

body.dark-mode .dashboard-whats-new-banner {
    background: linear-gradient(135deg, var(--gray-800), var(--gray-750));
    border-color: var(--gray-600);
}

body.dark-mode .whats-new-banner-text {
    color: var(--gray-300);
}

/* Changelog Subscribe CTA */
.changelog-subscribe-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: 12px;
    margin-top: 32px;
}

.subscribe-icon {
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.dark-mode .subscribe-icon {
    background: #374151;
}

.subscribe-content {
    flex: 1;
}

.subscribe-content h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
}

.subscribe-content p {
    margin: 0;
    font-size: 14px;
    color: var(--gray-600);
}

.subscribe-form {
    display: flex;
    gap: 8px;
}

.subscribe-form input {
    padding: 10px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    min-width: 220px;
}

/* ==========================================
   Dark Mode - Resources Section
   ========================================== */

body.dark-mode .settings-tab {
    color: #9ca3af;
}

body.dark-mode .settings-tab:hover {
    background: #374151;
    color: #e5e7eb;
}

body.dark-mode .settings-tab.active {
    background: rgba(79, 70, 229, 0.2);
    color: var(--primary);
}

body.dark-mode .settings-profile-header,
body.dark-mode .security-summary-card,
body.dark-mode .keyboard-shortcut-item {
    background: #1f2937;
}

body.dark-mode .security-check-item {
    background: #111827;
}

body.dark-mode .theme-preview-light .theme-preview-sidebar {
    background: #374151;
}

body.dark-mode .accent-color-option {
    background: #1f2937;
}

body.dark-mode .accent-color-option.active {
    background: #111827;
}

body.dark-mode .help-stat-card,
body.dark-mode .help-search-box,
body.dark-mode .help-option-card,
body.dark-mode .popular-article-card,
body.dark-mode .contact-method-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .help-search-input {
    color: #e5e7eb;
}

body.dark-mode .feedback-impact-dashboard {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(79, 70, 229, 0.2));
}

body.dark-mode .feedback-action-card,
body.dark-mode .trending-suggestion-item {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .roadmap-progress-card,
body.dark-mode .roadmap-feature-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .changelog-version-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .version-header {
    background: #111827;
}

body.dark-mode .changelog-subscribe-cta {
    background: rgba(79, 70, 229, 0.1);
    border-color: rgba(79, 70, 229, 0.3);
}

body.dark-mode .changelog-search {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .changelog-search input {
    color: #e5e7eb;
}

body.dark-mode .type-filter-btn,
body.dark-mode .filter-pill {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

body.dark-mode .timeline-item:hover {
    background: #374151;
}

body.dark-mode .change-item:hover {
    background: #111827;
}

/* ============================================
   Company Section Styles - About, Terms, Privacy
   ============================================ */

/* About Us - Hero Section */
.about-hero {
    position: relative;
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-800) 50%, #1e1b4b 100%);
    border-radius: var(--radius-2xl);
    padding: var(--space-16) var(--space-8);
    margin-bottom: var(--space-8);
    overflow: hidden;
    text-align: center;
    color: white;
}

.about-hero-content {
    position: relative;
    z-index: 2;
}

.about-hero-logo {
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-6);
}

.hero-logo-icon {
    width: 80px;
    height: 80px;
    background: white;
    color: var(--primary-600);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

body.dark-mode .hero-logo-icon {
    background: #374151;
}

.hero-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.about-hero-title {
    font-size: 3rem;
    font-weight: 800;
    margin: 0 0 var(--space-3) 0;
    letter-spacing: -0.02em;
}

.about-hero-tagline {
    font-size: var(--font-size-xl);
    opacity: 0.9;
    margin: 0 0 var(--space-6) 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.about-hero-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.about-hero-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    z-index: 1;
}

/* About Us - Stats Section */
.about-stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.about-stat-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-100);
    transition: transform 0.2s, box-shadow 0.2s;
}

.about-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3);
}

.stat-icon-wrapper.primary {
    background: var(--primary-100);
    color: var(--primary-600);
}

.stat-icon-wrapper.success {
    background: var(--success-light);
    color: var(--success);
}

.stat-icon-wrapper.warning {
    background: var(--warning-light);
    color: var(--warning);
}

.stat-icon-wrapper.info {
    background: var(--info-light);
    color: var(--info);
}

.stat-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

/* About Us - Section Styling */
.about-section {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.about-section-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.section-badge {
    display: inline-block;
    background: var(--primary-100);
    color: var(--primary-700);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 var(--space-2) 0;
}

.section-description {
    color: var(--gray-500);
    margin: 0;
}

/* About Us - Mission Section */
.mission-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

.mission-text p {
    color: var(--gray-600);
    line-height: 1.7;
    margin: 0 0 var(--space-4) 0;
}

.mission-text p:last-child {
    margin-bottom: 0;
}

.mission-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
}

.value-card {
    text-align: center;
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.value-icon {
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

.value-card h4 {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-base);
    color: var(--gray-900);
}

.value-card p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

/* About Us - Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.about-feature-card {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
    transition: transform 0.2s, background 0.2s;
}

.about-feature-card:hover {
    transform: translateY(-2px);
    background: var(--gray-100);
}

.feature-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3);
}

.feature-icon-wrapper.primary {
    background: var(--primary-100);
    color: var(--primary-600);
}

.feature-icon-wrapper.success {
    background: var(--success-light);
    color: var(--success);
}

.feature-icon-wrapper.warning {
    background: var(--warning-light);
    color: var(--warning);
}

.feature-icon-wrapper.info {
    background: var(--info-light);
    color: var(--info);
}

.feature-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 var(--space-2) 0;
}

.feature-description {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    margin: 0;
    line-height: 1.5;
}

/* About Us - Timeline */
.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-4) 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: var(--space-4);
}

.timeline-item.left {
    left: 0;
    padding-right: var(--space-8);
    text-align: right;
}

.timeline-item.right {
    left: 50%;
    padding-left: var(--space-8);
    text-align: left;
}

.timeline-content {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    position: relative;
}

.timeline-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--primary-500);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--primary-100);
    top: 50%;
    transform: translateY(-50%);
}

.timeline-item.left .timeline-dot {
    right: -8px;
}

.timeline-item.right .timeline-dot {
    left: -8px;
}

.timeline-date {
    font-size: var(--font-size-sm);
    color: var(--primary-600);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.timeline-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 var(--space-2) 0;
}

.timeline-description {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    margin: 0;
}

/* About Us - Tech Stack */
.tech-stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
}

.tech-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: transform 0.2s;
}

.tech-card:hover {
    transform: translateX(4px);
}

.tech-icon {
    font-size: 2rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.tech-info h4 {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-base);
    color: var(--gray-900);
}

.tech-info p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

/* About Us - Testimonials */
.testimonials-section {
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--gray-50) 100%);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
}

.testimonial-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
}

.testimonial-stars {
    color: #fbbf24;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-3);
}

.testimonial-quote {
    color: var(--gray-600);
    font-style: italic;
    line-height: 1.6;
    margin: 0 0 var(--space-4) 0;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.author-avatar {
    width: 40px;
    height: 40px;
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.author-info strong {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--gray-900);
}

.author-info span {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* About Us - Generic Section */
.about-section {
    margin-bottom: var(--space-8);
}

.about-section-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
    text-align: center;
}

.about-section-subtitle {
    font-size: 14px;
    color: var(--gray-500);
    text-align: center;
    margin-bottom: 24px;
}

/* Team Grid */
.about-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.team-member-card {
    text-align: center;
    padding: 24px 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.team-member-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.team-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin: 0 auto 12px;
}

.team-avatar.primary { background: var(--primary-600); }
.team-avatar.success { background: var(--success); }
.team-avatar.warning { background: var(--warning-600); }
.team-avatar.info { background: var(--info, #3b82f6); }

.team-name {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}

.team-role {
    font-size: 12px;
    color: var(--primary-600);
    font-weight: 500;
}

.team-bio {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 8px;
    line-height: 1.4;
}

/* Company Timeline */
.about-timeline {
    position: relative;
    padding-left: 32px;
    max-width: 700px;
    margin: 0 auto;
}

.about-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.timeline-milestone {
    position: relative;
    padding-bottom: 24px;
}

.timeline-milestone:last-child {
    padding-bottom: 0;
}

.milestone-dot {
    position: absolute;
    left: -28px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gray-300);
    border: 3px solid white;
}

.timeline-milestone.current .milestone-dot {
    background: var(--primary-600);
    box-shadow: 0 0 0 4px var(--primary-100);
}

.milestone-date {
    font-size: 12px;
    color: var(--gray-400);
    font-weight: 500;
}

.milestone-title {
    margin: 2px 0 4px;
    font-size: 15px;
    font-weight: 600;
}

.milestone-description {
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.4;
    margin: 0;
}

/* Partners Grid */
.about-partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.partner-logo-card {
    text-align: center;
    padding: 20px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    transition: transform 0.15s;
}

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

.partner-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto 8px;
}

.partner-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
}

/* Social Links */
.about-social-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.social-link-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    color: var(--gray-700);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 14px;
    font-weight: 500;
}

.social-link-card:hover {
    background: var(--primary-50);
    border-color: var(--primary-200);
    color: var(--primary-700);
}

/* Press & Careers Cards */
.about-card-highlight {
    padding: 32px 24px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    text-align: center;
}

.about-card-highlight .highlight-icon {
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 1px solid var(--gray-200);
}

.about-card-highlight h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.about-card-highlight p {
    color: var(--gray-500);
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Dark mode for new About sections */
body.dark-mode .team-member-card,
body.dark-mode .partner-logo-card,
body.dark-mode .social-link-card,
body.dark-mode .about-card-highlight {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .about-card-highlight .highlight-icon {
    background: var(--gray-750);
    border-color: var(--gray-600);
}

body.dark-mode .milestone-dot {
    border-color: var(--gray-800);
}

body.dark-mode .about-timeline::before {
    background: var(--gray-700);
}

/* About Us - CTA Section */
.about-cta-section {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-800) 100%);
    border-radius: var(--radius-2xl);
    padding: var(--space-12) var(--space-8);
    text-align: center;
    color: white;
    margin-bottom: var(--space-6);
}

.cta-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--space-3) 0;
}

.cta-content p {
    opacity: 0.9;
    margin: 0 0 var(--space-6) 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
}

.cta-buttons .btn-primary {
    background: white;
    color: var(--primary-700);
}

.cta-buttons .btn-primary:hover {
    background: var(--gray-100);
}

.cta-buttons .btn-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

.cta-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* About Us - Contact Section */
.about-contact-section {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
    border: 1px solid var(--gray-100);
}

.about-contact-section h3 {
    margin: 0 0 var(--space-6) 0;
    color: var(--gray-900);
}

.contact-options {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.contact-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
    cursor: pointer;
    transition: all 0.2s;
}

.contact-option:hover {
    background: var(--primary-50);
    border-color: var(--primary-200);
    color: var(--primary-700);
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-500);
}

/* ============================================
   Legal Pages - Terms & Privacy
   ============================================ */

.legal-page {
    max-width: 1000px;
    margin: 0 auto;
}

/* Legal Header */
.legal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.legal-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.legal-icon {
    width: 56px;
    height: 56px;
    background: var(--primary-100);
    color: var(--primary-600);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.legal-icon.privacy {
    background: var(--success-light);
    color: var(--success);
}

.legal-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.legal-updated {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    margin: var(--space-1) 0 0 0;
}

.legal-actions {
    display: flex;
    gap: var(--space-2);
}

/* Legal Key Points */
.legal-key-points {
    background: var(--primary-50);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    border: 1px solid var(--primary-100);
}

.legal-key-points h3 {
    font-size: var(--font-size-lg);
    color: var(--gray-900);
    margin: 0 0 var(--space-4) 0;
}

.key-points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
}

.key-point-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: white;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
}

.key-point-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.key-point-card strong {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}

.key-point-card p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* Legal Layout */
.legal-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-6);
}

/* Legal TOC */
.legal-toc {
    position: sticky;
    top: var(--space-4);
    height: fit-content;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    border: 1px solid var(--gray-100);
}

.legal-toc h3 {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-3) 0;
}

.toc-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.toc-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    text-decoration: none;
    transition: all 0.2s;
}

.toc-link:hover {
    background: var(--gray-50);
    color: var(--primary-600);
}

.toc-link.active {
    background: var(--primary-50);
    color: var(--primary-700);
}

.toc-number {
    width: 20px;
    height: 20px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    flex-shrink: 0;
}

.toc-link:hover .toc-number,
.toc-link.active .toc-number {
    background: var(--primary-100);
    color: var(--primary-700);
}

/* Legal Content */
.legal-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.legal-section {
    background: white;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.legal-section .section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    transition: background 0.2s;
}

.legal-section .section-header:hover {
    background: var(--gray-50);
}

.legal-section .section-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.legal-section .section-header h2 {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--gray-900);
}

.section-chevron {
    color: var(--gray-400);
    transition: transform 0.2s;
}

.legal-section.collapsed .section-chevron {
    transform: rotate(-90deg);
}

.legal-section .section-body {
    padding: 0 var(--space-5) var(--space-5) var(--space-5);
    padding-left: calc(var(--space-5) + 1.25rem + var(--space-3));
    color: var(--gray-600);
    line-height: 1.7;
}

.legal-section.collapsed .section-body {
    display: none;
}

.legal-list {
    margin: var(--space-3) 0 0 0;
    padding-left: var(--space-5);
}

.legal-list li {
    margin-bottom: var(--space-2);
    color: var(--gray-600);
}

/* Legal Contact Card */
.legal-contact-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--gray-50) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-top: var(--space-4);
    border: 1px solid var(--primary-100);
}

.contact-card-icon {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-500);
    flex-shrink: 0;
}

.contact-card-content {
    flex: 1;
}

.contact-card-content h4 {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-base);
    color: var(--gray-900);
}

.contact-card-content p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

/* Legal Reading Progress */
.legal-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gray-200);
    z-index: 1000;
}

.legal-progress .progress-fill {
    height: 100%;
    background: var(--primary-500);
    width: 0%;
    transition: width 0.1s;
}

/* Privacy Badges */
.privacy-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.privacy-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: white;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--success-light);
    color: var(--success);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* Data Categories Section */
.data-categories-section {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    border: 1px solid var(--gray-100);
}

.data-categories-section h3 {
    font-size: var(--font-size-lg);
    color: var(--gray-900);
    margin: 0 0 var(--space-4) 0;
}

.data-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.data-category-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--gray-50);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
}

.data-category-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.data-category-info h4 {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-sm);
    color: var(--gray-900);
}

.data-examples {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

.data-retention {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--primary-600);
    font-weight: 500;
}

/* Your Rights Section */
.your-rights-section {
    background: linear-gradient(135deg, var(--success-light) 0%, var(--gray-50) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.your-rights-section h3 {
    font-size: var(--font-size-lg);
    color: var(--gray-900);
    margin: 0 0 var(--space-4) 0;
    text-align: center;
}

.rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.right-card {
    text-align: center;
    background: white;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.right-icon {
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

.right-card h4 {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-base);
    color: var(--gray-900);
}

.right-card p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

/* ============================================
   Company Section - Dark Mode
   ============================================ */

body.dark-mode .about-hero {
    background: linear-gradient(135deg, var(--primary-700) 0%, #1e1b4b 50%, #0f0d24 100%);
}

body.dark-mode .about-stat-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .stat-value {
    color: #e5e7eb;
}

body.dark-mode .stat-label {
    color: #9ca3af;
}

body.dark-mode .about-section {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .section-badge {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

body.dark-mode .section-title {
    color: #e5e7eb;
}

body.dark-mode .mission-text p {
    color: #9ca3af;
}

body.dark-mode .value-card {
    background: #111827;
}

body.dark-mode .value-card h4 {
    color: #e5e7eb;
}

body.dark-mode .features-grid .about-feature-card {
    background: #111827;
}

body.dark-mode .features-grid .about-feature-card:hover {
    background: #374151;
}

body.dark-mode .feature-title {
    color: #e5e7eb;
}

body.dark-mode .timeline-line {
    background: #374151;
}

body.dark-mode .timeline-content {
    background: #111827;
}

body.dark-mode .timeline-title {
    color: #e5e7eb;
}

body.dark-mode .tech-card {
    background: #111827;
}

body.dark-mode .tech-icon {
    background: #374151;
}

body.dark-mode .tech-info h4 {
    color: #e5e7eb;
}

body.dark-mode .testimonials-section {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, #1f2937 100%);
}

body.dark-mode .testimonial-card {
    background: #111827;
}

body.dark-mode .testimonial-quote {
    color: #d1d5db;
}

body.dark-mode .author-avatar {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

body.dark-mode .author-info strong {
    color: #e5e7eb;
}

body.dark-mode .about-cta-section {
    background: linear-gradient(135deg, var(--primary-700) 0%, #1e1b4b 100%);
}

body.dark-mode .about-contact-section {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .about-contact-section h3 {
    color: #e5e7eb;
}

body.dark-mode .contact-option {
    background: #111827;
    border-color: #374151;
    color: #d1d5db;
}

body.dark-mode .contact-option:hover {
    background: rgba(79, 70, 229, 0.1);
    border-color: var(--primary-600);
}

body.dark-mode .contact-icon {
    background: #374151;
}

/* Legal Pages - Dark Mode */
body.dark-mode .legal-header {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .legal-title {
    color: #e5e7eb;
}

body.dark-mode .legal-icon {
    background: rgba(99, 102, 241, 0.2);
}

body.dark-mode .legal-icon.privacy {
    background: rgba(16, 185, 129, 0.2);
}

body.dark-mode .legal-key-points {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
}

body.dark-mode .legal-key-points h3 {
    color: #e5e7eb;
}

body.dark-mode .key-point-card {
    background: #1f2937;
}

body.dark-mode .key-point-card strong {
    color: #e5e7eb;
}

body.dark-mode .legal-toc {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .toc-link {
    color: #9ca3af;
}

body.dark-mode .toc-link:hover {
    background: #374151;
    color: #a5b4fc;
}

body.dark-mode .toc-number {
    background: #374151;
    color: #d1d5db;
}

body.dark-mode .legal-section {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .legal-section .section-header:hover {
    background: #374151;
}

body.dark-mode .legal-section .section-header h2 {
    color: #e5e7eb;
}

body.dark-mode .legal-section .section-body {
    color: #9ca3af;
}

body.dark-mode .legal-list li {
    color: #9ca3af;
}

body.dark-mode .legal-contact-card {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, #1f2937 100%);
    border-color: rgba(99, 102, 241, 0.2);
}

body.dark-mode .contact-card-icon {
    background: #374151;
}

body.dark-mode .contact-card-content h4 {
    color: #e5e7eb;
}

body.dark-mode .legal-progress {
    background: #374151;
}

body.dark-mode .privacy-badges .privacy-badge {
    background: #1f2937;
    border-color: rgba(16, 185, 129, 0.3);
}

body.dark-mode .data-categories-section {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .data-categories-section h3 {
    color: #e5e7eb;
}

body.dark-mode .data-category-card {
    background: #111827;
}

body.dark-mode .data-category-info h4 {
    color: #e5e7eb;
}

body.dark-mode .your-rights-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, #1f2937 100%);
    border-color: rgba(16, 185, 129, 0.2);
}

body.dark-mode .your-rights-section h3 {
    color: #e5e7eb;
}

body.dark-mode .right-card {
    background: #111827;
}

body.dark-mode .right-card h4 {
    color: #e5e7eb;
}

/* ============================================
   Main Section Styles - Dashboard, Inventory, Listings, Orders, Offers
   ============================================ */

/* Dashboard Hero */
.dashboard-hero {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-800) 100%);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    color: white;
    position: relative;
    overflow: hidden;
}

.dashboard-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.dashboard-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    position: relative;
    z-index: 1;
}

.dashboard-hero-greeting h1 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--space-1) 0;
}

.dashboard-hero-greeting p {
    margin: 0;
    opacity: 0.9;
    font-size: var(--font-size-base);
}

.dashboard-hero-today {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    position: relative;
    z-index: 1;
}

.today-stat {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
}

.today-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.today-stat-icon.sales { background: rgba(16, 185, 129, 0.3); }
.today-stat-icon.orders { background: rgba(59, 130, 246, 0.3); }
.today-stat-icon.listings { background: rgba(139, 92, 246, 0.3); }
.today-stat-icon.pending { background: rgba(107, 114, 128, 0.3); }
.today-stat-icon.pending.has-pending { background: rgba(245, 158, 11, 0.3); color: var(--warning); }

.text-warning { color: var(--warning) !important; }

.today-stat-info {
    display: flex;
    flex-direction: column;
}

.today-stat-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.today-stat-label {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

.dashboard-hero-actions {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 50;
    pointer-events: auto;
}

.dashboard-hero-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Dashboard Customize Section */
.dashboard-customize-section {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-bottom: var(--space-4);
}

.dashboard-customize-section .btn {
    background: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-700);
}

.dashboard-customize-section .btn:hover {
    background: var(--gray-200);
    border-color: var(--gray-400);
}

body.dark-mode .dashboard-customize-section .btn {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-200);
}

body.dark-mode .dashboard-customize-section .btn:hover {
    background: var(--gray-600);
}

/* Platform Performance Bar */
.platform-performance-bar {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.platform-performance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.platform-performance-title {
    font-weight: 600;
    color: var(--gray-900);
}

.platform-performance-items {
    display: flex;
    gap: var(--space-6);
}

.platform-performance-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.platform-perf-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.platform-perf-info {
    display: flex;
    flex-direction: column;
}

.platform-perf-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-900);
}

.platform-perf-stats {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

.platform-perf-revenue {
    font-weight: 600;
    color: var(--success);
    margin-left: var(--space-2);
}

/* Inventory Hero */
.inventory-hero {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.inventory-hero-main {
    margin-bottom: var(--space-6);
}

.inventory-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
}

.inventory-hero-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.inventory-hero-subtitle {
    color: var(--gray-500);
    margin: var(--space-1) 0 0 0;
}

.inventory-hero-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.inventory-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
}

.inventory-stat-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    transition: transform 0.2s;
}

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

.inventory-stat-card.warning {
    background: var(--warning-light);
}

.inventory-stat-card.danger {
    background: var(--error-light, #fee2e2);
}

.inventory-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-stat-icon.primary { background: var(--primary-100); color: var(--primary-600); }
.inventory-stat-icon.success { background: var(--success-light); color: var(--success); }
.inventory-stat-icon.info { background: var(--info-light); color: var(--info); }
.inventory-stat-icon.warning { background: var(--warning-light); color: var(--warning); }
.inventory-stat-icon.danger { background: var(--error-light, #fee2e2); color: var(--error, #ef4444); }
.inventory-stat-icon.muted { background: var(--gray-100); color: var(--gray-500); }

.inventory-stat-info {
    display: flex;
    flex-direction: column;
}

.inventory-stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--gray-900);
}

.inventory-stat-label {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

.inventory-hero-categories {
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-200);
}

.inventory-hero-categories h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 var(--space-4) 0;
}

.category-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.category-item {
    position: relative;
}

.category-bar {
    height: 8px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-2);
}

.category-info {
    display: flex;
    justify-content: space-between;
}

.category-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-900);
}

.category-stats {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

/* Listings Hero */
.listings-hero {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.listings-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
}

.listings-hero-title-group h1, .listings-hero-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.listings-hero-subtitle {
    color: var(--gray-500);
    margin: var(--space-1) 0 0 0;
}

.listings-hero-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.listings-health-bar {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-xl);
}

.listings-health-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.health-score-ring {
    position: relative;
    width: 80px;
    height: 80px;
}

.health-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.health-ring-bg {
    fill: none;
    stroke: var(--gray-200);
    stroke-width: 3;
}

.health-ring-fill {
    fill: none;
    stroke: var(--success);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s;
}

.health-score-ring.warning .health-ring-fill { stroke: var(--warning); }
.health-score-ring.poor .health-ring-fill { stroke: var(--error); }

.health-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--gray-900);
}

.health-score-label {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    font-weight: 500;
}

.listings-health-stats {
    display: flex;
    gap: var(--space-6);
    flex: 1;
}

.health-stat {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.health-stat.warning {
    padding: var(--space-2) var(--space-3);
    background: var(--warning-light);
    border-radius: var(--radius-lg);
}

.health-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.health-stat-icon.active { background: var(--success-light); color: var(--success); }
.health-stat-icon.draft { background: var(--gray-200); color: var(--gray-600); }
.health-stat-icon.stale { background: var(--warning-light); color: var(--warning); }
.health-stat-icon.fresh { background: var(--success-light); color: var(--success); }
.health-stat-icon.age { background: var(--info-light); color: var(--info); }

.health-stat-info {
    display: flex;
    flex-direction: column;
}

.health-stat-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--gray-900);
}

.health-stat-label {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

.listings-platform-mini {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
}

.platform-mini-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: white;
    border-radius: var(--radius-md);
    cursor: help;
}

.platform-mini-icon {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: white;
}

.platform-mini-count {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-700);
}

/* Orders Hero */
.orders-hero {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.orders-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
}

.orders-hero-title-group h1, .orders-hero-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.orders-hero-subtitle {
    color: var(--gray-500);
    margin: var(--space-1) 0 0 0;
}

.orders-hero-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* Orders Pipeline */
.orders-pipeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    margin-bottom: var(--space-4);
}

.pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    background: var(--gray-50);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 100px;
    position: relative;
}

.pipeline-stage:hover {
    background: var(--gray-100);
    transform: translateY(-2px);
}

.pipeline-stage.active {
    background: var(--primary-50);
}

.pipeline-stage-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pipeline-stage-icon.pending { background: var(--warning-light); color: var(--warning); }
.pipeline-stage-icon.confirmed { background: var(--info-light); color: var(--info); }
.pipeline-stage-icon.shipped { background: var(--primary-100); color: var(--primary-600); }
.pipeline-stage-icon.delivered { background: var(--success-light); color: var(--success); }

.pipeline-stage-count {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--gray-900);
}

.pipeline-stage-label {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    font-weight: 500;
}

.pipeline-stage-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gray-200);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    overflow: hidden;
}

.pipeline-stage-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--fill, 0%);
    background: var(--primary-500);
    transition: width 0.3s;
}

.pipeline-connector {
    width: 30px;
    height: 2px;
    background: var(--gray-200);
    position: relative;
}

.pipeline-connector::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--gray-300);
}

/* Urgent Orders Alert */
.orders-urgent-alert {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--warning-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    border: 1px solid var(--warning);
}

.urgent-alert-icon {
    width: 40px;
    height: 40px;
    background: var(--warning);
    color: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.urgent-alert-content {
    flex: 1;
}

.urgent-alert-content strong {
    display: block;
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}

.urgent-alert-content span {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* Orders Quick Stats */
.orders-quick-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-200);
}

.orders-quick-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.orders-quick-stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--gray-900);
}

.orders-quick-stat-label {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* Order Notes */
.btn.has-notes {
    position: relative;
    color: var(--primary-600);
}

.notes-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--primary-500);
    color: white;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-notes-context {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 16px;
}

.notes-order-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-notes-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.order-note {
    position: relative;
    padding: 12px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}

.order-note:hover {
    background: var(--gray-100);
}

.order-note:hover .order-note-delete {
    opacity: 1;
}

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

.order-note-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-500);
    color: white;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.author-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--gray-900);
}

.order-note-time {
    font-size: 11px;
    color: var(--gray-500);
}

.order-note-content {
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.5;
    white-space: pre-wrap;
}

.order-note-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.order-notes-empty {
    text-align: center;
    padding: 32px;
    color: var(--gray-400);
}

.order-notes-empty p {
    font-weight: 600;
    margin: 12px 0 4px;
    color: var(--gray-500);
}

.order-notes-empty span {
    font-size: 13px;
}

.order-notes-input {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.order-notes-input textarea {
    flex: 1;
    resize: none;
}

/* Order Notes - Dark Mode */
body.dark-mode .order-notes-context {
    background: var(--gray-800);
}

body.dark-mode .order-note {
    background: var(--gray-800);
}

body.dark-mode .order-note:hover {
    background: var(--gray-750);
}

body.dark-mode .author-name {
    color: var(--gray-100);
}

body.dark-mode .order-note-content {
    color: var(--gray-300);
}

/* Follow-up Reminder System */
.has-reminder {
    color: var(--warning-500) !important;
}

.reminder-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: var(--warning-500);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

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

.followup-buyer-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
}

.followup-buyer-info .buyer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-500);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.followup-buyer-info .buyer-name {
    font-weight: 600;
    color: var(--gray-800);
}

.followup-buyer-info .buyer-order {
    font-size: 13px;
    color: var(--gray-500);
}

.followup-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
}

.followup-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    color: var(--gray-600);
}

.followup-type-btn:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
}

.followup-type-btn.selected {
    border-color: var(--primary-500);
    background: var(--primary-100);
    color: var(--primary-700);
}

.followup-date-presets {
    display: flex;
    gap: 8px;
}

.preset-date-btn {
    padding: 6px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: white;
    font-size: 12px;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.preset-date-btn:hover {
    border-color: var(--primary-400);
    color: var(--primary-600);
}

.preset-date-btn.active {
    border-color: var(--primary-500);
    background: var(--primary-50);
    color: var(--primary-600);
}

.existing-reminder-notice {
    margin-top: 12px;
    padding: 12px;
    background: var(--warning-50);
    border-radius: var(--radius-md);
    text-align: center;
}

/* Follow-up Reminder - Dark Mode */
body.dark-mode .followup-buyer-info {
    background: #1f2937;
}

body.dark-mode .followup-buyer-info .buyer-name {
    color: #e5e7eb;
}

body.dark-mode .followup-type-btn {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}

body.dark-mode .followup-type-btn:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

body.dark-mode .followup-type-btn.selected {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

body.dark-mode .preset-date-btn {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}

body.dark-mode .preset-date-btn:hover,
body.dark-mode .preset-date-btn.active {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    color: #a5b4fc;
}

body.dark-mode .existing-reminder-notice {
    background: rgba(251, 191, 36, 0.1);
}

/* Expense Tracker */
.expense-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.expense-summary-card {
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    text-align: center;
}

.expense-summary-card.total {
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
}

.expense-summary-card.monthly {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.expense-summary-card.count {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}

.expense-summary-label {
    font-size: 12px;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.expense-summary-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-800);
}

.expense-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 12px;
}

.expense-category-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.expense-category-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.expense-category-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
}

.expense-category-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.expense-category-name {
    font-size: 13px;
    color: var(--gray-700);
}

.expense-category-bar-wrapper {
    flex: 1;
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.expense-category-bar {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.expense-category-amount {
    min-width: 70px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
}

.expense-add-section {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
}

.expense-add-form .form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.expense-add-form .form-row:last-child {
    margin-bottom: 0;
}

.expense-list-section {
    margin-top: 16px;
}

.expense-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
}

.expense-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.expense-list-item:hover {
    background: var(--gray-100);
}

.expense-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.expense-item-info {
    flex: 1;
}

.expense-item-desc {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
}

.expense-item-date {
    font-size: 12px;
    color: var(--gray-500);
}

.expense-item-amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--error-600);
}

/* Expense Tracker - Dark Mode */
body.dark-mode .expense-summary-card {
    background: #1f2937;
}

body.dark-mode .expense-summary-card.total {
    background: linear-gradient(135deg, #451a03, #422006);
}

body.dark-mode .expense-summary-card.monthly {
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
}

body.dark-mode .expense-summary-card.count {
    background: linear-gradient(135deg, #064e3b, #065f46);
}

body.dark-mode .expense-summary-value {
    color: #e5e7eb;
}

body.dark-mode .expense-section-title {
    color: #e5e7eb;
}

body.dark-mode .expense-category-name,
body.dark-mode .expense-category-amount {
    color: #e5e7eb;
}

body.dark-mode .expense-category-bar-wrapper {
    background: #374151;
}

body.dark-mode .expense-add-section {
    background: #1f2937;
}

body.dark-mode .expense-list-item {
    background: #1f2937;
}

body.dark-mode .expense-list-item:hover {
    background: #374151;
}

body.dark-mode .expense-item-desc {
    color: #e5e7eb;
}

body.dark-mode .expense-item-amount {
    color: #f87171;
}

/* Daily Business Summary */
.daily-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    color: white;
}

.summary-greeting h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.summary-greeting p {
    margin: 4px 0 0;
    opacity: 0.9;
    font-size: 14px;
}

.summary-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 12px 16px;
    border-radius: var(--radius-md);
}

.summary-date-badge .date-day {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.summary-date-badge .date-month {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.daily-summary-revenue {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.revenue-main {
    flex: 2;
}

.revenue-label,
.profit-label {
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.revenue-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--gray-800);
}

.revenue-change {
    font-size: 13px;
    margin-top: 4px;
}

.revenue-change.positive {
    color: var(--success-600);
}

.revenue-change.negative {
    color: var(--error-600);
}

.revenue-profit {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;
    border-left: 1px solid var(--gray-200);
}

.profit-value {
    font-size: 24px;
    font-weight: 700;
}

.profit-value.positive {
    color: var(--success-600);
}

.profit-value.negative {
    color: var(--error-600);
}

.daily-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.summary-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}

.summary-stat-card .stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.summary-stat-card .stat-icon.sales {
    background: var(--success-100);
    color: var(--success-600);
}

.summary-stat-card .stat-icon.orders {
    background: var(--warning-100);
    color: var(--warning-600);
}

.summary-stat-card .stat-icon.listings {
    background: var(--primary-100);
    color: var(--primary-600);
}

.summary-stat-card .stat-icon.offers {
    background: var(--info-100);
    color: var(--info-600);
}

.summary-stat-card .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-800);
}

.summary-stat-card .stat-label {
    font-size: 12px;
    color: var(--gray-500);
}

.summary-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 12px;
}

.action-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
}

.action-item.urgent {
    background: var(--error-50);
    border: 1px solid var(--error-200);
}

.action-item.warning {
    background: var(--warning-50);
    border: 1px solid var(--warning-200);
}

.action-item.normal {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.action-item.success {
    background: var(--success-50);
    border: 1px solid var(--success-200);
}

.action-item .action-icon {
    color: var(--gray-500);
}

.action-item.urgent .action-icon {
    color: var(--error-500);
}

.action-item.warning .action-icon {
    color: var(--warning-500);
}

.action-item.success .action-icon {
    color: var(--success-500);
}

.action-item .action-text {
    flex: 1;
    font-size: 14px;
    color: var(--gray-700);
}

.daily-summary-highlight {
    margin-bottom: 20px;
}

.top-sale-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
    border-radius: var(--radius-md);
}

.top-sale-title {
    font-weight: 600;
    color: var(--gray-800);
}

.top-sale-platform {
    font-size: 12px;
    color: var(--gray-500);
    text-transform: capitalize;
}

.top-sale-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--success-600);
}

.daily-summary-quick-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--gray-100);
    border: none;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.quick-action-btn:hover {
    background: var(--gray-200);
}

/* Daily Summary - Dark Mode */
body.dark-mode .daily-summary-header {
    background: linear-gradient(135deg, #312e81, #4c1d95);
}

body.dark-mode .daily-summary-revenue {
    background: #1f2937;
}

body.dark-mode .revenue-value {
    color: #e5e7eb;
}

body.dark-mode .revenue-profit {
    border-color: #374151;
}

body.dark-mode .summary-stat-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .summary-stat-card .stat-value {
    color: #e5e7eb;
}

body.dark-mode .action-item.urgent {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

body.dark-mode .action-item.warning {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
}

body.dark-mode .action-item.normal {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .action-item.success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

body.dark-mode .action-item .action-text {
    color: #e5e7eb;
}

body.dark-mode .top-sale-card {
    background: linear-gradient(135deg, #451a03, #422006);
}

body.dark-mode .top-sale-title {
    color: #fef3c7;
}

body.dark-mode .quick-action-btn {
    background: #374151;
    color: #e5e7eb;
}

body.dark-mode .quick-action-btn:hover {
    background: #4b5563;
}

/* Offers Hero */
.offers-hero {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.offers-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.offers-hero-title-group h1, .offers-hero-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.offers-hero-subtitle {
    color: var(--gray-500);
    margin: var(--space-1) 0 0 0;
}

.offers-hero-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.offers-hero-badge.pending {
    background: var(--warning-light);
    color: var(--warning);
}

.badge-pulse {
    width: 8px;
    height: 8px;
    background: var(--warning);
    border-radius: 50%;
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

.offers-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.offers-insight-card {
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.offers-insight-card.primary { background: var(--primary-50); }
.offers-insight-card.success { background: var(--success-light); }
.offers-insight-card.info { background: var(--info-light); }
.offers-insight-card.warning { background: var(--warning-light); }

.insight-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

.offers-insight-card.primary .insight-icon { color: var(--primary-600); }
.offers-insight-card.success .insight-icon { color: var(--success); }
.offers-insight-card.info .insight-icon { color: var(--info); }
.offers-insight-card.warning .insight-icon { color: var(--warning); }

.insight-content {
    display: flex;
    flex-direction: column;
}

.insight-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
}

.insight-label {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.insight-trend {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    margin-top: auto;
}

/* Offers Tip */
.offers-tip {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--info-light);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.tip-icon {
    width: 36px;
    height: 36px;
    background: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--info);
    flex-shrink: 0;
}

.tip-content {
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    line-height: 1.5;
}

.tip-content strong {
    color: var(--gray-900);
}

/* Offer Expiration Countdown */
.offer-expiry-countdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.offer-expiry-countdown .expiry-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.offer-expiry-countdown .expiry-time {
    font-variant-numeric: tabular-nums;
}

.offer-expiry-countdown.normal {
    background: var(--gray-100);
    color: var(--gray-600);
}

.offer-expiry-countdown.warning {
    background: var(--warning-light);
    color: var(--warning-700);
}

.offer-expiry-countdown.urgent {
    background: rgba(245, 158, 11, 0.2);
    color: #b45309;
}

.offer-expiry-countdown.critical {
    background: var(--error-light);
    color: var(--error);
    animation: expiry-pulse 1s ease-in-out infinite;
}

.offer-expiry-countdown.expired {
    background: var(--gray-200);
    color: var(--gray-500);
    text-decoration: line-through;
}

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

/* Saved Offer Responses */
.saved-responses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.saved-response-btn {
    padding: 12px 16px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.saved-response-btn:hover {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.saved-response-btn.selected {
    border-color: var(--primary-500);
    background: var(--primary-100);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.response-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
}

.saved-response-btn.selected .response-label {
    color: var(--primary-700);
}

.divider-with-text {
    display: flex;
    align-items: center;
    margin: 16px 0;
    gap: 12px;
}

.divider-with-text::before,
.divider-with-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

.divider-with-text span {
    font-size: 12px;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Saved Responses - Dark Mode */
body.dark-mode .saved-response-btn {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

body.dark-mode .saved-response-btn:hover {
    border-color: var(--primary-400);
    background: rgba(99, 102, 241, 0.1);
}

body.dark-mode .saved-response-btn.selected {
    border-color: var(--primary-500);
    background: rgba(99, 102, 241, 0.2);
}

body.dark-mode .response-label {
    color: var(--gray-300);
}

body.dark-mode .saved-response-btn.selected .response-label {
    color: var(--primary-300);
}

body.dark-mode .divider-with-text::before,
body.dark-mode .divider-with-text::after {
    background: var(--gray-600);
}

body.dark-mode .divider-with-text span {
    color: var(--gray-400);
}

/* Price Drop Scheduler */
.price-drop-listing-info {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 20px;
}

.listing-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}

.listing-preview img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.price-drop-presets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.preset-btn:hover {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.preset-btn.selected {
    border-color: var(--primary-500);
    background: var(--primary-100);
}

.preset-percent {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-600);
}

.preset-price {
    font-size: 12px;
    color: var(--gray-500);
}

.new-price-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--success-light);
    border-radius: var(--radius-md);
    justify-content: center;
}

.new-price-preview .old-price {
    font-size: 18px;
    color: var(--gray-400);
    text-decoration: line-through;
}

.new-price-preview .arrow {
    color: var(--gray-400);
}

.new-price-preview .new-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--success);
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix,
.input-suffix {
    position: absolute;
    padding: 0 12px;
    color: var(--gray-500);
    font-weight: 500;
    pointer-events: none;
}

.input-prefix {
    left: 0;
}

.input-suffix {
    right: 0;
}

.input-group .form-input {
    padding-left: 28px;
}

.input-group .form-input:has(+ .input-suffix) {
    padding-right: 32px;
}

/* Price Drop - Dark Mode */
body.dark-mode .price-drop-listing-info {
    background: var(--gray-800);
}

body.dark-mode .preset-btn {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

body.dark-mode .preset-btn:hover {
    border-color: var(--primary-400);
    background: rgba(99, 102, 241, 0.1);
}

body.dark-mode .preset-btn.selected {
    border-color: var(--primary-500);
    background: rgba(99, 102, 241, 0.2);
}

body.dark-mode .preset-percent {
    color: var(--primary-400);
}

body.dark-mode .preset-price {
    color: var(--gray-400);
}

body.dark-mode .new-price-preview {
    background: rgba(16, 185, 129, 0.1);
}

body.dark-mode .new-price-preview .new-price {
    color: #34d399;
}

body.dark-mode .input-prefix,
body.dark-mode .input-suffix {
    color: var(--gray-400);
}

/* ============================================
   Profit Margin Calculator
   ============================================ */

.profit-calc-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.profit-calc-inputs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profit-calc-results {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.profit-result-header h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-700);
}

.profit-result-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.profit-result-card {
    background: white;
    padding: 14px;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--gray-200);
}

.profit-result-card.primary {
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border-color: var(--primary-200);
}

.profit-result-label {
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.profit-result-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-800);
}

.profit-result-value.positive {
    color: var(--success-600);
}

.profit-result-value.negative {
    color: var(--error-600);
}

.profit-breakdown {
    border-top: 1px solid var(--gray-200);
    padding-top: 16px;
    margin-bottom: 16px;
}

.profit-breakdown h5 {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-600);
}

.profit-breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}

.profit-breakdown-row.negative span:first-child {
    color: var(--gray-500);
}

.profit-breakdown-row.negative span:last-child {
    color: var(--error-500);
}

.profit-breakdown-row.total {
    border-top: 1px solid var(--gray-300);
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 600;
}

.profit-breakdown-row.total .positive {
    color: var(--success-600);
}

.profit-breakdown-row.total .negative {
    color: var(--error-600);
}

.profit-indicator {
    height: 8px;
    background: linear-gradient(90deg, var(--error-200), var(--gray-200) 50%, var(--success-200));
    border-radius: var(--radius-full);
    position: relative;
    overflow: hidden;
}

.profit-indicator-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--gray-600);
    border-radius: var(--radius-full);
    transition: width 0.3s ease, background 0.3s ease;
}

.profit-indicator.profit .profit-indicator-bar {
    background: var(--success-500);
}

.profit-indicator.loss .profit-indicator-bar {
    background: var(--error-500);
}

.profit-indicator-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 10px;
    color: var(--gray-400);
}

/* Profit Calculator - Dark Mode */
body.dark-mode .profit-calc-results {
    background: #1f2937;
}

body.dark-mode .profit-result-header h4 {
    color: #e5e7eb;
}

body.dark-mode .profit-result-card {
    background: #111827;
    border-color: #374151;
}

body.dark-mode .profit-result-card.primary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.2));
    border-color: #4f46e5;
}

body.dark-mode .profit-result-value {
    color: #e5e7eb;
}

body.dark-mode .profit-result-value.positive {
    color: #34d399;
}

body.dark-mode .profit-result-value.negative {
    color: #f87171;
}

body.dark-mode .profit-breakdown {
    border-color: #374151;
}

body.dark-mode .profit-breakdown h5 {
    color: #9ca3af;
}

body.dark-mode .profit-breakdown-row.total {
    border-color: #4b5563;
}

body.dark-mode .profit-indicator {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.3), #374151 50%, rgba(16, 185, 129, 0.3));
}

/* ============================================
   Main Section - Dark Mode
   ============================================ */

body.dark-mode .dashboard-hero {
    background: linear-gradient(135deg, var(--primary-700) 0%, #1e1b4b 100%);
}

body.dark-mode .platform-performance-bar {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .platform-performance-title {
    color: #e5e7eb;
}

body.dark-mode .platform-perf-name {
    color: #e5e7eb;
}

body.dark-mode .inventory-hero,
body.dark-mode .listings-hero,
body.dark-mode .orders-hero,
body.dark-mode .offers-hero {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .inventory-hero-title,
body.dark-mode .listings-hero-title,
body.dark-mode .orders-hero-title,
body.dark-mode .offers-hero-title {
    color: #e5e7eb;
}

body.dark-mode .inventory-stat-card {
    background: #111827;
}

body.dark-mode .inventory-stat-value,
body.dark-mode .health-stat-value,
body.dark-mode .pipeline-stage-count,
body.dark-mode .insight-value {
    color: #e5e7eb;
}

body.dark-mode .inventory-hero-categories {
    border-top-color: #374151;
}

body.dark-mode .listings-health-bar {
    background: #111827;
}

body.dark-mode .health-ring-bg {
    stroke: #374151;
}

body.dark-mode .health-score-value {
    color: #e5e7eb;
}

body.dark-mode .platform-mini-badge {
    background: #374151;
}

body.dark-mode .platform-mini-count {
    color: #e5e7eb;
}

body.dark-mode .pipeline-stage {
    background: #111827;
}

body.dark-mode .pipeline-stage:hover {
    background: #374151;
}

body.dark-mode .pipeline-stage.active {
    background: rgba(79, 70, 229, 0.2);
}

body.dark-mode .pipeline-stage-bar {
    background: #374151;
}

body.dark-mode .pipeline-connector {
    background: #374151;
}

body.dark-mode .orders-urgent-alert {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

body.dark-mode .orders-quick-stats {
    border-top-color: #374151;
}

body.dark-mode .orders-quick-stat-value {
    color: #e5e7eb;
}

body.dark-mode .offers-insight-card.primary { background: rgba(79, 70, 229, 0.1); }
body.dark-mode .offers-insight-card.success { background: rgba(16, 185, 129, 0.1); }
body.dark-mode .offers-insight-card.info { background: rgba(59, 130, 246, 0.1); }
body.dark-mode .offers-insight-card.warning { background: rgba(245, 158, 11, 0.1); }

body.dark-mode .insight-icon {
    background: #374151;
}

body.dark-mode .offers-tip {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

body.dark-mode .tip-icon {
    background: #374151;
}

body.dark-mode .tip-content {
    color: #d1d5db;
}

body.dark-mode .tip-content strong {
    color: #e5e7eb;
}

/* Offer Expiration Countdown - Dark Mode */
body.dark-mode .offer-expiry-countdown.normal {
    background: #374151;
    color: #9ca3af;
}

body.dark-mode .offer-expiry-countdown.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

body.dark-mode .offer-expiry-countdown.urgent {
    background: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

body.dark-mode .offer-expiry-countdown.critical {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

body.dark-mode .offer-expiry-countdown.expired {
    background: #374151;
    color: #6b7280;
}

/* Responsive */
@media (max-width: 1024px) {
    .settings-container {
        grid-template-columns: 1fr;
    }

    .settings-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        position: static;
    }

    .changelog-layout {
        grid-template-columns: 1fr;
    }

    .changelog-timeline {
        display: none;
    }

    .help-stats-row,
    .roadmap-progress-cards {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

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

    /* Company Section - Tablet */
    .about-stats-section {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .mission-content {
        grid-template-columns: 1fr;
    }

    .mission-values {
        margin-top: var(--space-4);
    }

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

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

    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-toc {
        position: static;
        margin-bottom: var(--space-4);
    }

    .toc-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

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

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

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

    /* Main Section - Tablet */
    .dashboard-hero-content {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }

    .dashboard-hero-today {
        justify-content: center;
    }

    .inventory-hero-stats {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .listings-health-bar {
        flex-wrap: wrap;
    }

    .listings-health-stats {
        flex-wrap: wrap;
        justify-content: center;
    }

    .listings-platform-mini {
        margin-left: 0;
        margin-top: var(--space-4);
        width: 100%;
        justify-content: center;
    }

    .orders-pipeline {
        flex-wrap: wrap;
    }

    .pipeline-connector {
        display: none;
    }

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

@media (max-width: 768px) {
    .help-stats-row,
    .roadmap-progress-cards {
        grid-template-columns: 1fr;
    }

    .help-options-grid,
    .integrations-grid,
    .tools-grid,
    .feedback-actions-grid {
        grid-template-columns: 1fr;
    }

    .contact-methods-grid {
        grid-template-columns: 1fr;
    }

    .popular-articles-grid {
        grid-template-columns: 1fr;
    }

    .feedback-impact-dashboard {
        flex-direction: column;
    }

    .impact-arrow {
        transform: rotate(90deg);
    }

    .changelog-filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .changelog-search {
        min-width: auto;
    }

    .changelog-type-filters {
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .changelog-subscribe-cta {
        flex-direction: column;
        text-align: center;
    }

    .subscribe-form {
        flex-direction: column;
        width: 100%;
    }

    .subscribe-form input {
        min-width: auto;
    }

    /* Company Section - Mobile */
    .about-hero {
        padding: var(--space-8) var(--space-4);
    }

    .about-hero-title {
        font-size: var(--font-size-2xl);
    }

    .about-hero-tagline {
        font-size: var(--font-size-base);
    }

    .hero-badge {
        font-size: var(--font-size-xs);
        padding: var(--space-1) var(--space-3);
    }

    .about-stats-section {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .about-stat-card {
        padding: var(--space-4);
    }

    .stat-value {
        font-size: var(--font-size-2xl);
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .about-feature-card {
        padding: var(--space-4);
    }

    .mission-values {
        grid-template-columns: 1fr;
    }

    .timeline-container {
        padding-left: var(--space-8);
    }

    .timeline-line {
        left: 8px;
    }

    .timeline-item,
    .timeline-item.left,
    .timeline-item.right {
        width: 100%;
        left: 0;
        padding: var(--space-2) 0 var(--space-2) var(--space-6);
        text-align: left;
    }

    .timeline-item .timeline-dot,
    .timeline-item.left .timeline-dot,
    .timeline-item.right .timeline-dot {
        left: 0;
        right: auto;
    }

    .tech-stack-grid {
        grid-template-columns: 1fr;
    }

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

    .about-cta-section {
        padding: var(--space-8) var(--space-4);
    }

    .cta-content h2 {
        font-size: var(--font-size-xl);
    }

    .cta-buttons {
        flex-direction: column;
    }

    .contact-options {
        flex-direction: column;
    }

    .contact-option {
        justify-content: center;
    }

    .legal-header {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }

    .legal-header-content {
        flex-direction: column;
    }

    .legal-actions {
        width: 100%;
        justify-content: center;
    }

    .key-points-grid {
        grid-template-columns: 1fr;
    }

    .privacy-badges {
        flex-direction: column;
        align-items: center;
    }

    .data-categories-grid {
        grid-template-columns: 1fr;
    }

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

    .legal-contact-card {
        flex-direction: column;
        text-align: center;
    }

    /* Main Section - Mobile */
    .dashboard-hero {
        padding: var(--space-4);
    }

    .dashboard-hero-greeting h1 {
        font-size: var(--font-size-xl);
    }

    .dashboard-hero-today {
        flex-direction: column;
        gap: var(--space-3);
    }

    .today-stat {
        width: 100%;
        justify-content: center;
    }

    .platform-performance-items {
        flex-direction: column;
        gap: var(--space-4);
    }

    .inventory-hero {
        padding: var(--space-4);
    }

    .inventory-hero-header {
        flex-direction: column;
        gap: var(--space-4);
    }

    .inventory-hero-actions {
        width: 100%;
        flex-wrap: wrap;
    }

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

    .listings-hero {
        padding: var(--space-4);
    }

    .listings-hero-header {
        flex-direction: column;
        gap: var(--space-4);
    }

    .listings-hero-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .listings-health-bar {
        flex-direction: column;
        gap: var(--space-4);
    }

    .listings-health-stats {
        gap: var(--space-4);
    }

    .orders-hero {
        padding: var(--space-4);
    }

    .orders-hero-header {
        flex-direction: column;
        gap: var(--space-4);
    }

    .orders-hero-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .pipeline-stage {
        min-width: 80px;
        padding: var(--space-3);
    }

    .pipeline-stage-icon {
        width: 36px;
        height: 36px;
    }

    .orders-quick-stats {
        flex-direction: column;
        gap: var(--space-4);
    }

    .offers-hero {
        padding: var(--space-4);
    }

    .offers-insights-grid {
        grid-template-columns: 1fr;
    }

    .offers-tip {
        flex-direction: column;
        text-align: center;
    }
}

/* =====================================================
   TOOLS SECTION - Hero Styles
   ===================================================== */

/* Automations Hero */
.automations-hero {
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 50%, var(--success-50) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--primary-200);
}

.automations-hero-main {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
}

.automations-status-indicator {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.automations-status-indicator.active .status-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--success-500);
    opacity: 0.2;
    animation: pulse-ring 2s ease-out infinite;
}

.automations-status-indicator.active .status-ring {
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    border: 3px solid var(--success-500);
    animation: pulse-glow 2s ease-in-out infinite;
}

.automations-status-indicator.active .status-icon {
    color: var(--success-600);
    z-index: 1;
}

.automations-status-indicator.paused .status-pulse {
    display: none;
}

.automations-status-indicator.paused .status-ring {
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    border: 3px dashed var(--gray-400);
}

.automations-status-indicator.paused .status-icon {
    color: var(--gray-500);
    z-index: 1;
}

@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 0.3; }
    50% { transform: scale(1); opacity: 0.1; }
    100% { transform: scale(0.8); opacity: 0.3; }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px var(--success-500); }
    50% { box-shadow: 0 0 25px var(--success-400); }
}

.automations-status-info {
    flex: 1;
}

.automations-status-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 var(--space-1) 0;
}

.automations-status-subtitle {
    color: var(--gray-600);
    margin: 0 0 var(--space-3) 0;
}

.automations-toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.automations-toggle-switch input {
    display: none;
}

/* Scoped to automations toggle only */
.automations-toggle-switch .toggle-slider {
    width: 48px;
    height: 26px;
    background: var(--error-400);
    border-radius: 13px;
    position: relative;
    transition: background 0.3s;
}

/* Toggle label color when off */
.automations-toggle-switch .toggle-label {
    color: var(--error-600);
    transition: color 0.3s;
}

.automations-toggle-switch input:checked ~ .toggle-label {
    color: var(--success-600);
}

/* Scoped to automations toggle only */
.automations-toggle-switch .toggle-slider::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.automations-toggle-switch input:checked + .toggle-slider {
    background: var(--success-500);
}

.automations-toggle-switch input:checked + .toggle-slider::after {
    transform: translateX(22px);
}

.toggle-label {
    font-weight: 500;
    color: var(--gray-700);
}

/* Settings Toggle - Clean toggle switch for settings page */
.settings-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.settings-toggle input {
    display: none;
}

.settings-toggle .toggle-slider {
    width: 44px;
    height: 24px;
    background: var(--gray-300);
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
}

.settings-toggle .toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Remove any ::after pseudo-element for settings toggle */
.settings-toggle .toggle-slider::after {
    display: none;
}

.settings-toggle input:checked + .toggle-slider {
    background: var(--primary-500);
}

.settings-toggle input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.settings-toggle .toggle-label {
    font-size: 14px;
    color: var(--gray-700);
}

.automations-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.automation-stat-box {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.automation-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.automation-stat-icon.success {
    background: var(--success-100);
    color: var(--success-600);
}

.automation-stat-icon.primary {
    background: var(--primary-100);
    color: var(--primary-600);
}

.automation-stat-icon.info {
    background: var(--info-100);
    color: var(--info-600);
}

.automation-stat-icon.warning {
    background: var(--warning-100);
    color: var(--warning-600);
}

.automation-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

.automation-stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Automation Categories */
.automations-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
}

.automation-category-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--gray-200);
    transition: all 0.2s;
}

.automation-category-card:hover {
    border-color: var(--category-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.category-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-800);
}

.category-progress {
    height: 4px;
    background: var(--gray-100);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.category-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.category-stats {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Performance Metrics Dashboard */
.performance-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.performance-metric-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.performance-metric-card .metric-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.performance-metric-card .metric-icon.time-saved {
    background: var(--primary-100);
    color: var(--primary-600);
}

.performance-metric-card .metric-icon.actions {
    background: var(--warning-100);
    color: var(--warning-600);
}

.performance-metric-card .metric-icon.efficiency {
    background: var(--success-100);
    color: var(--success-600);
}

.performance-metric-card .metric-icon.roi {
    background: var(--error-100);
    color: var(--error-600);
}

.performance-metric-card .metric-content {
    flex: 1;
}

.performance-metric-card .metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

.performance-metric-card .metric-label {
    font-size: 13px;
    color: var(--gray-600);
    margin-top: 4px;
}

.performance-metric-card .metric-comparison {
    font-size: 12px;
    margin-top: 6px;
    font-weight: 500;
}

.performance-metric-card .metric-comparison.positive {
    color: var(--success-600);
}

.performance-metric-card .metric-comparison.negative {
    color: var(--error-600);
}

.performance-metric-card .metric-comparison.neutral {
    color: var(--gray-500);
}

/* Performance Breakdown */
.performance-breakdown {
    padding: 16px;
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.breakdown-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.breakdown-row {
    display: grid;
    grid-template-columns: 100px 1fr 60px;
    align-items: center;
    gap: 12px;
}

.breakdown-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
}

.breakdown-bar-container {
    height: 8px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.breakdown-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.breakdown-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
    text-align: right;
}

/* Dark mode performance metrics */
body.dark-mode .performance-metric-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .performance-metric-card .metric-value {
    color: var(--gray-100);
}

body.dark-mode .performance-metric-card .metric-label {
    color: var(--gray-400);
}

body.dark-mode .performance-breakdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .breakdown-label {
    color: var(--gray-300);
}

body.dark-mode .breakdown-bar-container {
    background: var(--gray-700);
}

body.dark-mode .breakdown-value {
    color: var(--gray-200);
}

/* Responsive performance metrics */
@media (max-width: 1024px) {
    .performance-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .performance-metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* Quick Add Task */
.quick-add-task .quick-add-input-container {
    transition: all 0.2s ease;
}

.quick-add-task .quick-add-input-container:focus-within {
    border-color: var(--primary-400);
    border-style: solid;
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dark-mode .quick-add-task .quick-add-input-container {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

.dark-mode .quick-add-task .quick-add-input-container:focus-within {
    background: var(--gray-700);
    border-color: var(--primary-500);
}

/* Checklist Hero */
.checklist-hero {
    background: linear-gradient(135deg, var(--success-50) 0%, var(--primary-50) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--success-200);
}

.checklist-hero-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.greeting-content {
    flex: 1;
}

.greeting-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 var(--space-2) 0;
}

.greeting-subtitle {
    color: var(--gray-600);
    font-size: 1.125rem;
    margin: 0 0 var(--space-3) 0;
}

.all-done-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--success-100);
    color: var(--success-700);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-weight: 600;
}

.tasks-remaining {
    color: var(--gray-700);
    margin: 0;
}

.greeting-illustration {
    flex-shrink: 0;
}

.progress-circle-large {
    position: relative;
    width: 120px;
    height: 120px;
}

.progress-circle-large svg {
    width: 100%;
    height: 100%;
}

.progress-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.progress-percentage {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.progress-label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.checklist-hero-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.metric-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--gray-200);
    transition: all 0.2s;
}

.metric-card.urgent {
    border-color: var(--error-300);
    background: var(--error-50);
}

.metric-card.warning {
    border-color: var(--warning-300);
    background: var(--warning-50);
}

.metric-card.danger {
    border-color: var(--error-300);
    background: var(--error-50);
}

.metric-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon.urgent {
    background: var(--error-100);
    color: var(--error-600);
}

.metric-icon.warning {
    background: var(--warning-100);
    color: var(--warning-600);
}

.metric-icon.danger {
    background: var(--error-100);
    color: var(--error-600);
}

.metric-icon.success {
    background: var(--success-100);
    color: var(--success-600);
}

.metric-info {
    display: flex;
    flex-direction: column;
}

.metric-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

.metric-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Calendar Hero */
.calendar-hero {
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--info-50) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--primary-200);
}

.calendar-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.calendar-hero-date {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.hero-month-name {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
}

.hero-year {
    font-size: 1.25rem;
    color: var(--gray-500);
    font-weight: 500;
}

.calendar-hero-stats {
    display: flex;
    gap: var(--space-6);
}

.calendar-stat {
    text-align: center;
}

.calendar-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.calendar-stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendar-week-preview {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.week-preview-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-3);
}

.week-preview-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
}

.week-preview-day {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--gray-50);
}

.week-preview-day:hover {
    background: var(--gray-100);
}

.week-preview-day.today {
    background: var(--primary-100);
    border: 2px solid var(--primary-500);
}

.week-preview-day.has-events {
    background: var(--primary-50);
}

.week-day-name {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-bottom: var(--space-1);
}

.week-day-number {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
}

.week-day-indicator {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: var(--space-2);
}

.event-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Size Charts Hero */
.size-charts-hero {
    background: linear-gradient(135deg, var(--info-50) 0%, var(--primary-50) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--info-200);
}

.size-hero-search {
    margin-bottom: var(--space-6);
}

.size-search-box {
    display: flex;
    align-items: center;
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.size-search-box:focus-within {
    border-color: var(--primary-500);
}

body.dark-mode .size-search-box {
    background: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.size-search-icon {
    color: var(--gray-400);
    margin-right: var(--space-3);
}

.size-search-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 1.125rem;
    color: var(--gray-900);
    outline: none;
}

.size-search-input:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: 4px;
}

.size-search-input::placeholder {
    color: var(--gray-400);
}

.size-search-hint {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-top: var(--space-2);
    text-align: center;
}

.size-hero-conversions {
    margin-bottom: var(--space-6);
}

.conversions-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-3);
}

.conversions-list {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.conversion-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--gray-200);
    cursor: pointer;
    transition: all 0.2s;
}

.conversion-chip:hover {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

body.dark-mode .conversion-chip {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .conversion-chip:hover {
    background: rgba(99, 102, 241, 0.15);
}

.from-size {
    font-weight: 600;
    color: var(--gray-900);
}

.conversion-arrow {
    color: var(--gray-400);
}

.to-size {
    color: var(--primary-600);
    font-weight: 500;
}

.size-hero-categories {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.size-category-quick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: white;
    border-radius: var(--radius-lg);
    border: 2px solid var(--gray-200);
    cursor: pointer;
    transition: all 0.2s;
}

.size-category-quick:hover {
    border-color: var(--primary-300);
    transform: translateY(-2px);
}

.size-category-quick.active {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

body.dark-mode .size-category-quick {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .size-category-quick.active {
    background: rgba(99, 102, 241, 0.15);
}

.category-emoji {
    font-size: 1.5rem;
}

.category-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
}

/* Image Bank Hero */
.image-bank-hero {
    background: linear-gradient(135deg, var(--purple-50) 0%, var(--primary-50) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--purple-200);
}

.image-bank-hero-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.quick-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    background: white;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
}

.quick-upload-zone:hover {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

body.dark-mode .quick-upload-zone {
    background: #374151;
    border-color: #6b7280;
}

body.dark-mode .quick-upload-zone:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--primary-500);
}

.upload-zone-icon {
    color: var(--gray-400);
    margin-bottom: var(--space-3);
}

.quick-upload-zone:hover .upload-zone-icon {
    color: var(--primary-500);
}

.upload-zone-text {
    text-align: center;
}

.upload-zone-title {
    display: block;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-1);
}

.upload-zone-subtitle {
    display: block;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.storage-overview {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4);
    background: white;
    border-radius: var(--radius-lg);
}

body.dark-mode .storage-overview {
    background: #374151;
}

.storage-visual {
    margin-bottom: var(--space-4);
}

.storage-bar-container {
    height: 12px;
    background: var(--gray-100);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.storage-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500), var(--purple-500));
    border-radius: 6px;
    transition: width 0.3s ease;
}

.storage-label {
    font-size: 0.875rem;
    color: var(--gray-600);
    text-align: center;
}

.storage-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
    text-align: center;
}

.storage-stat {
    display: flex;
    flex-direction: column;
}

.storage-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

.storage-stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.recent-uploads-strip {
    margin-bottom: var(--space-6);
}

.recent-uploads-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-3);
}

.recent-uploads-preview {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-2);
}

.recent-upload-thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.recent-upload-thumb:hover {
    transform: scale(1.05);
}

.recent-upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-upload-more {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: background 0.2s;
}

.recent-upload-more:hover {
    background: var(--gray-200);
}

.image-bank-quick-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: all 0.2s;
}

.quick-action-btn:hover {
    background: var(--gray-50);
    border-color: var(--primary-300);
    color: var(--primary-600);
}

/* =====================================================
   TOOLS SECTION - Dark Mode Support
   ===================================================== */

.dark-mode .automations-hero {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(34, 197, 94, 0.1) 100%);
    border-color: var(--gray-700);
}

.dark-mode .automations-status-title,
.dark-mode .greeting-title,
.dark-mode .hero-month-name,
.dark-mode .automation-stat-value,
.dark-mode .metric-value,
.dark-mode .calendar-stat-value,
.dark-mode .week-day-number,
.dark-mode .from-size,
.dark-mode .storage-stat-value,
.dark-mode .progress-percentage {
    color: var(--gray-100);
}

.dark-mode .automations-status-subtitle,
.dark-mode .greeting-subtitle,
.dark-mode .toggle-label,
.dark-mode .automation-stat-label,
.dark-mode .metric-label,
.dark-mode .category-name,
.dark-mode .category-stats,
.dark-mode .hero-year,
.dark-mode .calendar-stat-label,
.dark-mode .week-day-name,
.dark-mode .week-preview-label,
.dark-mode .conversions-label,
.dark-mode .size-search-hint,
.dark-mode .category-label,
.dark-mode .storage-label,
.dark-mode .storage-stat-label,
.dark-mode .recent-uploads-label,
.dark-mode .upload-zone-subtitle,
.dark-mode .progress-label {
    color: var(--gray-400);
}

.dark-mode .automation-stat-box,
.dark-mode .metric-card,
.dark-mode .automation-category-card,
.dark-mode .calendar-week-preview,
.dark-mode .week-preview-day,
.dark-mode .size-search-box,
.dark-mode .conversion-chip,
.dark-mode .size-category-quick,
.dark-mode .quick-upload-zone,
.dark-mode .storage-overview,
.dark-mode .quick-action-btn {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .checklist-hero {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-color: var(--gray-700);
}

/* Task Templates - Dark Mode */
.dark-mode .template-category-tabs {
    border-color: var(--gray-700);
}

.dark-mode .template-tab {
    background: var(--gray-700);
    color: var(--gray-300);
}

.dark-mode .template-tab:hover {
    background: var(--gray-600);
}

.dark-mode .template-tab.active {
    background: var(--primary-500);
    color: white;
}

.dark-mode .task-template-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .task-template-card:hover {
    border-color: var(--primary-500);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .task-template-name {
    color: var(--gray-100);
}

.dark-mode .task-template-desc {
    color: var(--gray-400);
}

.dark-mode .task-template-badge {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-300);
}

.dark-mode .template-preview-tasks {
    background: var(--gray-800);
}

.dark-mode .task-preview-num {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-300);
}

.dark-mode .task-preview-text {
    color: var(--gray-300);
}

.dark-mode .calendar-hero {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(14, 165, 233, 0.1) 100%);
    border-color: var(--gray-700);
}

.dark-mode .size-charts-hero {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-color: var(--gray-700);
}

.dark-mode .image-bank-hero {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-color: var(--gray-700);
}

.dark-mode .toggle-slider {
    background: var(--gray-600);
}

.dark-mode .size-search-input {
    color: var(--gray-100);
}

.dark-mode .size-search-input::placeholder {
    color: var(--gray-500);
}

.dark-mode .size-search-icon,
.dark-mode .upload-zone-icon {
    color: var(--gray-500);
}

.dark-mode .upload-zone-title {
    color: var(--gray-300);
}

.dark-mode .quick-upload-zone:hover {
    background: var(--gray-700);
    border-color: var(--primary-400);
}

.dark-mode .week-preview-day.today {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--primary-400);
}

.dark-mode .week-preview-day:hover {
    background: var(--gray-700);
}

.dark-mode .size-category-quick:hover {
    background: var(--gray-700);
    border-color: var(--primary-400);
}

.dark-mode .size-category-quick.active {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--primary-400);
}

.dark-mode .size-category-quick.active .category-label {
    color: var(--primary-300);
}

/* Size Charts - Category label text in dark mode */
.dark-mode .size-category-quick .category-label {
    color: var(--gray-200);
}

.dark-mode .conversion-chip:hover {
    background: var(--gray-700);
    border-color: var(--primary-400);
}

.dark-mode .metric-card.urgent,
.dark-mode .metric-card.danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error-700);
}

.dark-mode .metric-card.warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--warning-700);
}

.dark-mode .all-done-badge {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success-400);
}

.dark-mode .tasks-remaining {
    color: var(--gray-300);
}

.dark-mode .storage-bar-container {
    background: var(--gray-700);
}

.dark-mode .recent-upload-more {
    background: var(--gray-700);
    color: var(--gray-400);
}

.dark-mode .recent-upload-more:hover {
    background: var(--gray-600);
}

.dark-mode .quick-action-btn:hover {
    background: var(--gray-700);
    border-color: var(--primary-400);
    color: var(--primary-400);
}

/* =====================================================
   TOOLS SECTION - Responsive Styles
   ===================================================== */

@media (max-width: 1200px) {
    .automations-categories {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .image-bank-hero-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .automations-hero,
    .checklist-hero,
    .calendar-hero,
    .size-charts-hero,
    .image-bank-hero {
        padding: var(--space-4);
    }

    .automations-hero-main {
        flex-direction: column;
        text-align: center;
    }

    .automations-hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .checklist-hero-greeting {
        flex-direction: column;
        text-align: center;
    }

    .greeting-illustration {
        margin-top: var(--space-4);
    }

    .checklist-hero-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .calendar-hero-header {
        flex-direction: column;
        gap: var(--space-4);
    }

    .calendar-hero-stats {
        justify-content: space-around;
        width: 100%;
    }

    .week-preview-days {
        gap: var(--space-1);
    }

    .week-preview-day {
        padding: var(--space-2);
    }

    .size-hero-categories {
        flex-wrap: wrap;
    }

    .size-category-quick {
        padding: var(--space-3) var(--space-4);
    }

    .conversions-list {
        justify-content: center;
    }

    .image-bank-quick-actions {
        flex-wrap: wrap;
    }

    .quick-action-btn {
        flex: 1;
        min-width: 140px;
        justify-content: center;
    }
}

/* =====================================================
   BUSINESS SECTION - Hero Styles
   ===================================================== */

/* My Shops Hero */
.shops-hero {
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--purple-50) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--primary-200);
}

.shops-hero-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
}

.shops-connection-status {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.connection-ring {
    position: relative;
    width: 100px;
    height: 100px;
}

.connection-ring svg {
    width: 100%;
    height: 100%;
}

.connection-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.count-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1;
}

.count-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.connection-info {
    flex: 1;
}

.connection-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 var(--space-1) 0;
}

.connection-subtitle {
    color: var(--gray-600);
    margin: 0 0 var(--space-3) 0;
}

.connected-platforms-pills {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.platform-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--platform-color) 15%, white);
    color: var(--platform-color);
    border: 1px solid color-mix(in srgb, var(--platform-color) 30%, transparent);
}

.shops-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.shop-hero-stat {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: white;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.shop-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-stat-icon.listings {
    background: var(--primary-100);
    color: var(--primary-600);
}

.shop-stat-icon.sales {
    background: var(--success-100);
    color: var(--success-600);
}

.shop-stat-icon.revenue {
    background: var(--warning-100);
    color: var(--warning-600);
}

.shop-stat-icon.health {
    background: var(--error-100);
    color: var(--error-600);
}

.shop-stat-content {
    display: flex;
    flex-direction: column;
}

.shop-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

.shop-stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.shops-quick-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.shop-quick-action {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: all 0.2s;
}

.shop-quick-action:hover {
    background: var(--gray-50);
    border-color: var(--primary-300);
    color: var(--primary-600);
}

/* Transactions Hero */
.transactions-hero {
    background: linear-gradient(135deg, var(--success-50) 0%, var(--error-50) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--gray-200);
}

.transactions-hero-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.flow-section {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: white;
    border-radius: var(--radius-lg);
    min-width: 180px;
}

.flow-section.income {
    border-left: 4px solid var(--success-500);
}

.flow-section.expenses {
    border-left: 4px solid var(--error-500);
}

.flow-section.balance {
    padding: var(--space-6);
    min-width: 200px;
    justify-content: center;
}

.flow-section.balance.positive {
    border: 2px solid var(--success-500);
    background: var(--success-50);
}

.flow-section.balance.negative {
    border: 2px solid var(--error-500);
    background: var(--error-50);
}

.flow-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-section.income .flow-icon {
    background: var(--success-100);
    color: var(--success-600);
}

.flow-section.expenses .flow-icon {
    background: var(--error-100);
    color: var(--error-600);
}

.flow-content {
    display: flex;
    flex-direction: column;
}

.flow-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.flow-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

.flow-detail {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.flow-connector {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.connector-line {
    width: 24px;
    height: 2px;
    background: var(--gray-300);
}

.connector-arrow {
    color: var(--gray-400);
}

.balance-ring {
    text-align: center;
}

.balance-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.balance-sign {
    font-size: 1.25rem;
    font-weight: 600;
}

.flow-section.balance.positive .balance-sign,
.flow-section.balance.positive .balance-value {
    color: var(--success-600);
}

.flow-section.balance.negative .balance-sign,
.flow-section.balance.negative .balance-value {
    color: var(--error-600);
}

.balance-value {
    font-size: 1.75rem;
    font-weight: 700;
}

.balance-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: var(--space-1);
}

.transactions-hero-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.tx-metric {
    background: white;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
}

.tx-metric-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.tx-metric-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.tx-metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.tx-metric-value.good {
    color: var(--success-600);
}

.tx-metric-value.bad {
    color: var(--error-600);
}

.tx-metric-value.neutral {
    color: var(--warning-600);
}

/* Financials Hero */
.financials-hero {
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--success-50) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--primary-200);
}

.financials-hero-main {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
}

.financial-health-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.health-score-visual {
    position: relative;
    width: 120px;
    height: 120px;
}

.health-score-visual svg {
    width: 100%;
    height: 100%;
}

.health-score-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.health-score-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1;
}

.health-score-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.health-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.health-status-badge.excellent {
    background: var(--success-100);
    color: var(--success-700);
}

.health-status-badge.good {
    background: var(--primary-100);
    color: var(--primary-700);
}

.health-status-badge.fair {
    background: var(--warning-100);
    color: var(--warning-700);
}

.health-status-badge.needs-attention {
    background: var(--error-100);
    color: var(--error-700);
}

.financials-summary {
    flex: 1;
}

.financials-summary-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 var(--space-4) 0;
}

.financials-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.financial-summary-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-lg);
}

.summary-item-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.financial-summary-item.revenue .summary-item-icon {
    background: var(--success-100);
    color: var(--success-600);
}

.financial-summary-item.expenses .summary-item-icon {
    background: var(--error-100);
    color: var(--error-600);
}

.financial-summary-item.profit .summary-item-icon {
    background: var(--primary-100);
    color: var(--primary-600);
}

.financial-summary-item.profit.positive .summary-item-icon {
    background: var(--success-100);
    color: var(--success-600);
}

.financial-summary-item.profit.negative .summary-item-icon {
    background: var(--error-100);
    color: var(--error-600);
}

.financial-summary-item.margin .summary-item-icon {
    background: var(--purple-100);
    color: var(--purple-600);
}

.summary-item-content {
    display: flex;
    flex-direction: column;
}

.summary-item-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
}

.summary-item-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.financials-insights {
    display: flex;
    gap: var(--space-4);
}

.insight-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: white;
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--gray-300);
}

.insight-card.positive {
    border-left-color: var(--success-500);
    background: var(--success-50);
}

.insight-card.negative {
    border-left-color: var(--error-500);
    background: var(--error-50);
}

.insight-card.neutral {
    border-left-color: var(--primary-500);
}

.insight-icon {
    color: var(--gray-500);
}

.insight-card.positive .insight-icon {
    color: var(--success-600);
}

.insight-card.negative .insight-icon {
    color: var(--error-600);
}

.insight-text {
    font-size: 0.875rem;
    color: var(--gray-700);
}

/* Analytics Hero */
.analytics-hero {
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--info-50) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--primary-200);
}

.analytics-hero-snapshot {
    margin-bottom: var(--space-6);
}

.snapshot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.snapshot-period {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-600);
}

.period-icon {
    color: var(--primary-500);
}

.period-text {
    font-weight: 600;
}

.performance-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
}

.performance-indicator.growing {
    background: var(--success-100);
    color: var(--success-700);
}

.performance-indicator.stable {
    background: var(--primary-100);
    color: var(--primary-700);
}

.performance-indicator.declining {
    background: var(--error-100);
    color: var(--error-700);
}

.snapshot-metrics {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-4);
}

.snapshot-metric {
    background: white;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
}

.snapshot-metric.primary {
    background: var(--primary-600);
    color: white;
}

.metric-value-large {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.metric-value-medium {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.snapshot-metric.primary .metric-label {
    color: var(--primary-100);
}

.metric-change {
    display: inline-block;
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.metric-change.positive {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.metric-change.negative {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error-200);
}

.analytics-hero-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.highlight-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: white;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
}

.highlight-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.highlight-icon.top-seller {
    background: var(--warning-100);
    color: var(--warning-600);
}

.highlight-icon.sell-through {
    background: var(--primary-100);
    color: var(--primary-600);
}

.highlight-icon.profit {
    background: var(--success-100);
    color: var(--success-600);
}

.highlight-content {
    display: flex;
    flex-direction: column;
}

.highlight-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.highlight-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
}

.highlight-value.positive {
    color: var(--success-600);
}

.highlight-value.negative {
    color: var(--error-600);
}

.highlight-detail {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.analytics-quick-insights {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.quick-insight {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: white;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    color: var(--gray-700);
}

.quick-insight.success {
    background: var(--success-100);
    color: var(--success-700);
}

.quick-insight.warning {
    background: var(--warning-100);
    color: var(--warning-700);
}

.quick-insight.alert {
    background: var(--error-100);
    color: var(--error-700);
}

/* =====================================================
   BUSINESS SECTION - Dark Mode Support
   ===================================================== */

.dark-mode .shops-hero {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-color: var(--gray-700);
}

.dark-mode .transactions-hero {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-color: var(--gray-700);
}

.dark-mode .financials-hero {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(34, 197, 94, 0.1) 100%);
    border-color: var(--gray-700);
}

.dark-mode .analytics-hero {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(14, 165, 233, 0.1) 100%);
    border-color: var(--gray-700);
}

.dark-mode .count-value,
.dark-mode .connection-title,
.dark-mode .shop-stat-value,
.dark-mode .flow-value,
.dark-mode .balance-value,
.dark-mode .tx-metric-value,
.dark-mode .health-score-value,
.dark-mode .financials-summary-title,
.dark-mode .summary-item-value,
.dark-mode .metric-value-medium,
.dark-mode .highlight-value {
    color: var(--gray-100);
}

.dark-mode .count-label,
.dark-mode .connection-subtitle,
.dark-mode .shop-stat-label,
.dark-mode .flow-label,
.dark-mode .flow-detail,
.dark-mode .balance-label,
.dark-mode .tx-metric-label,
.dark-mode .health-score-label,
.dark-mode .summary-item-label,
.dark-mode .metric-label,
.dark-mode .highlight-label,
.dark-mode .highlight-detail,
.dark-mode .period-text {
    color: var(--gray-400);
}

.dark-mode .shop-hero-stat,
.dark-mode .flow-section,
.dark-mode .tx-metric,
.dark-mode .financial-summary-item,
.dark-mode .insight-card,
.dark-mode .snapshot-metric:not(.primary),
.dark-mode .highlight-card,
.dark-mode .quick-insight,
.dark-mode .shop-quick-action {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .platform-pill {
    background: color-mix(in srgb, var(--platform-color) 20%, var(--gray-800));
}

.dark-mode .flow-section.balance.positive {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--success-600);
}

.dark-mode .flow-section.balance.negative {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error-600);
}

.dark-mode .connector-line {
    background: var(--gray-600);
}

.dark-mode .connector-arrow {
    color: var(--gray-500);
}

.dark-mode .insight-card.positive {
    background: rgba(34, 197, 94, 0.1);
}

.dark-mode .insight-card.negative {
    background: rgba(239, 68, 68, 0.1);
}

.dark-mode .insight-text {
    color: var(--gray-300);
}

.dark-mode .quick-insight {
    color: var(--gray-300);
}

.dark-mode .quick-insight.success {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success-400);
}

.dark-mode .quick-insight.warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning-400);
}

.dark-mode .quick-insight.alert {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error-400);
}

.dark-mode .shop-quick-action:hover {
    background: var(--gray-700);
    border-color: var(--primary-400);
    color: var(--primary-400);
}

/* =====================================================
   BUSINESS SECTION - Responsive Styles
   ===================================================== */

@media (max-width: 1200px) {
    .shops-hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .analytics-hero-highlights {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .shops-hero,
    .transactions-hero,
    .financials-hero,
    .analytics-hero {
        padding: var(--space-4);
    }

    .shops-hero-main {
        flex-direction: column;
    }

    .shops-connection-status {
        flex-direction: column;
        text-align: center;
    }

    .shops-hero-stats {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .shops-quick-actions {
        flex-wrap: wrap;
    }

    .shop-quick-action {
        flex: 1;
        min-width: 140px;
        justify-content: center;
    }

    .transactions-hero-flow {
        flex-direction: column;
    }

    .flow-connector {
        transform: rotate(90deg);
    }

    .transactions-hero-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .financials-hero-main {
        flex-direction: column;
        text-align: center;
    }

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

    .financials-insights {
        flex-direction: column;
    }

    .snapshot-header {
        flex-direction: column;
        gap: var(--space-3);
    }

    .snapshot-metrics {
        grid-template-columns: 1fr;
    }

    .analytics-quick-insights {
        flex-direction: column;
    }

    .quick-insight {
        justify-content: center;
    }
}

/* =====================================================
   GLOBAL UI IMPROVEMENTS
   ===================================================== */

/* Breadcrumb Navigation */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumb-item:hover {
    color: var(--primary-600);
}

.breadcrumb-item.current {
    color: var(--gray-900);
    font-weight: 500;
}

.breadcrumb-separator {
    color: var(--gray-300);
}

.breadcrumb-home {
    width: 16px;
    height: 16px;
    color: var(--gray-400);
}

/* Global Search (Command Palette Style) */
.global-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    animation: fadeIn 0.15s ease;
}

.global-search-modal {
    background: white;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 600px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: searchSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes searchSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.global-search-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-200);
}

.global-search-icon {
    color: var(--gray-400);
    flex-shrink: 0;
}

.global-search-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 1.125rem;
    color: var(--gray-900);
    outline: none;
}

.global-search-input::placeholder {
    color: var(--gray-400);
}

.global-search-kbd {
    padding: 2px 6px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-family: monospace;
    color: var(--gray-500);
}

.global-search-results {
    max-height: 400px;
    overflow-y: auto;
}

.search-results-section {
    padding: var(--space-2) var(--space-4);
}

.search-results-header {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    padding: var(--space-2) var(--space-1);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background 0.1s;
}

.search-result-item:hover,
.search-result-item.selected {
    background: var(--primary-50);
}

.search-result-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
}

.search-result-item:hover .search-result-icon,
.search-result-item.selected .search-result-icon {
    background: var(--primary-100);
    color: var(--primary-600);
}

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

.search-result-title {
    font-weight: 500;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-subtitle {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

.search-result-badge {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--gray-600);
}

.global-search-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

.search-shortcuts {
    display: flex;
    gap: var(--space-4);
}

.search-shortcut {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.search-recent {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Enhanced Loading States */
.loading-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-ring {
    width: 24px;
    height: 24px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-spinner-ring.sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.loading-spinner-ring.lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

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

/* Branded loader */
.loading-branded {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8);
}

.loading-branded-icon {
    width: 48px;
    height: 48px;
    color: var(--primary-500);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.95); opacity: 0.7; }
}

.loading-branded-text {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

.loading-branded-progress {
    width: 200px;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
}

.loading-branded-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
    border-radius: 2px;
    animation: progressIndeterminate 1.5s ease-in-out infinite;
}

@keyframes progressIndeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* Skeleton loaders */
.skeleton {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

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

.skeleton-text {
    height: 1em;
    margin-bottom: var(--space-2);
}

.skeleton-text:last-child {
    width: 60%;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.skeleton-table-row {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gray-100);
}

.skeleton-table-cell {
    height: 20px;
    flex: 1;
}

/* Progress with context */
.progress-contextual {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.progress-contextual-header {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
}

.progress-contextual-label {
    font-weight: 500;
    color: var(--gray-700);
}

.progress-contextual-value {
    color: var(--gray-500);
}

.progress-contextual-bar {
    height: 8px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.progress-contextual-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-contextual-fill.success {
    background: var(--success-500);
}

.progress-contextual-fill.warning {
    background: var(--warning-500);
}

.progress-contextual-fill.error {
    background: var(--error-500);
}

/* Page transitions */
.page-enter {
    animation: pageEnter 0.3s ease;
}

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

/* Scroll shadows for tables */
.table-container.scroll-shadow {
    position: relative;
}

.table-container.scroll-shadow::before,
.table-container.scroll-shadow::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;
}

.table-container.scroll-shadow::before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
}

.table-container.scroll-shadow::after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
}

.table-container.scroll-shadow.scroll-left::before {
    opacity: 1;
}

.table-container.scroll-shadow.scroll-right::after {
    opacity: 1;
}

/* Dark mode for global improvements */
.dark-mode .breadcrumb-item {
    color: var(--gray-400);
}

.dark-mode .breadcrumb-item:hover {
    color: var(--primary-400);
}

.dark-mode .breadcrumb-item.current {
    color: var(--gray-100);
}

.dark-mode .breadcrumb-separator {
    color: var(--gray-600);
}

.dark-mode .global-search-modal {
    background: var(--gray-800);
}

.dark-mode .global-search-input-wrapper {
    border-color: var(--gray-700);
}

.dark-mode .global-search-input {
    color: var(--gray-100);
}

.dark-mode .global-search-kbd {
    background: var(--gray-700);
    color: var(--gray-400);
}

.dark-mode .search-result-item:hover,
.dark-mode .search-result-item.selected {
    background: var(--gray-700);
}

.dark-mode .search-result-icon {
    background: var(--gray-700);
    color: var(--gray-400);
}

.dark-mode .search-result-title {
    color: var(--gray-100);
}

.dark-mode .search-result-subtitle {
    color: var(--gray-400);
}

.dark-mode .global-search-footer {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

.dark-mode .loading-spinner-ring {
    border-color: var(--gray-700);
    border-top-color: var(--primary-400);
}

.dark-mode .skeleton {
    background: linear-gradient(90deg, var(--gray-800) 25%, var(--gray-700) 50%, var(--gray-800) 75%);
    background-size: 200% 100%;
}

.dark-mode .table-container {
    border-color: var(--gray-700);
}

.dark-mode .table th {
    background: var(--gray-800);
    color: var(--gray-400);
}

.dark-mode .table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.dark-mode .table tbody tr:hover {
    background: rgba(59, 130, 246, 0.1);
}

body.dark-mode .table-container.scroll-shadow::before {
    background: linear-gradient(to right, #1f2937, transparent);
}

body.dark-mode .table-container.scroll-shadow::after {
    background: linear-gradient(to left, #1f2937, transparent);
}

body.dark-mode .import-col-filter-menu {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode .import-col-filter-menu label {
    color: #d1d5db !important;
}

body.dark-mode .import-col-filter-menu label:hover {
    background: #4b5563 !important;
}

body.dark-mode .import-preview-table th {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #9ca3af !important;
}

body.dark-mode .import-preview-table td {
    border-color: #4b5563 !important;
    color: #d1d5db !important;
}

.dark-mode .table td {
    border-color: var(--gray-700);
}

.dark-mode .table-action-btn {
    color: var(--gray-400);
}

.dark-mode .table-action-btn:hover {
    background: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .empty-state::before {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
}

.dark-mode .empty-state-icon {
    color: var(--primary-400);
}

.dark-mode .empty-state-title {
    color: var(--gray-100);
}

.dark-mode .empty-state-description {
    color: var(--gray-400);
}

.dark-mode .empty-state-tip {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .empty-state-tip-header {
    color: var(--gray-300);
}

.dark-mode .empty-state.inline {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

/* ============================================
   Enhanced Form Inputs
   ============================================ */

/* Floating Label Form Groups */
.form-group-float {
    position: relative;
    margin-bottom: var(--space-4);
}

.form-group-float .form-input,
.form-group-float .form-select,
.form-group-float .form-textarea {
    padding-top: var(--space-5);
    padding-bottom: var(--space-2);
}

.form-group-float .form-label-float {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    pointer-events: none;
    transition: all 0.2s ease;
    background: transparent;
    padding: 0 var(--space-1);
}

.form-group-float .form-textarea ~ .form-label-float {
    top: var(--space-4);
    transform: none;
}

.form-group-float .form-input:focus ~ .form-label-float,
.form-group-float .form-input:not(:placeholder-shown) ~ .form-label-float,
.form-group-float .form-select:focus ~ .form-label-float,
.form-group-float .form-select:valid ~ .form-label-float,
.form-group-float .form-textarea:focus ~ .form-label-float,
.form-group-float .form-textarea:not(:placeholder-shown) ~ .form-label-float {
    top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--primary-500);
    background: white;
}

/* Input with Icons */
.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-wrapper .form-input {
    padding-left: 2.75rem;
}

.input-icon-wrapper.has-suffix .form-input {
    padding-right: 2.75rem;
}

.input-icon-prefix,
.input-icon-suffix {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 100%;
    color: var(--gray-400);
    pointer-events: none;
    transition: color 0.2s ease;
}

.input-icon-prefix {
    left: 0;
}

.input-icon-suffix {
    right: 0;
}

.input-icon-wrapper .form-input:focus ~ .input-icon-prefix,
.input-icon-wrapper .form-input:focus ~ .input-icon-suffix {
    color: var(--primary-500);
}

/* Input Validation States */
.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
    border-color: var(--success);
    padding-right: 2.75rem;
    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='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

.form-input.is-valid:focus,
.form-select.is-valid:focus,
.form-textarea.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    border-color: var(--success);
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: var(--error);
    padding-right: 2.75rem;
    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='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    animation: shake 0.4s ease-in-out;
}

.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    border-color: var(--error);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* Validation Messages */
.form-validation {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
    opacity: 0;
    transform: translateY(-8px);
    animation: slideDown 0.2s ease forwards;
}

@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-validation.success {
    color: var(--success);
}

.form-validation.error {
    color: var(--error);
}

/* Input Character Counter */
.input-char-counter {
    position: absolute;
    right: var(--space-3);
    bottom: -1.25rem;
    font-size: var(--font-size-xs);
    color: var(--gray-400);
}

.input-char-counter.warning {
    color: var(--warning);
}

.input-char-counter.danger {
    color: var(--error);
}

/* Input Sizes */
.form-input-sm,
.form-select-sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-md);
}

.form-input-lg,
.form-select-lg {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    border-radius: var(--radius-xl);
}

/* ============================================
   Enhanced Modal Dialogs
   ============================================ */

/* Modal Backdrop Animation */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    animation: fadeIn 0.2s ease forwards;
}

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

/* Modal Content Animation */
.modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: modalSlideIn 0.2s ease forwards;
}

@keyframes modalSlideIn {
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.modal-dialog.closing {
    animation: modalSlideOut 0.2s ease forwards;
}

@keyframes modalSlideOut {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
}

/* Modal Size Variants */
.modal-sm {
    width: 90%;
    max-width: 400px;
}

.modal-md {
    width: 90%;
    max-width: 560px;
}

.modal-lg {
    width: 90%;
    max-width: 800px;
}

.modal-xl {
    width: 95%;
    max-width: 1140px;
}

.modal-fullscreen {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
}

/* Modal Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.modal-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.modal-close-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--gray-400);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* Modal Body */
.modal-body {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1;
}

.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

/* Modal Footer */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--gray-200);
    flex-shrink: 0;
}

/* Confirmation Modal */
.modal-confirm {
    text-align: center;
}

.modal-confirm-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 1.5rem;
}

.modal-confirm-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.modal-confirm-icon.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.modal-confirm-icon.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.modal-confirm-icon.info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-500);
}

/* ============================================
   Enhanced Dropdown Menus
   ============================================ */

.dropdown-enhanced {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dropdown-trigger:hover {
    border-color: var(--gray-400);
}

.dropdown-trigger:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.dropdown-trigger-icon {
    transition: transform 0.2s ease;
}

.dropdown-enhanced.open .dropdown-trigger-icon {
    transform: rotate(180deg);
}

.dropdown-menu-enhanced {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.dropdown-enhanced.open .dropdown-menu-enhanced {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu-enhanced.right {
    left: auto;
    right: 0;
}

/* Dropdown Search */
.dropdown-search {
    padding: var(--space-2);
    border-bottom: 1px solid var(--gray-100);
}

.dropdown-search-input {
    width: 100%;
    padding: var(--space-2);
    font-size: var(--font-size-sm);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--gray-50);
}

.dropdown-search-input:focus {
    outline: none;
    border-color: var(--primary-500);
    background: white;
}

/* Dropdown Sections */
.dropdown-section {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--gray-100);
}

.dropdown-section:last-child {
    border-bottom: none;
}

.dropdown-section-label {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Dropdown Items */
.dropdown-item-enhanced {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.15s ease;
}

.dropdown-item-enhanced:hover {
    background: var(--gray-50);
    color: var(--gray-900);
}

.dropdown-item-enhanced.active {
    background: var(--primary-50);
    color: var(--primary-600);
}

.dropdown-item-enhanced.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.dropdown-item-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--gray-400);
}

.dropdown-item-enhanced:hover .dropdown-item-icon {
    color: var(--gray-600);
}

.dropdown-item-enhanced.active .dropdown-item-icon {
    color: var(--primary-500);
}

.dropdown-item-label {
    flex: 1;
}

.dropdown-item-badge {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 500;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: var(--radius-full);
}

.dropdown-item-shortcut {
    font-size: var(--font-size-xs);
    color: var(--gray-400);
    font-family: monospace;
}

/* ============================================
   Enhanced Status Badges & Tags
   ============================================ */

/* Badge Sizes */
.badge-xs {
    padding: 0.125rem 0.375rem;
    font-size: 0.65rem;
}

.badge-sm {
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-xs);
}

.badge-md {
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-sm);
}

.badge-lg {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-base);
}

/* Badge Variants */
.badge-outline {
    background: transparent;
    border: 1px solid currentColor;
}

.badge-soft {
    background: currentColor;
    color: white;
}

.badge-soft.badge-primary {
    background: var(--primary-100);
    color: var(--primary-700);
}

.badge-soft.badge-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.badge-soft.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.badge-soft.badge-error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

.badge-soft.badge-info {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary-500);
}

/* Badge with Dot */
.badge-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.badge-dot::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: currentColor;
}

/* Pulse Animation for Live Status */
.badge-pulse::before {
    animation: pulse 2s infinite;
}

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

/* Dismissible Badge */
.badge-dismissible {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.badge-dismiss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    margin-right: -0.25rem;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    color: inherit;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.15s ease;
}

.badge-dismiss-btn:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Tag Input Container */
.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2);
    min-height: 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: white;
    transition: all 0.2s ease;
}

.tag-input-container:focus-within {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.tag-input-container .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.tag-input-container .tag-remove {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: all 0.15s ease;
}

.tag-input-container .tag-remove:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.tag-input-container input {
    flex: 1;
    min-width: 100px;
    border: none;
    outline: none;
    font-size: var(--font-size-sm);
    background: transparent;
}

/* ============================================
   Enhanced File Upload Areas
   ============================================ */

.file-upload-enhanced {
    position: relative;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
    background: var(--gray-50);
    transition: all 0.3s ease;
    cursor: pointer;
}

.file-upload-enhanced:hover {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.file-upload-enhanced.dragover {
    border-color: var(--primary-500);
    background: var(--primary-100);
    transform: scale(1.01);
}

.file-upload-enhanced.uploading {
    pointer-events: none;
}

.file-upload-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--space-3);
    color: var(--gray-400);
    transition: all 0.3s ease;
}

.file-upload-enhanced:hover .file-upload-icon {
    color: var(--primary-500);
    transform: translateY(-4px);
}

.file-upload-title {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: var(--space-1);
}

.file-upload-subtitle {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

.file-upload-browse {
    color: var(--primary-500);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Upload Progress */
.upload-progress-container {
    margin-top: var(--space-4);
}

.upload-progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.upload-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
    position: relative;
}

.upload-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.upload-progress-text {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* Upload File List */
.upload-file-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.upload-file-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

.upload-file-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: var(--radius-md);
    color: var(--gray-500);
}

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

.upload-file-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-file-size {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

.upload-file-status {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.upload-file-status.pending {
    background: var(--gray-100);
    color: var(--gray-600);
}

.upload-file-status.uploading {
    background: var(--primary-100);
    color: var(--primary-600);
}

.upload-file-status.success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.upload-file-status.error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

.upload-file-remove {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--gray-400);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.15s ease;
}

.upload-file-remove:hover {
    background: var(--gray-100);
    color: var(--error);
}

/* ============================================
   Form Validation Inline Feedback
   ============================================ */

.form-field-validated {
    position: relative;
}

.form-field-validated .validation-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.form-field-validated.validated .validation-icon {
    opacity: 1;
}

.form-field-validated.valid .validation-icon {
    color: var(--success);
}

.form-field-validated.invalid .validation-icon {
    color: var(--error);
}

.validation-feedback {
    display: none;
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    animation: slideDown 0.2s ease;
}

.form-field-validated.validated .validation-feedback {
    display: block;
}

.form-field-validated.valid .validation-feedback {
    color: var(--success);
}

.form-field-validated.invalid .validation-feedback {
    color: var(--error);
}

/* Password Strength Indicator */
.password-strength {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.password-strength-bar {
    flex: 1;
    height: 4px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    transition: background 0.3s ease;
}

.password-strength[data-strength="1"] .password-strength-bar:nth-child(1) {
    background: var(--error);
}

.password-strength[data-strength="2"] .password-strength-bar:nth-child(-n+2) {
    background: var(--warning);
}

.password-strength[data-strength="3"] .password-strength-bar:nth-child(-n+3) {
    background: #f59e0b;
}

.password-strength[data-strength="4"] .password-strength-bar {
    background: var(--success);
}

.password-strength-text {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    margin-top: var(--space-1);
}

/* ============================================
   Dark Mode - Enhanced Form Inputs
   ============================================ */

.dark-mode .form-group-float .form-input:focus ~ .form-label-float,
.dark-mode .form-group-float .form-input:not(:placeholder-shown) ~ .form-label-float,
.dark-mode .form-group-float .form-select:focus ~ .form-label-float,
.dark-mode .form-group-float .form-select:valid ~ .form-label-float,
.dark-mode .form-group-float .form-textarea:focus ~ .form-label-float,
.dark-mode .form-group-float .form-textarea:not(:placeholder-shown) ~ .form-label-float {
    background: var(--gray-800);
    color: var(--primary-400);
}

.dark-mode .input-icon-prefix,
.dark-mode .input-icon-suffix {
    color: var(--gray-500);
}

.dark-mode .input-icon-wrapper .form-input:focus ~ .input-icon-prefix,
.dark-mode .input-icon-wrapper .form-input:focus ~ .input-icon-suffix {
    color: var(--primary-400);
}

/* Dark Mode - Enhanced Modals */
.dark-mode .modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.dark-mode .modal-dialog {
    background: var(--gray-800);
    border: 1px solid var(--gray-700);
}

.dark-mode .modal-header {
    border-bottom-color: var(--gray-700);
}

.dark-mode .modal-title {
    color: var(--gray-100);
}

.dark-mode .modal-close-btn {
    color: var(--gray-400);
}

.dark-mode .modal-close-btn:hover {
    background: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .modal-body::-webkit-scrollbar-thumb {
    background: var(--gray-600);
}

.dark-mode .modal-footer {
    border-top-color: var(--gray-700);
}

/* Dark Mode - Enhanced Dropdowns */
.dark-mode .dropdown-trigger {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .dropdown-trigger:hover {
    border-color: var(--gray-600);
}

.dark-mode .dropdown-menu-enhanced {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .dropdown-search-input {
    background: var(--gray-900);
    border-color: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .dropdown-section {
    border-bottom-color: var(--gray-700);
}

.dark-mode .dropdown-section-label {
    color: var(--gray-400);
}

.dark-mode .dropdown-item-enhanced {
    color: var(--gray-300);
}

.dark-mode .dropdown-item-enhanced:hover {
    background: var(--gray-700);
    color: var(--gray-100);
}

.dark-mode .dropdown-item-enhanced.active {
    background: var(--primary-900);
    color: var(--primary-300);
}

.dark-mode .dropdown-item-icon {
    color: var(--gray-500);
}

.dark-mode .dropdown-item-badge {
    background: var(--gray-700);
    color: var(--gray-300);
}

/* Dark Mode - Enhanced Badges */
.dark-mode .badge-soft.badge-primary {
    background: rgba(59, 130, 246, 0.2);
    color: var(--primary-300);
}

.dark-mode .badge-soft.badge-success {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.dark-mode .badge-soft.badge-warning {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.dark-mode .badge-soft.badge-error {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.dark-mode .tag-input-container {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .tag-input-container:focus-within {
    border-color: var(--primary-500);
}

.dark-mode .tag-input-container .tag {
    background: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .tag-input-container .tag-remove:hover {
    background: var(--gray-600);
    color: var(--gray-100);
}

.dark-mode .tag-input-container input {
    color: var(--gray-200);
}

/* Dark Mode - Enhanced File Upload */
.dark-mode .file-upload-enhanced {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

.dark-mode .file-upload-enhanced:hover {
    border-color: var(--primary-500);
    background: rgba(59, 130, 246, 0.1);
}

.dark-mode .file-upload-enhanced.dragover {
    border-color: var(--primary-400);
    background: rgba(59, 130, 246, 0.15);
}

.dark-mode .file-upload-icon {
    color: var(--gray-500);
}

.dark-mode .file-upload-enhanced:hover .file-upload-icon {
    color: var(--primary-400);
}

.dark-mode .file-upload-title {
    color: var(--gray-200);
}

.dark-mode .file-upload-subtitle {
    color: var(--gray-400);
}

.dark-mode .file-upload-browse {
    color: var(--primary-400);
}

.dark-mode .upload-progress-bar {
    background: var(--gray-700);
}

.dark-mode .upload-progress-text {
    color: var(--gray-400);
}

.dark-mode .upload-file-item {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .upload-file-icon {
    background: var(--gray-700);
    color: var(--gray-400);
}

.dark-mode .upload-file-name {
    color: var(--gray-200);
}

.dark-mode .upload-file-size {
    color: var(--gray-400);
}

.dark-mode .upload-file-remove:hover {
    background: var(--gray-700);
}

/* Dark Mode - Password Strength */
.dark-mode .password-strength-bar {
    background: var(--gray-700);
}

.dark-mode .password-strength-text {
    color: var(--gray-400);
}

/* ============================================
   Range Slider Components
   ============================================ */

.range-slider {
    position: relative;
    width: 100%;
    height: 2.5rem;
    display: flex;
    align-items: center;
}

.range-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    outline: none;
    cursor: pointer;
}

.range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-500);
    border-radius: var(--radius-full);
    cursor: grab;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
    transition: all 0.15s ease;
}

.range-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5);
}

.range-slider input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}

.range-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-500);
    border: none;
    border-radius: var(--radius-full);
    cursor: grab;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}

/* Range Slider with Value Tooltip */
.range-slider-tooltip {
    position: relative;
}

.range-slider-value {
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-2);
    background: var(--gray-900);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.range-slider-value::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--gray-900);
}

.range-slider:hover .range-slider-value,
.range-slider:focus-within .range-slider-value {
    opacity: 1;
}

/* Dual Range Slider */
.range-dual {
    position: relative;
    height: 2.5rem;
}

.range-dual-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    transform: translateY(-50%);
}

.range-dual-fill {
    position: absolute;
    height: 100%;
    background: var(--primary-500);
    border-radius: var(--radius-full);
}

.range-dual input[type="range"] {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    background: transparent;
    height: 6px;
}

.range-dual input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
}

.range-dual input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
}

.range-dual-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* Range Slider Sizes */
.range-slider-sm input[type="range"] {
    height: 4px;
}

.range-slider-sm input[type="range"]::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
}

.range-slider-lg input[type="range"] {
    height: 8px;
}

.range-slider-lg input[type="range"]::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
}

/* ============================================
   Popover Components
   ============================================ */

.popover-wrapper {
    position: relative;
    display: inline-block;
}

.popover {
    position: absolute;
    z-index: 200;
    min-width: 200px;
    max-width: 320px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
}

.popover-wrapper:hover .popover,
.popover-wrapper.active .popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Popover Positions */
.popover.top {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
}

.popover-wrapper:hover .popover.top,
.popover-wrapper.active .popover.top {
    transform: translateX(-50%) translateY(0);
}

.popover.bottom {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
}

.popover-wrapper:hover .popover.bottom,
.popover-wrapper.active .popover.bottom {
    transform: translateX(-50%) translateY(0);
}

.popover.left {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
}

.popover-wrapper:hover .popover.left,
.popover-wrapper.active .popover.left {
    transform: translateY(-50%) translateX(0);
}

.popover.right {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
}

.popover-wrapper:hover .popover.right,
.popover-wrapper.active .popover.right {
    transform: translateY(-50%) translateX(0);
}

/* Popover Arrow */
.popover::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    border: 1px solid var(--gray-200);
    transform: rotate(45deg);
}

.popover.top::before {
    bottom: -7px;
    left: 50%;
    margin-left: -6px;
    border-top: none;
    border-left: none;
}

.popover.bottom::before {
    top: -7px;
    left: 50%;
    margin-left: -6px;
    border-bottom: none;
    border-right: none;
}

.popover.left::before {
    right: -7px;
    top: 50%;
    margin-top: -6px;
    border-bottom: none;
    border-left: none;
}

.popover.right::before {
    left: -7px;
    top: 50%;
    margin-top: -6px;
    border-top: none;
    border-right: none;
}

/* Popover Content */
.popover-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    font-weight: 600;
    color: var(--gray-900);
}

.popover-body {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    line-height: 1.5;
}

.popover-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--gray-100);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* Context Menu */
.context-menu {
    position: fixed;
    z-index: 1000;
    min-width: 180px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-1) 0;
    opacity: 0;
    transform: scale(0.95);
    transform-origin: top left;
    animation: contextMenuIn 0.15s ease forwards;
}

@keyframes contextMenuIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.1s ease;
}

.context-menu-item:hover {
    background: var(--gray-50);
    color: var(--gray-900);
}

.context-menu-item.danger {
    color: var(--error);
}

.context-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.context-menu-item-icon {
    width: 1rem;
    height: 1rem;
    color: var(--gray-400);
}

.context-menu-item:hover .context-menu-item-icon {
    color: var(--gray-600);
}

.context-menu-item.danger .context-menu-item-icon {
    color: var(--error);
}

.context-menu-divider {
    height: 1px;
    background: var(--gray-100);
    margin: var(--space-1) 0;
}

.context-menu-label {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   Avatar Component System
   ============================================ */

.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--gray-200);
    color: var(--gray-600);
    font-weight: 600;
    flex-shrink: 0;
}

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

/* Avatar Sizes */
.avatar-xs {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
}

.avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: var(--font-size-xs);
}

.avatar-md {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--font-size-sm);
}

.avatar-lg {
    width: 3rem;
    height: 3rem;
    font-size: var(--font-size-base);
}

.avatar-xl {
    width: 4rem;
    height: 4rem;
    font-size: var(--font-size-lg);
}

.avatar-2xl {
    width: 5rem;
    height: 5rem;
    font-size: var(--font-size-xl);
}

/* Avatar Colors */
.avatar-primary {
    background: var(--primary-100);
    color: var(--primary-700);
}

.avatar-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.avatar-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.avatar-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

/* Avatar Presence Indicator */
.avatar-presence {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    height: 25%;
    min-width: 8px;
    min-height: 8px;
    border-radius: var(--radius-full);
    border: 2px solid white;
}

.avatar-presence.online {
    background: var(--success);
}

.avatar-presence.offline {
    background: var(--gray-400);
}

.avatar-presence.away {
    background: var(--warning);
}

.avatar-presence.busy {
    background: var(--error);
}

/* Avatar Stack */
.avatar-stack {
    display: flex;
    flex-direction: row-reverse;
}

.avatar-stack .avatar {
    margin-left: -0.75rem;
    border: 2px solid white;
    transition: transform 0.2s ease;
}

.avatar-stack .avatar:last-child {
    margin-left: 0;
}

.avatar-stack .avatar:hover {
    transform: translateY(-2px);
    z-index: 1;
}

.avatar-stack-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -0.75rem;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border: 2px solid white;
    border-radius: var(--radius-full);
}

/* Avatar with Badge */
.avatar-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--error);
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    border: 2px solid white;
}

/* Avatar Squared */
.avatar-squared {
    border-radius: var(--radius-lg);
}

/* ============================================
   Step Indicator / Wizard Components
   ============================================ */

.steps {
    display: flex;
    align-items: flex-start;
}

.step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.step-indicator {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    color: var(--gray-500);
    font-weight: 600;
    border-radius: var(--radius-full);
    border: 2px solid var(--gray-200);
    z-index: 1;
    transition: all 0.3s ease;
}

.step-indicator svg {
    width: 1rem;
    height: 1rem;
}

.step-content {
    margin-top: var(--space-3);
    text-align: center;
}

.step-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-900);
}

.step-description {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    margin-top: var(--space-1);
}

/* Step Connector */
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 1.25rem;
    left: calc(50% + 1.5rem);
    width: calc(100% - 3rem);
    height: 2px;
    background: var(--gray-200);
    z-index: 0;
}

/* Step States */
.step.completed .step-indicator {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.step.completed::after {
    background: var(--success);
}

.step.active .step-indicator {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
    box-shadow: 0 0 0 4px var(--primary-100);
}

.step.error .step-indicator {
    background: var(--error);
    border-color: var(--error);
    color: white;
}

/* Vertical Steps */
.steps-vertical {
    flex-direction: column;
    align-items: flex-start;
}

.steps-vertical .step {
    flex-direction: row;
    align-items: flex-start;
    padding-bottom: var(--space-6);
}

.steps-vertical .step-content {
    margin-top: 0;
    margin-left: var(--space-4);
    text-align: left;
}

.steps-vertical .step:not(:last-child)::after {
    top: 2.75rem;
    left: 1.15rem;
    width: 2px;
    height: calc(100% - 2.5rem);
}

/* Compact Steps */
.steps-compact .step-indicator {
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--font-size-xs);
}

.steps-compact .step:not(:last-child)::after {
    top: 0.75rem;
    left: calc(50% + 1rem);
    width: calc(100% - 2rem);
}

/* Step Numbers */
.steps-numbered .step-indicator::before {
    counter-increment: step-counter;
    content: counter(step-counter);
}

.steps-numbered {
    counter-reset: step-counter;
}

/* ============================================
   Alert and Banner Components
   ============================================ */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid;
}

.alert-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
}

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

.alert-title {
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.alert-description {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

.alert-dismiss {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.5;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.alert-dismiss:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

/* Alert Variants */
.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--primary-700);
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #065f46;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #92400e;
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #991b1b;
}

/* Alert Actions */
.alert-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.alert-action {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.alert-info .alert-action-primary {
    background: var(--primary-500);
    color: white;
}

.alert-success .alert-action-primary {
    background: var(--success);
    color: white;
}

.alert-warning .alert-action-primary {
    background: var(--warning);
    color: white;
}

.alert-error .alert-action-primary {
    background: var(--error);
    color: white;
}

/* Banner (Full-width Alert) */
.banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    text-align: center;
}

.banner-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.banner-action {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.banner-dismiss {
    position: absolute;
    right: var(--space-4);
    padding: var(--space-1);
    background: transparent;
    border: none;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.banner-dismiss:hover {
    opacity: 1;
}

.banner-info {
    background: var(--primary-500);
    color: white;
}

.banner-success {
    background: var(--success);
    color: white;
}

.banner-warning {
    background: var(--warning);
    color: white;
}

.banner-error {
    background: var(--error);
    color: white;
}

/* ============================================
   Drawer Panel Components
   ============================================ */

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background: white;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.drawer-right {
    right: 0;
    transform: translateX(100%);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
}

.drawer-left {
    left: 0;
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.drawer.open {
    transform: translateX(0);
}

/* Drawer Sizes */
.drawer-sm {
    max-width: 320px;
}

.drawer-lg {
    max-width: 560px;
}

.drawer-xl {
    max-width: 800px;
}

.drawer-full {
    max-width: 100%;
}

/* Drawer Header */
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.drawer-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-900);
}

.drawer-close {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--gray-400);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.15s ease;
}

.drawer-close:hover {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* Drawer Body */
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}

.drawer-body::-webkit-scrollbar {
    width: 6px;
}

.drawer-body::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

/* Drawer Footer */
.drawer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--gray-200);
    flex-shrink: 0;
}

/* ============================================
   Pagination Component
   ============================================ */

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-700);
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

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

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

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    color: var(--gray-400);
}

/* Pagination with Icons */
.pagination-prev,
.pagination-next {
    gap: var(--space-1);
}

.pagination-prev svg,
.pagination-next svg {
    width: 1rem;
    height: 1rem;
}

/* Pagination Info */
.pagination-info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.pagination-info-text {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

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

/* Page Size Selector */
.pagination-size {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.pagination-size select {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
}

/* Jump to Page */
.pagination-jump {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.pagination-jump input {
    width: 4rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    text-align: center;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
}

/* Compact Pagination */
.pagination-compact {
    gap: 0;
}

.pagination-compact .pagination-btn {
    border-radius: 0;
    margin-left: -1px;
}

.pagination-compact .pagination-btn:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    margin-left: 0;
}

.pagination-compact .pagination-btn:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* ============================================
   Enhanced Card Components
   ============================================ */

/* Card Hover Effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.card-hover-lift:hover {
    transform: translateY(-8px) scale(1.01);
}

.card-hover-glow:hover {
    box-shadow: 0 0 0 4px var(--primary-100), var(--shadow-lg);
}

/* Card Selection */
.card-selectable {
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.card-selectable:hover {
    border-color: var(--gray-300);
}

.card-selectable.selected {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.card-selectable .card-checkbox {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.card-selectable.selected .card-checkbox {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

/* Card Action Menu */
.card-actions-menu {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.card:hover .card-actions-menu {
    opacity: 1;
}

.card-action-trigger {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.15s ease;
}

.card-action-trigger:hover {
    background: var(--gray-50);
    color: var(--gray-700);
}

/* Featured/Pinned Card */
.card-featured {
    border: 2px solid var(--primary-500);
    position: relative;
}

.card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-featured-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-1) var(--space-2);
    background: var(--primary-500);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Card Image Overlay */
.card-image-wrapper {
    position: relative;
    overflow: hidden;
}

.card-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover .card-image-overlay {
    opacity: 1;
}

.card-image-actions {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    display: flex;
    gap: var(--space-2);
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s ease;
}

.card:hover .card-image-actions {
    transform: translateY(0);
    opacity: 1;
}

/* Card Ribbon */
.card-ribbon {
    position: absolute;
    top: 1rem;
    right: -2rem;
    padding: var(--space-1) var(--space-6);
    background: var(--primary-500);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    transform: rotate(45deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-ribbon.success {
    background: var(--success);
}

.card-ribbon.warning {
    background: var(--warning);
}

.card-ribbon.danger {
    background: var(--error);
}

/* Card Skeleton */
.card-skeleton {
    animation: skeleton-pulse 1.5s infinite;
}

.card-skeleton .skeleton-line {
    height: 1rem;
    background: var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.card-skeleton .skeleton-line.short {
    width: 60%;
}

.card-skeleton .skeleton-image {
    height: 12rem;
    background: var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Card Grid Responsive */
.card-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.card-grid-sm {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.card-grid-lg {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

/* ============================================
   Dark Mode - Range Sliders
   ============================================ */

.dark-mode .range-slider input[type="range"] {
    background: var(--gray-700);
}

.dark-mode .range-slider-value {
    background: var(--gray-700);
    color: var(--gray-100);
}

.dark-mode .range-slider-value::after {
    border-top-color: var(--gray-700);
}

.dark-mode .range-dual-track {
    background: var(--gray-700);
}

.dark-mode .range-dual-labels {
    color: var(--gray-400);
}

/* Dark Mode - Popovers */
.dark-mode .popover {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .popover::before {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .popover-header {
    border-bottom-color: var(--gray-700);
    color: var(--gray-100);
}

.dark-mode .popover-body {
    color: var(--gray-300);
}

.dark-mode .popover-footer {
    border-top-color: var(--gray-700);
}

.dark-mode .context-menu {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .context-menu-item {
    color: var(--gray-300);
}

.dark-mode .context-menu-item:hover {
    background: var(--gray-700);
    color: var(--gray-100);
}

.dark-mode .context-menu-divider {
    background: var(--gray-700);
}

.dark-mode .context-menu-label {
    color: var(--gray-500);
}

/* Dark Mode - Avatars */
.dark-mode .avatar {
    background: var(--gray-700);
    color: var(--gray-300);
}

.dark-mode .avatar-presence {
    border-color: var(--gray-800);
}

.dark-mode .avatar-stack .avatar {
    border-color: var(--gray-800);
}

.dark-mode .avatar-stack-count {
    background: var(--gray-700);
    color: var(--gray-300);
    border-color: var(--gray-800);
}

.dark-mode .avatar-badge {
    border-color: var(--gray-800);
}

/* Dark Mode - Steps */
.dark-mode .step-indicator {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-400);
}

.dark-mode .step:not(:last-child)::after {
    background: var(--gray-700);
}

.dark-mode .step-title {
    color: var(--gray-200);
}

.dark-mode .step-description {
    color: var(--gray-400);
}

.dark-mode .step.active .step-indicator {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

/* Dark Mode - Alerts */
.dark-mode .alert-info {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--primary-300);
}

.dark-mode .alert-success {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.dark-mode .alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.dark-mode .alert-error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

/* Dark Mode - Drawers */
.dark-mode .drawer {
    background: var(--gray-800);
}

.dark-mode .drawer-header {
    border-bottom-color: var(--gray-700);
}

.dark-mode .drawer-title {
    color: var(--gray-100);
}

.dark-mode .drawer-close {
    color: var(--gray-400);
}

.dark-mode .drawer-close:hover {
    background: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .drawer-body::-webkit-scrollbar-thumb {
    background: var(--gray-600);
}

.dark-mode .drawer-footer {
    border-top-color: var(--gray-700);
}

/* Dark Mode - Pagination */
.dark-mode .pagination-btn {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-300);
}

.dark-mode .pagination-btn:hover:not(:disabled) {
    background: var(--gray-700);
    border-color: var(--gray-600);
}

.dark-mode .pagination-btn.active {
    background: var(--primary-500);
    border-color: var(--primary-500);
}

.dark-mode .pagination-ellipsis {
    color: var(--gray-500);
}

.dark-mode .pagination-info-text {
    color: var(--gray-400);
}

.dark-mode .pagination-info-text strong {
    color: var(--gray-200);
}

.dark-mode .pagination-size {
    color: var(--gray-400);
}

.dark-mode .pagination-size select {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-300);
}

.dark-mode .pagination-jump {
    color: var(--gray-400);
}

.dark-mode .pagination-jump input {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-300);
}

/* Dark Mode - Enhanced Cards */
.dark-mode .card-selectable:hover {
    border-color: var(--gray-600);
}

.dark-mode .card-selectable.selected {
    border-color: var(--primary-400);
    background: rgba(59, 130, 246, 0.1);
}

.dark-mode .card-selectable .card-checkbox {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

.dark-mode .card-action-trigger {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-400);
}

.dark-mode .card-action-trigger:hover {
    background: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .card-featured {
    border-color: var(--primary-400);
}

.dark-mode .card-skeleton .skeleton-line,
.dark-mode .card-skeleton .skeleton-image {
    background: var(--gray-700);
}

/* ============================================
   Enhanced Tooltips
   ============================================ */

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-content {
    position: absolute;
    z-index: 1000;
    padding: var(--space-2) var(--space-3);
    background: var(--gray-900);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.tooltip:hover .tooltip-content,
.tooltip:focus .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Tooltip Positions */
.tooltip-top .tooltip-content {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}

.tooltip:hover .tooltip-top .tooltip-content,
.tooltip-top:hover .tooltip-content {
    transform: translateX(-50%) translateY(0);
}

.tooltip-bottom .tooltip-content {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}

.tooltip:hover .tooltip-bottom .tooltip-content,
.tooltip-bottom:hover .tooltip-content {
    transform: translateX(-50%) translateY(0);
}

.tooltip-left .tooltip-content {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}

.tooltip:hover .tooltip-left .tooltip-content,
.tooltip-left:hover .tooltip-content {
    transform: translateY(-50%) translateX(0);
}

.tooltip-right .tooltip-content {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}

.tooltip:hover .tooltip-right .tooltip-content,
.tooltip-right:hover .tooltip-content {
    transform: translateY(-50%) translateX(0);
}

/* Tooltip Arrows */
.tooltip-content::before {
    content: '';
    position: absolute;
    border: 6px solid transparent;
}

.tooltip-top .tooltip-content::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--gray-900);
}

.tooltip-bottom .tooltip-content::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--gray-900);
}

.tooltip-left .tooltip-content::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--gray-900);
}

.tooltip-right .tooltip-content::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--gray-900);
}

/* Tooltip Variants */
.tooltip-light .tooltip-content {
    background: white;
    color: var(--gray-900);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
}

.tooltip-light.tooltip-top .tooltip-content::before {
    border-top-color: white;
}

.tooltip-primary .tooltip-content {
    background: var(--primary-500);
}

.tooltip-primary.tooltip-top .tooltip-content::before {
    border-top-color: var(--primary-500);
}

/* Multi-line Tooltip */
.tooltip-multiline .tooltip-content {
    white-space: normal;
    width: 200px;
    text-align: center;
    line-height: 1.4;
}

/* ============================================
   Toggle Switch Variants
   ============================================ */

.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--gray-300);
    border-radius: var(--radius-full);
    transition: all 0.3s ease;
}

.switch-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.switch-input:checked + .switch-slider {
    background: var(--primary-500);
}

.switch-input:checked + .switch-slider::before {
    transform: translateX(20px);
}

.switch-input:focus + .switch-slider {
    box-shadow: 0 0 0 3px var(--primary-100);
}

.switch-input:disabled + .switch-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Switch Sizes */
.switch-sm .switch-slider {
    width: 32px;
    height: 18px;
}

.switch-sm .switch-slider::before {
    width: 14px;
    height: 14px;
}

.switch-sm .switch-input:checked + .switch-slider::before {
    transform: translateX(14px);
}

.switch-lg .switch-slider {
    width: 56px;
    height: 30px;
}

.switch-lg .switch-slider::before {
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
}

.switch-lg .switch-input:checked + .switch-slider::before {
    transform: translateX(26px);
}

/* Switch Colors */
.switch-success .switch-input:checked + .switch-slider {
    background: var(--success);
}

.switch-warning .switch-input:checked + .switch-slider {
    background: var(--warning);
}

.switch-danger .switch-input:checked + .switch-slider {
    background: var(--error);
}

/* Switch with Label */
.switch-label {
    margin-left: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

/* Switch Loading */
.switch-loading .switch-slider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

/* Switch with Icons */
.switch-icons .switch-slider::after {
    content: '✕';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: white;
    opacity: 0.7;
}

.switch-icons .switch-input:checked + .switch-slider::after {
    content: '✓';
    left: 6px;
    right: auto;
}

/* ============================================
   Radio Button Styling
   ============================================ */

.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.radio-group-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

.radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-mark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-full);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.radio-mark::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--primary-500);
    border-radius: var(--radius-full);
    transform: scale(0);
    transition: transform 0.2s ease;
}

.radio-input:checked + .radio-mark {
    border-color: var(--primary-500);
}

.radio-input:checked + .radio-mark::after {
    transform: scale(1);
}

.radio-input:focus + .radio-mark {
    box-shadow: 0 0 0 3px var(--primary-100);
}

.radio-input:disabled + .radio-mark {
    opacity: 0.5;
    cursor: not-allowed;
}

.radio-label {
    margin-left: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

/* Radio Card */
.radio-card {
    position: relative;
    padding: var(--space-4);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-card:hover {
    border-color: var(--gray-300);
    background: var(--gray-50);
}

.radio-card.selected {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.radio-card .radio-mark {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
}

.radio-card-content {
    padding-right: var(--space-8);
}

.radio-card-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}

.radio-card-description {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* ============================================
   Button Groups & Segmented Controls
   ============================================ */

.btn-group {
    display: inline-flex;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-group .btn {
    border-radius: 0;
    margin: 0;
    border-right-width: 0;
}

.btn-group .btn:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.btn-group .btn:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-right-width: 1px;
}

.btn-group .btn:only-child {
    border-radius: var(--radius-lg);
}

.btn-group .btn.active {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
    z-index: 1;
}

/* Segmented Control */
.segmented-control {
    display: inline-flex;
    padding: 4px;
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    gap: 4px;
}

.segmented-btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-600);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.segmented-btn:hover {
    color: var(--gray-900);
}

.segmented-btn.active {
    background: white;
    color: var(--gray-900);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Segmented Control Sizes */
.segmented-control-sm .segmented-btn {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
}

.segmented-control-lg .segmented-btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-base);
}

/* Icon Button Group */
.btn-group-icon .btn {
    padding: var(--space-2);
    min-width: 2.5rem;
}

/* ============================================
   Floating Action Button (FAB)
   ============================================ */

.fab {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 100;
}

.fab-btn {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-500);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.fab-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.fab-btn:active {
    transform: scale(0.95);
}

.fab-btn svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.fab.open .fab-btn svg {
    transform: rotate(45deg);
}

/* FAB Sizes */
.fab-sm .fab-btn {
    width: 40px;
    height: 40px;
}

.fab-sm .fab-btn svg {
    width: 18px;
    height: 18px;
}

.fab-lg .fab-btn {
    width: 72px;
    height: 72px;
}

.fab-lg .fab-btn svg {
    width: 32px;
    height: 32px;
}

/* Speed Dial Menu */
.fab-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

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

.fab-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

.fab.open .fab-menu-item {
    opacity: 1;
    transform: translateY(0);
}

.fab.open .fab-menu-item:nth-child(1) { transition-delay: 0.05s; }
.fab.open .fab-menu-item:nth-child(2) { transition-delay: 0.1s; }
.fab.open .fab-menu-item:nth-child(3) { transition-delay: 0.15s; }
.fab.open .fab-menu-item:nth-child(4) { transition-delay: 0.2s; }

.fab-menu-label {
    padding: var(--space-2) var(--space-3);
    background: var(--gray-900);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}

.fab-menu-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: var(--gray-700);
    border: none;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fab-menu-btn:hover {
    background: var(--gray-50);
    transform: scale(1.1);
}

.fab-menu-btn svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   Chip Input Component
   ============================================ */

.chip-input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2);
    min-height: 44px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.chip-input:focus-within {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    animation: chipIn 0.2s ease;
}

@keyframes chipIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.chip-remove {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--gray-500);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.15s ease;
}

.chip-remove:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.chip-input input {
    flex: 1;
    min-width: 120px;
    padding: var(--space-1);
    border: none;
    outline: none;
    font-size: var(--font-size-sm);
    background: transparent;
}

/* Chip Variants */
.chip-primary {
    background: var(--primary-100);
    color: var(--primary-700);
}

.chip-success {
    background: rgba(16, 185, 129, 0.15);
    color: #065f46;
}

.chip-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #92400e;
}

.chip-error {
    background: rgba(239, 68, 68, 0.15);
    color: #991b1b;
}

/* Chip with Avatar */
.chip-avatar {
    padding-left: var(--space-1);
}

.chip-avatar img {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
}

/* Chip Suggestions */
.chip-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-1);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}

.chip-suggestion-item {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.15s ease;
}

.chip-suggestion-item:hover,
.chip-suggestion-item.highlighted {
    background: var(--gray-50);
}

/* ============================================
   Sparkline Charts
   ============================================ */

.sparkline {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 32px;
}

.sparkline-bar {
    width: 4px;
    background: var(--primary-500);
    border-radius: 2px;
    transition: height 0.3s ease;
}

.sparkline-bar:hover {
    background: var(--primary-600);
}

/* Sparkline Line (SVG-based styling) */
.sparkline-line {
    height: 32px;
}

.sparkline-line path {
    fill: none;
    stroke: var(--primary-500);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sparkline-line .sparkline-area {
    fill: var(--primary-100);
    stroke: none;
}

/* Sparkline Variants */
.sparkline-success .sparkline-bar {
    background: var(--success);
}

.sparkline-warning .sparkline-bar {
    background: var(--warning);
}

.sparkline-danger .sparkline-bar {
    background: var(--error);
}

/* Sparkline in Stat Card */
.stat-sparkline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.stat-sparkline-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
}

/* ============================================
   Gauge Meters
   ============================================ */

.gauge {
    position: relative;
    width: 120px;
    height: 60px;
    overflow: hidden;
}

.gauge-background {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 12px solid var(--gray-200);
    border-bottom-color: transparent;
    border-radius: 60px 60px 0 0;
}

.gauge-fill {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 12px solid var(--primary-500);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 60px 60px 0 0;
    transform-origin: center bottom;
    transform: rotate(-90deg);
    transition: transform 0.5s ease;
}

.gauge-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.gauge-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--gray-900);
}

.gauge-label {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* Gauge Sizes */
.gauge-sm {
    width: 80px;
    height: 40px;
}

.gauge-sm .gauge-background,
.gauge-sm .gauge-fill {
    width: 80px;
    height: 80px;
    border-width: 8px;
    border-radius: 40px 40px 0 0;
}

.gauge-sm .gauge-value {
    font-size: var(--font-size-base);
}

.gauge-lg {
    width: 160px;
    height: 80px;
}

.gauge-lg .gauge-background,
.gauge-lg .gauge-fill {
    width: 160px;
    height: 160px;
    border-width: 16px;
    border-radius: 80px 80px 0 0;
}

.gauge-lg .gauge-value {
    font-size: var(--font-size-2xl);
}

/* Gauge Colors */
.gauge-success .gauge-fill { border-top-color: var(--success); border-right-color: var(--success); }
.gauge-warning .gauge-fill { border-top-color: var(--warning); border-right-color: var(--warning); }
.gauge-danger .gauge-fill { border-top-color: var(--error); border-right-color: var(--error); }

/* ============================================
   Comparison Bars
   ============================================ */

.comparison-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.comparison-bar-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.comparison-bar-label {
    flex-shrink: 0;
    width: 100px;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

.comparison-bar-track {
    flex: 1;
    height: 24px;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.comparison-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--space-2);
}

.comparison-bar-fill span {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: white;
}

.comparison-bar-fill.primary { background: var(--primary-500); }
.comparison-bar-fill.success { background: var(--success); }
.comparison-bar-fill.warning { background: var(--warning); }
.comparison-bar-fill.danger { background: var(--error); }

/* Stacked Bar */
.stacked-bar {
    display: flex;
    height: 32px;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.stacked-bar-segment {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: white;
    transition: width 0.5s ease;
}

/* Side-by-Side Comparison */
.side-by-side-bar {
    display: flex;
    align-items: center;
    height: 32px;
}

.side-by-side-bar .bar-left {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.side-by-side-bar .bar-divider {
    width: 2px;
    height: 100%;
    background: var(--gray-300);
    margin: 0 var(--space-2);
}

.side-by-side-bar .bar-right {
    flex: 1;
}

.side-by-side-bar .bar-fill {
    height: 24px;
    border-radius: var(--radius-md);
    transition: width 0.5s ease;
}

/* ============================================
   Trend Indicators
   ============================================ */

.trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.trend-icon {
    width: 16px;
    height: 16px;
}

.trend-up {
    color: var(--success);
}

.trend-down {
    color: var(--error);
}

.trend-flat {
    color: var(--gray-500);
}

/* Trend with Background */
.trend-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
}

.trend-badge.trend-up {
    background: rgba(16, 185, 129, 0.1);
}

.trend-badge.trend-down {
    background: rgba(239, 68, 68, 0.1);
}

.trend-badge.trend-flat {
    background: var(--gray-100);
}

/* Trend Arrow Animation */
.trend-animated .trend-icon {
    animation: trendBounce 1s ease infinite;
}

.trend-up.trend-animated .trend-icon {
    animation-name: trendUp;
}

.trend-down.trend-animated .trend-icon {
    animation-name: trendDown;
}

@keyframes trendUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes trendDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

/* ============================================
   Data Grid Enhancements
   ============================================ */

.data-grid {
    width: 100%;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.data-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.data-grid-toolbar-left,
.data-grid-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.data-grid table {
    width: 100%;
    border-collapse: collapse;
}

/* Resizable Columns */
.data-grid th {
    position: relative;
    user-select: none;
}

.data-grid .resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.2s ease;
}

.data-grid .resize-handle:hover {
    background: var(--primary-500);
}

/* Sortable Headers */
.data-grid th.sortable {
    cursor: pointer;
}

.data-grid th.sortable:hover {
    background: var(--gray-100);
}

.sort-indicator {
    display: inline-flex;
    flex-direction: column;
    margin-left: var(--space-1);
    opacity: 0.3;
}

.sort-indicator svg {
    width: 10px;
    height: 10px;
}

th.sorted .sort-indicator {
    opacity: 1;
}

th.sorted-asc .sort-indicator .sort-desc,
th.sorted-desc .sort-indicator .sort-asc {
    opacity: 0.3;
}

/* Frozen Columns */
.data-grid th.frozen,
.data-grid td.frozen {
    position: sticky;
    left: 0;
    background: white;
    z-index: 1;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}

.data-grid th.frozen {
    background: var(--gray-50);
}

/* Grid Footer */
.data-grid-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* ============================================
   Mega Menu
   ============================================ */

.mega-menu-trigger {
    position: relative;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 600px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    padding: var(--space-6);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.mega-menu-trigger:hover .mega-menu,
.mega-menu-trigger.active .mega-menu {
    opacity: 1;
    visibility: visible;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
}

.mega-menu-column {
    display: flex;
    flex-direction: column;
}

.mega-menu-heading {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--gray-100);
}

.mega-menu-link {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--gray-700);
    text-decoration: none;
    transition: color 0.15s ease;
}

.mega-menu-link:hover {
    color: var(--primary-500);
}

.mega-menu-link-icon {
    width: 20px;
    height: 20px;
    color: var(--gray-400);
    flex-shrink: 0;
    margin-top: 2px;
}

.mega-menu-link:hover .mega-menu-link-icon {
    color: var(--primary-500);
}

.mega-menu-link-content {
    flex: 1;
}

.mega-menu-link-title {
    font-weight: 500;
    margin-bottom: 2px;
}

.mega-menu-link-description {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* Mega Menu Featured Section */
.mega-menu-featured {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

/* ============================================
   Tab Scroll Indicators
   ============================================ */

.tabs-scrollable {
    position: relative;
}

.tabs-scroll-container {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tabs-scroll-container::-webkit-scrollbar {
    display: none;
}

.tabs-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    color: var(--gray-600);
    cursor: pointer;
    z-index: 10;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
}

.tabs-scroll-btn:hover {
    background: var(--gray-50);
    color: var(--gray-900);
}

.tabs-scroll-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.tabs-scroll-left {
    left: 0;
}

.tabs-scroll-right {
    right: 0;
}

/* Scroll Fade Indicators */
.tabs-scrollable::before,
.tabs-scrollable::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tabs-scrollable::before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
}

.tabs-scrollable::after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
}

.tabs-scrollable.scroll-left::before,
.tabs-scrollable.scroll-right::after {
    opacity: 1;
}

/* ============================================
   Mobile Bottom Navigation
   ============================================ */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: white;
    border-top: 1px solid var(--gray-200);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-1);
    color: var(--gray-500);
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.bottom-nav-item:active {
    background: var(--gray-50);
}

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

.bottom-nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
}

.bottom-nav-label {
    font-size: 10px;
    font-weight: 500;
}

.bottom-nav-badge {
    position: absolute;
    top: 4px;
    right: 50%;
    transform: translateX(12px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--error);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bottom Nav Variants */
.bottom-nav-minimal .bottom-nav-label {
    display: none;
}

.bottom-nav-minimal .bottom-nav-icon {
    width: 28px;
    height: 28px;
}

/* ============================================
   Accordion Enhancements
   ============================================ */

.accordion {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.accordion-item {
    border-bottom: 1px solid var(--gray-200);
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: transparent;
    border: none;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--gray-900);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.accordion-trigger:hover {
    background: var(--gray-50);
}

.accordion-icon {
    width: 20px;
    height: 20px;
    color: var(--gray-400);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.accordion-item.open .accordion-icon {
    transform: rotate(180deg);
}

.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-item.open .accordion-panel {
    max-height: 500px;
}

.accordion-content {
    padding: 0 var(--space-4) var(--space-4);
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

/* Accordion Variants */
.accordion-flush {
    border: none;
    border-radius: 0;
}

.accordion-flush .accordion-item {
    border-radius: 0;
}

.accordion-separated .accordion-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
}

.accordion-separated .accordion-item:last-child {
    margin-bottom: 0;
}

/* Nested Accordion */
.accordion-nested {
    margin-top: var(--space-2);
    border: none;
    background: var(--gray-50);
    border-radius: var(--radius-md);
}

.accordion-nested .accordion-trigger {
    padding: var(--space-3);
    font-size: var(--font-size-sm);
}

/* ============================================
   Read More/Less Component
   ============================================ */

.text-truncate-container {
    position: relative;
}

.text-truncate {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.text-truncate.collapsed {
    max-height: 4.5em;
}

.text-truncate.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    background: linear-gradient(transparent, white);
}

.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding: 0;
    background: transparent;
    border: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--primary-500);
    cursor: pointer;
    transition: color 0.15s ease;
}

.read-more-btn:hover {
    color: var(--primary-600);
}

.read-more-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.text-truncate-container.expanded .read-more-btn svg {
    transform: rotate(180deg);
}

/* Line Clamp Variant */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   Code Block Component
   ============================================ */

.code-block {
    position: relative;
    background: var(--gray-900);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-block-language {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.code-block-copy {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--gray-300);
    cursor: pointer;
    transition: all 0.2s ease;
}

.code-block-copy:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.code-block-copy.copied {
    background: var(--success);
    color: white;
}

.code-block pre {
    margin: 0;
    padding: var(--space-4);
    overflow-x: auto;
}

.code-block code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: var(--font-size-sm);
    color: var(--gray-100);
    line-height: 1.6;
}

/* Code Line Numbers */
.code-block-numbered pre {
    display: flex;
}

.code-line-numbers {
    flex-shrink: 0;
    padding-right: var(--space-4);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    margin-right: var(--space-4);
    text-align: right;
    color: var(--gray-600);
    user-select: none;
}

/* Inline Code */
.code-inline {
    padding: 0.125em 0.375em;
    background: var(--gray-100);
    color: var(--gray-800);
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.875em;
    border-radius: var(--radius-sm);
}

/* ============================================
   Callout Box Component
   ============================================ */

.callout {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border-left: 4px solid;
}

.callout-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

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

.callout-title {
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.callout-text {
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Callout Variants */
.callout-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--primary-500);
    color: var(--primary-700);
}

.callout-info .callout-icon {
    color: var(--primary-500);
}

.callout-tip {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--success);
    color: #065f46;
}

.callout-tip .callout-icon {
    color: var(--success);
}

.callout-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--warning);
    color: #92400e;
}

.callout-warning .callout-icon {
    color: var(--warning);
}

.callout-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error);
    color: #991b1b;
}

.callout-danger .callout-icon {
    color: var(--error);
}

.callout-note {
    background: var(--gray-100);
    border-color: var(--gray-400);
    color: var(--gray-700);
}

.callout-note .callout-icon {
    color: var(--gray-500);
}

/* ============================================
   Image Gallery & Lightbox
   ============================================ */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-2);
}

.gallery-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-item-overlay {
    opacity: 1;
}

.gallery-item-overlay svg {
    width: 32px;
    height: 32px;
    color: white;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lightbox.open {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
}

.lightbox-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius-full);
    color: white;
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 10;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius-full);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
    left: var(--space-4);
}

.lightbox-next {
    right: var(--space-4);
}

.lightbox-counter {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-2) var(--space-4);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-full);
}

.lightbox-caption {
    position: absolute;
    bottom: var(--space-12);
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
    text-align: center;
    color: white;
    font-size: var(--font-size-sm);
}

/* ============================================
   Image Comparison Slider
   ============================================ */

.image-comparison {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    user-select: none;
}

.image-comparison-before,
.image-comparison-after {
    display: block;
    width: 100%;
}

.image-comparison-before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
}

.image-comparison-before img {
    height: 100%;
    object-fit: cover;
}

.image-comparison-slider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: white;
    cursor: ew-resize;
    z-index: 10;
}

.image-comparison-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .image-comparison-handle {
    background: #374151;
}

body.dark-mode .image-comparison-handle svg {
    color: #d1d5db;
}

.image-comparison-handle svg {
    width: 20px;
    height: 20px;
    color: var(--gray-600);
}

.image-comparison-label {
    position: absolute;
    bottom: var(--space-3);
    padding: var(--space-1) var(--space-3);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.image-comparison-label-before {
    left: var(--space-3);
}

.image-comparison-label-after {
    right: var(--space-3);
}

/* Image Comparison Toolbar */
.image-comparison-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 1px solid var(--gray-200);
    border-bottom: none;
    margin-bottom: 0;
}

body.dark-mode .image-comparison-toolbar {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.image-comparison-modes {
    display: flex;
    gap: 4px;
}

.image-comparison-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.image-comparison-side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

body.dark-mode .image-comparison-side-by-side {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.image-comparison-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.image-comparison-overlay {
    padding: 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

body.dark-mode .image-comparison-overlay {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.image-comparison-wrapper {
    margin-bottom: 16px;
}

/* ============================================
   Countdown Timer
   ============================================ */

.countdown {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.countdown-value {
    min-width: 3rem;
    padding: var(--space-3);
    background: var(--gray-900);
    color: white;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    font-family: 'Monaco', monospace;
    text-align: center;
    border-radius: var(--radius-lg);
}

.countdown-label {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.countdown-separator {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-400);
    margin-bottom: var(--space-5);
}

/* Countdown Sizes */
.countdown-sm .countdown-value {
    min-width: 2rem;
    padding: var(--space-2);
    font-size: var(--font-size-lg);
}

.countdown-lg .countdown-value {
    min-width: 4rem;
    padding: var(--space-4);
    font-size: var(--font-size-4xl);
}

/* Countdown Variants */
.countdown-outline .countdown-value {
    background: transparent;
    border: 2px solid var(--gray-300);
    color: var(--gray-900);
}

.countdown-primary .countdown-value {
    background: var(--primary-500);
}

.countdown-danger .countdown-value {
    background: var(--error);
}

/* Flip Animation (CSS-only approximation) */
.countdown-flip .countdown-value {
    position: relative;
    perspective: 200px;
}

/* ============================================
   Live Indicators
   ============================================ */

.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: var(--radius-full);
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
}

.live-indicator-text {
    color: var(--success);
}

/* Live Badge */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--error);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-md);
}

.live-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: white;
    border-radius: var(--radius-full);
    animation: blink 1s infinite;
}

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

/* Recording Indicator */
.recording-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-full);
    color: var(--error);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.recording-dot {
    width: 10px;
    height: 10px;
    background: var(--error);
    border-radius: var(--radius-full);
    animation: recordPulse 1.5s infinite;
}

@keyframes recordPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

/* ============================================
   Search Suggestions
   ============================================ */

.search-with-suggestions {
    position: relative;
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: 320px;
    overflow-y: auto;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.search-with-suggestions.open .search-suggestions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-suggestion-group {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--gray-100);
}

.search-suggestion-group:last-child {
    border-bottom: none;
}

.search-suggestion-label {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background 0.15s ease;
}

.search-suggestion-item:hover,
.search-suggestion-item.highlighted {
    background: var(--gray-50);
}

.search-suggestion-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: var(--radius-md);
    color: var(--gray-500);
    flex-shrink: 0;
}

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

.search-suggestion-title {
    font-size: var(--font-size-sm);
    color: var(--gray-900);
}

.search-suggestion-title mark {
    background: var(--primary-100);
    color: var(--primary-700);
    padding: 0 2px;
    border-radius: 2px;
}

.search-suggestion-meta {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

.search-suggestion-shortcut {
    font-size: var(--font-size-xs);
    color: var(--gray-400);
    font-family: monospace;
}

/* Recent Searches */
.search-recent {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.search-recent-icon {
    color: var(--gray-400);
}

.search-recent-clear {
    margin-left: auto;
    padding: var(--space-1);
    background: transparent;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.search-recent-clear:hover {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* ============================================
   Date Picker
   ============================================ */

.date-picker {
    position: relative;
    display: inline-block;
}

.date-picker-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    padding-right: 2.5rem;
    font-size: var(--font-size-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: white;
    cursor: pointer;
}

.date-picker-icon {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
}

.date-picker-calendar {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-4);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.date-picker.open .date-picker-calendar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.date-picker-title {
    font-weight: 600;
    color: var(--gray-900);
}

.date-picker-nav {
    display: flex;
    gap: var(--space-1);
}

.date-picker-nav-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--gray-500);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.date-picker-nav-btn:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.date-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: var(--space-2);
}

.date-picker-weekday {
    padding: var(--space-2);
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gray-500);
}

.date-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.date-picker-day {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.date-picker-day:hover {
    background: var(--gray-100);
}

.date-picker-day.other-month {
    color: var(--gray-300);
}

.date-picker-day.today {
    font-weight: 600;
    color: var(--primary-500);
}

.date-picker-day.selected {
    background: var(--primary-500);
    color: white;
}

.date-picker-day.in-range {
    background: var(--primary-100);
    border-radius: 0;
}

.date-picker-day.range-start {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.date-picker-day.range-end {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ============================================
   Number Stepper
   ============================================ */

.number-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.number-stepper-btn {
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
    border: none;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}

.number-stepper-btn:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.number-stepper-btn:active {
    background: var(--gray-200);
}

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

.number-stepper-input {
    width: 60px;
    padding: var(--space-2);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: none;
    border-left: 1px solid var(--gray-300);
    border-right: 1px solid var(--gray-300);
    background: white;
    -moz-appearance: textfield;
}

.number-stepper-input::-webkit-outer-spin-button,
.number-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Stepper Sizes */
.number-stepper-sm .number-stepper-btn {
    width: 28px;
}

.number-stepper-sm .number-stepper-input {
    width: 44px;
    padding: var(--space-1);
    font-size: var(--font-size-xs);
}

.number-stepper-lg .number-stepper-btn {
    width: 44px;
}

.number-stepper-lg .number-stepper-input {
    width: 80px;
    padding: var(--space-3);
    font-size: var(--font-size-base);
}

/* Vertical Stepper */
.number-stepper-vertical {
    flex-direction: column;
    width: auto;
}

.number-stepper-vertical .number-stepper-btn {
    width: 100%;
    height: 24px;
}

.number-stepper-vertical .number-stepper-input {
    width: 60px;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--gray-300);
    border-bottom: 1px solid var(--gray-300);
}

/* ============================================
   Split Panel
   ============================================ */

.split-panel {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.split-panel-left,
.split-panel-right {
    overflow: auto;
}

.split-panel-left {
    flex-shrink: 0;
}

.split-panel-right {
    flex: 1;
    min-width: 0;
}

.split-panel-divider {
    width: 8px;
    background: var(--gray-100);
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.split-panel-divider:hover {
    background: var(--gray-200);
}

.split-panel-divider::before {
    content: '';
    width: 2px;
    height: 32px;
    background: var(--gray-300);
    border-radius: 1px;
}

/* Vertical Split */
.split-panel-vertical {
    flex-direction: column;
}

.split-panel-vertical .split-panel-divider {
    width: 100%;
    height: 8px;
    cursor: row-resize;
}

.split-panel-vertical .split-panel-divider::before {
    width: 32px;
    height: 2px;
}

/* ============================================
   Scroll-to-Top Button
   ============================================ */

.scroll-to-top {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-900);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 50;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: var(--gray-800);
    transform: translateY(-2px);
}

.scroll-to-top svg {
    width: 20px;
    height: 20px;
}

/* With Progress Ring */
.scroll-to-top-progress {
    position: relative;
}

.scroll-to-top-progress svg.progress-ring {
    position: absolute;
    inset: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    transform: rotate(-90deg);
}

.scroll-to-top-progress .progress-ring-circle {
    fill: none;
    stroke: var(--primary-500);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s ease;
}

/* ============================================
   Keyboard Shortcut Display
   ============================================ */

.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 var(--space-2);
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-bottom-width: 2px;
    border-radius: var(--radius-md);
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--gray-700);
}

.kbd-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.kbd-separator {
    color: var(--gray-400);
    font-size: var(--font-size-xs);
}

/* Keyboard Shortcut Sizes */
.kbd-sm {
    min-width: 1.25rem;
    height: 1.25rem;
    font-size: 10px;
}

.kbd-lg {
    min-width: 2rem;
    height: 2rem;
    font-size: var(--font-size-sm);
}

/* Hotkey Badge */
.hotkey-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--gray-600);
}

.hotkey-badge .kbd {
    margin-left: var(--space-1);
}

/* ============================================
   Copy to Clipboard Button
   ============================================ */

.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.copy-btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-700);
}

.copy-btn.copied {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.copy-btn svg {
    width: 16px;
    height: 16px;
}

/* Copy Button with Text */
.copy-btn-text {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

.copy-btn-text span {
    font-size: var(--font-size-sm);
}

/* Copy Field */
.copy-field {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.copy-field-value {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    font-family: 'Monaco', monospace;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    background: var(--gray-50);
    border: none;
    min-width: 0;
}

.copy-field .copy-btn {
    border: none;
    border-left: 1px solid var(--gray-300);
    border-radius: 0;
}

/* Copy Tooltip */
.copy-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-2);
    background: var(--gray-900);
    color: white;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.copy-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--gray-900);
}

.copy-btn.copied .copy-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   Skeleton and Shimmer Loaders
   ============================================ */

.skeleton {
    background: var(--gray-200);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Skeleton Types */
.skeleton-text {
    height: 1rem;
    margin-bottom: var(--space-2);
}

.skeleton-text:last-child {
    width: 70%;
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: var(--space-3);
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
}

.skeleton-avatar-sm {
    width: 32px;
    height: 32px;
}

.skeleton-avatar-lg {
    width: 56px;
    height: 56px;
}

.skeleton-thumbnail {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-lg);
}

.skeleton-thumbnail-square {
    aspect-ratio: 1;
}

.skeleton-button {
    height: 36px;
    width: 100px;
    border-radius: var(--radius-lg);
}

.skeleton-badge {
    height: 20px;
    width: 60px;
    border-radius: var(--radius-full);
}

/* Skeleton Card Layout */
.skeleton-card {
    padding: var(--space-4);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

.skeleton-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.skeleton-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Skeleton Table */
.skeleton-table {
    width: 100%;
}

.skeleton-table-row {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--gray-100);
}

.skeleton-table-cell {
    flex: 1;
    height: 1rem;
}

/* Disable Animation */
.skeleton-static::after {
    animation: none;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    /* Hide non-printable elements */
    .no-print,
    .sidebar,
    .header,
    .bottom-nav,
    .fab,
    .toast,
    .modal-backdrop,
    .tooltip-content,
    .dropdown-menu,
    .scroll-to-top {
        display: none !important;
    }

    /* Reset backgrounds */
    body {
        background: white !important;
        color: black !important;
    }

    /* Page breaks */
    .print-break-before {
        page-break-before: always;
    }

    .print-break-after {
        page-break-after: always;
    }

    .print-avoid-break {
        page-break-inside: avoid;
    }

    /* Print-only elements */
    .print-only {
        display: block !important;
    }

    /* Link URLs */
    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #666;
    }

    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: '';
    }

    /* Tables */
    table {
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    /* Cards */
    .card {
        border: 1px solid #ddd;
        box-shadow: none;
    }

    /* Images */
    img {
        max-width: 100%;
    }

    /* Invoice/Receipt specific */
    .print-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .print-logo {
        max-height: 60px;
        margin-bottom: 1rem;
    }

    .print-title {
        font-size: 24px;
        font-weight: bold;
    }

    .print-meta {
        display: flex;
        justify-content: space-between;
        margin: 1rem 0;
    }

    .print-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 10px;
        color: #666;
        padding: 1rem;
        border-top: 1px solid #ddd;
    }

    .print-page-number::after {
        content: counter(page);
    }
}

/* ============================================
   Dark Mode - New Components
   ============================================ */

/* Dark Mode - Tooltips */
.dark-mode .tooltip-light .tooltip-content {
    background: var(--gray-800);
    color: var(--gray-100);
    border-color: var(--gray-700);
}

/* Dark Mode - Switches */
.dark-mode .switch-slider {
    background: var(--gray-600);
}

.dark-mode .switch-label {
    color: var(--gray-300);
}

/* Dark Mode - Radio */
.dark-mode .radio-mark {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

.dark-mode .radio-label {
    color: var(--gray-300);
}

.dark-mode .radio-card {
    border-color: var(--gray-700);
    background: var(--gray-800);
}

.dark-mode .radio-card:hover {
    border-color: var(--gray-600);
    background: var(--gray-750);
}

.dark-mode .radio-card.selected {
    border-color: var(--primary-400);
    background: rgba(59, 130, 246, 0.1);
}

.dark-mode .radio-card-title {
    color: var(--gray-100);
}

.dark-mode .radio-card-description {
    color: var(--gray-400);
}

/* Dark Mode - Button Groups */
.dark-mode .segmented-control {
    background: var(--gray-800);
}

.dark-mode .segmented-btn {
    color: var(--gray-400);
}

.dark-mode .segmented-btn:hover {
    color: var(--gray-200);
}

.dark-mode .segmented-btn.active {
    background: var(--gray-700);
    color: var(--gray-100);
}

/* Dark Mode - FAB */
.dark-mode .fab-menu-label {
    background: var(--gray-700);
}

.dark-mode .fab-menu-btn {
    background: var(--gray-800);
    color: var(--gray-300);
}

.dark-mode .fab-menu-btn:hover {
    background: var(--gray-700);
}

/* Dark Mode - Chips */
.dark-mode .chip-input {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .chip-input input {
    color: var(--gray-200);
}

.dark-mode .chip {
    background: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .chip-suggestions {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .chip-suggestion-item:hover {
    background: var(--gray-700);
}

/* Dark Mode - Gauge */
.dark-mode .gauge-background {
    border-color: var(--gray-700);
}

.dark-mode .gauge-value {
    color: var(--gray-100);
}

/* Dark Mode - Comparison Bars */
.dark-mode .comparison-bar-label {
    color: var(--gray-300);
}

.dark-mode .comparison-bar-track {
    background: var(--gray-700);
}

/* Dark Mode - Trend */
.dark-mode .trend-badge.trend-flat {
    background: var(--gray-700);
}

/* Dark Mode - Data Grid */
.dark-mode .data-grid {
    border-color: var(--gray-700);
}

.dark-mode .data-grid-toolbar {
    background: var(--gray-800);
    border-bottom-color: var(--gray-700);
}

.dark-mode .data-grid th.frozen,
.dark-mode .data-grid td.frozen {
    background: var(--gray-800);
}

.dark-mode .data-grid-footer {
    background: var(--gray-800);
    border-top-color: var(--gray-700);
    color: var(--gray-400);
}

/* Dark Mode - Mega Menu */
.dark-mode .mega-menu {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .mega-menu-heading {
    color: var(--gray-400);
    border-bottom-color: var(--gray-700);
}

.dark-mode .mega-menu-link {
    color: var(--gray-300);
}

.dark-mode .mega-menu-link-description {
    color: var(--gray-500);
}

.dark-mode .mega-menu-featured {
    background: var(--gray-750);
}

/* Dark Mode - Tabs Scroll */
.dark-mode .tabs-scroll-btn {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-400);
}

.dark-mode .tabs-scroll-btn:hover {
    background: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .tabs-scrollable::before {
    background: linear-gradient(to right, var(--gray-900), transparent);
}

.dark-mode .tabs-scrollable::after {
    background: linear-gradient(to left, var(--gray-900), transparent);
}

/* Dark Mode - Bottom Nav */
.dark-mode .bottom-nav {
    background: var(--gray-800);
    border-top-color: var(--gray-700);
}

.dark-mode .bottom-nav-item {
    color: var(--gray-400);
}

.dark-mode .bottom-nav-item:active {
    background: var(--gray-700);
}

.dark-mode .bottom-nav-item.active {
    color: var(--primary-400);
}

/* Dark Mode - Accordion */
.dark-mode .accordion {
    border-color: var(--gray-700);
}

.dark-mode .accordion-item {
    border-bottom-color: var(--gray-700);
}

.dark-mode .accordion-trigger {
    color: var(--gray-100);
}

.dark-mode .accordion-trigger:hover {
    background: var(--gray-750);
}

.dark-mode .accordion-content {
    color: var(--gray-400);
}

.dark-mode .accordion-nested {
    background: var(--gray-750);
}

/* Dark Mode - Read More */
.dark-mode .text-truncate.collapsed::after {
    background: linear-gradient(transparent, var(--gray-900));
}

/* Dark Mode - Code Block */
.dark-mode .code-inline {
    background: var(--gray-700);
    color: var(--gray-200);
}

/* Dark Mode - Callout */
.dark-mode .callout-info {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary-300);
}

.dark-mode .callout-tip {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.dark-mode .callout-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.dark-mode .callout-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.dark-mode .callout-note {
    background: var(--gray-800);
    color: var(--gray-300);
}

/* Dark Mode - Gallery */
.dark-mode .lightbox {
    background: rgba(0, 0, 0, 0.98);
}

/* Dark Mode - Countdown */
.dark-mode .countdown-outline .countdown-value {
    border-color: var(--gray-600);
    color: var(--gray-100);
}

/* Dark Mode - Search Suggestions */
.dark-mode .search-suggestions {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .search-suggestion-group {
    border-bottom-color: var(--gray-700);
}

.dark-mode .search-suggestion-item:hover {
    background: var(--gray-700);
}

.dark-mode .search-suggestion-icon {
    background: var(--gray-700);
}

.dark-mode .search-suggestion-title {
    color: var(--gray-100);
}

.dark-mode .search-suggestion-title mark {
    background: rgba(59, 130, 246, 0.3);
    color: var(--primary-300);
}

/* Dark Mode - Date Picker */
.dark-mode .date-picker-input {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .date-picker-calendar {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .date-picker-title {
    color: var(--gray-100);
}

.dark-mode .date-picker-nav-btn {
    color: var(--gray-400);
}

.dark-mode .date-picker-nav-btn:hover {
    background: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .date-picker-day {
    color: var(--gray-300);
}

.dark-mode .date-picker-day:hover {
    background: var(--gray-700);
}

.dark-mode .date-picker-day.other-month {
    color: var(--gray-600);
}

.dark-mode .date-picker-day.in-range {
    background: rgba(59, 130, 246, 0.2);
}

/* Dark Mode - Number Stepper */
.dark-mode .number-stepper {
    border-color: var(--gray-700);
}

.dark-mode .number-stepper-btn {
    background: var(--gray-750);
    color: var(--gray-400);
}

.dark-mode .number-stepper-btn:hover {
    background: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .number-stepper-input {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-200);
}

/* Dark Mode - Split Panel */
.dark-mode .split-panel-divider {
    background: var(--gray-800);
}

.dark-mode .split-panel-divider:hover {
    background: var(--gray-700);
}

.dark-mode .split-panel-divider::before {
    background: var(--gray-600);
}

/* Dark Mode - Scroll to Top */
.dark-mode .scroll-to-top {
    background: var(--gray-700);
}

.dark-mode .scroll-to-top:hover {
    background: var(--gray-600);
}

/* Dark Mode - Keyboard Shortcuts */
.dark-mode .kbd {
    background: var(--gray-800);
    border-color: var(--gray-600);
    color: var(--gray-300);
}

.dark-mode .hotkey-badge {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-400);
}

/* Dark Mode - Copy Button */
.dark-mode .copy-btn {
    border-color: var(--gray-700);
    color: var(--gray-400);
}

.dark-mode .copy-btn:hover {
    background: var(--gray-750);
    border-color: var(--gray-600);
    color: var(--gray-200);
}

.dark-mode .copy-field {
    border-color: var(--gray-700);
}

.dark-mode .copy-field-value {
    background: var(--gray-800);
    color: var(--gray-300);
}

.dark-mode .copy-field .copy-btn {
    border-left-color: var(--gray-700);
}

/* Dark Mode - Skeleton */
.dark-mode .skeleton {
    background: var(--gray-700);
}

.dark-mode .skeleton::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
}

.dark-mode .skeleton-card {
    border-color: var(--gray-700);
}

.dark-mode .skeleton-table-row {
    border-bottom-color: var(--gray-700);
}

/* ============================================
   Animation & Transition Library
   ============================================ */

/* Staggered List Animations */
.stagger-children > * {
    opacity: 0;
    animation: staggerFadeIn 0.4s ease forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(9) { animation-delay: 0.45s; }
.stagger-children > *:nth-child(10) { animation-delay: 0.5s; }

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

/* Stagger from left */
.stagger-left > * {
    opacity: 0;
    animation: staggerFromLeft 0.4s ease forwards;
}

@keyframes staggerFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Stagger scale */
.stagger-scale > * {
    opacity: 0;
    animation: staggerScale 0.3s ease forwards;
}

@keyframes staggerScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Attention Seekers */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

@keyframes jello {
    0%, 100% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
}

@keyframes wobble {
    0%, 100% { transform: translateX(0) rotate(0); }
    15% { transform: translateX(-25%) rotate(-5deg); }
    30% { transform: translateX(20%) rotate(3deg); }
    45% { transform: translateX(-15%) rotate(-3deg); }
    60% { transform: translateX(10%) rotate(2deg); }
    75% { transform: translateX(-5%) rotate(-1deg); }
}

@keyframes tada {
    0%, 100% { transform: scale(1) rotate(0); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes rubberBand {
    0%, 100% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
}

.animate-bounce { animation: bounce 1s ease infinite; }
.animate-heartbeat { animation: heartbeat 1.5s ease infinite; }
.animate-jello { animation: jello 1s ease; }
.animate-wobble { animation: wobble 1s ease; }
.animate-tada { animation: tada 1s ease; }
.animate-swing { animation: swing 1s ease; transform-origin: top center; }
.animate-rubberBand { animation: rubberBand 1s ease; }

/* Page Transitions */
.page-enter {
    opacity: 0;
    transform: translateX(20px);
}

.page-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease;
}

.page-exit {
    opacity: 1;
    transform: translateX(0);
}

.page-exit-active {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
}

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

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

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

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

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

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

.slide-in-right { animation: slideInRight 0.3s ease forwards; }
.slide-in-left { animation: slideInLeft 0.3s ease forwards; }
.slide-out-right { animation: slideOutRight 0.3s ease forwards; }
.slide-out-left { animation: slideOutLeft 0.3s ease forwards; }
.slide-in-up { animation: slideInUp 0.3s ease forwards; }
.slide-out-down { animation: slideOutDown 0.3s ease forwards; }

/* Flip/3D Animations */
@keyframes flipInX {
    from {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    to {
        transform: perspective(400px) rotateX(0);
        opacity: 1;
    }
}

@keyframes flipInY {
    from {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    to {
        transform: perspective(400px) rotateY(0);
        opacity: 1;
    }
}

@keyframes flipOutX {
    from {
        transform: perspective(400px) rotateX(0);
        opacity: 1;
    }
    to {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

.flip-in-x { animation: flipInX 0.5s ease forwards; }
.flip-in-y { animation: flipInY 0.5s ease forwards; }
.flip-out-x { animation: flipOutX 0.5s ease forwards; }

/* Zoom Animations */
@keyframes zoomIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes zoomOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0); opacity: 0; }
}

@keyframes zoomInBounce {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.zoom-in { animation: zoomIn 0.3s ease forwards; }
.zoom-out { animation: zoomOut 0.3s ease forwards; }
.zoom-in-bounce { animation: zoomInBounce 0.4s ease forwards; }

/* Spin Variants */
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spinFast { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

.spin-slow { animation: spinSlow 2s linear infinite; }
.spin-fast { animation: spinFast 0.5s linear infinite; }
.spin-reverse { animation: spinReverse 1s linear infinite; }

/* Glow Animations */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 5px currentColor; }
    50% { box-shadow: 0 0 20px currentColor, 0 0 30px currentColor; }
}

@keyframes glowRing {
    0% { box-shadow: 0 0 0 0 currentColor; }
    100% { box-shadow: 0 0 0 15px transparent; }
}

.glow-pulse { animation: glowPulse 2s ease infinite; }
.glow-ring { animation: glowRing 1s ease infinite; }

/* Easing Utilities */
.ease-linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }
.ease-bounce { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.ease-elastic { transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.ease-back { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Hover Scale Utilities */
.hover-scale-105:hover { transform: scale(1.05); }
.hover-scale-110:hover { transform: scale(1.1); }
.hover-scale-125:hover { transform: scale(1.25); }
.hover-lift:hover { transform: translateY(-4px); }
.hover-lift-lg:hover { transform: translateY(-8px); }

/* ============================================
   Pricing Table Component
   ============================================ */

.pricing-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-card {
    position: relative;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    text-align: center;
    transition: all 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.pricing-card.featured {
    border: 2px solid var(--primary-500);
    transform: scale(1.05);
    z-index: 1;
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-8px);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-4);
    background: var(--primary-500);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
}

.pricing-header {
    margin-bottom: var(--space-6);
}

.pricing-plan-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.pricing-plan-description {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

.pricing-price {
    margin-bottom: var(--space-6);
}

.pricing-amount {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-1);
}

.pricing-currency {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--gray-500);
    margin-top: var(--space-2);
}

.pricing-value {
    font-size: 4rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1;
}

.pricing-period {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    margin-top: var(--space-2);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8);
    text-align: left;
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
}

.pricing-feature:last-child {
    border-bottom: none;
}

.pricing-feature-icon {
    width: 20px;
    height: 20px;
    color: var(--success);
    flex-shrink: 0;
}

.pricing-feature.disabled {
    color: var(--gray-400);
}

.pricing-feature.disabled .pricing-feature-icon {
    color: var(--gray-300);
}

.pricing-cta {
    width: 100%;
}

/* Pricing Toggle (Monthly/Annual) */
.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.pricing-toggle-label {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.pricing-toggle-label.active {
    color: var(--gray-900);
    font-weight: 600;
}

.pricing-savings {
    padding: var(--space-1) var(--space-2);
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
}

/* ============================================
   Feature Comparison Table
   ============================================ */

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--gray-100);
}

.comparison-table th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-900);
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.comparison-table th.highlight {
    background: var(--primary-50);
    color: var(--primary-700);
}

.comparison-table td.highlight {
    background: var(--primary-50);
}

.comparison-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border-radius: var(--radius-full);
}

.comparison-cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--gray-100);
    color: var(--gray-400);
    border-radius: var(--radius-full);
}

.comparison-category {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-700);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
}

/* ============================================
   Testimonial Cards
   ============================================ */

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
}

.testimonial-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    position: relative;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: var(--space-4);
    left: var(--space-6);
    font-size: 4rem;
    font-family: Georgia, serif;
    color: var(--primary-100);
    line-height: 1;
}

.testimonial-content {
    position: relative;
    z-index: 1;
    font-size: var(--font-size-base);
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: var(--space-6);
    padding-top: var(--space-4);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.testimonial-info {
    flex: 1;
}

.testimonial-name {
    font-weight: 600;
    color: var(--gray-900);
}

.testimonial-role {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

.testimonial-rating {
    display: flex;
    gap: 2px;
    margin-top: var(--space-4);
}

.testimonial-star {
    width: 16px;
    height: 16px;
    color: #fbbf24;
}

.testimonial-star.empty {
    color: var(--gray-300);
}

/* Testimonial with Video */
.testimonial-video {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
    aspect-ratio: 16/9;
    background: var(--gray-900);
}

.testimonial-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.testimonial-video-play:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

body.dark-mode .testimonial-video-play {
    background: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Featured Testimonial */
.testimonial-featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

/* ============================================
   Animated Stat Counters
   ============================================ */

.stat-counter {
    text-align: center;
    padding: var(--space-6);
}

.stat-counter-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
    transition: all 0.3s ease;
}

.stat-counter-value.counting {
    animation: countPulse 0.3s ease;
}

@keyframes countPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.stat-counter-label {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    margin-top: var(--space-2);
}

.stat-counter-suffix {
    font-size: 1.5rem;
    color: var(--gray-500);
}

.stat-counter-prefix {
    font-size: 1.5rem;
    color: var(--gray-500);
}

/* Counter with Icon */
.stat-counter-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-100);
    color: var(--primary-500);
    border-radius: var(--radius-lg);
}

/* Counter Grid */
.stat-counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-6);
}

/* ============================================
   Star Rating Component
   ============================================ */

.star-rating {
    display: inline-flex;
    gap: 4px;
}

.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.star-rating-input input {
    display: none;
}

.star-rating-input label {
    cursor: pointer;
    color: var(--gray-300);
    transition: all 0.2s ease;
}

.star-rating-input label svg {
    width: 24px;
    height: 24px;
}

.star-rating-input label:hover,
.star-rating-input label:hover ~ label,
.star-rating-input input:checked ~ label {
    color: #fbbf24;
    transform: scale(1.1);
}

/* Star with Fill Animation */
.star-fill-animate {
    animation: starFill 0.3s ease;
}

@keyframes starFill {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* Half Star */
.star-half {
    position: relative;
}

.star-half::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

/* Rating Display */
.rating-display {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.rating-value {
    font-weight: 600;
    color: var(--gray-900);
}

.rating-count {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

/* Rating Breakdown */
.rating-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rating-breakdown-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.rating-breakdown-label {
    width: 40px;
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.rating-breakdown-bar {
    flex: 1;
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.rating-breakdown-fill {
    height: 100%;
    background: #fbbf24;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.rating-breakdown-count {
    width: 40px;
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    text-align: right;
}

/* ============================================
   Comment Thread Styling
   ============================================ */

.comment-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.comment {
    display: flex;
    gap: var(--space-3);
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.comment-body {
    flex: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.comment-author {
    font-weight: 600;
    color: var(--gray-900);
}

.comment-author.op {
    color: var(--primary-500);
}

.comment-badge {
    padding: 2px var(--space-2);
    background: var(--primary-100);
    color: var(--primary-700);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
}

.comment-time {
    font-size: var(--font-size-xs);
    color: var(--gray-400);
}

.comment-content {
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    line-height: 1.6;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.comment-action {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    cursor: pointer;
    transition: color 0.15s ease;
}

.comment-action:hover {
    color: var(--gray-700);
}

.comment-action.liked {
    color: var(--error);
}

/* Nested Comments */
.comment-replies {
    margin-top: var(--space-4);
    margin-left: var(--space-6);
    padding-left: var(--space-4);
    border-left: 2px solid var(--gray-200);
}

.comment-replies .comment-avatar {
    width: 32px;
    height: 32px;
}

/* Comment Form */
.comment-form {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.comment-input {
    flex: 1;
    padding: var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    resize: none;
    min-height: 80px;
}

/* ============================================
   Chat Bubble Enhancements
   ============================================ */

.chat-bubble {
    max-width: 75%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    position: relative;
    animation: chatBubbleIn 0.3s ease;
}

@keyframes chatBubbleIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-bubble-sent {
    background: var(--primary-500);
    color: white;
    border-bottom-right-radius: var(--radius-sm);
    margin-left: auto;
}

.chat-bubble-received {
    background: var(--gray-100);
    color: var(--gray-900);
    border-bottom-left-radius: var(--radius-sm);
}

/* Typing Indicator */
.chat-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    background: var(--gray-100);
    border-radius: var(--radius-xl);
    width: fit-content;
}

.chat-typing-dot {
    width: 8px;
    height: 8px;
    background: var(--gray-400);
    border-radius: var(--radius-full);
    animation: typingBounce 1.4s infinite ease-in-out;
}

.chat-typing-dot:nth-child(1) { animation-delay: 0s; }
.chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-8px); }
}

/* Delivery Status */
.chat-status {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--gray-400);
    margin-top: var(--space-1);
}

.chat-status-icon {
    width: 14px;
    height: 14px;
}

.chat-status.sent .chat-status-icon { color: var(--gray-400); }
.chat-status.delivered .chat-status-icon { color: var(--gray-500); }
.chat-status.read .chat-status-icon { color: var(--primary-500); }

/* Reactions */
.chat-reactions {
    display: flex;
    gap: 4px;
    margin-top: var(--space-1);
}

.chat-reaction {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all 0.15s ease;
}

.chat-reaction:hover {
    background: var(--gray-50);
    transform: scale(1.1);
}

.chat-reaction.active {
    background: var(--primary-50);
    border-color: var(--primary-200);
}

/* ============================================
   Notification Bell Animation
   ============================================ */

.notification-bell {
    position: relative;
    cursor: pointer;
}

.notification-bell-icon {
    width: 24px;
    height: 24px;
    color: var(--gray-600);
    transition: color 0.2s ease;
}

.notification-bell:hover .notification-bell-icon {
    color: var(--gray-900);
}

.notification-bell.has-notifications .notification-bell-icon {
    animation: bellSwing 0.5s ease;
}

@keyframes bellSwing {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-15deg); }
    60% { transform: rotate(10deg); }
    80% { transform: rotate(-10deg); }
}

.notification-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--error);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badgePop 0.3s ease;
}

@keyframes badgePop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.notification-bell-badge.pulse {
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* ============================================
   Drag-and-Drop Styling
   ============================================ */

.draggable-item {
    cursor: grab;
    transition: all 0.2s ease;
}

.draggable-item:hover {
    background: var(--gray-50);
}

.draggable-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
    z-index: 100;
}

.draggable-item .drag-handle {
    color: var(--gray-400);
    cursor: grab;
}

.draggable-item:hover .drag-handle {
    color: var(--gray-600);
}

/* Drop Zone */
.drop-zone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: all 0.2s ease;
}

.drop-zone.drag-over {
    border-color: var(--primary-500);
    background: var(--primary-50);
    animation: dropZonePulse 1s ease infinite;
}

@keyframes dropZonePulse {
    0%, 100% { border-color: var(--primary-500); }
    50% { border-color: var(--primary-300); }
}

.drop-zone-placeholder {
    text-align: center;
    color: var(--gray-500);
    padding: var(--space-8);
}

/* Sortable List */
.sortable-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sortable-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.sortable-item.ghost {
    opacity: 0.4;
    background: var(--primary-50);
    border-style: dashed;
}

/* ============================================
   Product Card Enhancements
   ============================================ */

.product-card {
    position: relative;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.product-card-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-card-image img {
    transform: scale(1.1);
}

.product-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover .product-card-overlay {
    opacity: 1;
}

.product-card-overlay-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: none;
    border-radius: var(--radius-full);
    color: var(--gray-700);
    cursor: pointer;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s ease;
}

.product-card:hover .product-card-overlay-btn {
    transform: translateY(0);
    opacity: 1;
}

.product-card:hover .product-card-overlay-btn:nth-child(2) {
    transition-delay: 0.1s;
}

.product-card:hover .product-card-overlay-btn:nth-child(3) {
    transition-delay: 0.2s;
}

.product-card-overlay-btn:hover {
    background: var(--primary-500);
    color: white;
}

body.dark-mode .product-card-overlay-btn {
    background: #374151;
    color: #d1d5db;
}

/* Product Badges */
.product-badges {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.product-badge {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-md);
}

.product-badge-sale {
    background: var(--error);
    color: white;
}

.product-badge-new {
    background: var(--success);
    color: white;
}

.product-badge-hot {
    background: #f97316;
    color: white;
}

/* Product Info */
.product-card-body {
    padding: var(--space-4);
}

.product-card-category {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.product-card-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.product-card-price {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.product-card-price-current {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--gray-900);
}

.product-card-price-original {
    font-size: var(--font-size-sm);
    color: var(--gray-400);
    text-decoration: line-through;
}

/* ============================================
   Shopping Cart Animations
   ============================================ */

.cart-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    transition: all 0.3s ease;
}

.cart-item.removing {
    animation: cartItemRemove 0.3s ease forwards;
}

@keyframes cartItemRemove {
    to {
        opacity: 0;
        transform: translateX(100px);
        max-height: 0;
        padding: 0;
        margin: 0;
    }
}

.cart-item.adding {
    animation: cartItemAdd 0.4s ease;
}

@keyframes cartItemAdd {
    0% { opacity: 0; transform: translateY(-20px); background: var(--success); }
    50% { background: rgba(16, 185, 129, 0.1); }
    100% { opacity: 1; transform: translateY(0); background: transparent; }
}

.cart-item-image {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

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

.cart-item-name {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}

.cart-item-meta {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

.cart-item-price {
    font-weight: 600;
    color: var(--gray-900);
}

.cart-item-quantity-updated {
    animation: quantityPulse 0.3s ease;
}

@keyframes quantityPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); color: var(--primary-500); }
}

/* Cart Total */
.cart-total {
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.cart-total-value.updating {
    animation: totalUpdate 0.5s ease;
}

@keyframes totalUpdate {
    0% { color: var(--primary-500); transform: scale(1.1); }
    100% { color: var(--gray-900); transform: scale(1); }
}

/* ============================================
   Wishlist Button States
   ============================================ */

.wishlist-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s ease;
}

.wishlist-btn:hover {
    border-color: var(--error);
    color: var(--error);
}

.wishlist-btn.active {
    background: var(--error);
    border-color: var(--error);
    color: white;
    animation: heartPop 0.4s ease;
}

@keyframes heartPop {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.9); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.wishlist-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.wishlist-btn:hover svg {
    transform: scale(1.1);
}

/* Heart Fill Animation */
.wishlist-heart-fill {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.wishlist-btn.active .wishlist-heart-fill::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 70%);
    animation: heartGlow 0.5s ease forwards;
}

@keyframes heartGlow {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

/* ============================================
   Stock & Shipping Indicators
   ============================================ */

.stock-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
}

.stock-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
}

.stock-in-stock .stock-dot {
    background: var(--success);
}

.stock-low .stock-dot {
    background: var(--warning);
    animation: stockPulse 1.5s infinite;
}

.stock-out .stock-dot {
    background: var(--error);
}

@keyframes stockPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.stock-in-stock { color: var(--success); }
.stock-low { color: var(--warning); }
.stock-out { color: var(--error); }

/* Stock Level Bar */
.stock-level-bar {
    width: 100%;
    height: 4px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.stock-level-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.stock-level-fill.high { background: var(--success); }
.stock-level-fill.medium { background: var(--warning); }
.stock-level-fill.low { background: var(--error); }

/* Shipping Badges */
.shipping-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-md);
    animation: badgeSlideIn 0.3s ease;
}

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

.shipping-badge-free {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.shipping-badge-express {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-500);
}

.shipping-badge-express::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============================================
   Discount & Price Styling
   ============================================ */

.discount-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background: var(--error);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 700;
    border-radius: var(--radius-md);
    animation: discountPop 0.3s ease;
}

@keyframes discountPop {
    0% { transform: scale(0) rotate(-10deg); }
    50% { transform: scale(1.1) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}

.discount-badge-lg {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-lg);
}

/* Price Strikethrough */
.price-original {
    position: relative;
    color: var(--gray-400);
}

.price-original::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background: var(--error);
    animation: strikeThrough 0.3s ease forwards;
}

@keyframes strikeThrough {
    from { width: 0; }
    to { width: 100%; }
}

.price-current {
    font-weight: 700;
    color: var(--error);
}

/* Savings Display */
.savings-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
}

/* Bundle Display */
.bundle-display {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--gray-300);
}

.bundle-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.bundle-item-image {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.bundle-plus {
    font-size: var(--font-size-lg);
    color: var(--gray-400);
}

.bundle-equals {
    font-weight: 600;
    color: var(--gray-400);
}

.bundle-price {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--success);
}

/* ============================================
   Activity Timeline Animations
   ============================================ */

.timeline-animated .timeline-item {
    opacity: 0;
    animation: timelineSlideIn 0.5s ease forwards;
}

.timeline-animated .timeline-item:nth-child(1) { animation-delay: 0.1s; }
.timeline-animated .timeline-item:nth-child(2) { animation-delay: 0.2s; }
.timeline-animated .timeline-item:nth-child(3) { animation-delay: 0.3s; }
.timeline-animated .timeline-item:nth-child(4) { animation-delay: 0.4s; }
.timeline-animated .timeline-item:nth-child(5) { animation-delay: 0.5s; }

@keyframes timelineSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Timeline Connector Draw */
.timeline-connector-animated::before {
    animation: connectorDraw 0.5s ease forwards;
    animation-delay: inherit;
}

@keyframes connectorDraw {
    from { height: 0; }
    to { height: 100%; }
}

/* Timeline Dot Pulse */
.timeline-dot-new {
    animation: timelineDotPulse 2s infinite;
}

@keyframes timelineDotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
}

/* ============================================
   Kanban Board Styling
   ============================================ */

.kanban-board {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    padding: var(--space-4) 0;
}

.kanban-column {
    flex: 0 0 300px;
    background: var(--gray-100);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    max-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.kanban-column-title {
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.kanban-column-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-2);
    background: white;
    color: var(--gray-600);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
}

.kanban-cards {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.kanban-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    transition: all 0.2s ease;
}

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

.kanban-card.dragging {
    opacity: 0.5;
    transform: rotate(3deg);
}

.kanban-card-title {
    font-weight: 500;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.kanban-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* Kanban Empty State */
.kanban-empty {
    text-align: center;
    padding: var(--space-8);
    color: var(--gray-400);
    animation: fadeIn 0.3s ease;
}

/* Drop Indicator */
.kanban-drop-indicator {
    height: 4px;
    background: var(--primary-500);
    border-radius: var(--radius-full);
    margin: var(--space-1) 0;
    animation: dropIndicatorPulse 1s infinite;
}

@keyframes dropIndicatorPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   Leaderboard Styling
   ============================================ */

.leaderboard {
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.leaderboard-header {
    padding: var(--space-4);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.2s ease;
}

.leaderboard-item:hover {
    background: var(--gray-50);
}

.leaderboard-rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--gray-500);
    border-radius: var(--radius-full);
}

.leaderboard-rank.top-1 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
}

.leaderboard-rank.top-2 {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    color: white;
}

.leaderboard-rank.top-3 {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: white;
}

.leaderboard-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
}

.leaderboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
}

.leaderboard-name {
    font-weight: 600;
    color: var(--gray-900);
}

.leaderboard-score {
    font-weight: 700;
    color: var(--gray-900);
}

.leaderboard-score.updating {
    animation: scoreUpdate 0.5s ease;
}

@keyframes scoreUpdate {
    0% { transform: scale(1.2); color: var(--success); }
    100% { transform: scale(1); color: var(--gray-900); }
}

/* Position Change */
.leaderboard-change {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.leaderboard-change.up {
    color: var(--success);
}

.leaderboard-change.down {
    color: var(--error);
}

.leaderboard-change.same {
    color: var(--gray-400);
}

/* ============================================
   Page Indicator Dots
   ============================================ */

.page-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.page-dot {
    width: 8px;
    height: 8px;
    background: var(--gray-300);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-dot:hover {
    background: var(--gray-400);
}

.page-dot.active {
    background: var(--primary-500);
    transform: scale(1.25);
}

/* Animated Page Dots */
.page-dots-animated .page-dot.active {
    animation: dotActive 0.3s ease;
}

@keyframes dotActive {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1.25); }
}

/* Progress Dots */
.page-dots-progress .page-dot {
    width: 24px;
    border-radius: var(--radius-full);
}

.page-dots-progress .page-dot.active {
    background: var(--primary-500);
}

.page-dots-progress .page-dot.completed {
    background: var(--success);
}

/* Line Dots */
.page-dots-line .page-dot {
    width: 24px;
    height: 4px;
    border-radius: var(--radius-sm);
}

/* ============================================
   Scroll Spy & TOC Styling
   ============================================ */

.toc {
    position: sticky;
    top: var(--space-6);
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--gray-200);
}

.toc-item {
    position: relative;
}

.toc-link {
    display: block;
    padding: var(--space-2) var(--space-4);
    color: var(--gray-600);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
    margin-left: -2px;
}

.toc-link:hover {
    color: var(--gray-900);
    background: var(--gray-50);
}

.toc-link.active {
    color: var(--primary-500);
    border-left-color: var(--primary-500);
    background: var(--primary-50);
    font-weight: 500;
}

/* Nested TOC */
.toc-nested {
    padding-left: var(--space-4);
}

.toc-nested .toc-link {
    font-size: var(--font-size-xs);
}

/* Scroll Progress */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gray-200);
    z-index: 1000;
}

.scroll-progress-bar {
    height: 100%;
    background: var(--primary-500);
    transition: width 0.1s ease;
}

/* ============================================
   Responsive Utilities
   ============================================ */

/* Aspect Ratios */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-landscape { aspect-ratio: 4 / 3; }
.aspect-wide { aspect-ratio: 21 / 9; }
.aspect-golden { aspect-ratio: 1.618 / 1; }

/* Object Fit */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.object-scale-down { object-fit: scale-down; }
.object-none { object-fit: none; }

/* Object Position */
.object-center { object-position: center; }
.object-top { object-position: top; }
.object-bottom { object-position: bottom; }
.object-left { object-position: left; }
.object-right { object-position: right; }

/* Visibility */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Show/Hide on Hover */
.show-on-hover { opacity: 0; transition: opacity 0.2s ease; }
.group:hover .show-on-hover { opacity: 1; }
.hide-on-hover { opacity: 1; transition: opacity 0.2s ease; }
.group:hover .hide-on-hover { opacity: 0; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Pointer Events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* User Select */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-wait { cursor: wait; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

/* ============================================
   Accessibility Enhancements
   ============================================ */

/* Focus Ring Variants */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-100);
}

.focus-ring-thick:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--primary-200);
}

.focus-ring-offset:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-500);
}

.focus-ring-inset:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--primary-500);
}

/* Focus Visible */
.focus-visible:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.focus-visible:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-500);
}

/* Skip Link */
.skip-link {
    position: fixed;
    top: -100%;
    left: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--gray-900);
    color: white;
    font-weight: 600;
    border-radius: var(--radius-lg);
    z-index: 10000;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: var(--space-4);
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* High Contrast Mode */
@media (prefers-contrast: more) {
    :root {
        --gray-100: #e5e5e5;
        --gray-200: #cccccc;
        --gray-300: #999999;
        --gray-400: #666666;
        --gray-500: #333333;
        --gray-600: #222222;
        --gray-700: #111111;
        --gray-800: #0a0a0a;
        --gray-900: #000000;
    }

    .btn, .card, .modal-dialog {
        border-width: 2px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-bounce,
    .animate-heartbeat,
    .animate-jello,
    .animate-wobble,
    .animate-tada,
    .animate-swing,
    .animate-rubberBand,
    .glow-pulse,
    .glow-ring {
        animation: none;
    }
}

/* ============================================
   Dark Mode - Fourth Iteration Components
   ============================================ */

/* Dark Mode - Pricing */
.dark-mode .pricing-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .pricing-plan-name {
    color: var(--gray-100);
}

.dark-mode .pricing-value {
    color: var(--gray-100);
}

.dark-mode .pricing-feature {
    color: var(--gray-300);
    border-bottom-color: var(--gray-700);
}

/* Dark Mode - Comparison Table */
.dark-mode .comparison-table {
    background: var(--gray-800);
}

.dark-mode .comparison-table th {
    background: var(--gray-750);
    color: var(--gray-100);
}

.dark-mode .comparison-table td {
    border-bottom-color: var(--gray-700);
}

.dark-mode .comparison-table th.highlight,
.dark-mode .comparison-table td.highlight {
    background: rgba(59, 130, 246, 0.1);
}

/* Dark Mode - Testimonials */
.dark-mode .testimonial-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .testimonial-card::before {
    color: var(--gray-700);
}

.dark-mode .testimonial-content {
    color: var(--gray-300);
}

.dark-mode .testimonial-name {
    color: var(--gray-100);
}

/* Dark Mode - Stat Counters */
.dark-mode .stat-counter-value {
    color: var(--gray-100);
}

.dark-mode .stat-counter-icon {
    background: rgba(59, 130, 246, 0.2);
}

/* Dark Mode - Star Rating */
.dark-mode .star-rating-input label {
    color: var(--gray-600);
}

.dark-mode .rating-breakdown-bar {
    background: var(--gray-700);
}

/* Dark Mode - Comments */
.dark-mode .comment-author {
    color: var(--gray-100);
}

.dark-mode .comment-content {
    color: var(--gray-300);
}

.dark-mode .comment-replies {
    border-left-color: var(--gray-700);
}

.dark-mode .comment-input {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-200);
}

/* Dark Mode - Chat */
.dark-mode .chat-bubble-received {
    background: var(--gray-700);
    color: var(--gray-100);
}

.dark-mode .chat-typing {
    background: var(--gray-700);
}

.dark-mode .chat-typing-dot {
    background: var(--gray-500);
}

.dark-mode .chat-reaction {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

/* Dark Mode - Notification Bell */
.dark-mode .notification-bell-icon {
    color: var(--gray-400);
}

.dark-mode .notification-bell:hover .notification-bell-icon {
    color: var(--gray-200);
}

/* Dark Mode - Drag and Drop */
.dark-mode .draggable-item:hover {
    background: var(--gray-750);
}

.dark-mode .drop-zone {
    border-color: var(--gray-600);
}

.dark-mode .drop-zone.drag-over {
    border-color: var(--primary-400);
    background: rgba(59, 130, 246, 0.1);
}

.dark-mode .sortable-item {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

/* Dark Mode - Product Card */
.dark-mode .product-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .product-card-title {
    color: var(--gray-100);
}

.dark-mode .product-card-price-current {
    color: var(--gray-100);
}

/* Dark Mode - Cart */
.dark-mode .cart-item {
    border-bottom-color: var(--gray-700);
}

.dark-mode .cart-item-name {
    color: var(--gray-100);
}

.dark-mode .cart-total {
    background: var(--gray-750);
}

/* Dark Mode - Wishlist */
.dark-mode .wishlist-btn {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-400);
}

/* Dark Mode - Stock */
.dark-mode .stock-level-bar {
    background: var(--gray-700);
}

/* Dark Mode - Kanban */
.dark-mode .kanban-column {
    background: var(--gray-800);
}

.dark-mode .kanban-column-title {
    color: var(--gray-100);
}

.dark-mode .kanban-column-count {
    background: var(--gray-700);
    color: var(--gray-300);
}

.dark-mode .kanban-card {
    background: var(--gray-750);
}

.dark-mode .kanban-card-title {
    color: var(--gray-100);
}

/* Dark Mode - Leaderboard */
.dark-mode .leaderboard {
    background: var(--gray-800);
}

.dark-mode .leaderboard-header {
    background: var(--gray-750);
    border-bottom-color: var(--gray-700);
}

.dark-mode .leaderboard-item {
    border-bottom-color: var(--gray-700);
}

.dark-mode .leaderboard-item:hover {
    background: var(--gray-750);
}

.dark-mode .leaderboard-name {
    color: var(--gray-100);
}

.dark-mode .leaderboard-score {
    color: var(--gray-100);
}

/* Dark Mode - Page Dots */
.dark-mode .page-dot {
    background: var(--gray-600);
}

.dark-mode .page-dot:hover {
    background: var(--gray-500);
}

/* Dark Mode - TOC */
.dark-mode .toc-list {
    border-left-color: var(--gray-700);
}

.dark-mode .toc-link {
    color: var(--gray-400);
}

.dark-mode .toc-link:hover {
    color: var(--gray-200);
    background: var(--gray-750);
}

.dark-mode .toc-link.active {
    color: var(--primary-400);
    background: rgba(59, 130, 246, 0.1);
}

/* Dark Mode - Scroll Progress */
.dark-mode .scroll-progress {
    background: var(--gray-700);
}

/* Dark Mode - Skip Link */
.dark-mode .skip-link {
    background: var(--gray-100);
    color: var(--gray-900);
}

/* ============================================
   Input Group with Addons
   ============================================ */

.input-group {
    display: flex;
    align-items: stretch;
}

.input-group .form-input {
    flex: 1;
    min-width: 0;
    border-radius: 0;
}

.input-group .form-input:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.input-group .form-input:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.input-group .form-input:only-child {
    border-radius: var(--radius-lg);
}

.input-group-addon {
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.input-group-addon:first-child {
    border-right: none;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.input-group-addon:last-child {
    border-left: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* Input Group with Button */
.input-group .btn {
    border-radius: 0;
    border-left: none;
}

.input-group .btn:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.input-group .btn:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border-right: none;
    border-left: 1px solid;
}

/* Input Group Sizes */
.input-group-sm .form-input,
.input-group-sm .input-group-addon {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
}

.input-group-lg .form-input,
.input-group-lg .input-group-addon {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
}

/* Currency Input */
.input-currency .input-group-addon {
    font-weight: 600;
    min-width: 2.5rem;
    justify-content: center;
}

/* Unit Input */
.input-unit .input-group-addon {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   Form Field States
   ============================================ */

/* Loading State */
.form-field-loading {
    position: relative;
}

.form-field-loading .form-input {
    padding-right: 2.5rem;
    pointer-events: none;
    opacity: 0.7;
}

.form-field-loading::after {
    content: '';
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--primary-500);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

/* Success State with Animation */
.form-field-success .form-input {
    border-color: var(--success);
    animation: successPulse 0.5s ease;
}

@keyframes successPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.form-field-success::after {
    content: '';
    position: absolute;
    right: var(--space-3);
    top: 50%;
    width: 16px;
    height: 16px;
    background: var(--success);
    border-radius: var(--radius-full);
    transform: translateY(-50%) scale(0);
    animation: checkmarkPop 0.3s ease 0.2s forwards;
}

@keyframes checkmarkPop {
    0% { transform: translateY(-50%) scale(0); }
    50% { transform: translateY(-50%) scale(1.2); }
    100% { transform: translateY(-50%) scale(1); }
}

/* Error State with Shake */
.form-field-error .form-input {
    border-color: var(--error);
    animation: errorShake 0.4s ease;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* Autofill Styling */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--primary-50) inset;
    -webkit-text-fill-color: var(--gray-900);
    border-color: var(--primary-300);
    transition: background-color 5000s ease-in-out 0s;
}

/* Placeholder Animation */
.form-input-animated::placeholder {
    transition: all 0.3s ease;
}

.form-input-animated:focus::placeholder {
    opacity: 0;
    transform: translateX(10px);
}

/* Required Field Indicator */
.form-label.required::after {
    content: '*';
    color: var(--error);
    margin-left: var(--space-1);
}

.form-label.optional::after {
    content: '(optional)';
    color: var(--gray-400);
    font-size: var(--font-size-xs);
    font-weight: 400;
    margin-left: var(--space-2);
}

/* ============================================
   Inline Form Layouts
   ============================================ */

.form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
}

.form-inline .form-group {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
}

.form-inline .btn {
    flex-shrink: 0;
}

/* Horizontal Form */
.form-horizontal .form-group {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-4);
    align-items: center;
}

.form-horizontal .form-label {
    text-align: right;
    margin-bottom: 0;
}

.form-horizontal .form-helper,
.form-horizontal .form-error {
    grid-column: 2;
}

/* Fieldset Styling */
.fieldset {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.fieldset-legend {
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-700);
    background: white;
    margin-left: var(--space-3);
}

/* Form Sections */
.form-section {
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--gray-200);
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.form-section-description {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    margin-bottom: var(--space-4);
}

/* Grouped Form Controls */
.form-group-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
}

.form-group-connected {
    display: flex;
}

.form-group-connected .form-input {
    border-radius: 0;
}

.form-group-connected .form-input:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.form-group-connected .form-input:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-left: none;
}

.form-group-connected .form-separator {
    display: flex;
    align-items: center;
    padding: 0 var(--space-2);
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-left: none;
    border-right: none;
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

/* ============================================
   Button State Enhancements
   ============================================ */

/* Button with Inline Spinner */
.btn-loading-inline {
    position: relative;
    pointer-events: none;
}

.btn-loading-inline .btn-text {
    opacity: 0.7;
}

.btn-loading-inline .btn-spinner {
    margin-right: var(--space-2);
}

.btn-loading-inline .btn-dots::after {
    content: '';
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* Button Success State */
.btn-success-state {
    background: var(--success) !important;
    border-color: var(--success) !important;
    pointer-events: none;
}

.btn-success-state .btn-icon {
    animation: checkmarkBounce 0.5s ease;
}

@keyframes checkmarkBounce {
    0% { transform: scale(0) rotate(-45deg); }
    50% { transform: scale(1.3) rotate(0); }
    100% { transform: scale(1) rotate(0); }
}

/* Button Error State */
.btn-error-state {
    background: var(--error) !important;
    border-color: var(--error) !important;
    animation: btnErrorShake 0.4s ease;
}

@keyframes btnErrorShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* Split Button */
.btn-split {
    display: inline-flex;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.btn-split .btn-main {
    border-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-split .btn-dropdown {
    border-radius: 0;
    padding: var(--space-2);
    min-width: auto;
}

.btn-split .btn-dropdown svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.btn-split.open .btn-dropdown svg {
    transform: rotate(180deg);
}

/* Button Icon Animations */
.btn-icon-animate:hover .btn-icon {
    animation: iconBounce 0.4s ease;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.btn-icon-rotate:hover .btn-icon {
    animation: iconRotate 0.4s ease;
}

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

.btn-icon-slide:hover .btn-icon {
    animation: iconSlide 0.3s ease;
}

@keyframes iconSlide {
    0% { transform: translateX(0); }
    50% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

/* Button with Progress */
.btn-progress {
    position: relative;
    overflow: hidden;
}

.btn-progress-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    transition: width 0.3s ease;
}

.btn-progress-text {
    position: relative;
    z-index: 1;
}

/* Icon-Only Button Sizes */
.btn-icon-xs {
    width: 24px;
    height: 24px;
    padding: 0;
}

.btn-icon-xs svg {
    width: 12px;
    height: 12px;
}

.btn-icon-sm {
    width: 32px;
    height: 32px;
    padding: 0;
}

.btn-icon-sm svg {
    width: 14px;
    height: 14px;
}

.btn-icon-lg {
    width: 48px;
    height: 48px;
    padding: 0;
}

.btn-icon-lg svg {
    width: 24px;
    height: 24px;
}

/* Ripple Effect */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

.btn-ripple:active::after {
    transform: scale(0);
    opacity: 1;
    transition: 0s;
}

/* ============================================
   Table Enhancements
   ============================================ */

/* Expandable Rows */
.table-expandable tbody tr.expandable {
    cursor: pointer;
}

.table-expandable .expand-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.table-expandable .expand-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.table-expandable tr.expanded .expand-icon {
    transform: rotate(90deg);
}

.table-expandable .expand-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.table-expandable tr.expanded + tr .expand-content {
    max-height: 500px;
}

.expand-row {
    background: var(--gray-50);
}

.expand-row td {
    padding: 0 !important;
}

.expand-inner {
    padding: var(--space-4);
    animation: expandFade 0.3s ease;
}

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

/* Row Grouping */
.table-grouped .group-header {
    background: var(--gray-100);
    font-weight: 600;
}

.table-grouped .group-header td {
    padding: var(--space-3) var(--space-4);
}

.table-grouped .group-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.table-grouped .group-count {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    font-weight: 400;
}

/* Table Filter UI */
.table-filter-header th {
    position: relative;
}

.table-filter-icon {
    margin-left: var(--space-1);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.table-filter-icon:hover,
.table-filter-icon.active {
    opacity: 1;
}

.table-filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.table-filter-icon.active + .table-filter-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Column Visibility */
.table-column-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.table-column-toggle-count {
    padding: var(--space-1) var(--space-2);
    background: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

/* Table Density */
.table-density-compact td,
.table-density-compact th {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
}

.table-density-comfortable td,
.table-density-comfortable th {
    padding: var(--space-3) var(--space-4);
}

.table-density-spacious td,
.table-density-spacious th {
    padding: var(--space-4) var(--space-5);
}

/* Density Toggle UI */
.table-density-toggle {
    display: inline-flex;
    background: var(--gray-100);
    border-radius: var(--radius-md);
    padding: 2px;
}

.table-density-btn {
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s ease;
}

.table-density-btn:hover {
    color: var(--gray-700);
}

.table-density-btn.active {
    background: white;
    color: var(--gray-900);
    box-shadow: var(--shadow-sm);
}

/* Fixed Header Scroll Indicator */
.table-scroll-container {
    max-height: 400px;
    overflow-y: auto;
}

.table-scroll-container.scrolled thead {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Row Hover Actions */
.table-row-actions {
    opacity: 0;
    transition: opacity 0.2s ease;
}

tr:hover .table-row-actions {
    opacity: 1;
}

.table-row-actions-slide {
    transform: translateX(10px);
    transition: all 0.2s ease;
}

tr:hover .table-row-actions-slide {
    transform: translateX(0);
}

/* Batch Selection Toolbar */
.table-batch-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    animation: slideDown 0.3s ease;
}

.table-batch-count {
    font-weight: 600;
    color: var(--primary-700);
}

.table-batch-count-value {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    animation: countPulse 0.3s ease;
}

/* ============================================
   Bottom Sheet Mobile Drawer
   ============================================ */

.bottom-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.bottom-sheet-overlay.open {
    opacity: 1;
    visibility: visible;
}

.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    z-index: 1000;
    max-height: 90vh;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.bottom-sheet.open {
    transform: translateY(0);
}

.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--gray-300);
    border-radius: var(--radius-full);
    margin: var(--space-3) auto;
    cursor: grab;
}

.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--gray-200);
}

.bottom-sheet-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-900);
}

.bottom-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
}

.bottom-sheet-footer {
    padding: var(--space-4);
    border-top: 1px solid var(--gray-200);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
}

/* Bottom Sheet Sizes */
.bottom-sheet-sm {
    max-height: 40vh;
}

.bottom-sheet-lg {
    max-height: 85vh;
}

.bottom-sheet-full {
    max-height: 100vh;
    border-radius: 0;
}

/* Nested Modals */
.modal-nested {
    z-index: 1002;
}

.modal-nested .modal-backdrop {
    z-index: 1001;
}

/* Modal with Wizard */
.modal-wizard .modal-body {
    padding: 0;
}

.modal-wizard-steps {
    padding: var(--space-4);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.modal-wizard-content {
    padding: var(--space-6);
    min-height: 300px;
}

.modal-wizard-footer {
    display: flex;
    justify-content: space-between;
}

/* ============================================
   Notification Enhancements
   ============================================ */

/* Stacked Toasts */
.toast-stack {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2);
    z-index: 1000;
}

.toast-stack .toast {
    transition: all 0.3s ease;
}

.toast-stack .toast:not(:last-child) {
    transform: scale(0.95);
    opacity: 0.9;
}

.toast-stack:hover .toast:not(:last-child) {
    transform: scale(1);
    opacity: 1;
}

/* Toast with Multiple Actions */
.toast-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.toast-action-primary {
    padding: var(--space-1) var(--space-3);
    background: white;
    color: var(--gray-900);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.toast-action-primary:hover {
    background: var(--gray-100);
}

body.dark-mode .toast-action-primary {
    background: #374151;
    color: #d1d5db;
}

body.dark-mode .toast-action-primary:hover {
    background: #4b5563;
}

.toast-action-secondary {
    padding: var(--space-1) var(--space-3);
    background: transparent;
    color: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: 1px solid currentColor;
    border-radius: var(--radius-md);
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.15s ease;
}

.toast-action-secondary:hover {
    opacity: 1;
}

/* Toast with Progress */
.toast-progress {
    position: relative;
    overflow: hidden;
}

.toast-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    transition: width 0.1s linear;
}

/* Toast Variants */
.toast-minimal {
    padding: var(--space-3) var(--space-4);
    background: var(--gray-900);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
}

.toast-detailed {
    padding: var(--space-4);
    min-width: 320px;
}

.toast-detailed-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.toast-detailed-title {
    font-weight: 600;
}

.toast-detailed-time {
    font-size: var(--font-size-xs);
    opacity: 0.7;
    margin-left: auto;
}

/* Inline Alert Dismiss Animation */
.alert-dismissing {
    animation: alertDismiss 0.3s ease forwards;
}

@keyframes alertDismiss {
    to {
        opacity: 0;
        transform: translateX(20px);
        max-height: 0;
        padding: 0;
        margin: 0;
    }
}

/* Notification Badge Counter */
.notification-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--error);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
}

.notification-counter.updating {
    animation: counterBump 0.3s ease;
}

@keyframes counterBump {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* ============================================
   Cascading Menus
   ============================================ */

.menu-cascading {
    position: relative;
}

.menu-cascading .submenu {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 180px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.2s ease;
}

body.dark-mode .menu-cascading .submenu {
    background: #374151;
    border-color: #4b5563;
}

.menu-item-submenu:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.menu-item-submenu > .menu-item-content::after {
    content: '›';
    margin-left: auto;
    font-size: var(--font-size-lg);
    color: var(--gray-400);
}

/* Menu with Search */
.menu-searchable {
    padding-top: 0;
}

.menu-search {
    position: sticky;
    top: 0;
    padding: var(--space-2);
    background: white;
    border-bottom: 1px solid var(--gray-100);
}

body.dark-mode .menu-search {
    background: #374151;
    border-bottom-color: #4b5563;
}

.menu-search-input {
    width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.menu-search-input:focus {
    outline: none;
    border-color: var(--primary-500);
}

/* Menu Sections */
.menu-section {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--gray-100);
}

.menu-section:last-child {
    border-bottom: none;
}

.menu-section-title {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Recent Items */
.menu-recent {
    background: var(--gray-50);
}

.menu-recent-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.menu-recent-item .menu-recent-icon {
    color: var(--gray-400);
}

/* Keyboard Hints */
.menu-item-shortcut {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--gray-400);
    font-family: monospace;
}

/* Favorites */
.menu-favorite-btn {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.menu-item:hover .menu-favorite-btn {
    opacity: 1;
}

.menu-favorite-btn.active {
    opacity: 1;
    color: #fbbf24;
}

/* ============================================
   Card Enhancements
   ============================================ */

/* Card with Tabs */
.card-tabbed .card-header {
    padding-bottom: 0;
    border-bottom: none;
}

.card-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
    margin: 0 calc(-1 * var(--space-4));
    padding: 0 var(--space-4);
}

.card-tab {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-500);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.card-tab:hover {
    color: var(--gray-700);
}

.card-tab.active {
    color: var(--primary-500);
    border-bottom-color: var(--primary-500);
}

.card-tab-content {
    display: none;
    padding-top: var(--space-4);
}

.card-tab-content.active {
    display: block;
    animation: tabFadeIn 0.3s ease;
}

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

/* Flip Card */
.flip-card {
    perspective: 1000px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner,
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* Expandable Card */
.card-expandable {
    transition: all 0.3s ease;
}

.card-expandable.expanded {
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 100;
    max-height: none;
}

.card-expand-btn {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.card-expand-btn:hover {
    background: var(--gray-200);
}

/* Card Carousel */
.card-carousel {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-2);
    margin: calc(-1 * var(--space-2));
}

.card-carousel::-webkit-scrollbar {
    display: none;
}

.card-carousel > .card {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.card-carousel-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* ============================================
   Data Display Components
   ============================================ */

/* Key-Value Pairs */
.kv-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.kv-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--gray-100);
}

.kv-item:last-child {
    border-bottom: none;
}

.kv-key {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    flex-shrink: 0;
    margin-right: var(--space-4);
}

.kv-value {
    font-size: var(--font-size-sm);
    color: var(--gray-900);
    text-align: right;
    word-break: break-word;
}

/* Horizontal KV */
.kv-horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.kv-horizontal .kv-item {
    flex-direction: column;
    border-bottom: none;
    padding: 0;
}

.kv-horizontal .kv-value {
    text-align: left;
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-top: var(--space-1);
}

/* Definition List */
.dl-styled {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-4);
}

.dl-styled dt {
    font-weight: 600;
    color: var(--gray-700);
}

.dl-styled dd {
    color: var(--gray-600);
    margin: 0;
}

/* Property Table */
.property-table {
    width: 100%;
    border-collapse: collapse;
}

.property-table tr {
    border-bottom: 1px solid var(--gray-100);
}

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

.property-table th {
    text-align: left;
    padding: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-500);
    width: 40%;
    vertical-align: top;
}

.property-table td {
    padding: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--gray-900);
}

/* Tag Cloud */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.tag-cloud-item {
    padding: var(--space-1) var(--space-3);
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all 0.2s ease;
}

.tag-cloud-item:hover {
    background: var(--primary-100);
    color: var(--primary-700);
}

.tag-cloud-item[data-weight="1"] { font-size: var(--font-size-xs); }
.tag-cloud-item[data-weight="2"] { font-size: var(--font-size-sm); }
.tag-cloud-item[data-weight="3"] { font-size: var(--font-size-base); }
.tag-cloud-item[data-weight="4"] { font-size: var(--font-size-lg); font-weight: 500; }
.tag-cloud-item[data-weight="5"] { font-size: var(--font-size-xl); font-weight: 600; }

/* Tree View */
.tree-view {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tree-item {
    position: relative;
}

.tree-item-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
}

.tree-item-content:hover {
    background: var(--gray-50);
}

.tree-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    transition: transform 0.2s ease;
}

.tree-item.expanded > .tree-item-content .tree-toggle {
    transform: rotate(90deg);
}

.tree-children {
    padding-left: var(--space-6);
    display: none;
}

.tree-item.expanded > .tree-children {
    display: block;
}

.tree-icon {
    width: 16px;
    height: 16px;
    color: var(--gray-500);
}

.tree-label {
    font-size: var(--font-size-sm);
    color: var(--gray-900);
}

/* ============================================
   Progress Enhancements
   ============================================ */

/* Multi-Step Progress */
.progress-multi-step {
    display: flex;
    align-items: center;
}

.progress-checkpoint {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.progress-checkpoint-dot {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gray-500);
    transition: all 0.3s ease;
}

.progress-checkpoint.completed .progress-checkpoint-dot {
    background: var(--success);
    color: white;
}

.progress-checkpoint.active .progress-checkpoint-dot {
    background: var(--primary-500);
    color: white;
    box-shadow: 0 0 0 4px var(--primary-100);
}

.progress-checkpoint-label {
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    text-align: center;
    max-width: 80px;
}

.progress-connector {
    flex: 1;
    height: 2px;
    background: var(--gray-200);
    margin: 0 var(--space-2);
}

.progress-connector.completed {
    background: var(--success);
}

/* Circular Progress with Label */
.circular-progress-labeled {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.circular-progress-svg {
    transform: rotate(-90deg);
}

.circular-progress-bg {
    fill: none;
    stroke: var(--gray-200);
}

.circular-progress-fill {
    fill: none;
    stroke: var(--primary-500);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.circular-progress-content {
    position: absolute;
    text-align: center;
}

.circular-progress-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
}

.circular-progress-label {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* Progress with Milestones */
.progress-milestones {
    position: relative;
    padding-top: var(--space-6);
}

.progress-milestones-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-milestones-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.progress-milestone-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
}

.progress-milestone-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-milestone-dot {
    width: 12px;
    height: 12px;
    background: var(--gray-300);
    border: 2px solid white;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-1);
}

.progress-milestone-marker.reached .progress-milestone-dot {
    background: var(--primary-500);
}

.progress-milestone-label {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* ============================================
   Layout Utilities
   ============================================ */

/* Container Variants */
.container-xs { max-width: 480px; margin: 0 auto; padding: 0 var(--space-4); }
.container-sm { max-width: 640px; margin: 0 auto; padding: 0 var(--space-4); }
.container-md { max-width: 768px; margin: 0 auto; padding: 0 var(--space-4); }
.container-lg { max-width: 1024px; margin: 0 auto; padding: 0 var(--space-4); }
.container-xl { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-4); }
.container-2xl { max-width: 1536px; margin: 0 auto; padding: 0 var(--space-4); }
.container-full { max-width: 100%; padding: 0 var(--space-4); }

/* Flex Utilities */
.flex { display: flex; }
.flex-inline { display: inline-flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.flex-grow { flex-grow: 1; }
.flex-shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Alignment */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }

/* Gap Utilities */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Grid Utilities */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-full { grid-column: 1 / -1; }

/* Spacing Utilities */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-auto { margin: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* ============================================
   Glassmorphism & Neumorphism
   ============================================ */

/* Glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.glass-primary {
    background: rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Neumorphism */
.neu {
    background: var(--gray-100);
    border-radius: var(--radius-xl);
    box-shadow:
        8px 8px 16px rgba(0, 0, 0, 0.1),
        -8px -8px 16px rgba(255, 255, 255, 0.8);
}

.neu-inset {
    background: var(--gray-100);
    border-radius: var(--radius-xl);
    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.1),
        inset -4px -4px 8px rgba(255, 255, 255, 0.8);
}

.neu-btn {
    background: var(--gray-100);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-6);
    box-shadow:
        4px 4px 8px rgba(0, 0, 0, 0.1),
        -4px -4px 8px rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    cursor: pointer;
}

.neu-btn:hover {
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.1),
        -2px -2px 4px rgba(255, 255, 255, 0.8);
}

.neu-btn:active {
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.1),
        inset -2px -2px 4px rgba(255, 255, 255, 0.8);
}

.neu-input {
    background: var(--gray-100);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.1),
        inset -2px -2px 4px rgba(255, 255, 255, 0.8);
}

.neu-input:focus {
    outline: none;
    box-shadow:
        inset 3px 3px 6px rgba(0, 0, 0, 0.1),
        inset -3px -3px 6px rgba(255, 255, 255, 0.8);
}

/* Gradient Utilities */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
}

.gradient-success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.gradient-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.gradient-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.gradient-purple {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.gradient-pink {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.gradient-rainbow {
    background: linear-gradient(135deg, #f43f5e, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6);
}

.gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================
   Dark Mode - Fifth Iteration Components
   ============================================ */

/* Dark Mode - Input Groups */
.dark-mode .input-group-addon {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-300);
}

/* Dark Mode - Form States */
.dark-mode .form-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--gray-800) inset;
    -webkit-text-fill-color: var(--gray-100);
    border-color: var(--primary-400);
}

/* Dark Mode - Fieldset */
.dark-mode .fieldset {
    border-color: var(--gray-700);
}

.dark-mode .fieldset-legend {
    background: var(--gray-900);
    color: var(--gray-300);
}

.dark-mode .form-section {
    border-bottom-color: var(--gray-700);
}

.dark-mode .form-section-title {
    color: var(--gray-100);
}

/* Dark Mode - Tables */
.dark-mode .table-filter-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .table-column-toggle {
    background: var(--gray-800);
}

.dark-mode .table-column-toggle-count {
    background: var(--gray-700);
    color: var(--gray-300);
}

.dark-mode .table-density-toggle {
    background: var(--gray-800);
}

.dark-mode .table-density-btn {
    color: var(--gray-400);
}

.dark-mode .table-density-btn.active {
    background: var(--gray-700);
    color: var(--gray-100);
}

.dark-mode .table-batch-toolbar {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

.dark-mode .table-batch-count {
    color: var(--primary-300);
}

.dark-mode .expand-row {
    background: var(--gray-750);
}

.dark-mode .table-grouped .group-header {
    background: var(--gray-750);
}

/* Dark Mode - Bottom Sheet */
.dark-mode .bottom-sheet {
    background: var(--gray-800);
}

.dark-mode .bottom-sheet-handle {
    background: var(--gray-600);
}

.dark-mode .bottom-sheet-header {
    border-bottom-color: var(--gray-700);
}

.dark-mode .bottom-sheet-title {
    color: var(--gray-100);
}

.dark-mode .bottom-sheet-footer {
    border-top-color: var(--gray-700);
}

/* Dark Mode - Toast */
.dark-mode .toast-minimal {
    background: var(--gray-700);
}

.dark-mode .toast-action-primary {
    background: var(--gray-700);
    color: var(--gray-100);
}

.dark-mode .toast-action-primary:hover {
    background: var(--gray-600);
}

/* Dark Mode - Cascading Menu */
.dark-mode .menu-cascading .submenu {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.dark-mode .menu-search-input {
    background: var(--gray-900);
    border-color: var(--gray-700);
    color: var(--gray-200);
}

.dark-mode .menu-section {
    border-bottom-color: var(--gray-700);
}

.dark-mode .menu-recent {
    background: var(--gray-750);
}

/* Dark Mode - Cards */
.dark-mode .card-tab {
    color: var(--gray-400);
}

.dark-mode .card-tab:hover {
    color: var(--gray-200);
}

.dark-mode .card-tab.active {
    color: var(--primary-400);
}

.dark-mode .card-tabs {
    border-bottom-color: var(--gray-700);
}

.dark-mode .card-expand-btn {
    background: var(--gray-700);
}

.dark-mode .card-expand-btn:hover {
    background: var(--gray-600);
}

/* Dark Mode - Data Display */
.dark-mode .kv-item {
    border-bottom-color: var(--gray-700);
}

.dark-mode .kv-key {
    color: var(--gray-400);
}

.dark-mode .kv-value {
    color: var(--gray-100);
}

.dark-mode .dl-styled dt {
    color: var(--gray-300);
}

.dark-mode .dl-styled dd {
    color: var(--gray-400);
}

.dark-mode .property-table tr {
    border-bottom-color: var(--gray-700);
}

.dark-mode .property-table th {
    color: var(--gray-400);
}

.dark-mode .property-table td {
    color: var(--gray-200);
}

.dark-mode .tag-cloud-item {
    background: var(--gray-700);
    color: var(--gray-300);
}

.dark-mode .tag-cloud-item:hover {
    background: rgba(59, 130, 246, 0.2);
    color: var(--primary-300);
}

.dark-mode .tree-item-content:hover {
    background: var(--gray-750);
}

.dark-mode .tree-label {
    color: var(--gray-200);
}

/* Dark Mode - Progress */
.dark-mode .progress-checkpoint-dot {
    background: var(--gray-700);
    color: var(--gray-400);
}

.dark-mode .progress-connector {
    background: var(--gray-700);
}

.dark-mode .circular-progress-bg {
    stroke: var(--gray-700);
}

.dark-mode .circular-progress-value {
    color: var(--gray-100);
}

.dark-mode .progress-milestones-bar {
    background: var(--gray-700);
}

.dark-mode .progress-milestone-dot {
    background: var(--gray-600);
    border-color: var(--gray-800);
}

/* Dark Mode - Glassmorphism */
.dark-mode .glass {
    background: rgba(30, 30, 30, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .glass-card {
    background: rgba(30, 30, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Dark Mode - Neumorphism */
.dark-mode .neu {
    background: var(--gray-800);
    box-shadow:
        8px 8px 16px rgba(0, 0, 0, 0.4),
        -8px -8px 16px rgba(60, 60, 60, 0.2);
}

.dark-mode .neu-inset {
    background: var(--gray-800);
    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.4),
        inset -4px -4px 8px rgba(60, 60, 60, 0.2);
}

.dark-mode .neu-btn {
    background: var(--gray-800);
    color: var(--gray-200);
    box-shadow:
        4px 4px 8px rgba(0, 0, 0, 0.4),
        -4px -4px 8px rgba(60, 60, 60, 0.2);
}

.dark-mode .neu-input {
    background: var(--gray-800);
    color: var(--gray-200);
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.4),
        inset -2px -2px 4px rgba(60, 60, 60, 0.2);
}

/* ============================================
   Accessibility Improvements
   ============================================ */

/* Focus visible styles for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-600);
    color: white;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
}

/* Ensure sufficient color contrast in dark mode */
body.dark-mode .text-muted,
body.dark-mode .text-secondary {
    color: #d1d5db !important;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
    .btn {
        border-width: 2px;
    }

    .card {
        border-width: 2px;
    }

    .form-input,
    .form-select,
    .form-textarea {
        border-width: 2px;
    }
}

/* Better touch targets for mobile */
@media (max-width: 768px) {
    .btn,
    .nav-item,
    .form-input,
    .form-select {
        min-height: 44px;
    }

    /* Increase tap target size */
    .checkbox-label,
    .radio-label {
        padding: 12px;
    }
}

/* Dark mode - Additional contrast fixes */
body.dark-mode .dropdown-menu {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .dropdown-item {
    color: #e5e7eb !important;
}

body.dark-mode .dropdown-item:hover {
    background: #374151 !important;
}

body.dark-mode .modal {
    background: #1f2937 !important;
}

body.dark-mode .modal-header {
    border-bottom-color: #374151 !important;
}

body.dark-mode .modal-footer {
    border-top-color: #374151 !important;
}

body.dark-mode .alert {
    border-color: #374151 !important;
}

body.dark-mode .alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

body.dark-mode .alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

body.dark-mode .alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

body.dark-mode .alert-error {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Responsive table wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .table-responsive table {
        min-width: 600px;
    }
}

/* Additional breakpoint for larger tablets */
@media (min-width: 900px) and (max-width: 1024px) {
    .sidebar {
        width: 200px;
    }

    .main-wrapper {
        margin-left: 200px;
    }
}

/* Print styles */
@media print {
    .sidebar,
    .header,
    .btn,
    .modal-overlay,
    .toast-container {
        display: none !important;
    }

    .main-wrapper, .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ============================================
   Loading States
   ============================================ */

/* Loading spinner */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

.loading-spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.loading-spinner-xl {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

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

/* Skeleton loading animation */
.skeleton-loading {
    position: relative;
    overflow: hidden;
    background: var(--gray-200) !important;
    color: transparent !important;
    border-radius: var(--radius-md);
}

.skeleton-loading::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
}

body.dark-mode .skeleton-loading {
    background: var(--gray-700) !important;
}

body.dark-mode .skeleton-loading::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
}

/* Button loading state */
.btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}

/* Page loading overlay */
.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

body.dark-mode .page-loading {
    background: rgba(31, 41, 55, 0.8);
}

/* Progress bar */
.progress-bar {
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary-500);
    transition: width 0.3s ease;
}

.progress-bar-indeterminate .progress-bar-fill {
    width: 30%;
    animation: progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes progress-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* ============================================
   UI Improvements - Session 28
   66 Enhancements for Better UX
   ============================================ */

/* ============================================
   1. Button and Interaction States
   ============================================ */

/* Enhanced disabled button styling */
.btn:disabled,
.btn.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--gray-200) !important;
    border-color: var(--gray-300) !important;
    color: var(--gray-500) !important;
}

.btn-primary:disabled {
    background-color: var(--primary-300) !important;
    border-color: var(--primary-300) !important;
}

/* Active/pressed state for buttons */
.btn:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-primary:active:not(:disabled) {
    background: var(--primary-800);
}

.btn-secondary:active:not(:disabled) {
    background: var(--gray-100);
}

/* Ripple effect for buttons */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-ripple:active::before {
    width: 300px;
    height: 300px;
}

/* Button group styles */
.btn-group {
    display: inline-flex;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.btn-group .btn {
    border-radius: 0;
    border-right-width: 0;
}

.btn-group .btn:first-child {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.btn-group .btn:last-child {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-right-width: 1px;
}

.btn-group .btn.active {
    background: var(--primary-600);
    color: white;
    border-color: var(--primary-600);
}

/* ============================================
   2. Loading and Progress States
   ============================================ */

/* Circular progress indicator */
.circular-progress {
    width: 40px;
    height: 40px;
    position: relative;
}

.circular-progress svg {
    transform: rotate(-90deg);
}

.circular-progress circle {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}

.circular-progress .bg {
    stroke: var(--gray-200);
}

.circular-progress .progress {
    stroke: var(--primary-500);
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.3s ease;
}

/* Pulse loading indicator */
.pulse-loading {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pulse-loading span {
    width: 8px;
    height: 8px;
    background: var(--primary-500);
    border-radius: 50%;
    animation: pulse-bounce 1.4s infinite ease-in-out both;
}

.pulse-loading span:nth-child(1) { animation-delay: -0.32s; }
.pulse-loading span:nth-child(2) { animation-delay: -0.16s; }
.pulse-loading span:nth-child(3) { animation-delay: 0s; }

@keyframes pulse-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Shimmer text loading */
.shimmer-text {
    background: linear-gradient(
        90deg,
        var(--gray-300) 0%,
        var(--gray-100) 50%,
        var(--gray-300) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-text 1.5s infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

/* Content placeholder loading */
.content-placeholder {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.content-placeholder-line {
    height: 12px;
    background: var(--gray-200);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}

.content-placeholder-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: shimmer-slide 1.5s infinite;
}

.content-placeholder-line:nth-child(1) { width: 100%; }
.content-placeholder-line:nth-child(2) { width: 85%; }
.content-placeholder-line:nth-child(3) { width: 70%; }

@keyframes shimmer-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============================================
   3. Form Elements and Input Validation
   ============================================ */

/* Input validation states */
.form-input.is-valid,
.form-select.is-valid {
    border-color: var(--success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2310b981' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.form-input.is-invalid,
.form-select.is-invalid {
    border-color: var(--error);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ef4444' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.form-input.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.form-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.invalid-feedback {
    color: var(--error);
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.valid-feedback {
    color: var(--success);
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
}

/* Character counter for textareas */
.char-counter {
    display: flex;
    justify-content: flex-end;
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    margin-top: var(--space-1);
}

.char-counter.warning {
    color: var(--warning);
}

.char-counter.danger {
    color: var(--error);
}

/* Form group focus-within */
.form-group:focus-within .form-label {
    color: var(--primary-600);
}

/* Password strength indicator */
.password-strength {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.password-strength-bar {
    flex: 1;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    transition: background 0.3s;
}

.password-strength[data-strength="weak"] .password-strength-bar:nth-child(1) {
    background: var(--error);
}

.password-strength[data-strength="fair"] .password-strength-bar:nth-child(-n+2) {
    background: var(--warning);
}

.password-strength[data-strength="good"] .password-strength-bar:nth-child(-n+3) {
    background: var(--info);
}

.password-strength[data-strength="strong"] .password-strength-bar {
    background: var(--success);
}

/* Input with prefix/suffix */
.input-group {
    display: flex;
    align-items: stretch;
}

.input-group-prepend,
.input-group-append {
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.input-group-prepend {
    border-right: none;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.input-group-append {
    border-left: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.input-group .form-input {
    border-radius: 0;
    flex: 1;
}

.input-group .form-input:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.input-group .form-input:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* Floating label inputs */
.floating-label {
    position: relative;
    margin-top: var(--space-4);
}

.floating-label .form-input {
    padding-top: var(--space-5);
}

.floating-label .form-label {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    transform: translateY(-50%);
    transition: all 0.2s ease;
    pointer-events: none;
    color: var(--gray-500);
    margin-bottom: 0;
}

.floating-label .form-input:focus + .form-label,
.floating-label .form-input:not(:placeholder-shown) + .form-label {
    top: 8px;
    transform: translateY(0);
    font-size: var(--font-size-xs);
    color: var(--primary-600);
}

/* ============================================
   4. Enhanced Empty States
   ============================================ */

/* Empty state with illustration animation */
.empty-state-animated .empty-state-icon {
    animation: float 3s ease-in-out infinite, pulse 2s ease-in-out infinite alternate;
}

/* Contextual empty states */
.empty-state.no-results {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
}

.empty-state.no-results::before {
    background: radial-gradient(circle, var(--info-100) 0%, transparent 70%);
}

.empty-state.error-state {
    background: linear-gradient(135deg, var(--error-50) 0%, var(--error-100) 100%);
}

.empty-state.error-state .empty-state-icon {
    color: var(--error-400);
}

/* Quick action cards in empty states */
.empty-state-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-action-card:hover {
    border-color: var(--primary-300);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

.quick-action-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-50);
    color: var(--primary-600);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
}

.quick-action-card-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-900);
}

/* ============================================
   5. Tables and Data Display
   ============================================ */

/* Table row hover animation */
.table tbody tr {
    transition: all 0.15s ease;
}

.table tbody tr:hover {
    background: var(--primary-50);
    transform: scale(1.002);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Sortable column indicators */
.table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: var(--space-6);
}

.table th.sortable::after {
    content: '↕';
    position: absolute;
    right: var(--space-2);
    opacity: 0.3;
    font-size: var(--font-size-xs);
}

.table th.sortable:hover::after {
    opacity: 0.6;
}

.table th.sorted-asc::after {
    content: '↑';
    opacity: 1;
    color: var(--primary-600);
}

.table th.sorted-desc::after {
    content: '↓';
    opacity: 1;
    color: var(--primary-600);
}

/* Table density options */
.table-density-toggle {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.table-density-btn {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.table-density-btn.active {
    background: var(--primary-100);
    border-color: var(--primary-300);
    color: var(--primary-700);
}

/* Inline editing support */
.table td.editable {
    cursor: pointer;
    position: relative;
}

.table td.editable:hover::after {
    content: '✎';
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.4;
    font-size: var(--font-size-xs);
}

.table td.editing {
    padding: var(--space-1);
}

.table td.editing input {
    width: 100%;
    padding: var(--space-2);
    border: 2px solid var(--primary-500);
    border-radius: var(--radius-sm);
    font-size: inherit;
}

/* Column resizable */
.table th.resizable {
    position: relative;
}

.table th.resizable::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
}

.table th.resizable:hover::before {
    background: var(--primary-200);
}

/* Expandable rows */
.table tr.expandable td:first-child {
    position: relative;
    padding-left: var(--space-8);
}

.table tr.expandable td:first-child::before {
    content: '▶';
    position: absolute;
    left: var(--space-3);
    font-size: var(--font-size-xs);
    transition: transform 0.2s;
}

.table tr.expandable.expanded td:first-child::before {
    transform: rotate(90deg);
}

.table tr.row-details {
    background: var(--gray-50);
}

.table tr.row-details td {
    padding: var(--space-4);
}

/* ============================================
   6. Modals and Dialogs
   ============================================ */

/* Backdrop blur effect */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 999;
    animation: fadeIn 0.2s ease;
}

body.dark-mode .modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

/* Modal animations */
.modal {
    animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal.modal-exit {
    animation: modalSlideOut 0.2s ease forwards;
}

@keyframes modalSlideOut {
    to {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
}

/* Full-screen modal */
.modal.modal-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    margin: 0;
}

/* Drawer/sidebar modal */
.modal.modal-drawer {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    max-height: none;
    width: 400px;
    max-width: 90vw;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    margin: 0;
    animation: drawerSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes drawerSlideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.modal.modal-drawer.modal-exit {
    animation: drawerSlideOut 0.2s ease forwards;
}

@keyframes drawerSlideOut {
    to {
        transform: translateX(100%);
    }
}

/* Modal sizes */
.modal.modal-sm {
    max-width: 400px;
}

.modal.modal-lg {
    max-width: 800px;
}

.modal.modal-xl {
    max-width: 1140px;
}

/* ============================================
   7. Navigation and Breadcrumbs
   ============================================ */

/* Active nav item left border accent */
.nav-item.active {
    position: relative;
    border-left: 3px solid var(--primary-600);
    padding-left: calc(var(--space-5) - 3px);
}

body.dark-mode .nav-item.active {
    border-left-color: var(--primary-400);
}

/* Breadcrumb component */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-bottom: var(--space-4);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.breadcrumb-item a {
    color: var(--gray-600);
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumb-item a:hover {
    color: var(--primary-600);
}

.breadcrumb-item.active {
    color: var(--gray-900);
    font-weight: 500;
}

.breadcrumb-separator {
    color: var(--gray-400);
}

/* Sticky subnavigation */
.subnav {
    position: sticky;
    top: var(--header-height);
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-3) 0;
    z-index: 40;
    margin: 0 calc(-1 * var(--space-6));
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

body.dark-mode .subnav {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

/* Mobile bottom navigation */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--gray-200);
    padding: var(--space-2) var(--space-4);
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        justify-content: space-around;
    }
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    color: var(--gray-500);
    font-size: var(--font-size-xs);
    text-decoration: none;
    transition: color 0.15s;
}

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

.bottom-nav-item svg {
    width: 24px;
    height: 24px;
}

/* ============================================
   8. Tooltips and Popovers
   ============================================ */

/* CSS Tooltip */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: var(--space-2) var(--space-3);
    background: var(--gray-900);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--gray-900);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Tooltip positions */
[data-tooltip-position="right"]::before {
    bottom: auto;
    left: 100%;
    top: 50%;
    transform: translateX(8px) translateY(-50%);
}

[data-tooltip-position="right"]::after {
    bottom: auto;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--gray-900);
    border-top-color: transparent;
}

[data-tooltip-position="bottom"]::before {
    bottom: auto;
    top: 100%;
    transform: translateX(-50%) translateY(8px);
}

[data-tooltip-position="bottom"]::after {
    bottom: auto;
    top: 100%;
    border: 6px solid transparent;
    border-bottom-color: var(--gray-900);
    border-top-color: transparent;
}

[data-tooltip-position="left"]::before {
    bottom: auto;
    left: auto;
    right: 100%;
    top: 50%;
    transform: translateX(-8px) translateY(-50%);
}

[data-tooltip-position="left"]::after {
    bottom: auto;
    left: auto;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--gray-900);
    border-top-color: transparent;
}

/* Info icon for tooltip availability */
.has-tooltip-icon::after {
    content: 'ⓘ';
    margin-left: var(--space-1);
    font-size: 0.8em;
    opacity: 0.6;
}

/* ============================================
   9. Notifications and Alerts
   ============================================ */

/* Alert component */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.alert-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.alert-description {
    font-size: var(--font-size-sm);
}

.alert-dismiss {
    background: none;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.alert-dismiss:hover {
    opacity: 1;
}

.alert-info {
    background: var(--info-light);
    border: 1px solid var(--info);
    color: #1e40af;
}

.alert-success {
    background: var(--success-light);
    border: 1px solid var(--success);
    color: #166534;
}

.alert-warning {
    background: var(--warning-light);
    border: 1px solid var(--warning);
    color: #92400e;
}

.alert-error {
    background: var(--error-light);
    border: 1px solid var(--error);
    color: #991b1b;
}

/* Notification dot */
.notification-dot {
    position: relative;
}

.notification-dot::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--error);
    border-radius: 50%;
    border: 2px solid white;
}

.notification-dot.dot-primary::after {
    background: var(--primary-500);
}

.notification-dot.dot-success::after {
    background: var(--success);
}

.notification-dot.dot-warning::after {
    background: var(--warning);
}

/* ============================================
   10. Cards and Containers
   ============================================ */

/* Card hover lift effect */
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    transition: all 0.2s ease;
}

/* Card selection state */
.card.selected {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

/* Gradient cards */
.card-gradient-primary {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
    color: white;
    border: none;
}

.card-gradient-success {
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
    color: white;
    border: none;
}

/* Image card */
.image-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.image-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-card:hover .image-card-img {
    transform: scale(1.05);
}

.image-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-4);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
}

/* Stat card enhancements */
.stat-card-trend {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
}

.stat-card-trend.up {
    color: var(--success);
}

.stat-card-trend.down {
    color: var(--error);
}

.stat-card-trend svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   11. Icons and Visuals
   ============================================ */

/* Icon sizing utilities */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
.icon-2xl { width: 48px; height: 48px; }

/* Animated icons */
.icon-spin {
    animation: spin 1s linear infinite;
}

.icon-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

.icon-bounce {
    animation: bounce 1s ease infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Status indicators */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--space-2);
}

.status-dot.online { background: var(--success); }
.status-dot.offline { background: var(--gray-400); }
.status-dot.busy { background: var(--error); }
.status-dot.away { background: var(--warning); }

.status-dot.animated {
    animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Avatar group/stack */
.avatar-group {
    display: flex;
}

.avatar-group .avatar {
    margin-left: -8px;
    border: 2px solid white;
}

.avatar-group .avatar:first-child {
    margin-left: 0;
}

.avatar-group .avatar-overflow {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-200);
    color: var(--gray-600);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.avatar-sm { width: 24px; height: 24px; font-size: var(--font-size-xs); }
.avatar-lg { width: 48px; height: 48px; font-size: var(--font-size-lg); }
.avatar-xl { width: 64px; height: 64px; font-size: var(--font-size-xl); }

/* ============================================
   12. Animations and Transitions
   ============================================ */

/* Element entrance animations */
.fade-in {
    animation: fadeIn 0.3s ease;
}

.slide-in-up {
    animation: slideInUp 0.3s ease;
}

.slide-in-down {
    animation: slideInDown 0.3s ease;
}

.slide-in-left {
    animation: slideInLeft 0.3s ease;
}

.slide-in-right {
    animation: slideInRight 0.3s ease;
}

.scale-in {
    animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

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

@keyframes slideInLeft {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

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

@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Staggered animations */
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
.stagger-children > *:nth-child(7) { animation-delay: 300ms; }
.stagger-children > *:nth-child(8) { animation-delay: 350ms; }

/* Micro-interactions */
.clickable {
    cursor: pointer;
    transition: transform 0.1s ease;
}

.clickable:active {
    transform: scale(0.98);
}

/* Smooth scroll behavior */
html.smooth-scroll {
    scroll-behavior: smooth;
}

/* ============================================
   13. Utility Classes
   ============================================ */

/* Spacing utilities */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* Text utilities */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

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

/* Line clamp */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* Flex utilities */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Position utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Visibility utilities */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* Cursor utilities */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }

/* ============================================
   14. Dark Mode Enhancements for New Components
   ============================================ */

body.dark-mode .breadcrumb-item a {
    color: var(--gray-400);
}

body.dark-mode .breadcrumb-item a:hover {
    color: var(--primary-400);
}

body.dark-mode .breadcrumb-item.active {
    color: var(--gray-100);
}

body.dark-mode .breadcrumb-separator {
    color: var(--gray-600);
}

body.dark-mode [data-tooltip]::before {
    background: var(--gray-700);
}

body.dark-mode [data-tooltip]::after {
    border-top-color: var(--gray-700);
}

body.dark-mode .quick-action-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .quick-action-card:hover {
    border-color: var(--primary-500);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

body.dark-mode .quick-action-card-icon {
    background: var(--primary-900);
}

body.dark-mode .quick-action-card-title {
    color: var(--gray-100);
}

body.dark-mode .bottom-nav {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .bottom-nav-item {
    color: var(--gray-400);
}

body.dark-mode .bottom-nav-item.active {
    color: var(--primary-400);
}

body.dark-mode .input-group-prepend,
body.dark-mode .input-group-append {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-300);
}

body.dark-mode .alert-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--info);
    color: var(--info);
}

body.dark-mode .alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--success);
    color: var(--success);
}

body.dark-mode .alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--warning);
    color: var(--warning);
}

body.dark-mode .alert-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error);
    color: var(--error);
}

body.dark-mode .card.selected {
    box-shadow: 0 0 0 3px var(--primary-800);
}

body.dark-mode .avatar-group .avatar {
    border-color: var(--gray-800);
}

body.dark-mode .avatar-group .avatar-overflow {
    background: var(--gray-700);
    color: var(--gray-300);
}

body.dark-mode .content-placeholder-line {
    background: var(--gray-700);
}

body.dark-mode .content-placeholder-line::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

body.dark-mode .password-strength-bar {
    background: var(--gray-700);
}

body.dark-mode .notification-dot::after {
    border-color: var(--gray-800);
}

body.dark-mode .table-density-btn {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-300);
}

body.dark-mode .table-density-btn.active {
    background: var(--primary-900);
    border-color: var(--primary-700);
    color: var(--primary-300);
}

/* ============================================
   End of Session 28 UI Improvements
   ============================================ */

/* ============================================
   UI Improvements - Session 28 Part 2
   Interactive Components & Advanced Features
   ============================================ */

/* ============================================
   1. Toggle Switch Component
   ============================================ */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-switch-slider {
    width: 44px;
    height: 24px;
    background: var(--gray-300);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-switch-slider {
    background: var(--primary-500);
}

.toggle-switch input:checked + .toggle-switch-slider::before {
    transform: translateX(20px);
}

.toggle-switch input:focus + .toggle-switch-slider {
    box-shadow: 0 0 0 3px var(--primary-100);
}

.toggle-switch input:disabled + .toggle-switch-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-switch-label {
    margin-left: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

/* Toggle switch sizes */
.toggle-switch-sm .toggle-switch-slider {
    width: 36px;
    height: 20px;
}

.toggle-switch-sm .toggle-switch-slider::before {
    width: 16px;
    height: 16px;
}

.toggle-switch-sm input:checked + .toggle-switch-slider::before {
    transform: translateX(16px);
}

.toggle-switch-lg .toggle-switch-slider {
    width: 56px;
    height: 30px;
    border-radius: 15px;
}

.toggle-switch-lg .toggle-switch-slider::before {
    width: 26px;
    height: 26px;
}

.toggle-switch-lg input:checked + .toggle-switch-slider::before {
    transform: translateX(26px);
}

/* ============================================
   2. Range Slider Component
   ============================================ */
.range-slider {
    position: relative;
    width: 100%;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
}

.range-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-500);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s, box-shadow 0.15s;
}

.range-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.range-slider input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.2);
}

.range-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-500);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.range-slider-track {
    position: absolute;
    top: 0;
    left: 0;
    height: 8px;
    background: var(--primary-500);
    border-radius: 4px;
    z-index: 1;
}

.range-slider-value {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-700);
    margin-top: var(--space-2);
}

/* Dual range slider */
.range-slider-dual {
    position: relative;
}

.range-slider-dual input[type="range"] {
    position: absolute;
    pointer-events: none;
}

.range-slider-dual input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
}

/* ============================================
   3. Stepper/Quantity Input
   ============================================ */
.stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.stepper-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border: none;
    cursor: pointer;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-600);
    transition: all 0.15s;
}

.stepper-btn:hover:not(:disabled) {
    background: var(--gray-200);
    color: var(--gray-800);
}

.stepper-btn:active:not(:disabled) {
    background: var(--gray-300);
}

.stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.stepper-input {
    width: 60px;
    height: 36px;
    border: none;
    border-left: 1px solid var(--gray-300);
    border-right: 1px solid var(--gray-300);
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: 500;
    -moz-appearance: textfield;
}

.stepper-input::-webkit-inner-spin-button,
.stepper-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stepper-sm .stepper-btn {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-sm);
}

.stepper-sm .stepper-input {
    width: 48px;
    height: 28px;
    font-size: var(--font-size-sm);
}

/* ============================================
   4. Accordion/Collapsible Component
   ============================================ */
.accordion {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.accordion-item {
    border-bottom: 1px solid var(--gray-200);
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: white;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--gray-900);
    transition: background 0.15s;
}

.accordion-header:hover {
    background: var(--gray-50);
}

.accordion-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    color: var(--gray-500);
}

.accordion-item.open .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-item.open .accordion-content {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
}

.accordion-body {
    padding: var(--space-4);
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* ============================================
   5. Date Picker Styles
   ============================================ */
.date-picker {
    position: relative;
}

.date-picker-input {
    padding-right: 40px;
}

.date-picker-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
}

.date-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
    width: 280px;
    margin-top: var(--space-2);
    animation: scaleIn 0.15s ease;
}

.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.date-picker-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.date-picker-nav-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--gray-600);
}

.date-picker-nav-btn:hover {
    background: var(--gray-100);
}

.date-picker-month-year {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.date-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: var(--space-2);
}

.date-picker-weekday {
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gray-500);
    padding: var(--space-1) 0;
}

.date-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.date-picker-day {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    transition: all 0.15s;
}

.date-picker-day:hover:not(:disabled) {
    background: var(--gray-100);
}

.date-picker-day.today {
    font-weight: 700;
    color: var(--primary-600);
}

.date-picker-day.selected {
    background: var(--primary-500);
    color: white;
}

.date-picker-day.other-month {
    color: var(--gray-400);
}

.date-picker-day:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.date-picker-presets {
    border-top: 1px solid var(--gray-200);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
}

.date-picker-preset {
    display: block;
    width: 100%;
    padding: var(--space-2);
    text-align: left;
    border: none;
    background: none;
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    cursor: pointer;
    border-radius: var(--radius-md);
}

.date-picker-preset:hover {
    background: var(--gray-100);
    color: var(--primary-600);
}

/* ============================================
   6. Color Picker Styles
   ============================================ */
.color-picker {
    position: relative;
    display: inline-block;
}

.color-picker-preview {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 2px solid var(--gray-200);
    cursor: pointer;
    transition: border-color 0.15s;
}

.color-picker-preview:hover {
    border-color: var(--gray-400);
}

.color-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
    margin-top: var(--space-2);
    animation: scaleIn 0.15s ease;
}

.color-picker-swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.color-swatch:hover {
    transform: scale(1.15);
}

.color-swatch.selected {
    border-color: var(--gray-800);
}

.color-picker-input {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.color-picker-hex {
    flex: 1;
    padding: var(--space-2);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-family: monospace;
    font-size: var(--font-size-sm);
}

/* ============================================
   7. Drag & Drop Enhancements
   ============================================ */
.draggable {
    cursor: grab;
    transition: transform 0.2s, box-shadow 0.2s;
}

.draggable:active {
    cursor: grabbing;
}

.draggable.dragging {
    opacity: 0.5;
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
}

.drag-handle {
    cursor: grab;
    padding: var(--space-2);
    color: var(--gray-400);
    transition: color 0.15s;
}

.drag-handle:hover {
    color: var(--gray-600);
}

.drag-handle:active {
    cursor: grabbing;
}

.drop-zone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    transition: all 0.2s;
}

.drop-zone.drag-over {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.drop-zone.drag-over::after {
    content: 'Drop here';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-600);
    font-weight: 600;
    border-radius: var(--radius-lg);
}

.drag-preview {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.8;
    transform: rotate(3deg);
}

/* ============================================
   8. Sparkline Charts
   ============================================ */
.sparkline {
    display: inline-block;
    vertical-align: middle;
}

.sparkline-svg {
    display: block;
}

.sparkline-line {
    fill: none;
    stroke: var(--primary-500);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sparkline-area {
    fill: var(--primary-100);
    opacity: 0.5;
}

.sparkline-point {
    fill: var(--primary-500);
}

.sparkline-point-last {
    fill: var(--primary-600);
    r: 4;
}

.sparkline.trend-up .sparkline-line {
    stroke: var(--success);
}

.sparkline.trend-up .sparkline-area {
    fill: var(--success-light);
}

.sparkline.trend-down .sparkline-line {
    stroke: var(--error);
}

.sparkline.trend-down .sparkline-area {
    fill: var(--error-light);
}

/* Price Trend Sparkline in Dashboard */
.price-trend-sparkline {
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-trend-sparkline .sparkline {
    display: inline-block;
}

.price-trend-sparkline .sparkline-svg {
    width: 60px;
    height: 24px;
}

/* Best Seller Row */
.best-seller-row {
    transition: all 0.2s ease;
}

.best-seller-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.dark-mode .best-seller-row {
    background: var(--gray-800) !important;
}

body.dark-mode .best-seller-row:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Dark mode sparkline adjustments for dashboard */
body.dark-mode .price-trend-sparkline .sparkline.trend-up .sparkline-area {
    fill: rgba(34, 197, 94, 0.2);
}

body.dark-mode .price-trend-sparkline .sparkline.trend-down .sparkline-area {
    fill: rgba(239, 68, 68, 0.2);
}

/* ============================================
   9. Progress Circle/Ring
   ============================================ */
.progress-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.progress-circle svg {
    transform: rotate(-90deg);
}

.progress-circle-bg {
    fill: none;
    stroke: var(--gray-200);
}

.progress-circle-progress {
    fill: none;
    stroke: var(--primary-500);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-circle-value {
    position: absolute;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--gray-900);
}

.progress-circle.success .progress-circle-progress {
    stroke: var(--success);
}

.progress-circle.warning .progress-circle-progress {
    stroke: var(--warning);
}

.progress-circle.danger .progress-circle-progress {
    stroke: var(--error);
}

/* Animated progress circle */
.progress-circle.animated .progress-circle-progress {
    animation: progressCircleAnim 1s ease-out forwards;
}

@keyframes progressCircleAnim {
    from { stroke-dashoffset: 283; }
}

/* ============================================
   10. Page Transitions
   ============================================ */
.page-enter {
    animation: pageEnter 0.3s ease-out;
}

.page-exit {
    animation: pageExit 0.2s ease-in;
}

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

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

/* Slide transitions */
.slide-left-enter {
    animation: slideLeftEnter 0.3s ease-out;
}

.slide-right-enter {
    animation: slideRightEnter 0.3s ease-out;
}

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

@keyframes slideRightEnter {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   11. Bottom Sheet (Mobile)
   ============================================ */
.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 90vh;
    overflow: hidden;
}

.bottom-sheet.open {
    transform: translateY(0);
}

.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--gray-300);
    border-radius: 2px;
    margin: var(--space-3) auto;
}

.bottom-sheet-header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bottom-sheet-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.bottom-sheet-content {
    padding: var(--space-4);
    overflow-y: auto;
    max-height: calc(90vh - 80px);
}

.bottom-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.bottom-sheet-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   12. Pull to Refresh (styles defined in earlier section)
   ============================================ */

/* ============================================
   13. Swipe Actions
   ============================================ */
.swipe-container {
    position: relative;
    overflow: hidden;
}

.swipe-item {
    position: relative;
    background: white;
    transition: transform 0.3s ease;
}

body.dark-mode .swipe-item {
    background: #374151;
}

.swipe-actions {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
}

.swipe-actions-left {
    left: 0;
    transform: translateX(-100%);
}

.swipe-actions-right {
    right: 0;
    transform: translateX(100%);
}

.swipe-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-5);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.swipe-action-delete {
    background: var(--error);
}

.swipe-action-archive {
    background: var(--warning);
}

.swipe-action-edit {
    background: var(--primary-500);
}

/* ============================================
   14. Infinite Scroll
   ============================================ */
.infinite-scroll-container {
    position: relative;
}

.infinite-scroll-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    gap: var(--space-3);
}

.infinite-scroll-end {
    text-align: center;
    padding: var(--space-6);
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

.scroll-to-top {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    width: 48px;
    height: 48px;
    background: var(--primary-500);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s;
    z-index: 100;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: var(--primary-600);
    transform: translateY(-2px);
}

/* ============================================
   15. Keyboard Shortcuts Help
   ============================================ */
.shortcuts-modal {
    max-width: 600px;
}

.shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.shortcut-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.shortcut-label {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.shortcut-keys {
    display: flex;
    gap: var(--space-1);
}

.shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-2);
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    font-family: monospace;
    color: var(--gray-700);
    box-shadow: 0 2px 0 var(--gray-300);
}

/* ============================================
   16. Floating Action Button Menu
   ============================================ */
.fab-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 100;
}

.fab {
    width: 56px;
    height: 56px;
    background: var(--primary-500);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab:hover {
    background: var(--primary-600);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.5);
}

.fab.open {
    transform: rotate(45deg);
}

.fab-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s;
}

.fab-container.open .fab-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fab-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    white-space: nowrap;
}

.fab-menu-btn {
    width: 48px;
    height: 48px;
    background: white;
    color: var(--gray-700);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab-menu-btn:hover {
    background: var(--gray-50);
    transform: scale(1.1);
}

.fab-menu-label {
    background: var(--gray-900);
    color: white;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* ============================================
   17. Inline Edit Mode
   ============================================ */
.inline-edit {
    position: relative;
    cursor: pointer;
}

.inline-edit:hover {
    background: var(--gray-50);
}

.inline-edit::after {
    content: '✎';
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    font-size: var(--font-size-xs);
    color: var(--gray-400);
    transition: opacity 0.15s;
}

.inline-edit:hover::after {
    opacity: 1;
}

.inline-edit-input {
    width: 100%;
    padding: var(--space-2);
    border: 2px solid var(--primary-500);
    border-radius: var(--radius-sm);
    font-size: inherit;
    font-family: inherit;
    outline: none;
}

.inline-edit-actions {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.inline-edit-save,
.inline-edit-cancel {
    padding: var(--space-1) var(--space-2);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    cursor: pointer;
}

.inline-edit-save {
    background: var(--success);
    color: white;
}

.inline-edit-cancel {
    background: var(--gray-200);
    color: var(--gray-700);
}

/* ============================================
   18. Multi-Select Dropdown
   ============================================ */
.multi-select {
    position: relative;
}

.multi-select-trigger {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-height: 40px;
    padding: var(--space-2);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: white;
    cursor: pointer;
}

.multi-select-trigger:focus-within {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.multi-select-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.multi-select-tag-remove {
    cursor: pointer;
    opacity: 0.6;
}

.multi-select-tag-remove:hover {
    opacity: 1;
}

.multi-select-input {
    flex: 1;
    min-width: 100px;
    border: none;
    outline: none;
    font-size: var(--font-size-sm);
}

.multi-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin-top: var(--space-1);
    max-height: 240px;
    overflow-y: auto;
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background 0.15s;
}

.multi-select-option:hover {
    background: var(--gray-50);
}

.multi-select-option.selected {
    background: var(--primary-50);
    color: var(--primary-700);
}

.multi-select-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.multi-select-option.selected .multi-select-checkbox {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

/* ============================================
   19. Data Table Card View (Mobile)
   ============================================ */
@media (max-width: 768px) {
    .table-card-view {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .table-card-view thead {
        display: none;
    }

    .table-card-view tbody {
        display: contents;
    }

    .table-card-view tr {
        display: flex;
        flex-direction: column;
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
    }

    .table-card-view td {
        display: flex;
        justify-content: space-between;
        padding: var(--space-2) 0;
        border: none;
        border-bottom: 1px solid var(--gray-100);
    }

    .table-card-view td:last-child {
        border-bottom: none;
    }

    .table-card-view td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--gray-600);
        font-size: var(--font-size-xs);
        text-transform: uppercase;
    }
}

/* ============================================
   20. Dark Mode for New Components
   ============================================ */
body.dark-mode .toggle-switch-slider {
    background: var(--gray-600);
}

body.dark-mode .toggle-switch input:checked + .toggle-switch-slider {
    background: var(--primary-400);
}

body.dark-mode .stepper {
    border-color: var(--gray-600);
}

body.dark-mode .stepper-btn {
    background: var(--gray-700);
    color: var(--gray-300);
}

body.dark-mode .stepper-input {
    background: var(--gray-800);
    color: white;
    border-color: var(--gray-600);
}

body.dark-mode .accordion {
    border-color: var(--gray-700);
}

body.dark-mode .accordion-header {
    background: var(--gray-800);
    color: white;
}

body.dark-mode .accordion-header:hover {
    background: var(--gray-700);
}

body.dark-mode .accordion-body {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

body.dark-mode .date-picker-dropdown,
body.dark-mode .color-picker-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .date-picker-day {
    color: var(--gray-300);
}

body.dark-mode .date-picker-day:hover:not(:disabled) {
    background: var(--gray-700);
}

body.dark-mode .bottom-sheet {
    background: var(--gray-800);
}

body.dark-mode .bottom-sheet-handle {
    background: var(--gray-600);
}

body.dark-mode .bottom-sheet-header {
    border-color: var(--gray-700);
}

body.dark-mode .shortcut-key {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-200);
    box-shadow: 0 2px 0 var(--gray-600);
}

body.dark-mode .fab-menu-btn {
    background: var(--gray-700);
    color: white;
}

body.dark-mode .multi-select-trigger {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

body.dark-mode .multi-select-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .multi-select-option:hover {
    background: var(--gray-700);
}

body.dark-mode .table-card-view tr {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .inline-edit:hover {
    background: var(--gray-800);
}

body.dark-mode .inline-edit-input {
    background: var(--gray-700);
    color: white;
}

/* ============================================
   End of Session 28 Part 2 UI Improvements
   ============================================ */

/* ============================================
   UI Improvements - Session 28 Part 3
   Data Visualization & Advanced Components
   ============================================ */

/* ============================================
   1. Donut Chart with Center Text
   ============================================ */
.donut-chart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.donut-chart svg {
    transform: rotate(-90deg);
}

.donut-chart-bg {
    fill: none;
    stroke: var(--gray-200);
}

.donut-chart-segment {
    fill: none;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.donut-chart-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.donut-chart-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1;
}

.donut-chart-label {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    margin-top: var(--space-1);
}

/* ============================================
   2. Funnel Chart
   ============================================ */
.funnel-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.funnel-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-4);
    background: var(--primary-500);
    color: white;
    font-weight: 600;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.funnel-stage:nth-child(1) { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.funnel-stage:nth-child(2) { width: 85%; }
.funnel-stage:nth-child(3) { width: 70%; }
.funnel-stage:nth-child(4) { width: 55%; }
.funnel-stage:nth-child(5) { width: 40%; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

.funnel-stage:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

.funnel-stage-label {
    font-size: var(--font-size-sm);
}

.funnel-stage-value {
    font-size: var(--font-size-xs);
    opacity: 0.8;
    margin-left: var(--space-2);
}

/* ============================================
   3. KPI Dashboard Widget
   ============================================ */
.kpi-widget {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    transition: all 0.2s;
}

.kpi-widget:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.kpi-widget-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-100);
    color: var(--primary-600);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

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

.kpi-widget-label {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-widget-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

.kpi-widget-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.kpi-widget-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.kpi-widget-trend.up { color: var(--success); }
.kpi-widget-trend.down { color: var(--error); }

.kpi-widget-sparkline {
    width: 60px;
    height: 24px;
}

/* ============================================
   4. Animated Counter
   ============================================ */
.animated-counter {
    font-variant-numeric: tabular-nums;
    transition: transform 0.2s;
}

.animated-counter.counting {
    animation: counterPulse 0.3s ease;
}

@keyframes counterPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   5. Step Indicator / Wizard Progress
   ============================================ */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.step-indicator::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: var(--gray-200);
    z-index: 0;
}

.step-indicator-progress {
    position: absolute;
    top: 20px;
    left: 40px;
    height: 2px;
    background: var(--primary-500);
    z-index: 1;
    transition: width 0.3s ease;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.step-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-200);
    color: var(--gray-500);
    border-radius: 50%;
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all 0.3s;
}

.step.active .step-number {
    background: var(--primary-500);
    color: white;
    box-shadow: 0 0 0 4px var(--primary-100);
}

.step.completed .step-number {
    background: var(--success);
    color: white;
}

.step.completed .step-number::after {
    content: '✓';
}

.step-label {
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    text-align: center;
    max-width: 80px;
}

.step.active .step-label {
    color: var(--primary-600);
    font-weight: 600;
}

.step.completed .step-label {
    color: var(--success);
}

/* ============================================
   6. Timeline Component
   ============================================ */
.timeline {
    position: relative;
    padding-left: var(--space-8);
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.timeline-item {
    position: relative;
    padding-bottom: var(--space-6);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -25px;
    top: 0;
    width: 12px;
    height: 12px;
    background: var(--gray-300);
    border: 2px solid white;
    border-radius: 50%;
    z-index: 1;
}

.timeline-item.active .timeline-marker {
    background: var(--primary-500);
    box-shadow: 0 0 0 4px var(--primary-100);
}

.timeline-item.completed .timeline-marker {
    background: var(--success);
}

.timeline-connector {
    position: absolute;
    left: -20px;
    top: 12px;
    bottom: -6px;
    width: 2px;
    background: var(--gray-200);
}

.timeline-item.completed .timeline-connector {
    background: var(--success);
}

.timeline-content {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.timeline-date {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    margin-bottom: var(--space-1);
}

.timeline-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.timeline-description {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* ============================================
   7. Activity Feed
   ============================================ */
.activity-feed {
    display: flex;
    flex-direction: column;
}

.activity-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--gray-100);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-100);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

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

.activity-text {
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    line-height: 1.5;
}

.activity-text strong {
    font-weight: 600;
    color: var(--gray-900);
}

.activity-time {
    font-size: var(--font-size-xs);
    color: var(--gray-400);
    margin-top: var(--space-1);
}

.activity-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.activity-action {
    font-size: var(--font-size-xs);
    color: var(--primary-600);
    cursor: pointer;
}

.activity-action:hover {
    text-decoration: underline;
}

/* ============================================
   8. Snackbar with Action
   ============================================ */
.snackbar {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--gray-900);
    color: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.snackbar.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.snackbar-message {
    font-size: var(--font-size-sm);
}

.snackbar-action {
    background: none;
    border: none;
    color: var(--primary-400);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.snackbar-action:hover {
    background: rgba(255, 255, 255, 0.1);
}

.snackbar-close {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: var(--space-1);
    margin-left: var(--space-2);
}

/* ============================================
   9. Success Checkmark Animation
   ============================================ */
.success-checkmark {
    width: 64px;
    height: 64px;
    margin: 0 auto;
}

.success-checkmark-circle {
    stroke: var(--success);
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    fill: none;
    animation: successCircle 0.6s ease-in-out forwards;
}

.success-checkmark-check {
    stroke: var(--success);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    fill: none;
    animation: successCheck 0.3s 0.4s ease-in-out forwards;
}

@keyframes successCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes successCheck {
    to { stroke-dashoffset: 0; }
}

/* ============================================
   10. Tag Input with Autocomplete
   ============================================ */
.tag-input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: white;
    min-height: 42px;
    cursor: text;
}

.tag-input:focus-within {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.tag-input-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.tag-input-tag-remove {
    cursor: pointer;
    opacity: 0.6;
    font-size: var(--font-size-xs);
}

.tag-input-tag-remove:hover {
    opacity: 1;
}

.tag-input-field {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: var(--font-size-sm);
    padding: var(--space-1);
}

.tag-input-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    margin-top: var(--space-1);
}

.tag-input-option {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.tag-input-option:hover,
.tag-input-option.highlighted {
    background: var(--gray-50);
}

/* ============================================
   11. File Upload Progress
   ============================================ */
.file-upload-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
}

.file-upload-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--radius-md);
    color: var(--gray-500);
}

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

.file-upload-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-upload-meta {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.file-upload-progress {
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
    margin-top: var(--space-2);
}

.file-upload-progress-bar {
    height: 100%;
    background: var(--primary-500);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.file-upload-item.success .file-upload-progress-bar {
    background: var(--success);
}

.file-upload-item.error .file-upload-progress-bar {
    background: var(--error);
}

.file-upload-actions {
    display: flex;
    gap: var(--space-1);
}

.file-upload-action {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.file-upload-action:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

/* ============================================
   12. Star Rating Component
   ============================================ */
.star-rating {
    display: inline-flex;
    gap: var(--space-1);
}

.star-rating-star {
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--gray-300);
    transition: color 0.15s, transform 0.15s;
}

.star-rating-star:hover {
    transform: scale(1.1);
}

.star-rating-star.filled {
    color: var(--warning);
}

.star-rating-star.half-filled {
    position: relative;
}

.star-rating-star.half-filled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.star-rating.readonly .star-rating-star {
    cursor: default;
}

.star-rating.readonly .star-rating-star:hover {
    transform: none;
}

.star-rating-label {
    margin-left: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* ============================================
   13. Comment Thread UI
   ============================================ */
.comment-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.comment {
    display: flex;
    gap: var(--space-3);
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-100);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.comment-body {
    flex: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.comment-author {
    font-weight: 600;
    color: var(--gray-900);
    font-size: var(--font-size-sm);
}

.comment-time {
    font-size: var(--font-size-xs);
    color: var(--gray-400);
}

.comment-content {
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    line-height: 1.6;
}

.comment-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.comment-action {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.comment-action:hover {
    color: var(--primary-600);
}

.comment-replies {
    margin-left: var(--space-10);
    margin-top: var(--space-4);
    padding-left: var(--space-4);
    border-left: 2px solid var(--gray-200);
}

/* ============================================
   14. Copy to Clipboard Button
   ============================================ */
.copy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.copy-btn-feedback {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-2);
    background: var(--gray-900);
    color: white;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.copy-btn-feedback::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--gray-900);
}

.copy-btn.copied .copy-btn-feedback {
    opacity: 1;
    visibility: visible;
    animation: copyFeedbackPop 0.3s ease;
}

@keyframes copyFeedbackPop {
    0% { transform: translateX(-50%) translateY(5px); opacity: 0; }
    100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ============================================
   15. Share Menu
   ============================================ */
.share-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    min-width: 200px;
    z-index: 100;
    animation: scaleIn 0.15s ease;
}

.share-menu-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    padding: var(--space-2);
}

.share-menu-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-2);
    padding: var(--space-2);
}

.share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
}

.share-option:hover {
    background: var(--gray-50);
}

.share-option-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
}

.share-option-icon.twitter { background: #1DA1F2; }
.share-option-icon.facebook { background: #1877F2; }
.share-option-icon.linkedin { background: #0A66C2; }
.share-option-icon.email { background: var(--gray-600); }
.share-option-icon.copy { background: var(--primary-500); }

.share-option-label {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
}

.share-menu-link {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2);
    margin-top: var(--space-2);
    border-top: 1px solid var(--gray-200);
}

.share-menu-link input {
    flex: 1;
    padding: var(--space-2);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

/* ============================================
   16. Countdown Timer
   ============================================ */
.countdown {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.countdown-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.countdown-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--gray-900);
    background: var(--gray-100);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    min-width: 60px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.countdown-label {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    margin-top: var(--space-1);
    text-transform: uppercase;
}

.countdown-separator {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-400);
    align-self: center;
    padding-bottom: var(--space-6);
}

.countdown.compact .countdown-value {
    font-size: var(--font-size-lg);
    padding: var(--space-2);
    min-width: 40px;
}

/* ============================================
   17. Onboarding Tour Spotlight
   ============================================ */
.tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
}

.tour-spotlight {
    position: fixed;
    z-index: 9999;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
    border-radius: var(--radius-lg);
    pointer-events: none;
    transition: all 0.3s ease;
}

.tour-tooltip {
    position: fixed;
    z-index: 10000;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-5);
    max-width: 320px;
    animation: tourTooltipIn 0.3s ease;
}

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

.tour-tooltip-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
}

.tour-tooltip-arrow.top { top: -6px; left: 50%; margin-left: -6px; }
.tour-tooltip-arrow.bottom { bottom: -6px; left: 50%; margin-left: -6px; }
.tour-tooltip-arrow.left { left: -6px; top: 50%; margin-top: -6px; }
.tour-tooltip-arrow.right { right: -6px; top: 50%; margin-top: -6px; }

.tour-tooltip-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.tour-tooltip-content {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.tour-tooltip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tour-tooltip-progress {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

.tour-tooltip-actions {
    display: flex;
    gap: var(--space-2);
}

/* ============================================
   18. Feature Announcement Banner
   ============================================ */
.announcement-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    background: linear-gradient(90deg, var(--primary-600) 0%, var(--primary-500) 100%);
    color: white;
    z-index: 1001;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.announcement-banner.visible {
    transform: translateY(0);
}

.announcement-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.announcement-banner-text {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.announcement-banner-link {
    color: white;
    font-weight: 600;
    text-decoration: underline;
}

.announcement-banner-close {
    background: none;
    border: none;
    color: white;
    opacity: 0.7;
    cursor: pointer;
    padding: var(--space-1);
    margin-left: var(--space-4);
}

.announcement-banner-close:hover {
    opacity: 1;
}

/* ============================================
   19. Masonry Grid Layout
   ============================================ */
.masonry-grid {
    column-count: 3;
    column-gap: var(--space-4);
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: var(--space-4);
}

@media (max-width: 1024px) {
    .masonry-grid { column-count: 2; }
}

@media (max-width: 640px) {
    .masonry-grid { column-count: 1; }
}

/* ============================================
   20. Resizable Panels
   ============================================ */
.resizable-container {
    display: flex;
    height: 100%;
}

.resizable-panel {
    overflow: auto;
    flex-shrink: 0;
}

.resizable-handle {
    width: 8px;
    background: var(--gray-200);
    cursor: col-resize;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resizable-handle:hover {
    background: var(--primary-200);
}

.resizable-handle::after {
    content: '';
    width: 2px;
    height: 24px;
    background: var(--gray-400);
    border-radius: 1px;
}

.resizable-handle:hover::after {
    background: var(--primary-500);
}

.resizable-handle.vertical {
    width: 100%;
    height: 8px;
    cursor: row-resize;
}

.resizable-handle.vertical::after {
    width: 24px;
    height: 2px;
}

/* ============================================
   21. Dark Mode for Part 3 Components
   ============================================ */
body.dark-mode .donut-chart-bg { stroke: var(--gray-700); }
body.dark-mode .donut-chart-value { color: white; }
body.dark-mode .donut-chart-label { color: var(--gray-400); }

body.dark-mode .funnel-stage { background: var(--primary-600); }

body.dark-mode .kpi-widget {
    background: var(--gray-800);
    border-color: var(--gray-700);
}
body.dark-mode .kpi-widget-icon {
    background: var(--primary-900);
}
body.dark-mode .kpi-widget-label { color: var(--gray-400); }
body.dark-mode .kpi-widget-value { color: white; }

body.dark-mode .step-number {
    background: var(--gray-700);
    color: var(--gray-400);
}
body.dark-mode .step-indicator::before { background: var(--gray-700); }
body.dark-mode .step-label { color: var(--gray-400); }

body.dark-mode .timeline::before { background: var(--gray-700); }
body.dark-mode .timeline-marker { background: var(--gray-600); }
body.dark-mode .timeline-content {
    background: var(--gray-800);
    border-color: var(--gray-700);
}
body.dark-mode .timeline-title { color: white; }

body.dark-mode .activity-item { border-color: var(--gray-700); }
body.dark-mode .activity-avatar { background: var(--primary-900); }
body.dark-mode .activity-text { color: var(--gray-300); }
body.dark-mode .activity-text strong { color: white; }

body.dark-mode .snackbar { background: var(--gray-700); }
body.dark-mode .snackbar-action { color: var(--primary-300); }
body.dark-mode .snackbar-close { color: var(--gray-300); }

/* Filter menu dark mode (inline bg:white override) */
body.dark-mode #filter-menu {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

/* Keyboard shortcut kbd dark mode (inline bg:white override) */
body.dark-mode kbd {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #d1d5db !important;
}

/* Chat support message dark mode (inline bg:white override) */
body.dark-mode #chat-messages div[style*="background: white"] {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

/* Platform badge inner circle dark mode (inline bg:white override) */
body.dark-mode .platform-badge span {
    background: #374151 !important;
}

/* Image remove button dark mode (inline bg:white override) */
body.dark-mode .image-preview-item .btn-ghost,
body.dark-mode .selected-image-preview .btn-ghost {
    background: #374151 !important;
}

/* Support ticket boxes dark mode (inline #f9fafb/#f3f4f6 overrides) */
body.dark-mode .modal-body div[style*="background: #f9fafb"] {
    background: #374151 !important;
    color: #d1d5db !important;
}

body.dark-mode .modal-body div[style*="background: #f3f4f6"] {
    background: #374151 !important;
    color: #9ca3af !important;
}

/* Webhook stats grid dark mode (inline bg:white override) */
body.dark-mode div[style*="background: white"][style*="grid-template-columns"] {
    background: #374151 !important;
}

/* QR code preview dark mode */
body.dark-mode .qr-code-preview {
    background: #374151 !important;
}

/* Transaction tag filter buttons dark mode (inline bg:white override) */
body.dark-mode .tag-filter-btn:not(.active) {
    background: #374151 !important;
    color: #d1d5db !important;
    border-color: #4b5563 !important;
}

/* Transaction tag bar dark mode */
body.dark-mode .transaction-tag-bar {
    background: #1f2937 !important;
}

/* Session timeout warning button dark mode (inline bg:white override) */
body.dark-mode #session-timeout-warning button[style*="background:white"] {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

/* Vacation mode banner button dark mode (inline bg:white override) */
body.dark-mode .btn[onclick*="toggleVacationMode"][style*="background: white"] {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

/* Platform logo SVG wrapper dark mode (inline bg:white override) */
body.dark-mode .shop-card div[style*="background:white"][style*="border-radius:12px"] {
    background: #374151 !important;
}

/* Affiliate CTA buttons dark mode (white buttons on gradient cards) */
body.dark-mode .card[style*="linear-gradient"] .btn[style*="background: white"] {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

body.dark-mode .tag-input {
    background: var(--gray-800);
    border-color: var(--gray-600);
}
body.dark-mode .tag-input-tag {
    background: var(--primary-900);
    color: var(--primary-300);
}
body.dark-mode .tag-input-field {
    background: transparent;
    color: white;
}
body.dark-mode .tag-input-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .file-upload-item { background: var(--gray-800); }
body.dark-mode .file-upload-icon { background: var(--gray-700); }
body.dark-mode .file-upload-name { color: white; }
body.dark-mode .file-upload-progress { background: var(--gray-700); }

body.dark-mode .star-rating-star { color: var(--gray-600); }

body.dark-mode .comment-author { color: white; }
body.dark-mode .comment-content { color: var(--gray-300); }
body.dark-mode .comment-replies { border-color: var(--gray-700); }

body.dark-mode .share-menu {
    background: var(--gray-800);
    border-color: var(--gray-700);
}
body.dark-mode .share-option:hover { background: var(--gray-700); }

body.dark-mode .countdown-value {
    background: var(--gray-800);
    color: white;
}

body.dark-mode .tour-tooltip { background: var(--gray-800); }
body.dark-mode .tour-tooltip-arrow { background: var(--gray-800); }
body.dark-mode .tour-tooltip-title { color: white; }
body.dark-mode .tour-tooltip-content { color: var(--gray-300); }

body.dark-mode .resizable-handle { background: var(--gray-700); }
body.dark-mode .resizable-handle:hover { background: var(--primary-800); }

/* ============================================
   End of Session 28 Part 3 UI Improvements
   ============================================ */

/* ============================================
   Session 28 Part 4: Form Inputs & Data Display
   ============================================ */

/* ============================================
   1. Password Visibility Toggle
   ============================================ */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input {
    padding-right: 40px;
}

.password-toggle {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--gray-500);
    transition: color 0.15s;
}

.password-toggle:hover {
    color: var(--gray-700);
}

.password-toggle .icon-hidden {
    display: none;
}

.password-input-wrapper.visible .password-toggle .icon-visible {
    display: none;
}

.password-input-wrapper.visible .password-toggle .icon-hidden {
    display: block;
}

/* ============================================
   2. OTP Input Fields
   ============================================ */
.otp-input-container {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.otp-input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    transition: all 0.15s;
}

.otp-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.otp-input.filled {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.otp-input.error {
    border-color: var(--red-500);
    animation: shake 0.3s ease-in-out;
}

.otp-input-separator {
    display: flex;
    align-items: center;
    color: var(--gray-400);
    font-size: 1.5rem;
}

/* ============================================
   3. Currency Input with Formatting
   ============================================ */
.currency-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-prefix {
    position: absolute;
    left: 12px;
    color: var(--gray-500);
    font-weight: 500;
    pointer-events: none;
}

.currency-input-wrapper input {
    padding-left: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.currency-input-wrapper.has-suffix input {
    padding-right: 50px;
}

.currency-suffix {
    position: absolute;
    right: 12px;
    color: var(--gray-400);
    font-size: 0.875rem;
}

/* ============================================
   4. Data Comparison Table
   ============================================ */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.comparison-table th {
    background: var(--gray-50);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.comparison-table th.feature-col {
    width: 200px;
    position: sticky;
    left: 0;
    background: var(--gray-50);
    z-index: 1;
}

.comparison-table td.feature-col {
    position: sticky;
    left: 0;
    background: white;
    z-index: 1;
}

.comparison-table .highlight-col {
    background: var(--primary-50);
    border-left: 2px solid var(--primary-500);
    border-right: 2px solid var(--primary-500);
}

.comparison-table .highlight-col.header {
    border-top: 2px solid var(--primary-500);
}

.comparison-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comparison-check {
    color: var(--green-500);
}

.comparison-x {
    color: var(--gray-300);
}

.comparison-diff {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.comparison-diff.positive {
    background: var(--green-100);
    color: var(--green-700);
}

.comparison-diff.negative {
    background: var(--red-100);
    color: var(--red-700);
}

/* ============================================
   5. Inline Validation Feedback
   ============================================ */
.form-field {
    position: relative;
    margin-bottom: 16px;
}

.form-field .validation-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s;
}

.form-field.validating .validation-icon {
    opacity: 1;
    animation: spin 0.6s linear infinite;
}

.form-field.valid .validation-icon {
    opacity: 1;
    color: var(--green-500);
}

.form-field.invalid .validation-icon {
    opacity: 1;
    color: var(--red-500);
}

.form-field.valid input {
    border-color: var(--green-400);
    padding-right: 36px;
}

.form-field.invalid input {
    border-color: var(--red-400);
    padding-right: 36px;
}

span.field-error {
    display: none;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--red-600);
}

.form-field.invalid .field-error {
    display: block;
}

.field-success {
    display: none;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--green-600);
}

.form-field.valid .field-success {
    display: block;
}

/* ============================================
   6. Multi-Step Form Wizard
   ============================================ */
.form-wizard {
    max-width: 800px;
    margin: 0 auto;
}

.wizard-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    position: relative;
}

.wizard-progress::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gray-200);
    z-index: 0;
}

.wizard-progress-fill {
    position: absolute;
    top: 16px;
    left: 0;
    height: 2px;
    background: var(--primary-500);
    transition: width 0.3s ease;
    z-index: 1;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.wizard-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-500);
    transition: all 0.2s;
}

.wizard-step.active .wizard-step-number {
    border-color: var(--primary-500);
    color: var(--primary-600);
}

.wizard-step.completed .wizard-step-number {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

.wizard-step-label {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 500;
}

.wizard-step.active .wizard-step-label {
    color: var(--primary-600);
}

.wizard-content {
    min-height: 300px;
}

.wizard-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.wizard-panel.active {
    display: block;
}

.wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

/* ============================================
   7. Advanced Data Grid
   ============================================ */
.data-grid {
    width: 100%;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.data-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.data-grid-search {
    display: flex;
    gap: 8px;
    align-items: center;
}

.data-grid-search input {
    padding: 6px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

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

.data-grid-table {
    width: 100%;
    border-collapse: collapse;
}

.data-grid-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--gray-600);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
    user-select: none;
}

.data-grid-table th.sortable {
    cursor: pointer;
    transition: background 0.15s;
}

.data-grid-table th.sortable:hover {
    background: var(--gray-100);
}

.data-grid-table th .sort-icon {
    margin-left: 4px;
    opacity: 0.3;
}

.data-grid-table th.sorted .sort-icon {
    opacity: 1;
    color: var(--primary-500);
}

.data-grid-table th.filterable {
    position: relative;
}

.data-grid-filter {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 12px;
    z-index: 100;
    display: none;
}

body.dark-mode .data-grid-filter {
    background: #374151;
    border-color: #4b5563;
}

.data-grid-filter.show {
    display: block;
}

.data-grid-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

.data-grid-table tr:hover td {
    background: var(--gray-50);
}

.data-grid-table tr.selected td {
    background: var(--primary-50);
}

.data-grid-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    font-size: 0.875rem;
}

.data-grid-pagination {
    display: flex;
    gap: 4px;
}

.data-grid-pagination button {
    padding: 6px 12px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}

body.dark-mode .data-grid-pagination button {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.data-grid-pagination button:hover:not(:disabled) {
    background: var(--gray-100);
}

body.dark-mode .data-grid-pagination button:hover:not(:disabled) {
    background: #4b5563;
}

.data-grid-pagination button.active {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

.data-grid-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   8. Context Menu (Right-click)
   ============================================ */
.context-menu {
    position: fixed;
    min-width: 160px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    padding: 4px 0;
    display: none;
}

.context-menu.show {
    display: block;
    animation: fadeIn 0.1s ease;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 0.875rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.1s;
}

.context-menu-item:hover {
    background: var(--gray-100);
}

.context-menu-item.danger {
    color: var(--red-600);
}

.context-menu-item.danger:hover {
    background: var(--red-50);
}

.context-menu-item .icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.icon svg {
    max-width: 100%;
    max-height: 100%;
    flex-shrink: 0;
}

.context-menu-item .shortcut {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--gray-400);
}

.context-menu-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 4px 0;
}

.context-menu-submenu {
    position: relative;
}

.context-menu-submenu::after {
    content: '›';
    margin-left: auto;
    color: var(--gray-400);
}

.context-menu-submenu .context-menu {
    position: absolute;
    left: 100%;
    top: 0;
}

/* ============================================
   9. File Upload with Preview
   ============================================ */
.file-upload-zone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.file-upload-zone:hover {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.file-upload-zone.drag-over {
    border-color: var(--primary-500);
    background: var(--primary-100);
    transform: scale(1.01);
}

.file-upload-zone .upload-icon {
    font-size: 48px;
    color: var(--gray-400);
    margin-bottom: 16px;
}

.file-upload-zone .upload-text {
    color: var(--gray-600);
    margin-bottom: 8px;
}

.file-upload-zone .upload-hint {
    font-size: 0.875rem;
    color: var(--gray-400);
}

.file-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.file-preview-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--gray-100);
}

.file-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-preview-item .file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 32px;
    color: var(--gray-400);
}

.file-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.file-preview-item:hover .file-preview-remove {
    opacity: 1;
}

.file-preview-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gray-200);
}

.file-preview-progress-bar {
    height: 100%;
    background: var(--primary-500);
    transition: width 0.2s;
}

/* ============================================
   10. Empty State Variations
   ============================================ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-icon {
    font-size: 64px;
    color: var(--gray-300);
    margin-bottom: 16px;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.empty-state-description {
    color: var(--gray-500);
    max-width: 360px;
    margin: 0 auto 24px;
}

.empty-state.no-data .empty-state-icon { color: var(--gray-300); }
.empty-state.no-results .empty-state-icon { color: var(--yellow-400); }
.empty-state.error .empty-state-icon { color: var(--red-400); }
.empty-state.success .empty-state-icon { color: var(--green-400); }

.empty-state-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    body {
        font-size: 12pt;
        color: black;
        background: white;
    }

    .no-print,
    .sidebar,
    .nav,
    .header,
    .footer,
    .btn:not(.print-visible),
    .modal-backdrop {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    .container {
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0;
    }

    a {
        text-decoration: none;
        color: black;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: "";
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    table th,
    table td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    table th {
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .page-break {
        page-break-before: always;
    }

    .page-break-avoid {
        page-break-inside: avoid;
    }

    .print-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid black;
    }

    .print-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 10pt;
        padding: 10px;
        border-top: 1px solid #ddd;
    }
}

/* ============================================
   12. Date Range Picker
   ============================================ */
.date-range-picker {
    position: relative;
    display: inline-block;
}

.date-range-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: white;
}

.date-range-input:hover {
    border-color: var(--gray-400);
}

.date-range-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    display: none;
}

.date-range-dropdown.show {
    display: flex;
}

.date-range-presets {
    padding: 12px;
    border-right: 1px solid var(--gray-200);
    min-width: 140px;
}

.date-range-preset {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--gray-700);
    transition: background 0.15s;
}

.date-range-preset:hover {
    background: var(--gray-100);
}

.date-range-preset.active {
    background: var(--primary-100);
    color: var(--primary-700);
}

.date-range-calendars {
    display: flex;
    padding: 12px;
    gap: 16px;
}

.date-range-calendar {
    width: 280px;
}

/* Date picker mini calendar (scoped to date-range) */
.date-range-calendar .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.date-range-calendar .calendar-title {
    font-weight: 600;
}

.date-range-calendar .calendar-nav {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.date-range-calendar .calendar-nav:hover {
    background: var(--gray-100);
}

.date-range-calendar .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.date-range-calendar .calendar-weekday {
    padding: 8px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
}

.date-range-calendar .calendar-day {
    padding: 8px;
    text-align: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.15s;
    min-height: auto;
    background: transparent;
}

.date-range-calendar .calendar-day:hover {
    background: var(--gray-100);
}

.date-range-calendar .calendar-day.today {
    font-weight: 600;
    color: var(--primary-600);
}

.date-range-calendar .calendar-day.selected {
    background: var(--primary-500);
    color: white;
}

.date-range-calendar .calendar-day.in-range {
    background: var(--primary-100);
}

.date-range-calendar .calendar-day.disabled {
    color: var(--gray-300);
    cursor: not-allowed;
}

.date-range-calendar .calendar-day.other-month {
    color: var(--gray-300);
}

/* ============================================
   13. Time Picker
   ============================================ */
.time-picker {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: white;
}

.time-picker-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-picker-input {
    width: 40px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    border: none;
    background: none;
    padding: 4px;
}

.time-picker-input:focus {
    outline: none;
    background: var(--primary-50);
    border-radius: var(--radius-sm);
}

.time-picker-spin {
    display: flex;
    flex-direction: column;
}

.time-picker-spin button {
    padding: 2px 6px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--gray-400);
    font-size: 0.75rem;
}

.time-picker-spin button:hover {
    color: var(--primary-500);
}

.time-picker-separator {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-400);
}

.time-picker-period {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 8px;
}

.time-picker-period button {
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.time-picker-period button.active {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

body.dark-mode .time-picker-period button {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

/* ============================================
   14. Autocomplete/Typeahead
   ============================================ */
.autocomplete-wrapper {
    position: relative;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.autocomplete-dropdown.show {
    display: block;
}

.autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
    background: var(--gray-100);
}

.autocomplete-item.selected {
    background: var(--primary-50);
}

.autocomplete-item-text {
    font-size: 0.875rem;
}

.autocomplete-item-text mark {
    background: var(--yellow-200);
    padding: 0 2px;
}

.autocomplete-item-meta {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 2px;
}

.autocomplete-empty {
    padding: 12px;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.875rem;
}

.autocomplete-loading {
    padding: 12px;
    text-align: center;
}

/* ============================================
   15. Tree View Navigation
   ============================================ */
.tree-view {
    font-size: 0.875rem;
}

.tree-node {
    user-select: none;
}

.tree-node-content {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.1s;
}

.tree-node-content:hover {
    background: var(--gray-100);
}

.tree-node.selected > .tree-node-content {
    background: var(--primary-100);
    color: var(--primary-700);
}

.tree-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    transition: transform 0.15s;
}

.tree-node.expanded > .tree-node-content .tree-toggle {
    transform: rotate(90deg);
}

.tree-node.leaf .tree-toggle {
    visibility: hidden;
}

.tree-icon {
    margin-right: 8px;
    color: var(--gray-500);
}

.tree-label {
    flex: 1;
}

.tree-badge {
    font-size: 0.75rem;
    padding: 2px 6px;
    background: var(--gray-200);
    border-radius: var(--radius-sm);
    color: var(--gray-600);
}

.tree-children {
    padding-left: 20px;
    display: none;
}

.tree-node.expanded > .tree-children {
    display: block;
}

/* ============================================
   16. Tabs with Icons & Vertical Tabs
   ============================================ */
.tabs-with-icons .tab {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tabs-with-icons .tab-icon {
    font-size: 1rem;
}

.tabs-vertical {
    display: flex;
    gap: 24px;
}

.tabs-vertical .tab-list {
    flex-direction: column;
    min-width: 180px;
    border-bottom: none;
    border-right: 1px solid var(--gray-200);
    padding-right: 16px;
}

.tabs-vertical .tab {
    justify-content: flex-start;
    padding: 10px 16px;
    border-bottom: none;
    border-left: 2px solid transparent;
    border-radius: 0;
}

.tabs-vertical .tab.active {
    border-left-color: var(--primary-500);
    background: var(--primary-50);
}

.tabs-vertical .tab-content {
    flex: 1;
}

/* ============================================
   17. Pills/Chips Selection
   ============================================ */
.pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 0.875rem;
    cursor: pointer;
    border: 1px solid var(--gray-300);
    background: white;
    transition: all 0.15s;
}

.pill:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
}

.pill.selected {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

.pill-icon {
    font-size: 0.875rem;
}

.pill-remove {
    margin-left: 4px;
    padding: 2px;
    border-radius: 50%;
    transition: background 0.15s;
}

.pill-remove:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pill.selected .pill-remove:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* ============================================
   18. Stat Counter with Animation
   ============================================ */
.stat-counter {
    font-variant-numeric: tabular-nums;
}

.stat-counter.animating {
    animation: countUp 0.5s ease-out;
}

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

.stat-card-animated {
    text-align: center;
    padding: 24px;
}

.stat-card-animated .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1;
}

.stat-card-animated .stat-label {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-top: 8px;
}

.stat-card-animated .stat-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.stat-card-animated .stat-change.positive {
    background: var(--green-100);
    color: var(--green-700);
}

.stat-card-animated .stat-change.negative {
    background: var(--red-100);
    color: var(--red-700);
}

/* ============================================
   19. Before/After Image Slider
   ============================================ */
.before-after-slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.before-after-slider img {
    display: block;
    width: 100%;
    height: auto;
}

.before-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.before-image img {
    width: 200%;
    max-width: none;
}

.slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: white;
    cursor: ew-resize;
    z-index: 10;
}

body.dark-mode .slider-handle {
    background: #d1d5db;
}

.slider-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
}

.slider-handle::after {
    content: '⟷';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    color: var(--gray-600);
}

.before-label,
.after-label {
    position: absolute;
    bottom: 16px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.before-label {
    left: 16px;
}

.after-label {
    right: 16px;
}

/* ============================================
   20. Phone Number Input
   ============================================ */
.phone-input-wrapper {
    display: flex;
    align-items: center;
}

.phone-country-select {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: var(--gray-50);
    cursor: pointer;
}

.phone-country-select:hover {
    background: var(--gray-100);
}

.phone-country-flag {
    font-size: 1.25rem;
}

.phone-country-code {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.phone-input-wrapper input {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    flex: 1;
}

/* ============================================
   21. JSON/Data Viewer
   ============================================ */
.json-viewer {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 16px;
    overflow-x: auto;
}

.json-key {
    color: var(--purple-600);
}

.json-string {
    color: var(--green-600);
}

.json-number {
    color: var(--blue-600);
}

.json-boolean {
    color: var(--orange-600);
}

.json-null {
    color: var(--gray-500);
}

.json-bracket {
    color: var(--gray-600);
}

.json-collapsible {
    cursor: pointer;
    user-select: none;
}

.json-collapsible::before {
    content: '▼';
    display: inline-block;
    margin-right: 4px;
    font-size: 0.625rem;
    transition: transform 0.15s;
}

.json-collapsible.collapsed::before {
    transform: rotate(-90deg);
}

.json-collapsible.collapsed + .json-content {
    display: none;
}

.json-content {
    padding-left: 20px;
}

/* ============================================
   22. Diff Viewer
   ============================================ */
.diff-viewer {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.diff-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.75rem;
    color: var(--gray-600);
}

.diff-line {
    display: flex;
}

.diff-line-number {
    min-width: 40px;
    padding: 0 8px;
    text-align: right;
    color: var(--gray-400);
    background: var(--gray-50);
    border-right: 1px solid var(--gray-200);
    user-select: none;
}

.diff-line-content {
    flex: 1;
    padding: 0 12px;
    white-space: pre-wrap;
    word-break: break-all;
}

.diff-line.added {
    background: var(--green-50);
}

.diff-line.added .diff-line-number {
    background: var(--green-100);
    color: var(--green-700);
}

.diff-line.added .diff-line-content {
    color: var(--green-800);
}

.diff-line.removed {
    background: var(--red-50);
}

.diff-line.removed .diff-line-number {
    background: var(--red-100);
    color: var(--red-700);
}

.diff-line.removed .diff-line-content {
    color: var(--red-800);
    text-decoration: line-through;
}

.diff-highlight {
    background: var(--yellow-200);
    padding: 0 2px;
}

/* ============================================
   23. Transfer List (Dual Listbox)
   ============================================ */
.transfer-list {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.transfer-list-panel {
    flex: 1;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.transfer-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    font-size: 0.875rem;
}

.transfer-list-count {
    font-weight: normal;
    color: var(--gray-500);
}

.transfer-list-items {
    max-height: 300px;
    overflow-y: auto;
}

.transfer-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.transfer-list-item:hover {
    background: var(--gray-50);
}

.transfer-list-item.selected {
    background: var(--primary-50);
}

.transfer-list-item input[type="checkbox"] {
    accent-color: var(--primary-500);
}

.transfer-list-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.transfer-list-actions button {
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}

.transfer-list-actions button:hover:not(:disabled) {
    background: var(--gray-100);
}

body.dark-mode .transfer-list-actions button {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

body.dark-mode .transfer-list-actions button:hover:not(:disabled) {
    background: #4b5563;
}

.transfer-list-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   24. Code Syntax Highlighting (Basic)
   ============================================ */
.code-block {
    position: relative;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    background: var(--gray-900);
    color: var(--gray-100);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--gray-800);
    font-size: 0.75rem;
}

.code-language {
    color: var(--gray-400);
    text-transform: uppercase;
}

.code-copy {
    padding: 4px 8px;
    background: var(--gray-700);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--gray-300);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.code-copy:hover {
    background: var(--gray-600);
    color: white;
}

.code-content {
    padding: 16px;
    overflow-x: auto;
}

.code-content .keyword { color: var(--purple-400); }
.code-content .string { color: var(--green-400); }
.code-content .number { color: var(--orange-400); }
.code-content .comment { color: var(--gray-500); font-style: italic; }
.code-content .function { color: var(--blue-400); }
.code-content .variable { color: var(--cyan-400); }
.code-content .operator { color: var(--yellow-400); }

/* ============================================
   25. Offline/Connection Status Indicator
   ============================================ */
.connection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
}

.connection-status.online {
    background: var(--green-100);
    color: var(--green-700);
}

.connection-status.offline {
    background: var(--red-100);
    color: var(--red-700);
}

.connection-status.syncing {
    background: var(--yellow-100);
    color: var(--yellow-700);
}

.connection-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.connection-status.online .connection-indicator {
    background: var(--green-500);
}

.connection-status.offline .connection-indicator {
    background: var(--red-500);
}

.connection-status.syncing .connection-indicator {
    background: var(--yellow-500);
    animation: pulse 1.5s infinite;
}

.offline-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 20px;
    background: var(--gray-900);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.offline-banner.show {
    transform: translateY(0);
}

/* ============================================
   Dark Mode for Part 4 Components
   ============================================ */
body.dark-mode .otp-input {
    background: var(--gray-800);
    border-color: var(--gray-600);
    color: white;
}

body.dark-mode .otp-input:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px var(--primary-900);
}

body.dark-mode .currency-prefix,
body.dark-mode .currency-suffix {
    color: var(--gray-400);
}

body.dark-mode .comparison-table th {
    background: var(--gray-800);
    color: var(--gray-300);
}

body.dark-mode .comparison-table td {
    border-color: var(--gray-700);
}

body.dark-mode .comparison-table th.feature-col,
body.dark-mode .comparison-table td.feature-col {
    background: var(--gray-900);
}

body.dark-mode .comparison-table .highlight-col {
    background: var(--primary-900);
}

body.dark-mode .wizard-progress::before {
    background: var(--gray-700);
}

body.dark-mode .wizard-step-number {
    background: var(--gray-800);
    border-color: var(--gray-600);
    color: var(--gray-400);
}

body.dark-mode .wizard-steps::before {
    background: var(--gray-700);
}

body.dark-mode .wizard-step-label {
    color: var(--gray-400);
}

body.dark-mode .wizard-step.active .wizard-step-label {
    color: var(--primary-400);
}

body.dark-mode .data-grid {
    border-color: var(--gray-700);
}

body.dark-mode .data-grid-header,
body.dark-mode .data-grid-footer {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .data-grid-table th {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-300);
}

body.dark-mode .data-grid-table td {
    border-color: var(--gray-800);
}

body.dark-mode .data-grid-table tr:hover td {
    background: var(--gray-800);
}

body.dark-mode .context-menu {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .context-menu-item {
    color: var(--gray-200);
}

body.dark-mode .context-menu-item:hover {
    background: var(--gray-700);
}

body.dark-mode .context-menu-divider {
    background: var(--gray-700);
}

body.dark-mode .file-upload-zone {
    border-color: var(--gray-600);
    background: var(--gray-800);
}

body.dark-mode .file-upload-zone:hover {
    border-color: var(--primary-500);
    background: var(--primary-900);
}

body.dark-mode .file-preview-item {
    background: var(--gray-700);
}

body.dark-mode .empty-state-title {
    color: white;
}

body.dark-mode .empty-state-description {
    color: var(--gray-400);
}

body.dark-mode .date-range-input {
    background: var(--gray-800);
    border-color: var(--gray-600);
    color: white;
}

body.dark-mode .date-range-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .date-range-presets {
    border-color: var(--gray-700);
}

body.dark-mode .date-range-preset {
    color: var(--gray-300);
}

body.dark-mode .date-range-preset:hover {
    background: var(--gray-700);
}

body.dark-mode .calendar-day:hover {
    background: var(--gray-700);
}

body.dark-mode .calendar-day.in-range {
    background: var(--primary-900);
}

body.dark-mode .time-picker {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

body.dark-mode .time-picker-input {
    color: white;
}

body.dark-mode .time-picker-input:focus {
    background: var(--primary-900);
}

body.dark-mode .autocomplete-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .autocomplete-item:hover,
body.dark-mode .autocomplete-item.highlighted {
    background: var(--gray-700);
}

body.dark-mode .tree-node-content:hover {
    background: var(--gray-700);
}

body.dark-mode .tree-node.selected > .tree-node-content {
    background: var(--primary-900);
    color: var(--primary-300);
}

body.dark-mode .pill {
    background: var(--gray-800);
    border-color: var(--gray-600);
    color: var(--gray-200);
}

body.dark-mode .pill:hover {
    border-color: var(--primary-500);
    background: var(--primary-900);
}

body.dark-mode .stat-card-animated .stat-value {
    color: white;
}

body.dark-mode .json-viewer {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

body.dark-mode .diff-viewer {
    border-color: var(--gray-700);
}

body.dark-mode .diff-header {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .diff-line-number {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .diff-line.added {
    background: rgba(34, 197, 94, 0.1);
}

body.dark-mode .diff-line.removed {
    background: rgba(239, 68, 68, 0.1);
}

body.dark-mode .transfer-list-panel {
    border-color: var(--gray-700);
}

body.dark-mode .transfer-list-header {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .transfer-list-item:hover {
    background: var(--gray-800);
}

body.dark-mode .phone-country-select {
    background: var(--gray-700);
    border-color: var(--gray-600);
}

body.dark-mode .code-block {
    background: #0d1117;
}

body.dark-mode .code-header {
    background: #161b22;
}

/* ============================================
   End of Session 28 Part 4 UI Improvements
   ============================================ */

/* ============================================
   Session 28 Part 5: Charts, Mobile & Data Display
   ============================================ */

/* ============================================
   1. Radar/Spider Chart
   ============================================ */
.radar-chart {
    position: relative;
    display: inline-block;
}

.radar-chart svg {
    overflow: visible;
}

.radar-grid {
    fill: none;
    stroke: var(--gray-200);
    stroke-width: 1;
}

.radar-axis {
    stroke: var(--gray-300);
    stroke-width: 1;
}

.radar-axis-label {
    font-size: 0.75rem;
    fill: var(--gray-600);
    text-anchor: middle;
}

.radar-area {
    fill-opacity: 0.3;
    stroke-width: 2;
}

.radar-point {
    fill: white;
    stroke-width: 2;
}

.radar-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 12px;
}

.radar-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
}

.radar-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* ============================================
   2. Scatter Plot
   ============================================ */
.scatter-plot {
    position: relative;
}

.scatter-plot svg {
    overflow: visible;
}

.scatter-grid-line {
    stroke: var(--gray-200);
    stroke-dasharray: 4 4;
}

.scatter-axis {
    stroke: var(--gray-400);
    stroke-width: 1;
}

.scatter-axis-label {
    font-size: 0.75rem;
    fill: var(--gray-500);
}

.scatter-point {
    fill: var(--primary-500);
    transition: transform 0.15s, fill 0.15s;
    cursor: pointer;
}

.scatter-point:hover {
    transform: scale(1.5);
    fill: var(--primary-600);
}

.scatter-tooltip {
    position: absolute;
    background: var(--gray-900);
    color: white;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;
}

/* ============================================
   3. Bubble Chart
   ============================================ */
.bubble-chart {
    position: relative;
}

.bubble-point {
    fill-opacity: 0.6;
    stroke-width: 2;
    cursor: pointer;
    transition: fill-opacity 0.15s;
}

.bubble-point:hover {
    fill-opacity: 0.9;
}

.bubble-label {
    font-size: 0.625rem;
    fill: white;
    text-anchor: middle;
    pointer-events: none;
}

/* ============================================
   4. Gantt Chart
   ============================================ */
.gantt-chart {
    overflow-x: auto;
}

.gantt-header {
    display: flex;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 10;
}

.gantt-header-cell {
    min-width: 40px;
    padding: 8px 4px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--gray-600);
    border-right: 1px solid var(--gray-200);
}

.gantt-header-cell.today {
    background: var(--primary-100);
    font-weight: 600;
}

.gantt-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gray-100);
    min-height: 40px;
}

.gantt-row-label {
    min-width: 150px;
    padding: 8px 12px;
    font-size: 0.875rem;
    background: white;
    position: sticky;
    left: 0;
    z-index: 5;
    border-right: 1px solid var(--gray-200);
}

.gantt-row-cells {
    display: flex;
    flex: 1;
    position: relative;
    min-height: 40px;
}

.gantt-cell {
    min-width: 40px;
    border-right: 1px solid var(--gray-100);
}

.gantt-cell.today {
    background: var(--primary-50);
}

.gantt-bar {
    position: absolute;
    top: 8px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 0.75rem;
    color: white;
    overflow: hidden;
    white-space: nowrap;
}

.gantt-bar.shipping { background: var(--blue-500); }
.gantt-bar.processing { background: var(--yellow-500); }
.gantt-bar.pending { background: var(--gray-400); }
.gantt-bar.complete { background: var(--green-500); }

.gantt-bar-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   5. Waterfall Chart
   ============================================ */
.waterfall-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 200px;
    padding: 20px 0;
}

.waterfall-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.waterfall-bar {
    width: 100%;
    max-width: 60px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: opacity 0.15s;
    position: relative;
}

.waterfall-bar.increase {
    background: var(--green-500);
}

.waterfall-bar.decrease {
    background: var(--red-500);
}

.waterfall-bar.total {
    background: var(--primary-500);
}

.waterfall-connector {
    position: absolute;
    right: -4px;
    height: 2px;
    width: 8px;
    background: var(--gray-400);
}

.waterfall-bar-label {
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-top: 8px;
    text-align: center;
}

.waterfall-bar-value {
    font-size: 0.75rem;
    font-weight: 600;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* ============================================
   6. Gauge/Meter
   ============================================ */
.gauge {
    position: relative;
    display: inline-block;
}

.gauge svg {
    transform: rotate(-90deg);
}

.gauge-background {
    fill: none;
    stroke: var(--gray-200);
}

.gauge-value {
    fill: none;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.gauge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.gauge-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.gauge-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.gauge.success .gauge-value { stroke: var(--green-500); }
.gauge.warning .gauge-value { stroke: var(--yellow-500); }
.gauge.danger .gauge-value { stroke: var(--red-500); }

/* Profit Gauge */
.profit-gauge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profit-gauge .gauge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.profit-gauge .gauge-percent {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

.profit-gauge .gauge-label {
    font-size: 0.625rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   7. Masked Input
   ============================================ */
.masked-input {
    font-family: 'Monaco', 'Menlo', monospace;
    letter-spacing: 0.1em;
}

.masked-input-wrapper {
    position: relative;
}

.masked-input-placeholder {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--gray-300);
    pointer-events: none;
    font-family: 'Monaco', 'Menlo', monospace;
    letter-spacing: 0.1em;
}

/* ============================================
   8. Dual Range Slider
   ============================================ */
.dual-range-slider {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
}

.dual-range-track {
    position: absolute;
    width: 100%;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
}

.dual-range-fill {
    position: absolute;
    height: 6px;
    background: var(--primary-500);
    border-radius: 3px;
}

.dual-range-slider input[type="range"] {
    position: absolute;
    width: 100%;
    height: 6px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.dual-range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: white;
    border: 2px solid var(--primary-500);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: var(--shadow-sm);
}

.dual-range-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: white;
    border: 2px solid var(--primary-500);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: var(--shadow-sm);
}

body.dark-mode .dual-range-slider input[type="range"]::-webkit-slider-thumb {
    background: #374151;
}

body.dark-mode .dual-range-slider input[type="range"]::-moz-range-thumb {
    background: #374151;
}

.dual-range-values {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* ============================================
   9. Bottom Sheet (Mobile Modal)
   ============================================ */
.bottom-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.bottom-sheet-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-2xl);
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 90vh;
    overflow-y: auto;
}

.bottom-sheet.show {
    transform: translateY(0);
}

.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--gray-300);
    border-radius: 2px;
    margin: 12px auto;
}

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

.bottom-sheet-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.bottom-sheet-close {
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-500);
}

.bottom-sheet-content {
    padding: 20px;
}

.bottom-sheet-actions {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* ============================================
   10. Swipeable Card
   ============================================ */
.swipe-card-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 500px;
    perspective: 1000px;
}

.swipe-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xl);
    background: white;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    cursor: grab;
    transition: transform 0.3s, box-shadow 0.3s;
    touch-action: none;
}

.swipe-card:active {
    cursor: grabbing;
}

.swipe-card.swiping {
    transition: none;
}

.swipe-card-image {
    width: 100%;
    height: 60%;
    object-fit: cover;
}

.swipe-card-content {
    padding: 20px;
}

.swipe-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.swipe-card-description {
    color: var(--gray-600);
    font-size: 0.875rem;
}

.swipe-card-actions {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 20px;
}

.swipe-action-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.15s;
}

.swipe-action-btn:hover {
    transform: scale(1.1);
}

body.dark-mode .swipe-action-btn {
    background: #374151;
}

.swipe-action-btn.reject {
    border-color: var(--red-500);
    color: var(--red-500);
}

.swipe-action-btn.reject:hover {
    background: var(--red-500);
    color: white;
}

.swipe-action-btn.accept {
    border-color: var(--green-500);
    color: var(--green-500);
}

.swipe-action-btn.accept:hover {
    background: var(--green-500);
    color: white;
}

.swipe-indicator {
    position: absolute;
    top: 20px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1.25rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.swipe-indicator.left {
    left: 20px;
    background: var(--red-500);
    color: white;
    transform: rotate(-15deg);
}

.swipe-indicator.right {
    right: 20px;
    background: var(--green-500);
    color: white;
    transform: rotate(15deg);
}

/* ============================================
   11. Expandable Table Rows
   ============================================ */
.expandable-table tr.expandable {
    cursor: pointer;
}

.expandable-table tr.expandable:hover {
    background: var(--gray-50);
}

.expand-toggle {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

tr.expanded .expand-toggle {
    transform: rotate(90deg);
}

.expand-content {
    display: none;
    background: var(--gray-50);
}

tr.expanded + .expand-content {
    display: table-row;
}

.expand-content td {
    padding: 16px 24px;
}

.expand-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.expand-detail-item {
    display: flex;
    flex-direction: column;
}

.expand-detail-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.expand-detail-value {
    font-weight: 500;
}

/* ============================================
   12. Column Visibility Toggle
   ============================================ */
.column-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    cursor: pointer;
}

.column-toggle-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: 100;
    display: none;
}

.column-toggle-dropdown.show {
    display: block;
}

.column-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.column-toggle-item:hover {
    background: var(--gray-50);
}

.column-toggle-item input {
    accent-color: var(--primary-500);
}

/* ============================================
   13. Sticky Table Header
   ============================================ */
.sticky-table-container {
    max-height: 500px;
    overflow: auto;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}

.sticky-table thead th {
    position: sticky;
    top: 0;
    background: var(--gray-50);
    z-index: 10;
    box-shadow: 0 1px 0 var(--gray-200);
}

.sticky-table tfoot td {
    position: sticky;
    bottom: 0;
    background: var(--gray-50);
    box-shadow: 0 -1px 0 var(--gray-200);
}

/* ============================================
   14. Inline Cell Edit
   ============================================ */
.editable-cell {
    position: relative;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
}

.editable-cell:hover {
    background: var(--gray-100);
}

.editable-cell::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    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='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
    opacity: 0;
    transition: opacity 0.1s;
}

.editable-cell:hover::after {
    opacity: 1;
}

.editable-cell.editing {
    padding: 0;
}

.editable-cell.editing input {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--primary-500);
    border-radius: var(--radius-sm);
    font: inherit;
}

.editable-cell.editing::after {
    display: none;
}

/* ============================================
   15. Pagination with Go-To
   ============================================ */
.pagination-advanced {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.pagination-goto {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.pagination-goto input {
    width: 60px;
    padding: 6px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    text-align: center;
}

.pagination-per-page {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.pagination-per-page select {
    padding: 6px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
}

/* ============================================
   16. Trend Indicator Arrows
   ============================================ */
.trend-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}

.trend-indicator.up {
    color: var(--green-600);
}

.trend-indicator.down {
    color: var(--red-600);
}

.trend-indicator.neutral {
    color: var(--gray-500);
}

.trend-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.trend-indicator.up .trend-arrow {
    border-bottom: 6px solid var(--green-600);
}

.trend-indicator.down .trend-arrow {
    border-top: 6px solid var(--red-600);
}

.trend-indicator.neutral .trend-arrow {
    width: 10px;
    height: 2px;
    background: var(--gray-500);
    border: none;
}

/* ============================================
   17. Forecast Line (Dashed Projection)
   ============================================ */
.forecast-line {
    stroke-dasharray: 6 4;
    stroke-opacity: 0.7;
}

.forecast-area {
    fill-opacity: 0.1;
}

.forecast-label {
    font-size: 0.75rem;
    fill: var(--gray-500);
    font-style: italic;
}

/* ============================================
   18. Slide-Out Side Panel
   ============================================ */
.side-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.side-panel-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.side-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 400px;
    max-width: 90vw;
    background: white;
    box-shadow: var(--shadow-2xl);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
}

.side-panel.left {
    left: 0;
    transform: translateX(-100%);
}

.side-panel.right {
    right: 0;
    transform: translateX(100%);
}

.side-panel.show {
    transform: translateX(0);
}

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

.side-panel-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.side-panel-close {
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-500);
    border-radius: var(--radius-md);
}

.side-panel-close:hover {
    background: var(--gray-100);
}

.side-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.side-panel-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* ============================================
   19. Inline Confirmation
   ============================================ */
.inline-confirm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.inline-confirm-actions {
    display: none;
    gap: 4px;
}

.inline-confirm.confirming .inline-confirm-trigger {
    display: none;
}

.inline-confirm.confirming .inline-confirm-actions {
    display: flex;
}

.inline-confirm-text {
    font-size: 0.875rem;
    color: var(--red-600);
    font-weight: 500;
}

.inline-confirm-yes,
.inline-confirm-no {
    padding: 4px 8px;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.inline-confirm-yes {
    background: var(--red-500);
    color: white;
    border: none;
}

.inline-confirm-no {
    background: white;
    border: 1px solid var(--gray-300);
}

body.dark-mode .inline-confirm-no {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

/* ============================================
   20. Animated Spinner Variants
   ============================================ */
.spinner-dots {
    display: flex;
    gap: 4px;
}

.spinner-dots span {
    width: 8px;
    height: 8px;
    background: var(--primary-500);
    border-radius: 50%;
    animation: spinnerDots 1.4s ease-in-out infinite both;
}

.spinner-dots span:nth-child(1) { animation-delay: -0.32s; }
.spinner-dots span:nth-child(2) { animation-delay: -0.16s; }
.spinner-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes spinnerDots {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

.spinner-ring {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-bars {
    display: flex;
    gap: 3px;
    height: 24px;
    align-items: flex-end;
}

.spinner-bars span {
    width: 4px;
    background: var(--primary-500);
    animation: spinnerBars 1.2s ease-in-out infinite;
}

.spinner-bars span:nth-child(1) { animation-delay: -0.24s; }
.spinner-bars span:nth-child(2) { animation-delay: -0.12s; }
.spinner-bars span:nth-child(3) { animation-delay: 0s; }
.spinner-bars span:nth-child(4) { animation-delay: 0.12s; }

@keyframes spinnerBars {
    0%, 40%, 100% {
        height: 8px;
    }
    20% {
        height: 24px;
    }
}

.spinner-pulse {
    width: 40px;
    height: 40px;
    background: var(--primary-500);
    border-radius: 50%;
    animation: spinnerPulse 1.5s ease-in-out infinite;
}

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

/* ============================================
   21. Comparison View (Side-by-Side)
   ============================================ */
.comparison-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.comparison-panel {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.comparison-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.comparison-panel-title {
    font-weight: 600;
}

.comparison-panel-content {
    padding: 16px;
}

.comparison-row {
    display: contents;
}

.comparison-label {
    padding: 8px 0;
    color: var(--gray-600);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--gray-100);
}

.comparison-value {
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
}

.comparison-value.different {
    background: var(--yellow-50);
    padding: 8px;
    margin: -8px;
    border-radius: var(--radius-sm);
}

.comparison-value.better {
    color: var(--green-600);
    font-weight: 500;
}

.comparison-value.worse {
    color: var(--red-600);
}

/* ============================================
   22. Mega Menu
   ============================================ */
.mega-menu-trigger {
    position: relative;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 24px;
    display: none;
    z-index: 1000;
}

.mega-menu.show {
    display: block;
    animation: fadeIn 0.15s ease;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
}

.mega-menu-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-200);
}

.mega-menu-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mega-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-md);
    color: var(--gray-600);
    text-decoration: none;
    transition: all 0.15s;
}

.mega-menu-link:hover {
    background: var(--gray-50);
    color: var(--primary-600);
}

.mega-menu-link-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: var(--radius-md);
}

.mega-menu-link-text {
    font-size: 0.875rem;
}

.mega-menu-link-desc {
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* ============================================
   23. Signature Pad
   ============================================ */
.signature-pad-container {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 8px;
    background: var(--gray-50);
}

.signature-pad-container.active {
    border-color: var(--primary-400);
    border-style: solid;
}

.signature-pad {
    width: 100%;
    height: 150px;
    background: white;
    border-radius: var(--radius-md);
    cursor: crosshair;
    touch-action: none;
}

.signature-pad-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.signature-pad-hint {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.signature-pad-clear {
    font-size: 0.875rem;
    color: var(--primary-600);
    background: none;
    border: none;
    cursor: pointer;
}

/* ============================================
   24. Email List Input
   ============================================ */
.email-list-input {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: 8px;
    min-height: 44px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.email-list-input:focus-within {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.email-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.email-chip.invalid {
    background: var(--red-100);
    color: var(--red-700);
}

.email-chip-remove {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--gray-500);
    font-size: 1rem;
    line-height: 1;
}

.email-chip-remove:hover {
    color: var(--gray-700);
}

.email-list-input input {
    flex: 1;
    min-width: 150px;
    border: none;
    outline: none;
    font-size: 0.875rem;
    padding: 4px;
}

/* ============================================
   25. Reorderable List
   ============================================ */
.reorderable-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.reorderable-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    cursor: grab;
    transition: box-shadow 0.15s, transform 0.15s;
}

.reorderable-item:hover {
    box-shadow: var(--shadow-sm);
}

.reorderable-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.reorderable-item.drag-over {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.reorderable-handle {
    color: var(--gray-400);
    cursor: grab;
}

.reorderable-content {
    flex: 1;
}

/* ============================================
   Dark Mode for Part 5 Components
   ============================================ */
body.dark-mode .radar-grid { stroke: var(--gray-700); }
body.dark-mode .radar-axis { stroke: var(--gray-600); }
body.dark-mode .radar-axis-label { fill: var(--gray-400); }

body.dark-mode .scatter-grid-line { stroke: var(--gray-700); }
body.dark-mode .scatter-axis { stroke: var(--gray-600); }
body.dark-mode .scatter-tooltip { background: var(--gray-700); }

body.dark-mode .gantt-header { background: var(--gray-800); border-color: var(--gray-700); }
body.dark-mode .gantt-header-cell { border-color: var(--gray-700); color: var(--gray-400); }
body.dark-mode .gantt-row { border-color: var(--gray-800); }
body.dark-mode .gantt-row-label { background: var(--gray-900); border-color: var(--gray-700); }
body.dark-mode .gantt-cell { border-color: var(--gray-800); }

body.dark-mode .waterfall-bar-label { color: var(--gray-400); }

body.dark-mode .gauge-background { stroke: var(--gray-700); }
body.dark-mode .gauge-number { color: white; }
body.dark-mode .gauge-label { color: var(--gray-400); }

body.dark-mode .dual-range-track { background: var(--gray-700); }

body.dark-mode .bottom-sheet {
    background: var(--gray-900);
}
body.dark-mode .bottom-sheet-handle { background: var(--gray-600); }
body.dark-mode .bottom-sheet-header { border-color: var(--gray-700); }
body.dark-mode .bottom-sheet-actions { background: var(--gray-800); border-color: var(--gray-700); }

body.dark-mode .swipe-card {
    background: var(--gray-800);
}
body.dark-mode .swipe-card-description { color: var(--gray-400); }

body.dark-mode .expand-content { background: var(--gray-800); }
body.dark-mode .expand-detail-label { color: var(--gray-500); }

body.dark-mode .column-toggle-btn {
    background: var(--gray-800);
    border-color: var(--gray-600);
    color: var(--gray-200);
}
body.dark-mode .column-toggle-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}
body.dark-mode .column-toggle-item:hover { background: var(--gray-700); }

body.dark-mode .sticky-table-container { border-color: var(--gray-700); }
body.dark-mode .sticky-table thead th {
    background: var(--gray-800);
    box-shadow: 0 1px 0 var(--gray-700);
}

body.dark-mode .editable-cell:hover { background: var(--gray-700); }

body.dark-mode .side-panel {
    background: var(--gray-900);
}
body.dark-mode .side-panel-header { border-color: var(--gray-700); }
body.dark-mode .side-panel-close:hover { background: var(--gray-800); }
body.dark-mode .side-panel-footer { background: var(--gray-800); border-color: var(--gray-700); }

body.dark-mode .comparison-panel { border-color: var(--gray-700); }
body.dark-mode .comparison-panel-header { background: var(--gray-800); border-color: var(--gray-700); }
body.dark-mode .comparison-label { color: var(--gray-400); border-color: var(--gray-700); }
body.dark-mode .comparison-value { border-color: var(--gray-700); }
body.dark-mode .comparison-value.different { background: rgba(234, 179, 8, 0.1); }

body.dark-mode .mega-menu {
    background: var(--gray-800);
    border-color: var(--gray-700);
}
body.dark-mode .mega-menu-section h4 { color: white; border-color: var(--gray-700); }
body.dark-mode .mega-menu-link { color: var(--gray-300); }
body.dark-mode .mega-menu-link:hover { background: var(--gray-700); }
body.dark-mode .mega-menu-link-icon { background: var(--gray-700); }

body.dark-mode .signature-pad-container {
    border-color: var(--gray-600);
    background: var(--gray-800);
}
body.dark-mode .signature-pad { background: var(--gray-900); }

body.dark-mode .email-list-input {
    background: var(--gray-800);
    border-color: var(--gray-600);
}
body.dark-mode .email-list-input input {
    background: transparent;
    color: white;
}
body.dark-mode .email-chip { background: var(--gray-700); }

body.dark-mode .reorderable-item {
    background: var(--gray-800);
    border-color: var(--gray-700);
}
body.dark-mode .reorderable-item.drag-over {
    background: var(--primary-900);
    border-color: var(--primary-500);
}

/* ============================================
   End of Session 28 Part 5 UI Improvements
   ============================================ */

/* ============================================
   Session 28 Part 6: Accessibility, E-commerce & Celebrations
   ============================================ */

/* ============================================
   1. Skip to Main Content Link
   ============================================ */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background: var(--primary-600);
    color: white;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 10000;
    transition: top 0.2s;
}

.skip-to-main:focus {
    top: 0;
    outline: 3px solid var(--primary-300);
    outline-offset: 2px;
}

/* ============================================
   2. Enhanced Focus Ring Styles
   ============================================ */
.focus-ring-primary:focus-visible {
    outline: 3px solid var(--primary-500);
    outline-offset: 2px;
}

.focus-ring-inset:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--primary-500);
}

.focus-ring-custom:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-100), 0 0 0 5px var(--primary-500);
}

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

/* ============================================
   3. ARIA Live Region Container
   ============================================ */
.aria-live-polite {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.aria-live-assertive {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   4. Button Press Feedback
   ============================================ */
.btn-press {
    transition: transform 0.1s, box-shadow 0.1s, filter 0.1s;
}

.btn-press:active {
    transform: scale(0.97);
    filter: brightness(0.95);
}

.btn-press-bounce:active {
    animation: buttonBounce 0.2s ease;
}

@keyframes buttonBounce {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* ============================================
   5. Input Focus Shine Effect
   ============================================ */
.input-shine {
    position: relative;
    overflow: hidden;
}

.input-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    transition: left 0.5s;
    pointer-events: none;
}

.input-shine:focus-within::before {
    left: 100%;
}

/* ============================================
   6. Success Checkmark Animation
   ============================================ */
.success-checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-500);
    animation: successPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.success-checkmark svg {
    width: 28px;
    height: 28px;
    stroke: white;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.success-checkmark .checkmark-path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: checkmarkDraw 0.3s 0.2s ease forwards;
}

@keyframes successPop {
    0% { transform: scale(0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes checkmarkDraw {
    to { stroke-dashoffset: 0; }
}

/* ============================================
   7. Error Shake Animation
   ============================================ */
.error-shake {
    animation: errorShake 0.4s ease-in-out;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.error-flash {
    animation: errorFlash 0.5s ease;
}

@keyframes errorFlash {
    0%, 50%, 100% { background-color: inherit; }
    25%, 75% { background-color: var(--red-100); }
}

/* ============================================
   8. Hover Card Preview
   ============================================ */
.hover-card-trigger {
    position: relative;
    cursor: pointer;
}

.hover-card {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: 280px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    z-index: 1000;
}

.hover-card-trigger:hover .hover-card,
.hover-card-trigger:focus .hover-card {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-12px);
}

.hover-card-arrow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: white;
    border-right: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

/* ============================================
   9. Responsive Display Utilities
   ============================================ */
.show-mobile { display: block; }
.show-tablet { display: none; }
.show-desktop { display: none; }
.hide-mobile { display: none; }
.hide-tablet { display: block; }
.hide-desktop { display: block; }

@media (min-width: 768px) {
    .show-mobile { display: none; }
    .show-tablet { display: block; }
    .hide-mobile { display: block; }
    .hide-tablet { display: none; }
}

@media (min-width: 1024px) {
    .show-tablet { display: none; }
    .show-desktop { display: block; }
    .hide-tablet { display: block; }
    .hide-desktop { display: none; }
}

.only-mobile { display: block; }
.only-tablet { display: none; }
.only-desktop { display: none; }

@media (min-width: 768px) and (max-width: 1023px) {
    .only-mobile { display: none; }
    .only-tablet { display: block; }
}

@media (min-width: 1024px) {
    .only-mobile { display: none; }
    .only-desktop { display: block; }
}

/* ============================================
   10. Flexbox Alignment Helpers
   ============================================ */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.flex-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.flex-evenly {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }

/* ============================================
   11. Z-Index Management System
   ============================================ */
:root {
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
    --z-max: 9999;
}

.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-fixed { z-index: var(--z-fixed); }
.z-modal-backdrop { z-index: var(--z-modal-backdrop); }
.z-modal { z-index: var(--z-modal); }
.z-popover { z-index: var(--z-popover); }
.z-tooltip { z-index: var(--z-tooltip); }
.z-notification { z-index: var(--z-notification); }
.z-max { z-index: var(--z-max); }

/* ============================================
   12. Progressive Image Loading
   ============================================ */
.progressive-image {
    position: relative;
    overflow: hidden;
    background: var(--gray-100);
}

.progressive-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.progressive-image .placeholder {
    position: absolute;
    inset: 0;
    filter: blur(20px);
    transform: scale(1.1);
    transition: opacity 0.3s;
}

.progressive-image.loaded .placeholder {
    opacity: 0;
}

.progressive-image .full {
    opacity: 0;
    transition: opacity 0.3s;
}

.progressive-image.loaded .full {
    opacity: 1;
}

/* ============================================
   13. Product Card Extended
   ============================================ */
.product-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

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

.product-card-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.product-card:hover .product-card-image img {
    transform: scale(1.05);
}

.product-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s;
}

.product-card-wishlist:hover {
    transform: scale(1.1);
}

body.dark-mode .product-card-wishlist {
    background: #374151;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.product-card-wishlist.active {
    color: var(--red-500);
}

.product-card-body {
    padding: 16px;
}

.product-card-brand {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-card-title {
    font-weight: 600;
    margin: 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 8px 0;
}

.product-card-rating-stars {
    color: var(--yellow-400);
    font-size: 0.875rem;
}

.product-card-rating-count {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.product-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
}

.product-card-price-current {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

.product-card-price-original {
    font-size: 0.875rem;
    color: var(--gray-400);
    text-decoration: line-through;
}

.product-card-price-discount {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--red-600);
}

.product-card-actions {
    padding: 0 16px 16px;
}

.product-card-actions .btn {
    width: 100%;
}

/* ============================================
   14. Sale/Promotion Badges
   ============================================ */
.badge-sale {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
}

.badge-sale.sale {
    background: var(--red-500);
    color: white;
}

.badge-sale.new {
    background: var(--green-500);
    color: white;
    animation: badgePulse 2s infinite;
}

.badge-sale.hot {
    background: var(--orange-500);
    color: white;
    animation: badgeGlow 1.5s infinite;
}

.badge-sale.limited {
    background: var(--purple-500);
    color: white;
}

.badge-sale.clearance {
    background: var(--yellow-500);
    color: var(--gray-900);
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes badgeGlow {
    0%, 100% { box-shadow: 0 0 5px var(--orange-400); }
    50% { box-shadow: 0 0 15px var(--orange-400); }
}

/* ============================================
   15. Inventory Status Badges
   ============================================ */
.inventory-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
}

.inventory-badge.in-stock {
    background: var(--green-100);
    color: var(--green-700);
}

.inventory-badge.low-stock {
    background: var(--yellow-100);
    color: var(--yellow-700);
}

.inventory-badge.out-of-stock {
    background: var(--gray-100);
    color: var(--gray-600);
}

.inventory-badge.backorder {
    background: var(--blue-100);
    color: var(--blue-700);
}

.inventory-badge.pre-order {
    background: var(--purple-100);
    color: var(--purple-700);
}

.inventory-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.inventory-badge.in-stock .inventory-badge-dot { background: var(--green-500); }
.inventory-badge.low-stock .inventory-badge-dot { background: var(--yellow-500); }
.inventory-badge.out-of-stock .inventory-badge-dot { background: var(--gray-400); }
.inventory-badge.backorder .inventory-badge-dot { background: var(--blue-500); }

/* ============================================
   16. SKU/Barcode Display
   ============================================ */
.sku-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.875rem;
}

.sku-display-label {
    color: var(--gray-500);
    font-weight: 500;
}

.sku-display-value {
    color: var(--gray-900);
    font-weight: 600;
}

.sku-display-copy {
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}

.sku-display-copy:hover {
    color: var(--primary-600);
    background: var(--gray-200);
}

.barcode-display {
    padding: 12px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    text-align: center;
}

.barcode-display svg {
    max-width: 100%;
}

.barcode-display-number {
    margin-top: 8px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
}

/* ============================================
   17. Variant Selector
   ============================================ */
.variant-selector {
    margin-bottom: 16px;
}

.variant-selector-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}

.variant-selector-selected {
    color: var(--gray-500);
}

.variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.variant-option {
    min-width: 44px;
    padding: 8px 16px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: white;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
}

body.dark-mode .variant-option {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.variant-option:hover:not(:disabled) {
    border-color: var(--gray-400);
}

.variant-option.selected {
    border-color: var(--primary-500);
    background: var(--primary-50);
    color: var(--primary-700);
}

.variant-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: line-through;
}

.variant-option.color-swatch {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 50%;
    position: relative;
}

.variant-option.color-swatch.selected::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ============================================
   18. User Presence Indicator
   ============================================ */
.presence-indicator {
    position: relative;
    display: inline-block;
}

.presence-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
}

.presence-dot.online {
    background: var(--green-500);
}

.presence-dot.idle {
    background: var(--yellow-500);
}

.presence-dot.offline {
    background: var(--gray-400);
}

.presence-dot.busy {
    background: var(--red-500);
}

.presence-dot.online::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: var(--green-500);
    opacity: 0.4;
    animation: presencePulse 2s infinite;
}

@keyframes presencePulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.5); opacity: 0; }
}

/* ============================================
   19. Typing Indicator
   ============================================ */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    color: var(--gray-600);
}

.typing-indicator-dots {
    display: flex;
    gap: 3px;
}

.typing-indicator-dots span {
    width: 6px;
    height: 6px;
    background: var(--gray-400);
    border-radius: 50%;
    animation: typingDot 1.4s ease-in-out infinite;
}

.typing-indicator-dots span:nth-child(1) { animation-delay: 0s; }
.typing-indicator-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

/* ============================================
   20. Read Receipts
   ============================================ */
.read-receipt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--gray-400);
}

.read-receipt.seen {
    color: var(--blue-500);
}

.read-receipt-icon {
    display: flex;
}

.read-receipt-icon.double-check {
    position: relative;
}

.read-receipt-icon.double-check::after {
    content: '✓';
    position: absolute;
    left: 4px;
}

/* ============================================
   21. Confetti Celebration
   ============================================ */
.confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 10000;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ============================================
   22. Achievement Badge Unlock
   ============================================ */
.achievement-toast {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--yellow-400), var(--orange-500));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    animation: achievementSlide 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.achievement-badge-icon {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

body.dark-mode .achievement-badge-icon {
    background: #374151;
    animation: achievementBounce 0.5s 0.3s ease;
}

.achievement-content {
    color: white;
}

.achievement-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.9;
}

.achievement-title {
    font-size: 1rem;
    font-weight: 700;
}

@keyframes achievementSlide {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes achievementBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ============================================
   23. Milestone Celebration Card
   ============================================ */
.milestone-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.milestone-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: 48px;
    text-align: center;
    max-width: 400px;
    animation: milestonePopIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.milestone-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.milestone-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.milestone-description {
    color: var(--gray-600);
    margin-bottom: 24px;
}

.milestone-stat {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-600);
    line-height: 1;
}

.milestone-stat-label {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-top: 8px;
}

@keyframes milestonePopIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ============================================
   24. Audio Player
   ============================================ */
.audio-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-100);
    border-radius: var(--radius-lg);
}

.audio-player-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-500);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.audio-player-btn:hover {
    background: var(--primary-600);
}

.audio-player-progress {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audio-player-track {
    height: 6px;
    background: var(--gray-300);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}

.audio-player-track-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: 3px;
    transition: width 0.1s;
}

.audio-player-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.audio-player-volume {
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-player-volume input[type="range"] {
    width: 80px;
}

/* ============================================
   25. Video Player
   ============================================ */
.video-player {
    position: relative;
    background: black;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.video-player video {
    width: 100%;
    display: block;
}

.video-player-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.2s;
}

.video-player:hover .video-player-controls {
    opacity: 1;
}

.video-player-controls button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px;
}

.video-player-progress {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
}

.video-player-progress-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: 2px;
}

.video-player-time {
    font-size: 0.75rem;
    color: white;
}

/* ============================================
   26. Image Gallery Carousel
   ============================================ */
.image-carousel {
    position: relative;
}

.image-carousel-main {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.image-carousel-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: background 0.15s;
}

.image-carousel-nav:hover {
    background: white;
}

.image-carousel-nav.prev { left: 12px; }
.image-carousel-nav.next { right: 12px; }

.image-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.image-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-300);
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.image-carousel-dot.active {
    background: var(--primary-500);
    transform: scale(1.25);
}

.image-carousel-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding: 4px 0;
}

.image-carousel-thumb {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.image-carousel-thumb.active {
    opacity: 1;
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.image-carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   Dark Mode for Part 6 Components
   ============================================ */
body.dark-mode .skip-to-main {
    background: var(--primary-500);
}

body.dark-mode .hover-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .hover-card-arrow {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .product-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .product-card-brand { color: var(--gray-400); }
body.dark-mode .product-card-title { color: white; }
body.dark-mode .product-card-price-current { color: white; }

body.dark-mode .sku-display {
    background: var(--gray-700);
}
body.dark-mode .sku-display-value { color: white; }

body.dark-mode .barcode-display {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .variant-option {
    background: var(--gray-800);
    border-color: var(--gray-600);
    color: var(--gray-200);
}

body.dark-mode .variant-option:hover:not(:disabled) {
    border-color: var(--gray-500);
}

body.dark-mode .variant-option.selected {
    background: var(--primary-900);
    border-color: var(--primary-500);
    color: var(--primary-300);
}

body.dark-mode .typing-indicator {
    background: var(--gray-700);
    color: var(--gray-300);
}

body.dark-mode .typing-indicator-dots span {
    background: var(--gray-500);
}

body.dark-mode .milestone-card {
    background: var(--gray-800);
}
body.dark-mode .milestone-title { color: white; }
body.dark-mode .milestone-description { color: var(--gray-400); }

body.dark-mode .audio-player {
    background: var(--gray-800);
}
body.dark-mode .audio-player-track { background: var(--gray-700); }

body.dark-mode .image-carousel-nav {
    background: rgba(0, 0, 0, 0.8);
    color: white;
}

body.dark-mode .image-carousel-dot {
    background: var(--gray-600);
}

/* ============================================
   End of Session 28 Part 6 UI Improvements
   ============================================ */

/* ============================================
   Session 28 Part 7: Input Masks, Forms & Navigation
   ============================================ */

/* ============================================
   1. Credit Card Input Mask
   ============================================ */
.credit-card-input {
    display: flex;
    align-items: center;
    gap: 12px;
}

.credit-card-input input {
    flex: 1;
    font-family: 'Monaco', 'Menlo', monospace;
    letter-spacing: 0.15em;
}

.credit-card-brand {
    width: 40px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--gray-600);
}

.credit-card-brand.visa { background: #1a1f71; color: white; }
.credit-card-brand.mastercard { background: #eb001b; color: white; }
.credit-card-brand.amex { background: #006fcf; color: white; }
.credit-card-brand.discover { background: #ff6600; color: white; }

/* ============================================
   2. Phone Number Input Mask
   ============================================ */
.phone-input {
    display: flex;
    align-items: center;
}

.phone-input-country {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    cursor: pointer;
}

.phone-input-flag {
    font-size: 1.25rem;
}

.phone-input-code {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.phone-input input {
    flex: 1;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ============================================
   3. Date Shortcut Input
   ============================================ */
.date-shortcut-input {
    position: relative;
}

.date-shortcut-hints {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: none;
    z-index: 100;
}

.date-shortcut-input:focus-within .date-shortcut-hints {
    display: block;
}

.date-shortcut-hint {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.date-shortcut-hint:hover {
    background: var(--gray-100);
}

.date-shortcut-hint-key {
    font-weight: 600;
    color: var(--primary-600);
}

.date-shortcut-hint-value {
    color: var(--gray-500);
}

/* ============================================
   4. Conditional Field Group
   ============================================ */
.conditional-field-group {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}

.conditional-field-group.show {
    max-height: 500px;
    opacity: 1;
    margin-top: 16px;
}

.conditional-field-group.instant {
    transition: none;
}

.field-dependency-line {
    position: relative;
    padding-left: 20px;
    margin-left: 10px;
    border-left: 2px solid var(--gray-200);
}

.field-dependency-line::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 20px;
    width: 12px;
    height: 2px;
    background: var(--gray-200);
}

/* ============================================
   5. Form Section Collapse
   ============================================ */
.form-section {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
}

.form-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--gray-50);
    cursor: pointer;
    user-select: none;
}

.form-section-header:hover {
    background: var(--gray-100);
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.form-section-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: var(--radius-sm);
}

.form-section-toggle {
    transition: transform 0.2s;
}

.form-section.collapsed .form-section-toggle {
    transform: rotate(-90deg);
}

.form-section-content {
    padding: 20px;
    border-top: 1px solid var(--gray-200);
}

.form-section.collapsed .form-section-content {
    display: none;
}

/* ============================================
   6. Auto Save Indicator
   ============================================ */
.auto-save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.auto-save-indicator.saving {
    color: var(--yellow-600);
}

.auto-save-indicator.saved {
    color: var(--green-600);
}

.auto-save-indicator.error {
    color: var(--red-600);
}

.auto-save-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--yellow-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.auto-save-check {
    color: var(--green-500);
}

/* ============================================
   7. Validation Summary
   ============================================ */
.validation-summary {
    padding: 16px;
    background: var(--red-50);
    border: 1px solid var(--red-200);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.validation-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--red-700);
    margin-bottom: 12px;
}

.validation-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.validation-summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.875rem;
    color: var(--red-600);
}

.validation-summary-item a {
    color: var(--red-700);
    text-decoration: underline;
}

.validation-summary-item a:hover {
    color: var(--red-800);
}

/* ============================================
   8. Form Progress Bar
   ============================================ */
.form-progress {
    margin-bottom: 24px;
}

.form-progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.form-progress-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.form-progress-text {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.form-progress.complete .form-progress-fill {
    background: var(--green-500);
}

/* ============================================
   9. Recent Pages Widget
   ============================================ */
.recent-pages {
    padding: 12px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
}

.recent-pages-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.recent-pages-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recent-page-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: var(--radius-sm);
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.1s;
}

.recent-page-item:hover {
    background: var(--gray-100);
}

.recent-page-icon {
    color: var(--gray-400);
}

.recent-page-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* ============================================
   10. Command Palette Enhancements
   ============================================ */
.command-palette-group {
    margin-bottom: 12px;
}

.command-palette-group-title {
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
}

.command-palette-recent {
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.command-palette-item-badge {
    margin-left: auto;
    font-size: 0.625rem;
    padding: 2px 6px;
    background: var(--gray-200);
    border-radius: var(--radius-sm);
    color: var(--gray-600);
}

/* ============================================
   11. Table Row Selection
   ============================================ */
.table-selectable th:first-child,
.table-selectable td:first-child {
    width: 40px;
    text-align: center;
}

.table-selectable input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-500);
}

.table-select-all {
    cursor: pointer;
}

.table-selectable tr.selected {
    background: var(--primary-50);
}

.table-selection-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--primary-600);
    color: white;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    animation: slideDown 0.2s ease;
}

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

.table-selection-count {
    font-weight: 600;
}

.table-selection-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.table-selection-actions button {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
    font-size: 0.875rem;
}

.table-selection-actions button:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   12. Table Export Menu
   ============================================ */
.table-export-menu {
    position: relative;
    display: inline-block;
}

.table-export-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    z-index: 100;
    display: none;
}

.table-export-dropdown.show {
    display: block;
}

.table-export-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.1s;
}

.table-export-option:hover {
    background: var(--gray-50);
}

.table-export-option-icon {
    color: var(--gray-400);
}

/* ============================================
   13. Row Hover Actions
   ============================================ */
.table-row-actions {
    position: relative;
}

.row-hover-actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
}

tr:hover .row-hover-actions {
    opacity: 1;
    visibility: visible;
}

.row-hover-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: white;
    border: 1px solid var(--gray-200);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    transition: all 0.15s;
}

.row-hover-btn:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.row-hover-btn.danger:hover {
    background: var(--red-50);
    color: var(--red-600);
    border-color: var(--red-200);
}

/* ============================================
   14. Skeleton Variations
   ============================================ */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-avatar.sm { width: 32px; height: 32px; }
.skeleton-avatar.lg { width: 56px; height: 56px; }

.skeleton-table {
    width: 100%;
}

.skeleton-table-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

.skeleton-table-cell {
    height: 16px;
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

.skeleton-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.skeleton-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-label {
    width: 80px;
    height: 14px;
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

.skeleton-input {
    height: 40px;
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* ============================================
   15. Pull to Refresh (styles defined in earlier section)
   ============================================ */

/* ============================================
   16. Swipe Action Row
   ============================================ */
.swipe-row {
    position: relative;
    overflow: hidden;
}

.swipe-row-content {
    position: relative;
    background: white;
    transition: transform 0.2s;
    z-index: 1;
}

.swipe-row-actions {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
}

.swipe-row-actions.left {
    left: 0;
}

.swipe-row-actions.right {
    right: 0;
}

.swipe-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    color: white;
    font-weight: 500;
}

.swipe-action.edit {
    background: var(--blue-500);
}

.swipe-action.archive {
    background: var(--yellow-500);
}

.swipe-action.delete {
    background: var(--red-500);
}

/* ============================================
   17. Rich Tooltip
   ============================================ */
.tooltip-rich {
    position: absolute;
    max-width: 320px;
    padding: 12px 16px;
    background: var(--gray-900);
    color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    font-size: 0.875rem;
    line-height: 1.5;
}

.tooltip-rich-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.tooltip-rich-content {
    color: var(--gray-300);
}

.tooltip-rich-content code {
    background: var(--gray-800);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.8125rem;
}

.tooltip-rich-image {
    margin-top: 8px;
    border-radius: var(--radius-sm);
    max-width: 100%;
}

.tooltip-rich-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--gray-900);
    transform: rotate(45deg);
}

.tooltip-rich-arrow.top { bottom: -4px; left: 50%; margin-left: -4px; }
.tooltip-rich-arrow.bottom { top: -4px; left: 50%; margin-left: -4px; }
.tooltip-rich-arrow.left { right: -4px; top: 50%; margin-top: -4px; }
.tooltip-rich-arrow.right { left: -4px; top: 50%; margin-top: -4px; }

/* ============================================
   18. Badge Variations
   ============================================ */
.badge-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--red-500);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 10px;
}

.badge-counter.large {
    min-width: 24px;
    height: 24px;
    font-size: 0.8125rem;
}

.badge-counter.muted {
    background: var(--gray-500);
}

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-pill.primary { background: var(--primary-100); color: var(--primary-700); }
.badge-pill.success { background: var(--green-100); color: var(--green-700); }
.badge-pill.warning { background: var(--yellow-100); color: var(--yellow-700); }
.badge-pill.danger { background: var(--red-100); color: var(--red-700); }
.badge-pill.info { background: var(--blue-100); color: var(--blue-700); }

.badge-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

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

.badge-dot.primary { background: var(--primary-500); }
.badge-dot.success { background: var(--green-500); }
.badge-dot.warning { background: var(--yellow-500); }
.badge-dot.danger { background: var(--red-500); }

.badge-removable {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 12px;
    background: var(--gray-100);
    border-radius: 9999px;
    font-size: 0.875rem;
}

.badge-removable-close {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gray-300);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--gray-600);
}

.badge-removable-close:hover {
    background: var(--gray-400);
}

/* ============================================
   19. Card Variations
   ============================================ */
.card-horizontal {
    display: flex;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.card-horizontal-image {
    width: 200px;
    flex-shrink: 0;
}

.card-horizontal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-horizontal-body {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.card-compact {
    padding: 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}

.card-compact-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.card-compact-title {
    font-weight: 600;
    font-size: 0.875rem;
}

.card-compact-content {
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.card-overlay {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.card-overlay img {
    width: 100%;
    display: block;
}

.card-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
}

.card-overlay-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.card-overlay-description {
    font-size: 0.875rem;
    opacity: 0.9;
}

.card-with-fab {
    position: relative;
    padding-bottom: 28px;
}

.card-fab {
    position: absolute;
    bottom: -20px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-500);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: transform 0.15s, background 0.15s;
}

.card-fab:hover {
    background: var(--primary-600);
    transform: scale(1.1);
}

/* ============================================
   20. Page Transition
   ============================================ */
.page-transition-enter {
    opacity: 0;
    transform: translateX(20px);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.2s, transform 0.2s;
}

.page-transition-exit {
    opacity: 1;
    transform: translateX(0);
}

.page-transition-exit-active {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.2s, transform 0.2s;
}

.page-fade-enter {
    opacity: 0;
}

.page-fade-enter-active {
    opacity: 1;
    transition: opacity 0.3s;
}

/* ============================================
   Dark Mode for Part 7 Components
   ============================================ */
body.dark-mode .credit-card-brand {
    background: var(--gray-700);
    color: var(--gray-300);
}

body.dark-mode .phone-input-country {
    background: var(--gray-700);
    border-color: var(--gray-600);
}

body.dark-mode .date-shortcut-hints {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .date-shortcut-hint:hover {
    background: var(--gray-700);
}

body.dark-mode .form-section {
    border-color: var(--gray-700);
}

body.dark-mode .form-section-header {
    background: var(--gray-800);
}

body.dark-mode .form-section-header:hover {
    background: var(--gray-700);
}

body.dark-mode .form-section-content {
    border-color: var(--gray-700);
}

body.dark-mode .validation-summary {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--red-900);
}

body.dark-mode .form-progress-bar {
    background: var(--gray-700);
}

body.dark-mode .recent-pages {
    background: var(--gray-800);
}

body.dark-mode .recent-page-item {
    color: var(--gray-200);
}

body.dark-mode .recent-page-item:hover {
    background: var(--gray-700);
}

body.dark-mode .table-export-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .table-export-option:hover {
    background: var(--gray-700);
}

body.dark-mode .row-hover-btn {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-300);
}

body.dark-mode .row-hover-btn:hover {
    background: var(--gray-600);
}

body.dark-mode .swipe-row-content {
    background: var(--gray-800);
}

body.dark-mode .tooltip-rich {
    background: var(--gray-700);
}

body.dark-mode .tooltip-rich-arrow {
    background: var(--gray-700);
}

body.dark-mode .badge-removable {
    background: var(--gray-700);
}

body.dark-mode .card-horizontal {
    border-color: var(--gray-700);
}

body.dark-mode .card-compact {
    border-color: var(--gray-700);
}

body.dark-mode .card-compact-content {
    color: var(--gray-400);
}

/* ============================================
   End of Session 28 Part 7 UI Improvements
   ============================================ */

/* ============================================
   Session 28 Part 8: Autocomplete, Navigation,
   Dashboard Widgets & Accessibility
   ============================================ */

/* ===========================================
   1. Autocomplete Input with Suggestions
   =========================================== */
.autocomplete-container {
    position: relative;
    width: 100%;
}

.autocomplete-input {
    width: 100%;
    padding-right: 32px;
}

.autocomplete-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.autocomplete-container:hover .autocomplete-clear,
.autocomplete-input:focus + .autocomplete-clear {
    opacity: 1;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.autocomplete-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
}

.autocomplete-group {
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
}

.autocomplete-group:last-child {
    border-bottom: none;
}

.autocomplete-group-label {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    letter-spacing: 0.5px;
}

.autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.15s;
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
    background: var(--primary-50);
}

.autocomplete-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.autocomplete-item-title {
    font-weight: 500;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-item-subtitle {
    font-size: 12px;
    color: var(--gray-500);
}

.autocomplete-highlight {
    background: var(--warning-100);
    color: var(--warning-700);
    font-weight: 600;
    border-radius: 2px;
}

.autocomplete-empty {
    padding: 24px;
    text-align: center;
    color: var(--gray-500);
}

.autocomplete-loading {
    padding: 16px;
    text-align: center;
}

.autocomplete-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-200);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ===========================================
   2. Smart Category Selector (Hierarchical)
   =========================================== */
.category-selector {
    position: relative;
}

.category-selector-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.category-selector-trigger:hover {
    border-color: var(--gray-400);
}

.category-selector-trigger.open {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.category-selector-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-selector-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--gray-500);
}

.category-selector-breadcrumb span:last-child {
    color: var(--gray-900);
    font-weight: 500;
}

.category-selector-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    display: none;
}

.category-selector-dropdown.show {
    display: block;
}

.category-selector-search {
    padding: 8px;
    border-bottom: 1px solid var(--gray-100);
}

.category-selector-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 14px;
}

.category-selector-favorites {
    padding: 8px;
    border-bottom: 1px solid var(--gray-100);
}

.category-selector-favorites-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 6px;
}

.category-selector-favorites-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.category-favorite-chip {
    padding: 4px 10px;
    background: var(--primary-50);
    color: var(--primary-700);
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.category-favorite-chip:hover {
    background: var(--primary-100);
}

.category-selector-tree {
    max-height: 280px;
    overflow-y: auto;
    padding: 8px 0;
}

.category-tree-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.category-tree-item:hover {
    background: var(--gray-50);
}

.category-tree-item.selected {
    background: var(--primary-50);
}

.category-tree-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    color: var(--gray-400);
    transition: transform 0.2s;
}

.category-tree-toggle.expanded {
    transform: rotate(90deg);
}

.category-tree-label {
    flex: 1;
}

.category-tree-count {
    font-size: 12px;
    color: var(--gray-400);
    margin-left: 8px;
}

.category-tree-children {
    padding-left: 24px;
    display: none;
}

.category-tree-children.expanded {
    display: block;
}

/* ===========================================
   3. Inline Field Editing
   =========================================== */
.inline-editable {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.inline-editable:hover {
    background: var(--gray-100);
}

.inline-editable-icon {
    opacity: 0;
    color: var(--gray-400);
    transition: opacity 0.15s;
}

.inline-editable:hover .inline-editable-icon {
    opacity: 1;
}

.inline-editable.editing {
    background: transparent;
    padding: 0;
}

.inline-editable-input {
    padding: 4px 8px;
    border: 2px solid var(--primary-500);
    border-radius: 4px;
    font-size: inherit;
    font-family: inherit;
    background: white;
    outline: none;
    min-width: 100px;
}

.inline-editable-actions {
    display: flex;
    gap: 4px;
    margin-left: 4px;
}

.inline-editable-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inline-editable-btn.save {
    background: var(--success-500);
    color: white;
}

.inline-editable-btn.cancel {
    background: var(--gray-200);
    color: var(--gray-600);
}

.inline-editable-saving {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-500);
    font-size: 12px;
}

/* ===========================================
   4. Multi-Select Tag Picker
   =========================================== */
.tag-picker {
    position: relative;
}

.tag-picker-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    min-height: 44px;
    cursor: text;
    transition: all 0.2s;
}

.tag-picker-input-container:focus-within {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.tag-picker-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: 4px;
    font-size: 13px;
}

.tag-picker-tag-remove {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-200);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
}

.tag-picker-tag-remove:hover {
    background: var(--primary-300);
}

.tag-picker-input {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
}

.tag-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.tag-picker-dropdown.show {
    display: block;
}

.tag-picker-section {
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
}

.tag-picker-section:last-child {
    border-bottom: none;
}

.tag-picker-section-label {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
}

.tag-picker-suggestion {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s;
}

.tag-picker-suggestion:hover {
    background: var(--gray-50);
}

.tag-picker-suggestion-count {
    font-size: 12px;
    color: var(--gray-400);
}

.tag-picker-create {
    padding: 8px 12px;
    color: var(--primary-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tag-picker-create:hover {
    background: var(--primary-50);
}

/* ===========================================
   5. Enhanced Toast Notification Queue
   =========================================== */
.toast-queue {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    max-width: 400px;
}

.toast-notification {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.3s ease;
}

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

.toast-notification.dismissing {
    transform: translateX(120%);
    opacity: 0;
}

.toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-notification.success .toast-icon {
    background: var(--success-100);
    color: var(--success-600);
}

.toast-notification.error .toast-icon {
    background: var(--error-100);
    color: var(--error-600);
}

.toast-notification.warning .toast-icon {
    background: var(--warning-100);
    color: var(--warning-600);
}

.toast-notification.info .toast-icon {
    background: var(--info-100);
    color: var(--info-600);
}

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

.toast-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 2px;
}

.toast-message {
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.4;
}

.toast-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.toast-action-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.toast-action-btn.primary {
    background: var(--primary-500);
    color: white;
}

.toast-action-btn.primary:hover {
    background: var(--primary-600);
}

.toast-action-btn.secondary {
    background: var(--gray-100);
    color: var(--gray-700);
}

.toast-action-btn.secondary:hover {
    background: var(--gray-200);
}

.toast-close {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}

.toast-close:hover {
    color: var(--gray-600);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--primary-500);
    border-radius: 0 0 10px 10px;
    animation: toast-progress linear forwards;
}

@keyframes toast-progress {
    from { width: 100%; }
    to { width: 0%; }
}

.toast-queue-counter {
    position: fixed;
    bottom: 24px;
    right: 440px;
    background: var(--gray-800);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* ===========================================
   6. Dismissable Info Banners
   =========================================== */
.info-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.info-banner.banner-info {
    background: var(--info-50);
    border: 1px solid var(--info-200);
}

.info-banner.banner-success {
    background: var(--success-50);
    border: 1px solid var(--success-200);
}

.info-banner.banner-warning {
    background: var(--warning-50);
    border: 1px solid var(--warning-200);
}

.info-banner.banner-error {
    background: var(--error-50);
    border: 1px solid var(--error-200);
}

.info-banner.banner-neutral {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.info-banner-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.banner-info .info-banner-icon { color: var(--info-600); }
.banner-success .info-banner-icon { color: var(--success-600); }
.banner-warning .info-banner-icon { color: var(--warning-600); }
.banner-error .info-banner-icon { color: var(--error-600); }

.info-banner-content {
    flex: 1;
}

.info-banner-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.banner-info .info-banner-title { color: var(--info-800); }
.banner-success .info-banner-title { color: var(--success-800); }
.banner-warning .info-banner-title { color: var(--warning-800); }
.banner-error .info-banner-title { color: var(--error-800); }

.info-banner-text {
    font-size: 13px;
    color: var(--gray-600);
}

.info-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.info-banner-dismiss {
    padding: 4px;
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    transition: color 0.15s;
}

.info-banner-dismiss:hover {
    color: var(--gray-600);
}

.info-banner-fullwidth {
    border-radius: 0;
    margin: 0;
    border-left: none;
    border-right: none;
}

/* ===========================================
   7. Breadcrumb Navigation
   =========================================== */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    font-size: 14px;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.breadcrumb-link {
    color: var(--gray-500);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s;
}

.breadcrumb-link:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.breadcrumb-current {
    font-weight: 500;
    color: var(--gray-900);
    padding: 4px 8px;
}

.breadcrumb-separator {
    color: var(--gray-300);
}

.breadcrumb-dropdown {
    position: relative;
}

.breadcrumb-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.breadcrumb-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    z-index: 1000;
    display: none;
}

.breadcrumb-dropdown-menu.show {
    display: block;
}

.breadcrumb-dropdown-item {
    display: block;
    padding: 8px 12px;
    color: var(--gray-700);
    text-decoration: none;
    transition: background 0.15s;
}

.breadcrumb-dropdown-item:hover {
    background: var(--gray-50);
}

/* ===========================================
   8. Mega Menu for Navigation
   =========================================== */
.mega-menu-container {
    position: relative;
}

.mega-menu-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}

.mega-menu-trigger:hover {
    background: var(--gray-100);
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 600px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    padding: 20px;
    z-index: 1000;
    display: none;
}

.mega-menu.show {
    display: block;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.mega-menu-section {
    min-width: 0;
}

.mega-menu-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.mega-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.mega-menu-item:hover {
    background: var(--gray-50);
}

.mega-menu-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary-50);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mega-menu-item-content {
    flex: 1;
    min-width: 0;
}

.mega-menu-item-title {
    font-weight: 500;
    color: var(--gray-900);
    margin-bottom: 2px;
}

.mega-menu-item-desc {
    font-size: 12px;
    color: var(--gray-500);
}

.mega-menu-item-badge {
    padding: 2px 8px;
    background: var(--primary-100);
    color: var(--primary-700);
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    margin-left: 8px;
}

.mega-menu-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mega-menu-footer-link {
    font-size: 13px;
    color: var(--primary-600);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mega-menu-footer-link:hover {
    text-decoration: underline;
}

/* ===========================================
   9. Tab Badge Counter
   =========================================== */
.tab-with-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--gray-200);
    color: var(--gray-600);
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s;
}

.tab-active .tab-badge {
    background: var(--primary-100);
    color: var(--primary-700);
}

.tab-badge.highlight {
    background: var(--error-500);
    color: white;
    animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.tab-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--error-500);
    border-radius: 50%;
    position: absolute;
    top: -2px;
    right: -2px;
}

/* ===========================================
   10. Sticky Section Headers
   =========================================== */
.sticky-header-container {
    position: relative;
}

.sticky-section-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: box-shadow 0.2s;
}

.sticky-section-header.stuck {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sticky-section-title {
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sticky-section-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: 10px;
}

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

/* ===========================================
   11. Progress Stepper (Multi-step Workflow)
   =========================================== */
.progress-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--gray-200);
}

.progress-step.completed:not(:last-child)::after {
    background: var(--success-500);
}

.progress-step.active:not(:last-child)::after {
    background: linear-gradient(to right, var(--success-500) 50%, var(--gray-200) 50%);
}

.progress-step-indicator {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gray-100);
    border: 2px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--gray-500);
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}

.progress-step.completed .progress-step-indicator {
    background: var(--success-500);
    border-color: var(--success-500);
    color: white;
}

.progress-step.active .progress-step-indicator {
    background: white;
    border-color: var(--primary-500);
    color: var(--primary-600);
    box-shadow: 0 0 0 4px var(--primary-100);
}

.progress-step.error .progress-step-indicator {
    background: var(--error-500);
    border-color: var(--error-500);
    color: white;
}

.progress-step-label {
    margin-top: 10px;
    font-size: 13px;
    color: var(--gray-500);
    text-align: center;
}

.progress-step.active .progress-step-label {
    color: var(--gray-900);
    font-weight: 500;
}

.progress-step.completed .progress-step-label {
    color: var(--success-700);
}

/* Vertical stepper variant */
.progress-stepper.vertical {
    flex-direction: column;
    align-items: flex-start;
}

.progress-stepper.vertical .progress-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
}

.progress-stepper.vertical .progress-step:not(:last-child)::after {
    top: 52px;
    left: 17px;
    right: auto;
    width: 2px;
    height: calc(100% - 20px);
}

.progress-stepper.vertical .progress-step-content {
    flex: 1;
}

.progress-stepper.vertical .progress-step-label {
    margin-top: 0;
    text-align: left;
    font-weight: 500;
}

.progress-stepper.vertical .progress-step-desc {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 4px;
}

/* ===========================================
   12. Product Card Variants
   =========================================== */
/* Compact list variant */
.product-card-list {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.2s;
}

.product-card-list:hover {
    border-color: var(--gray-300);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.product-card-list-image {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.product-card-list-content {
    flex: 1;
    min-width: 0;
}

.product-card-list-title {
    font-weight: 500;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card-list-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--gray-500);
}

.product-card-list-price {
    font-weight: 600;
    color: var(--gray-900);
    flex-shrink: 0;
}

.product-card-list-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Detailed grid variant */
.product-card-detailed {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.product-card-detailed:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.product-card-detailed-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.product-card-detailed-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card-detailed-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.product-card-detailed-favorite {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
}

.product-card-detailed-favorite:hover {
    transform: scale(1.1);
}

body.dark-mode .product-card-detailed-favorite {
    background: #374151;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.product-card-detailed-favorite.active {
    color: var(--error-500);
}

.product-card-detailed-body {
    padding: 16px;
}

.product-card-detailed-category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-600);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.product-card-detailed-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-detailed-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.product-card-detailed-stars {
    color: var(--warning-500);
}

.product-card-detailed-reviews {
    font-size: 12px;
    color: var(--gray-500);
}

.product-card-detailed-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-card-detailed-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
}

.product-card-detailed-original {
    font-size: 14px;
    color: var(--gray-400);
    text-decoration: line-through;
    margin-left: 8px;
}

/* Comparison variant */
.product-card-compare {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.product-card-compare-header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: 16px;
}

.product-card-compare-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0 auto 12px;
}

.product-card-compare-title {
    font-weight: 600;
    color: var(--gray-900);
}

.product-card-compare-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-600);
    margin-top: 8px;
}

.product-card-compare-specs {
    flex: 1;
}

.product-card-compare-spec {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-50);
    font-size: 13px;
}

.product-card-compare-spec-label {
    color: var(--gray-500);
}

.product-card-compare-spec-value {
    font-weight: 500;
    color: var(--gray-900);
}

/* ===========================================
   13. Data Table Row Grouping
   =========================================== */
.table-grouped {
    border-collapse: collapse;
    width: 100%;
}

.table-group-header {
    background: var(--gray-50);
    cursor: pointer;
    user-select: none;
}

.table-group-header td {
    padding: 10px 16px;
    font-weight: 600;
    color: var(--gray-700);
}

.table-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.table-group-toggle-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    transition: transform 0.2s;
}

.table-group-header.collapsed .table-group-toggle-icon {
    transform: rotate(-90deg);
}

.table-group-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-500);
    background: var(--gray-200);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

.table-group-rows {
    display: table-row-group;
}

.table-group-header.collapsed + .table-group-rows {
    display: none;
}

.table-grouped tbody tr:hover {
    background: var(--gray-50);
}

/* ===========================================
   14. Revenue Trend Widget
   =========================================== */
.revenue-widget {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 20px;
}

.revenue-widget-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.revenue-widget-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.revenue-widget-period {
    font-size: 12px;
    color: var(--gray-400);
}

.revenue-widget-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

.revenue-widget-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
}

.revenue-widget-change.positive {
    background: var(--success-100);
    color: var(--success-700);
}

.revenue-widget-change.negative {
    background: var(--error-100);
    color: var(--error-700);
}

.revenue-widget-chart {
    margin-top: 20px;
    height: 80px;
}

.revenue-sparkline {
    width: 100%;
    height: 100%;
}

.revenue-sparkline-line {
    fill: none;
    stroke: var(--primary-500);
    stroke-width: 2;
}

.revenue-sparkline-area {
    fill: url(#revenue-gradient);
}

.revenue-sparkline-dot {
    fill: var(--primary-500);
}

.revenue-widget-comparison {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
}

.revenue-comparison-item {
    flex: 1;
}

.revenue-comparison-label {
    font-size: 12px;
    color: var(--gray-500);
}

.revenue-comparison-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
    margin-top: 2px;
}

/* ===========================================
   15. Goal Progress Widget
   =========================================== */
.goal-widget {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.goal-widget-ring {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
}

.goal-widget-ring svg {
    transform: rotate(-90deg);
}

.goal-ring-bg {
    fill: none;
    stroke: var(--gray-100);
    stroke-width: 10;
}

.goal-ring-progress {
    fill: none;
    stroke: var(--primary-500);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.goal-widget-ring-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.goal-widget-percent {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
}

.goal-widget-label {
    font-size: 12px;
    color: var(--gray-500);
}

.goal-widget-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.goal-widget-values {
    font-size: 14px;
    color: var(--gray-600);
}

.goal-widget-values strong {
    color: var(--gray-900);
}

.goal-widget-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
    font-size: 13px;
    color: var(--gray-500);
}

.goal-widget-countdown strong {
    color: var(--gray-700);
}

/* ===========================================
   16. Recent Activity Stream
   =========================================== */
.activity-stream {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
}

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

.activity-stream-title {
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity-stream-filter {
    font-size: 13px;
    color: var(--primary-600);
    cursor: pointer;
}

.activity-stream-list {
    max-height: 400px;
    overflow-y: auto;
}

.activity-stream-item {
    display: flex;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--gray-50);
    transition: background 0.15s;
}

.activity-stream-item:hover {
    background: var(--gray-50);
}

.activity-stream-item:last-child {
    border-bottom: none;
}

.activity-stream-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-stream-icon.sale {
    background: var(--success-100);
    color: var(--success-600);
}

.activity-stream-icon.listing {
    background: var(--primary-100);
    color: var(--primary-600);
}

.activity-stream-icon.offer {
    background: var(--warning-100);
    color: var(--warning-600);
}

.activity-stream-icon.inventory {
    background: var(--info-100);
    color: var(--info-600);
}

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

.activity-stream-text {
    color: var(--gray-700);
    line-height: 1.4;
}

.activity-stream-text strong {
    color: var(--gray-900);
}

.activity-stream-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--gray-500);
}

.activity-stream-time {
    color: var(--gray-400);
}

.activity-stream-amount {
    font-weight: 600;
    flex-shrink: 0;
}

.activity-stream-amount.positive {
    color: var(--success-600);
}

.activity-stream-footer {
    padding: 12px 20px;
    text-align: center;
    border-top: 1px solid var(--gray-100);
}

.activity-stream-more {
    font-size: 13px;
    color: var(--primary-600);
    cursor: pointer;
}

/* ===========================================
   17. High Contrast Mode
   =========================================== */
.high-contrast-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--gray-100);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--gray-700);
}

body.high-contrast {
    --gray-50: #ffffff;
    --gray-100: #f0f0f0;
    --gray-200: #cccccc;
    --gray-300: #999999;
    --gray-400: #666666;
    --gray-500: #333333;
    --gray-600: #222222;
    --gray-700: #111111;
    --gray-800: #000000;
    --gray-900: #000000;
}

body.high-contrast * {
    border-color: var(--gray-800) !important;
}

body.high-contrast .btn {
    border-width: 2px;
}

body.high-contrast a {
    text-decoration: underline;
}

body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {
    border-width: 2px;
}

body.high-contrast .card {
    border-width: 2px;
}

body.high-contrast :focus {
    outline: 3px solid var(--primary-500) !important;
    outline-offset: 2px;
}

/* ===========================================
   18. Keyboard Navigation Indicator
   =========================================== */
.keyboard-nav-indicator {
    position: fixed;
    bottom: 16px;
    left: 16px;
    background: var(--gray-800);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    display: none;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.keyboard-nav .keyboard-nav-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.keyboard-nav *:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

body.keyboard-nav .btn:focus {
    box-shadow: 0 0 0 3px var(--primary-200);
}

.keyboard-shortcut-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kbd {
    display: inline-block;
    padding: 2px 6px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
    box-shadow: 0 1px 0 var(--gray-300);
}

/* ===========================================
   Dark Mode Support for Part 8 Components
   =========================================== */
body.dark-mode .autocomplete-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .autocomplete-item:hover,
body.dark-mode .autocomplete-item.highlighted {
    background: var(--gray-700);
}

body.dark-mode .autocomplete-item-title {
    color: var(--gray-100);
}

body.dark-mode .autocomplete-item-icon {
    background: var(--gray-700);
}

body.dark-mode .category-selector-trigger {
    background: var(--gray-800);
    border-color: var(--gray-600);
    color: var(--gray-100);
}

body.dark-mode .category-selector-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .category-tree-item:hover {
    background: var(--gray-700);
}

body.dark-mode .inline-editable:hover {
    background: var(--gray-700);
}

body.dark-mode .inline-editable-input {
    background: var(--gray-800);
    border-color: var(--primary-500);
    color: var(--gray-100);
}

body.dark-mode .tag-picker-input-container {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

body.dark-mode .tag-picker-tag {
    background: var(--gray-700);
    color: var(--gray-200);
}

body.dark-mode .tag-picker-input {
    color: var(--gray-100);
}

body.dark-mode .tag-picker-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .toast-notification {
    background: var(--gray-800);
}

body.dark-mode .toast-title {
    color: var(--gray-100);
}

body.dark-mode .toast-message {
    color: var(--gray-400);
}

body.dark-mode .info-banner.banner-neutral {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .breadcrumb-link:hover {
    background: var(--gray-700);
}

body.dark-mode .breadcrumb-current {
    color: var(--gray-100);
}

body.dark-mode .breadcrumb-dropdown-menu {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .breadcrumb-dropdown-item {
    color: var(--gray-200);
}

body.dark-mode .breadcrumb-dropdown-item:hover {
    background: var(--gray-700);
}

body.dark-mode .mega-menu {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .mega-menu-item:hover {
    background: var(--gray-700);
}

body.dark-mode .mega-menu-item-title {
    color: var(--gray-100);
}

body.dark-mode .mega-menu-item-icon {
    background: var(--gray-700);
}

body.dark-mode .sticky-section-header {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

body.dark-mode .sticky-section-title {
    color: var(--gray-100);
}

body.dark-mode .progress-step-indicator {
    background: var(--gray-700);
    border-color: var(--gray-600);
}

body.dark-mode .progress-step.active .progress-step-indicator {
    background: var(--gray-800);
}

body.dark-mode .product-card-list,
body.dark-mode .product-card-detailed,
body.dark-mode .product-card-compare {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .product-card-list-title,
body.dark-mode .product-card-detailed-title,
body.dark-mode .product-card-compare-title {
    color: var(--gray-100);
}

body.dark-mode .table-group-header {
    background: var(--gray-800);
}

body.dark-mode .table-group-header td {
    color: var(--gray-200);
}

body.dark-mode .revenue-widget,
body.dark-mode .goal-widget,
body.dark-mode .activity-stream {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .revenue-widget-value,
body.dark-mode .goal-widget-percent,
body.dark-mode .activity-stream-title {
    color: var(--gray-100);
}

body.dark-mode .activity-stream-item {
    border-color: var(--gray-700);
}

body.dark-mode .activity-stream-item:hover {
    background: var(--gray-750);
}

body.dark-mode .activity-stream-text {
    color: var(--gray-300);
}

body.dark-mode .activity-stream-text strong {
    color: var(--gray-100);
}

body.dark-mode .keyboard-nav-indicator {
    background: var(--gray-100);
    color: var(--gray-900);
}

body.dark-mode .kbd {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-200);
}

/* ============================================
   End of Session 28 Part 8 UI Improvements
   ============================================ */

/* ============================================
   Session 28 Part 9: Visualization, Interactive
   Elements, Layout & Engagement Components
   ============================================ */

/* ===========================================
   1. Bubble Chart
   =========================================== */
.bubble-chart {
    position: relative;
    width: 100%;
    height: 300px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.bubble-chart-area {
    position: relative;
    width: 100%;
    height: 100%;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.bubble:hover {
    opacity: 1;
    transform: scale(1.1);
    z-index: 10;
}

.bubble-tooltip {
    position: absolute;
    background: var(--gray-900);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.bubble:hover .bubble-tooltip {
    opacity: 1;
}

.bubble-chart-legend {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--gray-600);
}

.bubble-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bubble-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* ===========================================
   2. Heatmap Grid
   =========================================== */
.heatmap-grid {
    display: grid;
    gap: 2px;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 8px;
}

.heatmap-row {
    display: contents;
}

.heatmap-cell {
    aspect-ratio: 1;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.heatmap-cell:hover {
    transform: scale(1.2);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.heatmap-cell[data-level="0"] { background: var(--gray-100); }
.heatmap-cell[data-level="1"] { background: var(--success-100); }
.heatmap-cell[data-level="2"] { background: var(--success-200); }
.heatmap-cell[data-level="3"] { background: var(--success-300); }
.heatmap-cell[data-level="4"] { background: var(--success-400); }
.heatmap-cell[data-level="5"] { background: var(--success-500); }

.heatmap-labels-x,
.heatmap-labels-y {
    display: flex;
    font-size: 10px;
    color: var(--gray-500);
}

.heatmap-labels-x {
    justify-content: space-around;
    margin-top: 4px;
}

.heatmap-labels-y {
    flex-direction: column;
    justify-content: space-around;
    margin-right: 4px;
}

.heatmap-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-900);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.heatmap-cell:hover .heatmap-tooltip {
    opacity: 1;
}

/* ===========================================
   3. Multi-Series Line Chart
   =========================================== */
.multi-line-chart {
    width: 100%;
    height: 250px;
    position: relative;
}

.multi-line-chart svg {
    width: 100%;
    height: 100%;
}

.chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-line.series-1 { stroke: var(--primary-500); }
.chart-line.series-2 { stroke: var(--success-500); }
.chart-line.series-3 { stroke: var(--warning-500); }
.chart-line.series-4 { stroke: var(--error-500); }

.chart-area {
    opacity: 0.1;
}

.chart-area.series-1 { fill: var(--primary-500); }
.chart-area.series-2 { fill: var(--success-500); }
.chart-area.series-3 { fill: var(--warning-500); }

.chart-dot {
    fill: white;
    stroke-width: 2;
    cursor: pointer;
    transition: r 0.15s;
}

.chart-dot:hover {
    r: 6;
}

.chart-grid-line {
    stroke: var(--gray-200);
    stroke-dasharray: 4 4;
}

.chart-axis {
    stroke: var(--gray-300);
}

.chart-axis-label {
    font-size: 10px;
    fill: var(--gray-500);
}

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

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-600);
    cursor: pointer;
}

.chart-legend-item.disabled {
    opacity: 0.4;
}

.chart-legend-line {
    width: 20px;
    height: 3px;
    border-radius: 2px;
}

/* ===========================================
   4. Numeric Spinner
   =========================================== */
.numeric-spinner {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    overflow: hidden;
}

.numeric-spinner-btn {
    width: 36px;
    height: 36px;
    background: var(--gray-50);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    transition: all 0.15s;
}

.numeric-spinner-btn:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}

.numeric-spinner-btn:active {
    background: var(--gray-200);
}

.numeric-spinner-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.numeric-spinner-input {
    width: 80px;
    height: 36px;
    border: none;
    border-left: 1px solid var(--gray-200);
    border-right: 1px solid var(--gray-200);
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    background: white;
}

.numeric-spinner-input:focus {
    outline: none;
    background: var(--primary-50);
}

.numeric-spinner.lg .numeric-spinner-btn {
    width: 44px;
    height: 44px;
}

.numeric-spinner.lg .numeric-spinner-input {
    width: 100px;
    height: 44px;
    font-size: 16px;
}

/* ===========================================
   5. Color Picker
   =========================================== */
.color-picker {
    position: relative;
    width: fit-content;
}

.color-picker-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.color-picker-trigger:hover {
    border-color: var(--gray-400);
}

.color-picker-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--gray-200);
}

.color-picker-value {
    font-family: monospace;
    font-size: 13px;
    color: var(--gray-700);
}

.color-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 16px;
    z-index: 1000;
    display: none;
    width: 240px;
}

.color-picker-dropdown.show {
    display: block;
}

.color-picker-spectrum {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    cursor: crosshair;
    position: relative;
    background: linear-gradient(to right, white, currentColor);
}

.color-picker-spectrum::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, black);
    border-radius: 8px;
}

.color-picker-cursor {
    width: 16px;
    height: 16px;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.color-picker-hue {
    width: 100%;
    height: 12px;
    border-radius: 6px;
    margin-top: 12px;
    background: linear-gradient(to right,
        #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    cursor: pointer;
    position: relative;
}

.color-picker-hue-cursor {
    width: 16px;
    height: 16px;
    background: white;
    border: 2px solid var(--gray-300);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

body.dark-mode .color-picker-hue-cursor {
    background: #374151;
    border-color: #6b7280;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.color-picker-swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    margin-top: 12px;
}

.color-picker-preset {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s, border-color 0.15s;
}

.color-picker-preset:hover {
    transform: scale(1.15);
}

.color-picker-preset.selected {
    border-color: var(--gray-800);
}

.color-picker-input-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.color-picker-hex-input {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
}

/* ===========================================
   6. Time Input Component
   =========================================== */
.time-input {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
}

.time-input:focus-within {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.time-input-segment {
    width: 32px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    font-family: monospace;
}

.time-input-segment:focus {
    outline: none;
    background: var(--primary-50);
    border-radius: 4px;
}

.time-input-separator {
    color: var(--gray-400);
    font-weight: 500;
}

.time-input-period {
    margin-left: 8px;
    padding: 4px 8px;
    background: var(--gray-100);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
}

.time-input-period:hover {
    background: var(--gray-200);
}

/* ===========================================
   7. Toggle Button Group
   =========================================== */
.toggle-button-group {
    display: inline-flex;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 4px;
}

.toggle-button {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-button:hover {
    color: var(--gray-800);
}

.toggle-button.active {
    background: white;
    color: var(--gray-900);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.toggle-button-group.pills {
    background: transparent;
    gap: 8px;
    padding: 0;
}

.toggle-button-group.pills .toggle-button {
    border: 1px solid var(--gray-300);
}

.toggle-button-group.pills .toggle-button.active {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

/* ===========================================
   8. Quantity Adjuster (E-commerce)
   =========================================== */
.quantity-adjuster {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quantity-adjuster-controls {
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    overflow: hidden;
}

.quantity-adjuster-btn {
    width: 40px;
    height: 40px;
    background: var(--gray-50);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--gray-600);
    transition: all 0.15s;
}

.quantity-adjuster-btn:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}

.quantity-adjuster-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.quantity-adjuster-value {
    width: 60px;
    height: 40px;
    border: none;
    border-left: 1px solid var(--gray-200);
    border-right: 1px solid var(--gray-200);
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

.quantity-adjuster-presets {
    display: flex;
    gap: 6px;
}

.quantity-preset {
    padding: 6px 12px;
    background: var(--gray-100);
    border: none;
    border-radius: 16px;
    font-size: 12px;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s;
}

.quantity-preset:hover {
    background: var(--gray-200);
}

.quantity-preset.active {
    background: var(--primary-500);
    color: white;
}

/* ===========================================
   9. Price Range Slider
   =========================================== */
.price-range-slider {
    padding: 20px 0;
}

.price-range-track {
    position: relative;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    margin: 0 12px;
}

.price-range-fill {
    position: absolute;
    height: 100%;
    background: var(--primary-500);
    border-radius: 3px;
}

.price-range-thumb {
    position: absolute;
    width: 24px;
    height: 24px;
    background: white;
    border: 2px solid var(--primary-500);
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.15s;
}

.price-range-thumb:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.price-range-thumb:active {
    cursor: grabbing;
}

.price-range-thumb.min { left: 0; }
.price-range-thumb.max { left: 100%; }

.price-range-inputs {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.price-range-input-group {
    flex: 1;
}

.price-range-input-group label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.price-range-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 14px;
}

.price-range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--gray-500);
}

/* ===========================================
   10. Split View with Resizable Divider
   =========================================== */
.split-view {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.split-view.vertical {
    flex-direction: column;
}

.split-view-panel {
    overflow: auto;
    flex-shrink: 0;
}

.split-view-panel.flex {
    flex: 1;
}

.split-view-divider {
    flex-shrink: 0;
    background: var(--gray-200);
    position: relative;
    transition: background 0.15s;
}

.split-view:not(.vertical) .split-view-divider {
    width: 6px;
    cursor: col-resize;
}

.split-view.vertical .split-view-divider {
    height: 6px;
    cursor: row-resize;
}

.split-view-divider:hover {
    background: var(--primary-300);
}

.split-view-divider::after {
    content: '';
    position: absolute;
    background: var(--gray-400);
    border-radius: 2px;
}

.split-view:not(.vertical) .split-view-divider::after {
    width: 2px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.split-view.vertical .split-view-divider::after {
    width: 24px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ===========================================
   11. Collapsible Sidebar
   =========================================== */
.collapsible-sidebar {
    width: 260px;
    height: 100%;
    background: white;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}

.collapsible-sidebar.collapsed {
    width: 64px;
}

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

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.sidebar-logo-text {
    font-weight: 600;
    color: var(--gray-900);
    white-space: nowrap;
    transition: opacity 0.2s;
}

.collapsible-sidebar.collapsed .sidebar-logo-text {
    opacity: 0;
    width: 0;
}

.sidebar-toggle {
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    transition: all 0.15s;
}

.sidebar-toggle:hover {
    background: var(--gray-200);
}

.sidebar-nav {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--gray-600);
    text-decoration: none;
    transition: all 0.15s;
    margin-bottom: 4px;
}

.sidebar-nav-item:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.sidebar-nav-item.active {
    background: var(--primary-50);
    color: var(--primary-700);
}

.sidebar-nav-item-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar-nav-item-text {
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s;
}

.collapsible-sidebar.collapsed .sidebar-nav-item-text {
    opacity: 0;
    width: 0;
}

.sidebar-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-400);
    padding: 12px 12px 8px;
    letter-spacing: 0.5px;
}

.collapsible-sidebar.collapsed .sidebar-section-title {
    opacity: 0;
}

/* ===========================================
   12. Floating Action Button Menu
   =========================================== */
.fab-menu {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
}

.fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-500);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    transition: all 0.3s ease;
}

.fab-main:hover {
    background: var(--primary-600);
    transform: scale(1.05);
}

.fab-main.open {
    transform: rotate(45deg);
}

.fab-actions {
    position: absolute;
    bottom: 70px;
    right: 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.fab-menu.open .fab-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fab-action {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: row-reverse;
}

.fab-action-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: var(--gray-700);
    transition: all 0.2s;
}

.fab-action-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.fab-action-label {
    padding: 6px 12px;
    background: var(--gray-800);
    color: white;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ===========================================
   13. Stacked Cards Layout
   =========================================== */
.stacked-cards {
    position: relative;
    width: 300px;
    height: 200px;
    perspective: 1000px;
}

.stacked-card {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    cursor: pointer;
    overflow: hidden;
}

.stacked-card:nth-child(1) {
    z-index: 3;
    transform: translateY(0) scale(1);
}

.stacked-card:nth-child(2) {
    z-index: 2;
    transform: translateY(10px) scale(0.95);
}

.stacked-card:nth-child(3) {
    z-index: 1;
    transform: translateY(20px) scale(0.9);
}

.stacked-card.swiping-left {
    transform: translateX(-120%) rotate(-15deg);
    opacity: 0;
}

.stacked-card.swiping-right {
    transform: translateX(120%) rotate(15deg);
    opacity: 0;
}

.stacked-card-content {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

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

.stacked-card-action {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

body.dark-mode .stacked-card-action {
    background: #374151;
}

.stacked-card-action.reject {
    border-color: var(--error-300);
    color: var(--error-500);
}

.stacked-card-action.reject:hover {
    background: var(--error-500);
    color: white;
}

.stacked-card-action.accept {
    border-color: var(--success-300);
    color: var(--success-500);
}

.stacked-card-action.accept:hover {
    background: var(--success-500);
    color: white;
}

/* ===========================================
   14. Circular Progress with Segments
   =========================================== */
.circular-progress-segmented {
    position: relative;
    width: 120px;
    height: 120px;
}

.circular-progress-segmented svg {
    transform: rotate(-90deg);
}

.circular-segment {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.circular-segment.bg {
    stroke: var(--gray-100);
}

.circular-segment.segment-1 { stroke: var(--primary-500); }
.circular-segment.segment-2 { stroke: var(--success-500); }
.circular-segment.segment-3 { stroke: var(--warning-500); }

.circular-progress-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.circular-progress-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
}

.circular-progress-label {
    font-size: 11px;
    color: var(--gray-500);
}

/* ===========================================
   15. Linear Progress with Steps
   =========================================== */
.linear-progress-steps {
    padding: 16px 0;
}

.linear-progress-bar {
    position: relative;
    height: 8px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.linear-progress-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.linear-progress-steps-container {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.linear-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.linear-progress-step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gray-200);
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--gray-200);
    transition: all 0.3s;
}

.linear-progress-step.completed .linear-progress-step-dot {
    background: var(--primary-500);
    box-shadow: 0 0 0 2px var(--primary-500);
}

.linear-progress-step.active .linear-progress-step-dot {
    background: white;
    box-shadow: 0 0 0 2px var(--primary-500);
}

.linear-progress-step-label {
    font-size: 11px;
    color: var(--gray-500);
}

.linear-progress-step.completed .linear-progress-step-label,
.linear-progress-step.active .linear-progress-step-label {
    color: var(--gray-700);
    font-weight: 500;
}

/* ===========================================
   16. Retry Alert Component
   =========================================== */
.retry-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--error-50);
    border: 1px solid var(--error-200);
    border-radius: 8px;
}

.retry-alert-icon {
    width: 20px;
    height: 20px;
    color: var(--error-500);
    flex-shrink: 0;
}

.retry-alert-content {
    flex: 1;
}

.retry-alert-title {
    font-weight: 600;
    color: var(--error-800);
    margin-bottom: 2px;
}

.retry-alert-message {
    font-size: 13px;
    color: var(--error-700);
}

.retry-alert-btn {
    padding: 8px 16px;
    background: var(--error-500);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}

.retry-alert-btn:hover {
    background: var(--error-600);
}

.retry-alert-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.retry-alert-countdown {
    font-size: 12px;
    color: var(--error-600);
    margin-top: 4px;
}

/* ===========================================
   17. Inline Validation
   =========================================== */
.inline-validation {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    animation: validation-appear 0.2s ease;
}

@keyframes validation-appear {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.inline-validation.success {
    color: var(--success-600);
}

.inline-validation.error {
    color: var(--error-600);
}

.inline-validation.warning {
    color: var(--warning-600);
}

.inline-validation-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.inline-validation-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.inline-validation-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.inline-validation-list li::before {
    content: '•';
    color: inherit;
}

/* ===========================================
   18. Masonry Grid Layout
   =========================================== */
.masonry-grid {
    column-count: 3;
    column-gap: 16px;
}

.masonry-grid-item {
    break-inside: avoid;
    margin-bottom: 16px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
}

.masonry-grid-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .masonry-grid {
        column-count: 1;
    }
}

/* ===========================================
   19. Content Tabs with Icons
   =========================================== */
.icon-tabs {
    display: flex;
    gap: 4px;
    background: var(--gray-100);
    padding: 4px;
    border-radius: 10px;
}

.icon-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.icon-tab:hover {
    color: var(--gray-800);
}

.icon-tab.active {
    background: white;
    color: var(--gray-900);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.icon-tab-icon {
    width: 18px;
    height: 18px;
}

.icon-tab-badge {
    padding: 2px 6px;
    background: var(--primary-100);
    color: var(--primary-700);
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
}

.icon-tab.active .icon-tab-badge {
    background: var(--primary-500);
    color: white;
}

/* ===========================================
   20. Expandable Card
   =========================================== */
.expandable-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}

.expandable-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.expandable-card-header:hover {
    background: var(--gray-50);
}

.expandable-card-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-50);
    color: var(--primary-600);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expandable-card-title {
    flex: 1;
    font-weight: 600;
    color: var(--gray-900);
}

.expandable-card-toggle {
    width: 24px;
    height: 24px;
    color: var(--gray-400);
    transition: transform 0.3s;
}

.expandable-card.expanded .expandable-card-toggle {
    transform: rotate(180deg);
}

.expandable-card-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.expandable-card.expanded .expandable-card-content {
    max-height: 500px;
}

.expandable-card-body {
    padding: 0 16px 16px;
    color: var(--gray-600);
    line-height: 1.6;
}

/* ===========================================
   21. Section Divider
   =========================================== */
.section-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

.section-divider-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
}

.section-divider.with-icon {
    gap: 12px;
}

.section-divider-icon {
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
}

/* ===========================================
   22. Inline Date Picker
   =========================================== */
.inline-date-picker {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 16px;
    width: fit-content;
}

.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.date-picker-nav {
    display: flex;
    gap: 8px;
}

.date-picker-nav-btn {
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    transition: all 0.15s;
}

.date-picker-nav-btn:hover {
    background: var(--gray-200);
}

.date-picker-title {
    font-weight: 600;
    color: var(--gray-900);
}

.date-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.date-picker-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    padding: 8px 0;
}

.date-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.date-picker-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    background: transparent;
    color: var(--gray-700);
}

.date-picker-day:hover {
    background: var(--gray-100);
}

.date-picker-day.today {
    border: 1px solid var(--primary-500);
}

.date-picker-day.selected {
    background: var(--primary-500);
    color: white;
}

.date-picker-day.other-month {
    color: var(--gray-300);
}

.date-picker-day.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ===========================================
   23. Time Picker Wheel
   =========================================== */
.time-picker-wheel {
    display: flex;
    gap: 8px;
    padding: 16px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
}

body.dark-mode .time-picker-wheel {
    background: #374151;
    border-color: #4b5563;
}

.time-wheel {
    width: 60px;
    height: 150px;
    overflow: hidden;
    position: relative;
}

.time-wheel::before,
.time-wheel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 50px;
    pointer-events: none;
    z-index: 1;
}

.time-wheel::before {
    top: 0;
    background: linear-gradient(to bottom, white, transparent);
}

.time-wheel::after {
    bottom: 0;
    background: linear-gradient(to top, white, transparent);
}

.time-wheel-items {
    padding: 50px 0;
}

.time-wheel-item {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--gray-400);
    cursor: pointer;
    transition: all 0.2s;
}

.time-wheel-item.selected {
    color: var(--gray-900);
    font-weight: 600;
    font-size: 24px;
}

.time-wheel-highlight {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    height: 50px;
    background: var(--primary-50);
    border-radius: 8px;
}

/* ===========================================
   24. Relative Time Display
   =========================================== */
.relative-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--gray-500);
    font-size: 13px;
    cursor: help;
}

.relative-time-icon {
    width: 14px;
    height: 14px;
}

.relative-time[data-tooltip] {
    position: relative;
}

.relative-time[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--gray-900);
    color: white;
    font-size: 11px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.15s;
}

.relative-time[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 4px);
}

/* ===========================================
   25. Faceted Search Sidebar
   =========================================== */
.faceted-search {
    width: 260px;
    padding: 16px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
}

.faceted-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.faceted-search-title {
    font-weight: 600;
    color: var(--gray-900);
}

.faceted-search-clear {
    font-size: 12px;
    color: var(--primary-600);
    cursor: pointer;
}

.faceted-section {
    margin-bottom: 20px;
}

.faceted-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 10px;
}

.faceted-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
}

.faceted-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-300);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.faceted-option.selected .faceted-checkbox {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

.faceted-label {
    flex: 1;
    font-size: 14px;
    color: var(--gray-700);
}

.faceted-count {
    font-size: 12px;
    color: var(--gray-400);
}

.faceted-show-more {
    font-size: 12px;
    color: var(--primary-600);
    cursor: pointer;
    margin-top: 8px;
}

/* ===========================================
   26. Search Suggestions Dropdown
   =========================================== */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
}

.search-suggestion-section {
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
}

.search-suggestion-section:last-child {
    border-bottom: none;
}

.search-suggestion-title {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.search-suggestion-item:hover {
    background: var(--gray-50);
}

.search-suggestion-icon {
    width: 36px;
    height: 36px;
    background: var(--gray-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
}

.search-suggestion-content {
    flex: 1;
}

.search-suggestion-text {
    font-weight: 500;
    color: var(--gray-900);
}

.search-suggestion-meta {
    font-size: 12px;
    color: var(--gray-500);
}

.search-recent-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-recent-remove {
    margin-left: auto;
    padding: 4px;
    color: var(--gray-400);
    cursor: pointer;
}

.search-recent-remove:hover {
    color: var(--error-500);
}

/* ===========================================
   27. Streak Counter
   =========================================== */
.streak-counter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--warning-500), var(--error-500));
    border-radius: 24px;
    color: white;
}

.streak-icon {
    width: 24px;
    height: 24px;
    animation: streak-flame 0.5s ease infinite alternate;
}

@keyframes streak-flame {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

.streak-count {
    font-size: 20px;
    font-weight: 700;
}

.streak-label {
    font-size: 12px;
    opacity: 0.9;
}

.streak-counter.milestone {
    animation: streak-celebrate 0.6s ease;
}

@keyframes streak-celebrate {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ===========================================
   28. Challenge Banner
   =========================================== */
.challenge-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    border-radius: 12px;
    color: white;
}

.challenge-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.challenge-content {
    flex: 1;
}

.challenge-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

.challenge-description {
    font-size: 13px;
    opacity: 0.9;
}

.challenge-progress {
    width: 120px;
}

.challenge-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    overflow: hidden;
}

.challenge-progress-fill {
    height: 100%;
    background: white;
    border-radius: 3px;
    transition: width 0.3s;
}

body.dark-mode .challenge-progress-fill {
    background: rgba(255, 255, 255, 0.9);
}

.challenge-progress-text {
    font-size: 11px;
    text-align: right;
    margin-top: 4px;
    opacity: 0.9;
}

/* ===========================================
   29. Reward Badge
   =========================================== */
.reward-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    transition: all 0.2s;
}

.reward-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.reward-badge-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--warning-400), var(--warning-600));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.reward-badge.locked .reward-badge-icon {
    background: var(--gray-200);
    color: var(--gray-400);
}

.reward-badge-name {
    font-weight: 600;
    color: var(--gray-900);
    text-align: center;
}

.reward-badge-progress {
    width: 100%;
    height: 4px;
    background: var(--gray-100);
    border-radius: 2px;
    overflow: hidden;
}

.reward-badge-progress-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: 2px;
}

.reward-badge.earned {
    border-color: var(--warning-300);
    background: var(--warning-50);
}

/* ===========================================
   30. Debounced Search Input
   =========================================== */
.debounced-search {
    position: relative;
}

.debounced-search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s;
}

.debounced-search-input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
    outline: none;
}

.debounced-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
}

.debounced-search-loading {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-200);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.2s;
}

.debounced-search.searching .debounced-search-loading {
    opacity: 1;
}

.debounced-search-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--gray-200);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
}

.debounced-search.has-value .debounced-search-clear {
    display: flex;
}

.debounced-search.searching .debounced-search-clear {
    display: none;
}

/* ===========================================
   Dark Mode Support for Part 9 Components
   =========================================== */
body.dark-mode .bubble-chart {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .heatmap-grid {
    background: var(--gray-800);
}

body.dark-mode .heatmap-cell[data-level="0"] { background: var(--gray-700); }

body.dark-mode .numeric-spinner {
    border-color: var(--gray-600);
}

body.dark-mode .numeric-spinner-btn {
    background: var(--gray-700);
    color: var(--gray-300);
}

body.dark-mode .numeric-spinner-input {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-100);
}

body.dark-mode .color-picker-trigger {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

body.dark-mode .color-picker-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .color-picker-swatch {
    border-color: var(--gray-600);
}

body.dark-mode .color-picker-value {
    color: var(--gray-300);
}

body.dark-mode .color-picker-hex-input {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-200);
}

body.dark-mode .color-picker-preset {
    border-color: var(--gray-600);
}

body.dark-mode .color-picker-preset.selected {
    border-color: var(--primary-400);
}

body.dark-mode .time-input {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

body.dark-mode .time-input-segment {
    color: var(--gray-100);
}

body.dark-mode .toggle-button-group {
    background: var(--gray-800);
}

body.dark-mode .toggle-button {
    color: var(--gray-400);
}

body.dark-mode .toggle-button.active {
    background: var(--gray-700);
    color: var(--gray-100);
}

body.dark-mode .quantity-adjuster-controls {
    border-color: var(--gray-600);
}

body.dark-mode .quantity-adjuster-btn {
    background: var(--gray-700);
    color: var(--gray-300);
}

body.dark-mode .quantity-adjuster-value {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-100);
}

body.dark-mode .price-range-track {
    background: var(--gray-700);
}

body.dark-mode .price-range-thumb {
    background: var(--gray-800);
}

body.dark-mode .split-view-divider {
    background: var(--gray-700);
}

body.dark-mode .collapsible-sidebar {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

body.dark-mode .sidebar-nav-item:hover {
    background: var(--gray-800);
}

body.dark-mode .stacked-card {
    background: var(--gray-800);
}

body.dark-mode .fab-action-btn {
    background: var(--gray-800);
    color: var(--gray-200);
}

body.dark-mode .retry-alert {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error-800);
}

body.dark-mode .masonry-grid-item {
    background: var(--gray-800);
}

body.dark-mode .icon-tabs {
    background: var(--gray-800);
}

body.dark-mode .icon-tab.active {
    background: var(--gray-700);
}

body.dark-mode .expandable-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .inline-date-picker {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .date-picker-day {
    color: var(--gray-300);
}

body.dark-mode .date-picker-day:hover {
    background: var(--gray-700);
}

body.dark-mode .faceted-search {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .search-suggestions {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .search-suggestion-item:hover {
    background: var(--gray-700);
}

body.dark-mode .reward-badge {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .reward-badge-name {
    color: var(--gray-100);
}

body.dark-mode .debounced-search-input {
    background: var(--gray-800);
    border-color: var(--gray-600);
    color: var(--gray-100);
}

/* ============================================
   End of Session 28 Part 9 UI Improvements
   ============================================ */

/* ============================================
   Session 28 Part 10: Advanced Forms, Data
   Management, Communication & Polish
   ============================================ */

/* ===========================================
   1. Form State Persistence & Recovery
   =========================================== */
.form-recovery-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--info-50);
    border: 1px solid var(--info-200);
    border-radius: 8px;
    margin-bottom: 16px;
    animation: slide-down 0.3s ease;
}

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

.form-recovery-icon {
    width: 20px;
    height: 20px;
    color: var(--info-600);
}

.form-recovery-content {
    flex: 1;
}

.form-recovery-title {
    font-weight: 600;
    color: var(--info-800);
}

.form-recovery-text {
    font-size: 13px;
    color: var(--info-700);
}

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

.form-recovery-btn {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.form-recovery-btn.restore {
    background: var(--info-600);
    color: white;
}

.form-recovery-btn.discard {
    background: transparent;
    color: var(--info-700);
}

/* ===========================================
   2. Advanced Search with Operators
   =========================================== */
.advanced-search {
    position: relative;
}

.advanced-search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    font-size: 14px;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    transition: all 0.2s;
}

.advanced-search-input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
    outline: none;
}

.advanced-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
}

.search-operators-help {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 12px;
    z-index: 100;
    display: none;
}

.advanced-search:focus-within .search-operators-help {
    display: block;
}

.search-operator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.search-operator-key {
    padding: 2px 8px;
    background: var(--gray-100);
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    color: var(--gray-700);
}

.search-operator-desc {
    font-size: 13px;
    color: var(--gray-600);
}

.search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.search-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: 4px;
    font-size: 12px;
}

.search-tag-remove {
    cursor: pointer;
    opacity: 0.7;
}

.search-tag-remove:hover {
    opacity: 1;
}

/* ===========================================
   3. Column Visibility Manager
   =========================================== */
.column-manager {
    position: relative;
}

.column-manager-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--gray-100);
    border: none;
    border-radius: 6px;
    font-size: 13px;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.15s;
}

.column-manager-trigger:hover {
    background: var(--gray-200);
}

.column-manager-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    width: 260px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: none;
}

.column-manager-dropdown.show {
    display: block;
}

.column-manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
}

.column-manager-title {
    font-weight: 600;
    color: var(--gray-900);
}

.column-manager-reset {
    font-size: 12px;
    color: var(--primary-600);
    cursor: pointer;
}

.column-manager-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
}

.column-manager-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: grab;
    transition: background 0.15s;
}

.column-manager-item:hover {
    background: var(--gray-50);
}

.column-manager-item.dragging {
    background: var(--primary-50);
    opacity: 0.8;
}

.column-manager-drag {
    color: var(--gray-400);
    cursor: grab;
}

.column-manager-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-300);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.column-manager-item.visible .column-manager-checkbox {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

.column-manager-label {
    flex: 1;
    font-size: 13px;
    color: var(--gray-700);
}

/* ===========================================
   4. Notification Groups
   =========================================== */
.notification-group {
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.notification-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-50);
    cursor: pointer;
    transition: background 0.15s;
}

.notification-group-header:hover {
    background: var(--gray-100);
}

.notification-group-icon {
    width: 36px;
    height: 36px;
    background: var(--primary-100);
    color: var(--primary-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-group-content {
    flex: 1;
}

.notification-group-title {
    font-weight: 600;
    color: var(--gray-900);
}

.notification-group-subtitle {
    font-size: 13px;
    color: var(--gray-500);
}

.notification-group-badge {
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--primary-500);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-group-toggle {
    color: var(--gray-400);
    transition: transform 0.2s;
}

.notification-group.expanded .notification-group-toggle {
    transform: rotate(180deg);
}

.notification-group-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.notification-group.expanded .notification-group-items {
    max-height: 400px;
}

.notification-group-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--gray-100);
}

.notification-group-item:hover {
    background: var(--gray-50);
}

.notification-item-dot {
    width: 8px;
    height: 8px;
    background: var(--primary-500);
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.notification-item-dot.read {
    background: var(--gray-300);
}

.notification-item-text {
    flex: 1;
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.4;
}

.notification-item-time {
    font-size: 11px;
    color: var(--gray-400);
    flex-shrink: 0;
}

/* ===========================================
   5. Shopping Cart Drawer
   =========================================== */
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100%;
    background: white;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.cart-drawer.open {
    transform: translateX(0);
}

.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.cart-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--gray-200);
}

.cart-drawer-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-drawer-count {
    padding: 2px 8px;
    background: var(--primary-100);
    color: var(--primary-700);
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
}

.cart-drawer-close {
    width: 36px;
    height: 36px;
    background: var(--gray-100);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    transition: all 0.15s;
}

.cart-drawer-close:hover {
    background: var(--gray-200);
}

.cart-drawer-items {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.cart-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 10px;
    margin-bottom: 12px;
}

.cart-item-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
}

.cart-item-details {
    flex: 1;
}

.cart-item-title {
    font-weight: 500;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.cart-item-meta {
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.cart-item-price {
    font-weight: 600;
    color: var(--gray-900);
}

.cart-item-remove {
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
}

.cart-item-remove:hover {
    color: var(--error-500);
}

.cart-drawer-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-500);
}

.cart-drawer-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    color: var(--gray-300);
}

.cart-drawer-footer {
    padding: 20px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.cart-summary-row.total {
    font-size: 18px;
    font-weight: 600;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
}

.cart-checkout-btn {
    width: 100%;
    padding: 14px;
    background: var(--primary-500);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
    transition: background 0.15s;
}

.cart-checkout-btn:hover {
    background: var(--primary-600);
}

/* ===========================================
   6. Reaction Picker
   =========================================== */
.reaction-picker {
    position: relative;
    display: inline-block;
}

.reaction-picker-trigger {
    padding: 6px 10px;
    background: var(--gray-100);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--gray-600);
    transition: all 0.15s;
}

.reaction-picker-trigger:hover {
    background: var(--gray-200);
}

.reaction-picker-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 8px;
    display: none;
    z-index: 100;
}

.reaction-picker-dropdown.show {
    display: block;
    animation: reaction-pop 0.2s ease;
}

@keyframes reaction-pop {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.reaction-picker-tabs {
    display: flex;
    gap: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: 8px;
}

.reaction-picker-tab {
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.6;
    transition: all 0.15s;
}

.reaction-picker-tab:hover,
.reaction-picker-tab.active {
    opacity: 1;
    background: var(--gray-100);
}

.reaction-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.reaction-emoji {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.reaction-emoji:hover {
    background: var(--gray-100);
    transform: scale(1.2);
}

.reactions-display {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--gray-100);
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.reaction-badge:hover {
    background: var(--gray-200);
}

.reaction-badge.active {
    background: var(--primary-100);
    color: var(--primary-700);
}

.reaction-badge-emoji {
    font-size: 16px;
}

.reaction-badge-count {
    font-weight: 500;
}

/* ===========================================
   7. Mention Autocomplete
   =========================================== */
.mention-input-container {
    position: relative;
}

.mention-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
}

.mention-suggestions {
    position: absolute;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    min-width: 200px;
}

.mention-suggestions.show {
    display: block;
}

.mention-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.mention-suggestion:hover,
.mention-suggestion.highlighted {
    background: var(--gray-50);
}

.mention-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-100);
    color: var(--primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
}

.mention-user-info {
    flex: 1;
}

.mention-user-name {
    font-weight: 500;
    color: var(--gray-900);
}

.mention-user-handle {
    font-size: 12px;
    color: var(--gray-500);
}

.mention-tag {
    background: var(--primary-100);
    color: var(--primary-700);
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 500;
}

/* ===========================================
   8. Theme Customization Panel
   =========================================== */
.theme-panel {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 20px;
}

.theme-panel-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 20px;
}

.theme-section {
    margin-bottom: 24px;
}

.theme-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 12px;
}

.theme-colors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.theme-color-option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.15s;
}

.theme-color-option:hover {
    transform: scale(1.1);
}

.theme-color-option.selected {
    border-color: var(--gray-900);
}

.theme-slider-group {
    margin-bottom: 16px;
}

.theme-slider-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--gray-700);
}

.theme-slider {
    width: 100%;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    appearance: none;
    cursor: pointer;
}

.theme-slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary-500);
    border-radius: 50%;
    cursor: pointer;
}

.theme-preview {
    padding: 16px;
    background: var(--gray-50);
    border-radius: 8px;
    margin-top: 16px;
}

.theme-preview-title {
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.theme-preview-content {
    display: flex;
    gap: 12px;
}

.theme-preview-card {
    flex: 1;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

body.dark-mode .theme-preview-card {
    background: var(--gray-800) !important;
    border-color: var(--gray-700) !important;
}

/* ===========================================
   9. Interactive Product Tour
   =========================================== */
.tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
}

.tour-spotlight {
    position: fixed;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    z-index: 9999;
    pointer-events: none;
    transition: all 0.4s ease;
}

.tour-tooltip {
    position: fixed;
    width: 320px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    animation: tour-appear 0.3s ease;
}

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

.tour-tooltip-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-100);
}

.tour-tooltip-step {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-600);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.tour-tooltip-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
}

.tour-tooltip-body {
    padding: 16px 20px;
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.5;
}

.tour-tooltip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
    border-radius: 0 0 12px 12px;
}

.tour-progress {
    display: flex;
    gap: 6px;
}

.tour-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-300);
}

.tour-progress-dot.active {
    background: var(--primary-500);
}

.tour-progress-dot.completed {
    background: var(--success-500);
}

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

.tour-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.tour-btn.skip {
    background: transparent;
    border: none;
    color: var(--gray-500);
}

.tour-btn.next {
    background: var(--primary-500);
    border: none;
    color: white;
}

.tour-btn.next:hover {
    background: var(--primary-600);
}

/* ===========================================
   10. Swipe-to-Delete (Mobile)
   =========================================== */
.swipe-delete-item {
    position: relative;
    overflow: hidden;
}

.swipe-delete-content {
    position: relative;
    background: white;
    transition: transform 0.2s ease;
    z-index: 1;
}

.swipe-delete-action {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80px;
    background: var(--error-500);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.swipe-delete-action-icon {
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.2s;
}

.swipe-delete-item.swiped .swipe-delete-content {
    transform: translateX(-80px);
}

.swipe-delete-item.swiped .swipe-delete-action-icon {
    transform: scale(1);
    opacity: 1;
}

/* ===========================================
   11. Number Counter Animation
   =========================================== */
.animated-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.animated-counter-digit {
    display: inline-block;
    overflow: hidden;
    height: 1em;
    line-height: 1;
}

.animated-counter-inner {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================================
   12. Error Shake Animation
   =========================================== */
.shake-error {
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.input-error-highlight {
    border-color: var(--error-500) !important;
    background: var(--error-50) !important;
}

/* ===========================================
   13. Hover Lift Effect
   =========================================== */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.hover-lift-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===========================================
   14. Button Press Feedback
   =========================================== */
.btn-press {
    transition: transform 0.1s ease;
}

.btn-press:active {
    transform: scale(0.96);
}

/* ===========================================
   15. Focus Ring Animation
   =========================================== */
.focus-ring-animated:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-100);
    animation: focus-pulse 1.5s ease infinite;
}

@keyframes focus-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--primary-100); }
    50% { box-shadow: 0 0 0 5px var(--primary-100); }
}

/* ===========================================
   16. Saved Searches
   =========================================== */
.saved-searches {
    margin-top: 12px;
}

.saved-searches-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.saved-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.saved-search-item:hover {
    background: var(--gray-100);
}

.saved-search-icon {
    color: var(--gray-400);
}

.saved-search-name {
    flex: 1;
    font-size: 13px;
    color: var(--gray-700);
}

.saved-search-delete {
    color: var(--gray-400);
    opacity: 0;
    transition: opacity 0.15s;
}

.saved-search-item:hover .saved-search-delete {
    opacity: 1;
}

/* ===========================================
   17. Data Diff View
   =========================================== */
.diff-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.diff-column {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.diff-column-header {
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    color: var(--gray-700);
}

.diff-column.before .diff-column-header {
    background: var(--error-50);
    color: var(--error-700);
}

.diff-column.after .diff-column-header {
    background: var(--success-50);
    color: var(--success-700);
}

.diff-content {
    padding: 16px;
}

.diff-line {
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 13px;
}

.diff-line.removed {
    background: var(--error-50);
    color: var(--error-700);
    text-decoration: line-through;
}

.diff-line.added {
    background: var(--success-50);
    color: var(--success-700);
}

.diff-line.unchanged {
    color: var(--gray-600);
}

/* ===========================================
   18. Keyboard Shortcuts Modal
   =========================================== */
.shortcuts-modal {
    max-width: 600px;
}

.shortcuts-section {
    margin-bottom: 24px;
}

.shortcuts-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 12px;
}

.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
}

.shortcut-action {
    font-size: 14px;
    color: var(--gray-700);
}

.shortcut-keys {
    display: flex;
    gap: 4px;
}

.shortcut-key {
    display: inline-block;
    padding: 4px 8px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    color: var(--gray-700);
    box-shadow: 0 1px 0 var(--gray-300);
}

/* ===========================================
   19. Feature Discovery Badge
   =========================================== */
.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    color: white;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
    animation: feature-glow 2s ease infinite;
}

@keyframes feature-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}

.feature-callout {
    position: relative;
    padding: 16px;
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border: 1px solid var(--primary-200);
    border-radius: 12px;
    margin-bottom: 16px;
}

.feature-callout-badge {
    position: absolute;
    top: -8px;
    left: 16px;
}

.feature-callout-title {
    font-weight: 600;
    color: var(--primary-800);
    margin-bottom: 4px;
    margin-top: 4px;
}

.feature-callout-text {
    font-size: 13px;
    color: var(--primary-700);
}

.feature-callout-dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--primary-400);
    cursor: pointer;
}

/* ===========================================
   20. Shimmer Loading Effect
   =========================================== */
.shimmer {
    background: linear-gradient(
        90deg,
        var(--gray-200) 25%,
        var(--gray-100) 50%,
        var(--gray-200) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

.shimmer-text {
    height: 1em;
    border-radius: 4px;
}

.shimmer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.shimmer-image {
    aspect-ratio: 16/9;
    border-radius: 8px;
}

.shimmer-button {
    width: 100px;
    height: 36px;
    border-radius: 6px;
}

/* ===========================================
   Dark Mode Support for Part 10
   =========================================== */
body.dark-mode .form-recovery-banner {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--info-800);
}

body.dark-mode .search-operators-help {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .column-manager-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .column-manager-item:hover {
    background: var(--gray-700);
}

body.dark-mode .notification-group {
    border-color: var(--gray-700);
}

body.dark-mode .notification-group-header {
    background: var(--gray-800);
}

body.dark-mode .cart-drawer {
    background: var(--gray-900);
}

body.dark-mode .cart-item {
    background: var(--gray-800);
}

body.dark-mode .cart-drawer-footer {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .reaction-picker-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .reaction-badge {
    background: var(--gray-700);
}

body.dark-mode .mention-suggestions {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .mention-suggestion:hover {
    background: var(--gray-700);
}

body.dark-mode .theme-panel {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .tour-tooltip {
    background: var(--gray-800);
}

body.dark-mode .tour-tooltip-footer {
    background: var(--gray-750);
}

body.dark-mode .swipe-delete-content {
    background: var(--gray-800);
}

body.dark-mode .diff-column {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .shortcut-key {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-200);
}

body.dark-mode .shimmer {
    background: linear-gradient(
        90deg,
        var(--gray-700) 25%,
        var(--gray-600) 50%,
        var(--gray-700) 75%
    );
    background-size: 200% 100%;
}

/* ============================================
   End of Session 28 Part 10 UI Improvements
   ============================================ */

/* ============================================
   Mobile Responsiveness Improvements
   Added: 2026-02-03
   ============================================ */

/* Mobile-first adjustments */
@media (max-width: 768px) {
    /* Sidebar mobile handling */
    .app-layout {
        display: flex;
        flex-direction: column;
    }

    .sidebar {
        position: fixed;
        z-index: 1000;
        width: 280px;
        height: 100%;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .sidebar-overlay.visible {
        opacity: 1;
        visibility: visible;
    }

    .main-wrapper {
        margin-left: 0;
        width: 100%;
    }

    .main-content {
        padding: 1rem;
    }

    /* Mobile header */
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: var(--white);
        border-bottom: 1px solid var(--gray-200);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    body.dark-mode .mobile-header {
        background: var(--gray-900);
        border-color: var(--gray-700);
    }

    .mobile-menu-btn {
        padding: 0.5rem;
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Cards responsive */
    .stat-card {
        min-width: 100%;
    }

    .stat-cards {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Table responsive */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modal full-screen on mobile */
    .modal-dialog {
        max-width: 100%;
        width: 100%;
        margin: 0;
        min-height: 100vh;
        border-radius: 0;
    }

    .modal-content {
        min-height: 100vh;
        border-radius: 0;
    }

    /* Form elements touch-friendly */
    .form-input,
    .form-select,
    .btn {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Grid responsive */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }

    /* Navigation tabs scroll */
    .tab-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tab-nav::-webkit-scrollbar {
        display: none;
    }

    /* Charts responsive */
    .chart-container {
        min-height: 200px;
        max-height: 300px;
    }

    /* Toast positioning */
    .toast-container {
        bottom: 70px; /* Above mobile nav */
        left: 1rem;
        right: 1rem;
    }

    /* Quick actions mobile */
    .quick-actions {
        flex-direction: column;
    }

    .quick-actions .btn {
        width: 100%;
    }
}

/* Small mobile (phone portrait) */
@media (max-width: 480px) {
    .main-content {
        padding: 0.75rem;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .page-header-actions {
        width: 100%;
        flex-direction: column;
    }

    .page-header-actions .btn {
        width: 100%;
    }

    /* Card padding reduced */
    .card {
        padding: 0.75rem;
    }

    .card-header {
        padding: 0.75rem;
    }

    .card-body {
        padding: 0.75rem;
    }

    /* Filter dropdowns stack */
    .filter-bar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .filter-bar .form-select,
    .filter-bar .form-input {
        width: 100%;
    }

    /* Dashboard stats smaller */
    .stat-value {
        font-size: 1.5rem;
    }

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

    /* Image bank grid */
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    /* Typography adjustments */
    h1, .text-3xl {
        font-size: 1.5rem;
    }

    h2, .text-2xl {
        font-size: 1.25rem;
    }

    h3, .text-xl {
        font-size: 1.125rem;
    }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 200px;
    }

    .main-wrapper {
        margin-left: 200px;
    }

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

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

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn-sm {
        min-height: 40px;
        padding: 0.5rem 1rem;
    }

    .btn-xs {
        min-height: 44px;
        padding: 8px 12px;
    }

    .header-icon-btn,
    .btn-icon {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects that don't work on touch */
    .btn:hover {
        transform: none;
    }

    .card:hover {
        box-shadow: none;
    }

    /* Swipe indicators */
    .swipeable::after {
        content: '';
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 30px;
        background: var(--gray-300);
        border-radius: 2px;
        opacity: 0.5;
    }

    /* Larger checkboxes */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
    }

    /* Better dropdown touch */
    .dropdown-menu {
        min-width: 200px;
    }

    .dropdown-item {
        padding: 0.75rem 1rem;
    }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
    .mobile-header {
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }

    .toast-container {
        bottom: max(70px, calc(70px + env(safe-area-inset-bottom)));
    }

    .modal-content {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* Print styles enhancement */
@media print {
    .sidebar,
    .mobile-header,
    .toast-container,
    .modal-overlay,
    .btn-group,
    .filter-bar {
        display: none !important;
    }

    .main-wrapper, .main-content {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ============================================
   End of Mobile Responsiveness
   ============================================ */

/* ============================================
   SHIPPING COST CALCULATOR
   ============================================ */

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

.shipping-calc-section {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.shipping-calc-section .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 14px;
}

.shipping-calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.calc-input-group label {
    display: block;
    font-size: 12px;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.calc-input-group .form-control {
    text-align: center;
}

.shipping-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.preset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.preset-btn:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
    color: var(--primary-700);
}

.shipping-estimates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.shipping-rate-card {
    position: relative;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 12px;
    text-align: center;
}

.shipping-rate-card.best-rate {
    border-color: var(--success-500);
    background: var(--success-50);
}

.best-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--success-500);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.rate-carrier {
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 2px;
}

.rate-service {
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.rate-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-600);
}

.rate-days {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 4px;
}

.shipping-disclaimer {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 12px;
    font-style: italic;
}

.dim-weight-display {
    background: white;
    border-radius: var(--radius-md);
    padding: 12px;
}

.dim-weight-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

.dim-weight-row.billable {
    border-top: 1px solid var(--gray-200);
    margin-top: 8px;
    padding-top: 12px;
}

.dim-warning {
    font-size: 11px;
    color: var(--warning-600);
    margin-left: 8px;
}

body.dark-mode .shipping-calc-section {
    background: #374151;
}

body.dark-mode .preset-btn {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .preset-btn:hover {
    background: #4338ca;
    border-color: #4338ca;
    color: white;
}

body.dark-mode .shipping-rate-card {
    background: #1f2937;
    border-color: #4b5563;
}

body.dark-mode .shipping-rate-card.best-rate {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
}

body.dark-mode .rate-carrier {
    color: #f9fafb;
}

body.dark-mode .dim-weight-display {
    background: #1f2937;
}

/* ============================================
   INVENTORY AGE ANALYSIS
   ============================================ */

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

.age-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.age-summary-stat {
    text-align: center;
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.age-summary-stat .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-800);
}

.age-summary-stat .stat-label {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 4px;
}

.age-summary-stat.warning .stat-value {
    color: var(--warning-600);
}

.age-distribution-section {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.age-distribution-section .section-title {
    font-weight: 600;
    margin-bottom: 16px;
}

.age-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.age-bar-row {
    display: grid;
    grid-template-columns: 160px 1fr 50px 70px;
    align-items: center;
    gap: 12px;
}

.age-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

.age-label.fresh { color: #10b981; }
.age-label.recent { color: #3b82f6; }
.age-label.aging { color: #f59e0b; }
.age-label.stale { color: #f97316; }
.age-label.deadstock { color: #ef4444; }

.age-bar-container {
    height: 20px;
    background: var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
}

.age-bar {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.age-bar.fresh { background: #10b981; }
.age-bar.recent { background: #3b82f6; }
.age-bar.aging { background: #f59e0b; }
.age-bar.stale { background: #f97316; }
.age-bar.deadstock { background: #ef4444; }

.age-count {
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

.age-value {
    font-size: 13px;
    color: var(--gray-500);
    text-align: right;
}

.oldest-item-section {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.oldest-item-section .section-title {
    font-weight: 600;
    margin-bottom: 12px;
}

.oldest-item-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.oldest-item-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.oldest-item-meta {
    font-size: 12px;
    color: var(--gray-500);
}

.oldest-item-age {
    text-align: center;
    padding: 8px 16px;
    background: var(--danger-50);
    border-radius: var(--radius-md);
}

.oldest-item-age .age-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--danger-600);
}

.oldest-item-age .age-unit {
    font-size: 11px;
    color: var(--danger-500);
}

.age-recommendations {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.age-recommendations .section-title {
    font-weight: 600;
    margin-bottom: 12px;
}

.recommendation-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recommendation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border-radius: var(--radius-md);
    font-size: 13px;
}

.recommendation-item.success {
    background: var(--success-50);
    color: var(--success-700);
}

.recommendation-item.warning {
    background: var(--warning-50);
    color: var(--warning-700);
}

.recommendation-item.danger {
    background: var(--danger-50);
    color: var(--danger-700);
}

body.dark-mode .age-summary-stat {
    background: #374151;
}

body.dark-mode .age-summary-stat .stat-value {
    color: #f9fafb;
}

body.dark-mode .age-distribution-section,
body.dark-mode .oldest-item-section,
body.dark-mode .age-recommendations {
    background: #374151;
}

body.dark-mode .age-bar-container {
    background: #4b5563;
}

body.dark-mode .oldest-item-card {
    background: #1f2937;
    border-color: #4b5563;
}

body.dark-mode .oldest-item-title {
    color: #f9fafb;
}

body.dark-mode .recommendation-item {
    background: #1f2937;
    color: #e5e7eb;
}

body.dark-mode .recommendation-item.success {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

body.dark-mode .recommendation-item.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

body.dark-mode .recommendation-item.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* ============================================
   QUICK NOTES WIDGET
   ============================================ */

.quick-notes-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.add-note-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-note-section textarea {
    resize: vertical;
    min-height: 80px;
}

.add-note-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.add-note-actions select {
    width: 120px;
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.empty-notes {
    text-align: center;
    padding: 40px;
    color: var(--gray-400);
}

.empty-notes p {
    margin-top: 12px;
}

.note-card {
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.note-card.note-default { background: var(--gray-50); }
.note-card.note-yellow { background: #fef3c7; border-color: #fcd34d; }
.note-card.note-green { background: #d1fae5; border-color: #6ee7b7; }
.note-card.note-blue { background: #dbeafe; border-color: #93c5fd; }
.note-card.note-pink { background: #fce7f3; border-color: #f9a8d4; }
.note-card.note-purple { background: #ede9fe; border-color: #c4b5fd; }

.note-content {
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.note-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.note-time {
    font-size: 11px;
    color: var(--gray-500);
}

.note-actions {
    display: flex;
    gap: 4px;
}

.note-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--gray-500);
    transition: all 0.15s;
}

.note-btn:hover {
    background: rgba(0,0,0,0.1);
    color: var(--gray-700);
}

.note-btn.delete:hover {
    background: var(--danger-100);
    color: var(--danger-600);
}

body.dark-mode .note-card.note-default {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .note-card.note-yellow {
    background: rgba(251, 191, 36, 0.2);
    border-color: #fbbf24;
}

body.dark-mode .note-card.note-green {
    background: rgba(52, 211, 153, 0.2);
    border-color: #34d399;
}

body.dark-mode .note-card.note-blue {
    background: rgba(96, 165, 250, 0.2);
    border-color: #60a5fa;
}

body.dark-mode .note-card.note-pink {
    background: rgba(244, 114, 182, 0.2);
    border-color: #f472b6;
}

body.dark-mode .note-card.note-purple {
    background: rgba(167, 139, 250, 0.2);
    border-color: #a78bfa;
}

body.dark-mode .note-content {
    color: #e5e7eb;
}

body.dark-mode .note-footer {
    border-color: rgba(255,255,255,0.1);
}

body.dark-mode .note-btn {
    color: #9ca3af;
}

body.dark-mode .note-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #f9fafb;
}

body.dark-mode .empty-notes {
    color: #6b7280;
}

/* ============================================
   SALES VELOCITY DASHBOARD
   ============================================ */

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

.velocity-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.velocity-stat {
    text-align: center;
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.velocity-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-600);
}

.velocity-stat-label {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 4px;
}

.velocity-section {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.velocity-section .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 12px;
}

.velocity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.velocity-empty {
    text-align: center;
    padding: 20px;
    color: var(--gray-500);
}

.velocity-item {
    display: grid;
    grid-template-columns: 40px 1fr 150px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: white;
    border-radius: var(--radius-md);
}

.velocity-item.top-performer {
    background: var(--success-50);
    border: 1px solid var(--success-200);
}

.velocity-rank {
    font-weight: 700;
    color: var(--gray-400);
    text-align: center;
}

.velocity-item.top-performer .velocity-rank {
    color: var(--success-600);
}

.velocity-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.velocity-meta {
    font-size: 12px;
    color: var(--gray-500);
}

.velocity-speed {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.velocity-bar {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: var(--primary-400);
    border-radius: 3px;
    opacity: 0.3;
}

.velocity-rate {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-600);
    z-index: 1;
}

.slow-movers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slow-mover-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: white;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--warning-500);
}

.slow-mover-title {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slow-mover-price {
    font-weight: 600;
    color: var(--gray-600);
}

.velocity-tips {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tips-list li {
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
    font-size: 13px;
    color: var(--gray-600);
}

.tips-list li::before {
    content: "•";
    position: absolute;
    left: 6px;
    color: var(--primary-400);
}

body.dark-mode .velocity-stat {
    background: #374151;
}

body.dark-mode .velocity-section,
body.dark-mode .velocity-tips {
    background: #374151;
}

body.dark-mode .velocity-item {
    background: #1f2937;
}

body.dark-mode .velocity-item.top-performer {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
}

body.dark-mode .velocity-title {
    color: #f9fafb;
}

body.dark-mode .slow-mover-item {
    background: #1f2937;
}

body.dark-mode .slow-mover-title {
    color: #f9fafb;
}

/* ============================================
   PRICE DROP SUGGESTION
   ============================================ */

.price-drop-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.price-drop-item-info {
    text-align: center;
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.price-drop-item-info h4 {
    margin-bottom: 8px;
}

.price-drop-options {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.price-drop-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s;
    min-width: 80px;
}

.price-drop-btn:hover {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.drop-pct {
    font-size: 16px;
    font-weight: 700;
    color: var(--danger-600);
}

.drop-price {
    font-size: 14px;
    color: var(--gray-600);
    margin-top: 4px;
}

.price-drop-custom {
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.price-drop-custom label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
}

.price-drop-custom .input-group {
    display: flex;
    gap: 8px;
}

.price-drop-custom .input-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    color: var(--gray-600);
}

.price-drop-custom .form-control {
    flex: 1;
    border-radius: 0;
}

.price-drop-custom .btn {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

body.dark-mode .price-drop-item-info,
body.dark-mode .price-drop-custom {
    background: #374151;
}

body.dark-mode .price-drop-btn {
    background: #1f2937;
    border-color: #4b5563;
}

body.dark-mode .price-drop-btn:hover {
    background: #4338ca;
    border-color: #4338ca;
}

body.dark-mode .drop-price {
    color: #9ca3af;
}

/* ============================================
   BULK PRICE UPDATE
   ============================================ */

.bulk-price-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bulk-price-info {
    text-align: center;
    padding: 12px;
    background: var(--primary-50);
    border-radius: var(--radius-md);
    color: var(--primary-700);
}

.bulk-price-methods {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.bulk-method-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}

.bulk-method-option:has(input:checked) {
    background: var(--primary-50);
    border-color: var(--primary-500);
}

.bulk-method-option input {
    display: none;
}

.method-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.bulk-price-section {
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.bulk-pct-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.pct-btn {
    padding: 8px 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s;
}

.pct-btn.decrease {
    color: var(--danger-600);
}

.pct-btn.increase {
    color: var(--success-600);
}

.pct-btn:hover {
    background: var(--gray-100);
}

.bulk-price-preview {
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.bulk-price-preview h4 {
    margin-bottom: 12px;
}

.preview-list {
    margin-top: 12px;
}

.preview-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-200);
}

.preview-title {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-old {
    color: var(--gray-500);
    text-decoration: line-through;
}

.preview-arrow {
    color: var(--gray-400);
}

.preview-new {
    font-weight: 600;
}

.preview-new.decrease {
    color: var(--danger-600);
}

.preview-new.increase {
    color: var(--success-600);
}

.preview-more {
    text-align: center;
    padding: 8px;
    color: var(--gray-500);
    font-size: 13px;
}

body.dark-mode .bulk-price-info {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

body.dark-mode .bulk-method-option {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .bulk-method-option:has(input:checked) {
    background: rgba(99, 102, 241, 0.15);
    border-color: #6366f1;
}

body.dark-mode .bulk-price-section,
body.dark-mode .bulk-price-preview {
    background: #374151;
}

body.dark-mode .pct-btn {
    background: #1f2937;
    border-color: #4b5563;
}

body.dark-mode .preview-row {
    border-color: #4b5563;
}

body.dark-mode .preview-title {
    color: #f9fafb;
}

/* ============================================
   LOW STOCK ALERTS
   ============================================ */

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

.low-stock-config {
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.low-stock-config label {
    display: block;
    font-weight: 500;
    margin-bottom: 12px;
}

.threshold-selector {
    display: flex;
    gap: 8px;
}

.threshold-btn {
    width: 50px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.threshold-btn:hover {
    border-color: var(--primary-300);
}

.threshold-btn.active {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

.stock-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.stock-summary-card {
    text-align: center;
    padding: 16px;
    border-radius: var(--radius-lg);
}

.stock-summary-card.danger {
    background: var(--danger-50);
}

.stock-summary-card.warning {
    background: var(--warning-50);
}

.stock-summary-card.success {
    background: var(--success-50);
}

.stock-summary-count {
    font-size: 32px;
    font-weight: 700;
}

.stock-summary-card.danger .stock-summary-count { color: var(--danger-600); }
.stock-summary-card.warning .stock-summary-count { color: var(--warning-600); }
.stock-summary-card.success .stock-summary-count { color: var(--success-600); }

.stock-summary-label {
    font-size: 12px;
    color: var(--gray-600);
    margin-top: 4px;
}

.stock-section {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.stock-section .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 12px;
}

.stock-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stock-list.danger .stock-item {
    border-left: 3px solid var(--danger-500);
}

.stock-list.warning .stock-item {
    border-left: 3px solid var(--warning-500);
}

.stock-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: white;
    border-radius: var(--radius-md);
}

.stock-item-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-item-qty {
    font-weight: 700;
    color: var(--gray-500);
    min-width: 30px;
    text-align: right;
}

.stock-more {
    text-align: center;
    padding: 8px;
    color: var(--gray-500);
    font-size: 13px;
}

.stock-all-good {
    text-align: center;
    padding: 40px;
    color: var(--success-600);
}

.stock-all-good p {
    margin-top: 12px;
    font-weight: 500;
}

body.dark-mode .low-stock-config,
body.dark-mode .stock-section {
    background: #374151;
}

body.dark-mode .threshold-btn {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .threshold-btn.active {
    background: #4f46e5;
    border-color: #4f46e5;
}

body.dark-mode .stock-summary-card.danger {
    background: rgba(239, 68, 68, 0.15);
}

body.dark-mode .stock-summary-card.warning {
    background: rgba(245, 158, 11, 0.15);
}

body.dark-mode .stock-summary-card.success {
    background: rgba(16, 185, 129, 0.15);
}

body.dark-mode .stock-item {
    background: #1f2937;
}

body.dark-mode .stock-item-title {
    color: #f9fafb;
}

/* ============================================
   LISTING HEALTH SCORE
   ============================================ */

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

.health-overall {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.health-score-ring {
    position: relative;
    width: 100px;
    height: 100px;
    color: var(--gray-400);
}

.health-score-ring.success { color: var(--success-500); }
.health-score-ring.warning { color: var(--warning-500); }
.health-score-ring.danger { color: var(--danger-500); }

.health-score-ring svg {
    width: 100%;
    height: 100%;
}

.health-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 700;
}

.health-summary {
    flex: 1;
}

.health-label {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.health-stats {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: var(--gray-500);
}

.health-stats .warning {
    color: var(--warning-600);
}

.health-breakdown {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.health-breakdown .section-title {
    font-weight: 600;
    margin-bottom: 12px;
}

.health-dist-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dist-bar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: white;
    border-radius: var(--radius-md);
}

.dist-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.dist-label.success { color: var(--success-600); }
.dist-label.warning { color: var(--warning-600); }
.dist-label.danger { color: var(--danger-600); }

.dist-count {
    font-weight: 700;
    font-size: 18px;
}

.health-attention-section {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.health-attention-section .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 12px;
}

.health-listing-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.health-listing-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: var(--radius-md);
}

.health-listing-score {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 16px;
    color: white;
}

.health-listing-score.success { background: var(--success-500); }
.health-listing-score.warning { background: var(--warning-500); }
.health-listing-score.danger { background: var(--danger-500); }

.health-listing-info {
    flex: 1;
}

.health-listing-title {
    font-weight: 500;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.health-listing-issues {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.issue-tag {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--danger-100);
    color: var(--danger-700);
    border-radius: 10px;
}

.health-all-good {
    text-align: center;
    padding: 40px;
    color: var(--success-600);
}

.health-all-good p {
    margin-top: 12px;
    font-weight: 500;
}

.health-tips {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.health-tips .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 12px;
}

.health-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.health-tips-list li {
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
    font-size: 14px;
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-200);
}

.health-tips-list li:last-child {
    border-bottom: none;
}

.health-tips-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--success-500);
    font-weight: 600;
}

body.dark-mode .health-overall,
body.dark-mode .health-breakdown,
body.dark-mode .health-attention-section,
body.dark-mode .health-tips {
    background: #374151;
}

body.dark-mode .dist-bar-row,
body.dark-mode .health-listing-item {
    background: #1f2937;
}

body.dark-mode .health-listing-title {
    color: #f9fafb;
}

body.dark-mode .health-tips-list li {
    color: #d1d5db;
    border-color: #4b5563;
}

/* ============================================
   PROFIT TARGET TRACKER
   ============================================ */

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

.target-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.target-card {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.target-card.achieved {
    background: var(--success-50);
    border-color: var(--success-400);
}

.target-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.target-period {
    font-weight: 600;
    color: var(--gray-700);
}

.target-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
}

.target-badge.achieved {
    background: var(--success-500);
    color: white;
}

.target-progress-ring {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    color: var(--primary-500);
}

.target-card.achieved .target-progress-ring {
    color: var(--success-500);
}

.target-progress-ring svg {
    width: 100%;
    height: 100%;
}

.target-progress-ring .progress-ring {
    transition: stroke-dasharray 0.5s ease;
}

.target-pct {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 700;
}

.target-values {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 12px;
}

.target-values .current {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-600);
}

.target-card.achieved .target-values .current {
    color: var(--success-600);
}

.target-values .divider {
    color: var(--gray-400);
}

.target-values .goal {
    font-size: 14px;
    color: var(--gray-500);
}

.target-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 14px;
}

.target-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.target-stats {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.target-stat {
    text-align: center;
}

.target-stat .stat-label {
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.target-stat .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
}

.target-motivation {
    padding: 20px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    text-align: center;
}

.motivation-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 500;
    color: var(--primary-700);
}

.motivation-message.success {
    color: var(--success-700);
}

.target-motivation:has(.motivation-message.success) {
    background: var(--success-50);
}

body.dark-mode .target-card {
    background: #374151;
}

body.dark-mode .target-card.achieved {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
}

body.dark-mode .target-period {
    color: #e5e7eb;
}

body.dark-mode .target-input {
    background: #1f2937;
    border-color: #4b5563;
    color: #f9fafb;
}

body.dark-mode .target-stats {
    background: #374151;
}

body.dark-mode .target-stat .stat-value {
    color: #f9fafb;
}

body.dark-mode .target-motivation {
    background: rgba(99, 102, 241, 0.15);
}

body.dark-mode .motivation-message {
    color: #a5b4fc;
}

body.dark-mode .target-motivation:has(.motivation-message.success) {
    background: rgba(16, 185, 129, 0.15);
}

body.dark-mode .motivation-message.success {
    color: #34d399;
}

/* ============================================
   WEEKLY PERFORMANCE REPORT
   ============================================ */

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

.report-period {
    text-align: center;
    padding: 12px;
    background: var(--primary-50);
    border-radius: var(--radius-md);
}

.period-label {
    font-weight: 600;
    color: var(--primary-700);
}

.report-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.report-metric-card {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
}

.metric-header {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--gray-500);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.metric-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 8px;
}

.metric-change {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
}

.metric-change.positive {
    color: var(--success-600);
}

.metric-change.negative {
    color: var(--danger-600);
}

.metric-sub {
    font-size: 12px;
    color: var(--gray-500);
}

.report-section {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.report-section .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 16px;
}

.daily-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 150px;
    gap: 8px;
}

.chart-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-bar-container {
    height: 100px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.chart-bar {
    width: 70%;
    background: linear-gradient(to top, var(--primary-500), var(--primary-400));
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    position: relative;
    cursor: pointer;
    transition: opacity 0.2s;
}

.chart-bar:hover {
    opacity: 0.8;
}

.chart-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-900);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.chart-bar:hover .chart-tooltip {
    opacity: 1;
}

.chart-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    margin-top: 8px;
}

.chart-count {
    font-size: 11px;
    color: var(--gray-400);
}

.top-sellers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.top-seller-item {
    display: grid;
    grid-template-columns: 30px 1fr 80px 80px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: white;
    border-radius: var(--radius-md);
}

.seller-rank {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.seller-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seller-count {
    font-size: 13px;
    color: var(--gray-500);
    text-align: right;
}

.seller-revenue {
    font-weight: 600;
    color: var(--success-600);
    text-align: right;
}

.report-quick-stats {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.quick-stat {
    text-align: center;
}

.quick-stat .qs-label {
    display: block;
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.quick-stat .qs-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
}

body.dark-mode .report-period {
    background: rgba(99, 102, 241, 0.15);
}

body.dark-mode .period-label {
    color: #a5b4fc;
}

body.dark-mode .report-metric-card,
body.dark-mode .report-section,
body.dark-mode .report-quick-stats {
    background: #374151;
}

body.dark-mode .metric-value,
body.dark-mode .quick-stat .qs-value {
    color: #f9fafb;
}

body.dark-mode .top-seller-item {
    background: #1f2937;
}

body.dark-mode .seller-title {
    color: #f9fafb;
}

body.dark-mode .chart-bar {
    background: linear-gradient(to top, #6366f1, #818cf8);
}

/* ============================================
   RESTOCK SUGGESTIONS
   ============================================ */

.restock-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.restock-info {
    padding: 12px 16px;
    background: var(--primary-50);
    border-radius: var(--radius-md);
    color: var(--primary-700);
    font-size: 14px;
}

.restock-list {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.restock-header {
    display: grid;
    grid-template-columns: 1fr 80px 80px 70px 100px;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-100);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-600);
}

.restock-item {
    display: grid;
    grid-template-columns: 1fr 80px 80px 70px 100px;
    gap: 12px;
    padding: 12px 16px;
    align-items: center;
    border-bottom: 1px solid var(--gray-100);
}

.restock-item:last-child {
    border-bottom: none;
}

.restock-item.out-of-stock {
    background: var(--danger-50);
}

.restock-item.low-stock {
    background: var(--warning-50);
}

.restock-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.restock-sold {
    text-align: center;
    font-weight: 600;
}

.restock-price {
    text-align: center;
    color: var(--gray-600);
}

.restock-stock {
    text-align: center;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.restock-stock.danger {
    background: var(--danger-100);
    color: var(--danger-700);
}

.restock-stock.warning {
    background: var(--warning-100);
    color: var(--warning-700);
}

.restock-stock.ok {
    background: var(--success-100);
    color: var(--success-700);
}

.restock-summary {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.restock-summary .summary-stat {
    text-align: center;
}

.restock-summary .stat-label {
    display: block;
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.restock-summary .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-800);
}

.restock-summary .stat-value.danger {
    color: var(--danger-600);
}

.restock-empty {
    text-align: center;
    padding: 40px;
    color: var(--gray-500);
}

.restock-empty p {
    margin-top: 12px;
}

body.dark-mode .restock-info {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

body.dark-mode .restock-list {
    border-color: #4b5563;
}

body.dark-mode .restock-header {
    background: #374151;
    color: #9ca3af;
}

body.dark-mode .restock-item {
    border-color: #374151;
}

body.dark-mode .restock-item.out-of-stock {
    background: rgba(239, 68, 68, 0.1);
}

body.dark-mode .restock-item.low-stock {
    background: rgba(245, 158, 11, 0.1);
}

body.dark-mode .restock-title {
    color: #f9fafb;
}

body.dark-mode .restock-summary {
    background: #374151;
}

body.dark-mode .restock-summary .stat-value {
    color: #f9fafb;
}

/* ============================================
   CUSTOMER INSIGHTS
   ============================================ */

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

.insights-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.insight-stat {
    text-align: center;
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.insight-stat.highlight {
    background: var(--primary-50);
}

.insight-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-800);
}

.insight-stat.highlight .insight-value {
    color: var(--primary-600);
}

.insight-label {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 4px;
}

.insights-section {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.insights-section .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 12px;
}

.top-customers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.customer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: var(--radius-md);
}

.customer-row.vip {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
}

.customer-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    color: var(--gray-600);
}

.customer-row.vip .customer-rank {
    background: #f59e0b;
    color: white;
}

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

.customer-name {
    display: block;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-meta {
    font-size: 12px;
    color: var(--gray-500);
}

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

.customer-spent {
    font-weight: 700;
    color: var(--success-600);
}

.repeat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    padding: 2px 6px;
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: 10px;
    margin-left: 8px;
}

.insights-tip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--success-50);
    border-radius: var(--radius-lg);
    color: var(--success-700);
}

body.dark-mode .insight-stat {
    background: #374151;
}

body.dark-mode .insight-stat.highlight {
    background: rgba(99, 102, 241, 0.15);
}

body.dark-mode .insight-value {
    color: #f9fafb;
}

body.dark-mode .insights-section {
    background: #374151;
}

body.dark-mode .customer-row {
    background: #1f2937;
}

body.dark-mode .customer-row.vip {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
    border-color: #f59e0b;
}

body.dark-mode .customer-name {
    color: #f9fafb;
}

body.dark-mode .insights-tip {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

/* ============================================
   BUNDLE BUILDER
   ============================================ */

.bundle-builder-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bundle-section {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.bundle-section .section-title {
    font-weight: 600;
    margin-bottom: 12px;
}

.bundle-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100px;
}

.bundle-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}

.bundle-item-title {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bundle-item-price {
    font-weight: 600;
    color: var(--gray-600);
}

.empty-bundle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    color: var(--gray-400);
    font-style: italic;
}

.bundle-available-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 12px;
}

.bundle-available-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}

.bundle-available-item:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
}

.bundle-available-item .item-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bundle-available-item .item-price {
    color: var(--gray-500);
}

.bundle-available-item .add-icon {
    color: var(--primary-500);
}

.bundle-pricing {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.pricing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.pricing-row.total {
    border-top: 2px solid var(--gray-300);
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 600;
}

.original-price {
    text-decoration: line-through;
    color: var(--gray-500);
}

.discount-input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    text-align: center;
}

.bundle-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--success-600);
}

.pricing-savings {
    text-align: center;
    margin-top: 12px;
    padding: 8px;
    background: var(--success-50);
    border-radius: var(--radius-md);
    color: var(--success-700);
    font-weight: 500;
}

.bundle-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    color: var(--gray-600);
}

body.dark-mode .bundle-section,
body.dark-mode .bundle-pricing {
    background: #374151;
}

body.dark-mode .bundle-item,
body.dark-mode .bundle-available-item {
    background: #1f2937;
    border-color: #4b5563;
}

body.dark-mode .bundle-available-item:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: #6366f1;
}

body.dark-mode .bundle-item-title,
body.dark-mode .bundle-available-item .item-title {
    color: #f9fafb;
}

body.dark-mode .discount-input {
    background: #1f2937;
    border-color: #4b5563;
    color: #f9fafb;
}

body.dark-mode .pricing-savings {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

body.dark-mode .bundle-tip {
    background: #4b5563;
    color: #d1d5db;
}

/* ============================================
   SEASONAL TRENDS
   ============================================ */

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

.seasonal-section {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.seasonal-section .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 16px;
}

.seasonal-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 150px;
    gap: 4px;
}

.seasonal-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.seasonal-bar-container {
    height: 120px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.seasonal-bar {
    width: 80%;
    background: linear-gradient(to top, var(--primary-500), var(--primary-400));
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    position: relative;
    cursor: pointer;
    transition: opacity 0.2s;
}

.seasonal-bar:hover {
    opacity: 0.8;
}

.seasonal-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-900);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.seasonal-bar:hover .seasonal-tooltip {
    opacity: 1;
}

.seasonal-label {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 8px;
}

.seasonal-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.highlight-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-lg);
}

.highlight-card.best {
    background: var(--success-50);
    color: var(--success-700);
}

.highlight-card.worst {
    background: var(--gray-100);
    color: var(--gray-600);
}

.highlight-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--radius-md);
}

.highlight-label {
    font-size: 12px;
    opacity: 0.8;
}

.highlight-value {
    font-weight: 600;
}

.highlight-amount {
    font-size: 18px;
    font-weight: 700;
}

.quarter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.quarter-card {
    text-align: center;
    padding: 16px;
    background: white;
    border-radius: var(--radius-md);
}

.quarter-name {
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.quarter-revenue {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-600);
}

.seasonal-tips {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.seasonal-tips .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 12px;
}

body.dark-mode .seasonal-section,
body.dark-mode .seasonal-tips {
    background: #374151;
}

body.dark-mode .seasonal-bar {
    background: linear-gradient(to top, #6366f1, #818cf8);
}

body.dark-mode .highlight-card.best {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

body.dark-mode .highlight-card.worst {
    background: #4b5563;
    color: #9ca3af;
}

body.dark-mode .highlight-icon {
    background: #1f2937;
}

body.dark-mode .quarter-card {
    background: #1f2937;
}

body.dark-mode .quarter-name {
    color: #9ca3af;
}

/* ========================================
   Quick Item Lookup
   ======================================== */

.quick-lookup-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lookup-search-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lookup-hint {
    font-size: 12px;
    color: #9ca3af;
}

.lookup-results {
    max-height: 400px;
    overflow-y: auto;
}

.lookup-section {
    margin-bottom: 16px;
}

.lookup-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.lookup-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.lookup-result-item:hover {
    background: #f3f4f6;
}

.lookup-item-main {
    flex: 1;
    min-width: 0;
}

.lookup-item-title {
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lookup-item-meta {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.lookup-item-price {
    font-weight: 600;
    color: #059669;
    white-space: nowrap;
}

.lookup-item-status {
    font-size: 11px;
}

.lookup-empty {
    text-align: center;
    padding: 32px 16px;
    color: #9ca3af;
    font-size: 14px;
}

/* Quick Lookup - Dark Mode */
body.dark-mode .lookup-hint {
    color: #6b7280;
}

body.dark-mode .lookup-section-title {
    color: #9ca3af;
    border-bottom-color: #4b5563;
}

body.dark-mode .lookup-result-item:hover {
    background: #374151;
}

body.dark-mode .lookup-item-title {
    color: #f9fafb;
}

body.dark-mode .lookup-item-meta {
    color: #6b7280;
}

body.dark-mode .lookup-item-price {
    color: #34d399;
}

body.dark-mode .lookup-empty {
    color: #6b7280;
}

/* ========================================
   Return Analytics
   ======================================== */

.return-analytics-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.return-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.return-stat {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.return-stat.good {
    border-color: #86efac;
    background: #f0fdf4;
}

.return-stat.warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.return-stat.bad {
    border-color: #fca5a5;
    background: #fef2f2;
}

.return-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
}

.return-stat.good .return-stat-value {
    color: #059669;
}

.return-stat.warning .return-stat-value {
    color: #d97706;
}

.return-stat.bad .return-stat-value {
    color: #dc2626;
}

.return-stat-label {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Benchmark Bar */
.return-benchmark {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
}

.benchmark-bar {
    position: relative;
    height: 24px;
    background: linear-gradient(to right, #86efac 0%, #86efac 33%, #fde68a 33%, #fde68a 66%, #fca5a5 66%, #fca5a5 100%);
    border-radius: 12px;
    margin-bottom: 8px;
}

.benchmark-indicator {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 32px;
    background: #111827;
    border-radius: 2px;
    transform: translateX(-50%);
    z-index: 1;
}

.benchmark-zones {
    display: flex;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.benchmark-zones .zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.5);
}

.benchmark-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #9ca3af;
}

/* Return Reasons */
.return-reasons-section {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
}

.return-reasons-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.return-reason-row {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.reason-name {
    flex: 1;
    font-size: 13px;
    color: #374151;
    z-index: 1;
}

.reason-count {
    font-weight: 600;
    font-size: 13px;
    color: #111827;
    z-index: 1;
    min-width: 28px;
    text-align: right;
}

.reason-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #dbeafe;
    border-radius: 4px;
    opacity: 0.5;
}

/* Return Empty */
.return-empty {
    text-align: center;
    padding: 32px 16px;
    color: #9ca3af;
}

.return-empty svg {
    color: #86efac;
    margin-bottom: 12px;
}

/* Return Tips */
.return-tips {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 16px;
}

.tips-list {
    margin: 8px 0 0 0;
    padding-left: 20px;
    font-size: 13px;
    color: #374151;
}

.tips-list li {
    margin-bottom: 4px;
}

/* Return Analytics - Dark Mode */
body.dark-mode .return-stat {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .return-stat.good {
    background: rgba(5, 150, 105, 0.1);
    border-color: #065f46;
}

body.dark-mode .return-stat.warning {
    background: rgba(217, 119, 6, 0.1);
    border-color: #92400e;
}

body.dark-mode .return-stat.bad {
    background: rgba(220, 38, 38, 0.1);
    border-color: #991b1b;
}

body.dark-mode .return-stat-value {
    color: #f9fafb;
}

body.dark-mode .return-stat-label {
    color: #9ca3af;
}

body.dark-mode .return-benchmark {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .benchmark-indicator {
    background: #f9fafb;
}

body.dark-mode .benchmark-labels {
    color: #6b7280;
}

body.dark-mode .return-reasons-section {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .reason-name {
    color: #d1d5db;
}

body.dark-mode .reason-count {
    color: #f9fafb;
}

body.dark-mode .reason-bar {
    background: #1e3a5f;
}

body.dark-mode .return-empty {
    color: #6b7280;
}

body.dark-mode .return-tips {
    background: rgba(5, 150, 105, 0.1);
    border-color: #065f46;
}

body.dark-mode .tips-list {
    color: #d1d5db;
}

/* ========================================
   Platform Fee Calculator
   ======================================== */

.fee-calc-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fee-calc-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fee-calc-input label {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

.fee-calc-input .input-group {
    display: flex;
    align-items: center;
    position: relative;
}

.input-prefix {
    position: absolute;
    left: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #6b7280;
    z-index: 1;
}

.fee-calc-input .form-control-lg {
    padding-left: 32px;
    font-size: 18px;
    font-weight: 600;
}

.fee-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.fee-platform-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: default;
}

.fee-platform-card:hover {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.platform-name {
    font-weight: 700;
    font-size: 14px;
    color: #111827;
    margin-bottom: 8px;
}

.platform-net {
    font-size: 22px;
    font-weight: 700;
    color: #059669;
}

.platform-fee {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.platform-note {
    font-size: 11px;
    font-style: italic;
    color: #6b7280;
    margin-top: 6px;
}

/* Fee Breakdown */
.fee-breakdown {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
}

.breakdown-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #374151;
    padding: 4px 0;
}

.breakdown-row.total {
    border-top: 2px solid #e5e7eb;
    padding-top: 8px;
    margin-top: 4px;
    font-weight: 700;
    color: #059669;
    font-size: 15px;
}

/* Fee Calculator Responsive */
@media (max-width: 640px) {
    .fee-comparison-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Fee Calculator - Dark Mode */
body.dark-mode .fee-calc-input label {
    color: #d1d5db;
}

body.dark-mode .input-prefix {
    color: #9ca3af;
}

body.dark-mode .fee-platform-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .fee-platform-card:hover {
    border-color: #818cf8;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.15);
}

body.dark-mode .platform-name {
    color: #f9fafb;
}

body.dark-mode .platform-net {
    color: #34d399;
}

body.dark-mode .platform-fee {
    color: #6b7280;
}

body.dark-mode .platform-note {
    color: #9ca3af;
}

body.dark-mode .fee-breakdown {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .breakdown-row {
    color: #d1d5db;
}

body.dark-mode .breakdown-row.total {
    border-top-color: #4b5563;
    color: #34d399;
}

/* ============================================
   Item Offer History
   ============================================ */

.item-offer-history {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.offer-history-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

.offer-history-summary .stat-card {
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.offer-history-summary .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-600, #4f46e5);
}

.offer-history-summary .stat-label {
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
    margin-top: 4px;
}

.item-offer-group {
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
}

.item-offer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--gray-50, #f9fafb);
    transition: background 0.15s;
    gap: 12px;
}

.item-offer-header:hover {
    background: var(--gray-100, #f3f4f6);
}

.item-offer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.item-offer-info strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-offer-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.item-offer-header .icon-wrapper {
    transition: transform 0.2s;
}

.item-offer-group.expanded .item-offer-header .icon-wrapper {
    transform: rotate(180deg);
}

.item-offer-details {
    display: none;
    padding: 0 16px 12px;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

.item-offer-group.expanded .item-offer-details {
    display: block;
}

.offer-timeline-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
}

.offer-timeline-entry:last-child {
    border-bottom: none;
}

.offer-timeline-date {
    font-size: 0.8rem;
    color: var(--gray-500, #6b7280);
    min-width: 80px;
}

.offer-timeline-amount {
    font-weight: 600;
    min-width: 70px;
}

body.dark-mode .offer-history-summary .stat-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .offer-history-summary .stat-value {
    color: #818cf8;
}

body.dark-mode .item-offer-group {
    border-color: #374151;
}

body.dark-mode .item-offer-header {
    background: #1f2937;
}

body.dark-mode .item-offer-header:hover {
    background: #263040;
}

body.dark-mode .item-offer-details {
    border-top-color: #374151;
}

body.dark-mode .offer-timeline-entry {
    border-bottom-color: #374151;
}

/* ============================================
   Checklist Analytics
   ============================================ */

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

.analytics-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.analytics-stat {
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.analytics-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-600, #4f46e5);
}

.analytics-stat-label {
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
    margin-top: 4px;
}

.priority-breakdown,
.category-breakdown {
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 16px;
}

.priority-breakdown h4,
.category-breakdown h4,
.weekly-trend h4,
.productivity-tips h4,
.platform-usage-section h4,
.monthly-activity-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--gray-700, #374151);
}

.priority-row,
.platform-usage-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.priority-label {
    display: flex;
    justify-content: space-between;
    min-width: 120px;
}

.priority-name {
    font-size: 0.85rem;
    font-weight: 500;
}

.priority-count {
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
}

.priority-bar-track {
    flex: 1;
    height: 8px;
    background: var(--gray-200, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
}

.priority-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.priority-bar-error { background: var(--error, #ef4444); }
.priority-bar-warning { background: var(--warning, #f59e0b); }
.priority-bar-success { background: var(--success, #10b981); }
.priority-bar-primary { background: var(--primary-500, #6366f1); }

.priority-pct {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}

.weekly-trend,
.monthly-activity-section {
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 16px;
}

.trend-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 140px;
}

.trend-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.trend-bar-container {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.trend-bar {
    width: 70%;
    max-width: 40px;
    background: var(--primary-500, #6366f1);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

.trend-bar-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-600, #4b5563);
    margin-top: 4px;
}

.trend-bar-label {
    font-size: 0.7rem;
    color: var(--gray-500, #6b7280);
}

.productivity-tips {
    background: var(--primary-50, #eef2ff);
    border: 1px solid var(--primary-200, #c7d2fe);
    border-radius: 10px;
    padding: 16px;
}

.productivity-tips h4 {
    color: var(--primary-700, #4338ca);
    display: flex;
    align-items: center;
    gap: 6px;
}

.productivity-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.productivity-tips li {
    padding: 6px 0;
    font-size: 0.85rem;
    color: var(--primary-700, #4338ca);
    position: relative;
    padding-left: 18px;
}

.productivity-tips li::before {
    content: '\2022';
    position: absolute;
    left: 4px;
    color: var(--primary-400, #818cf8);
}

body.dark-mode .analytics-stat {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .analytics-stat-value {
    color: #818cf8;
}

body.dark-mode .priority-breakdown,
body.dark-mode .category-breakdown,
body.dark-mode .weekly-trend,
body.dark-mode .monthly-activity-section {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .priority-bar-track {
    background: #374151;
}

body.dark-mode .priority-breakdown h4,
body.dark-mode .category-breakdown h4,
body.dark-mode .weekly-trend h4,
body.dark-mode .productivity-tips h4,
body.dark-mode .platform-usage-section h4,
body.dark-mode .monthly-activity-section h4 {
    color: #e5e7eb;
}

body.dark-mode .trend-bar {
    background: #818cf8;
}

body.dark-mode .productivity-tips {
    background: #1e1b4b;
    border-color: #3730a3;
}

body.dark-mode .productivity-tips h4 {
    color: #a5b4fc;
}

body.dark-mode .productivity-tips li {
    color: #c7d2fe;
}

/* ============================================
   Account Usage Statistics
   ============================================ */

.account-usage-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.usage-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.usage-stat-card {
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.usage-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.usage-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900, #111827);
}

.usage-stat-label {
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
}

.platform-usage-section {
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 16px;
}

.platform-usage-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.platform-usage-name {
    font-size: 0.85rem;
    font-weight: 500;
    min-width: 100px;
}

.platform-usage-count {
    font-size: 0.8rem;
    color: var(--gray-500, #6b7280);
    min-width: 100px;
    text-align: right;
}

body.dark-mode .usage-stat-card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .usage-stat-value {
    color: #f3f4f6;
}

body.dark-mode .platform-usage-section {
    background: #1f2937;
    border-color: #374151;
}

@media (max-width: 640px) {
    .offer-history-summary {
        grid-template-columns: 1fr;
    }
    .analytics-summary-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .usage-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .item-offer-stats {
        flex-wrap: wrap;
    }
}

/* ============================================
   Checklist Notes & Attachments
   ============================================ */
.checklist-attachments-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checklist-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.checklist-attachment-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: 16px;
    font-size: 12px;
    color: var(--primary-700);
}

.checklist-attachment-tag .btn {
    padding: 0;
    min-width: auto;
    height: auto;
    color: var(--primary-500);
}

.checklist-item-notes {
    font-size: 12px;
    font-style: italic;
    color: var(--gray-500);
    margin-top: 2px;
    line-height: 1.4;
}

.checklist-item-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.checklist-attachment-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: var(--gray-100);
    border-radius: 10px;
    font-size: 11px;
    color: var(--gray-600);
}

/* Dark mode */
[data-theme="dark"] .checklist-attachment-tag {
    background: var(--primary-900);
    border-color: var(--primary-700);
    color: var(--primary-300);
}

[data-theme="dark"] .checklist-item-notes {
    color: var(--gray-400);
}

[data-theme="dark"] .checklist-attachment-badge {
    background: var(--gray-800);
    color: var(--gray-400);
}

/* ============================================
   Automation Dry-Run Modal
   ============================================ */
.dry-run-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dry-run-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.dry-run-stat {
    text-align: center;
    padding: 16px 8px;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.dry-run-stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.dry-run-stat-value.text-success { color: var(--success-500); }
.dry-run-stat-value.text-warning { color: var(--warning-500); }
.dry-run-stat-value.text-error { color: var(--error-500); }

.dry-run-stat-label {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 4px;
}

.dry-run-actions-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dry-run-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    border-left: 3px solid transparent;
}

.dry-run-action-success {
    background: var(--success-50);
    border-left-color: var(--success-500);
    color: var(--success-700);
}

.dry-run-action-warning {
    background: var(--warning-50);
    border-left-color: var(--warning-500);
    color: var(--warning-700);
}

.dry-run-action-error {
    background: var(--error-50);
    border-left-color: var(--error-500);
    color: var(--error-700);
}

.dry-run-action-icon {
    flex-shrink: 0;
}

.dry-run-impact {
    padding: 12px 16px;
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: 8px;
    font-size: 13px;
    color: var(--primary-700);
}

/* Dark mode */
[data-theme="dark"] .dry-run-stat {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .dry-run-stat-label {
    color: var(--gray-400);
}

[data-theme="dark"] .dry-run-action-success {
    background: rgba(var(--success-500-rgb, 34, 197, 94), 0.1);
    color: var(--success-400);
}

[data-theme="dark"] .dry-run-action-warning {
    background: rgba(var(--warning-500-rgb, 234, 179, 8), 0.1);
    color: var(--warning-400);
}

[data-theme="dark"] .dry-run-action-error {
    background: rgba(var(--error-500-rgb, 239, 68, 68), 0.1);
    color: var(--error-400);
}

[data-theme="dark"] .dry-run-impact {
    background: var(--primary-900);
    border-color: var(--primary-700);
    color: var(--primary-300);
}

/* ============================================
   Conditional Logic Builder
   ============================================ */
.condition-builder-enhanced {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.condition-row-enhanced {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.condition-row-fields {
    display: flex;
    flex: 1;
    gap: 8px;
    flex-wrap: wrap;
}

.condition-row-fields .form-select,
.condition-row-fields .form-input {
    flex: 1;
    min-width: 120px;
}

.condition-logic-operator {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 4px 0;
}

.condition-logic-operator .btn {
    min-width: 50px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.condition-else-config {
    margin-top: 16px;
    padding: 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.condition-else-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.condition-else-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.condition-else-option:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
}

.condition-else-option.active {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.condition-else-option input[type="radio"] {
    margin-top: 3px;
}

.condition-else-option div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.condition-flow-visual {
    margin-top: 16px;
    padding: 16px;
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.flow-condition-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--primary-100);
    border: 1px solid var(--primary-300);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-700);
}

.flow-logic-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--gray-200);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-600);
    letter-spacing: 0.5px;
}

.flow-branch-split {
    display: flex;
    gap: 16px;
    width: 100%;
    margin-top: 12px;
}

.flow-branch-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.flow-branch-container.yes {
    background: rgba(var(--success-500-rgb, 34, 197, 94), 0.05);
    border-color: var(--success-200);
}

.flow-branch-container.no {
    background: rgba(var(--gray-500-rgb, 107, 114, 128), 0.05);
    border-color: var(--gray-300);
}

.flow-branch-tag {
    display: inline-flex;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.flow-branch-tag.yes {
    background: var(--success-100);
    color: var(--success-700);
}

.flow-branch-tag.no {
    background: var(--gray-200);
    color: var(--gray-600);
}

.flow-node.skip {
    opacity: 0.6;
    border-style: dashed;
}

/* Dark mode */
[data-theme="dark"] .condition-row-enhanced {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .condition-else-config {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .condition-else-option {
    border-color: var(--gray-700);
}

[data-theme="dark"] .condition-else-option:hover,
[data-theme="dark"] .condition-else-option.active {
    border-color: var(--primary-500);
    background: var(--primary-900);
}

[data-theme="dark"] .condition-flow-visual {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

[data-theme="dark"] .flow-condition-chip {
    background: var(--primary-900);
    border-color: var(--primary-700);
    color: var(--primary-300);
}

[data-theme="dark"] .flow-logic-badge {
    background: var(--gray-700);
    color: var(--gray-300);
}

[data-theme="dark"] .flow-branch-container {
    border-color: var(--gray-700);
}

[data-theme="dark"] .flow-branch-container.yes {
    background: rgba(var(--success-500-rgb, 34, 197, 94), 0.08);
    border-color: var(--success-800);
}

[data-theme="dark"] .flow-branch-tag.yes {
    background: var(--success-900);
    color: var(--success-400);
}

[data-theme="dark"] .flow-branch-tag.no {
    background: var(--gray-700);
    color: var(--gray-400);
}

@media (max-width: 640px) {
    .dry-run-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .condition-row-fields {
        flex-direction: column;
    }
    .flow-branch-split {
        flex-direction: column;
    }
}

/* ============================================
   Analytics Comparison Mode
   ============================================ */
.analytics-compare-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    padding: 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.compare-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.compare-stat-label {
    font-size: 12px;
    color: var(--gray-500);
}

.compare-stat-value {
    font-size: 18px;
    font-weight: 700;
}

.compare-stat-value.positive {
    color: var(--success-500);
}

.compare-stat-value.negative {
    color: var(--error-500);
}

/* Dark mode */
[data-theme="dark"] .analytics-compare-summary {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .compare-stat-label {
    color: var(--gray-400);
}

/* ============================================
   Calendar Expiration & Shipping Events
   ============================================ */
.calendar-legend-dot.expirations {
    background: #f59e0b;
}

.calendar-event-expiration {
    font-style: italic;
}

@media (max-width: 640px) {
    .analytics-compare-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Custom KPI Grid
   ============================================ */
.custom-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.custom-kpi-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    transition: box-shadow 0.2s;
}

.custom-kpi-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.custom-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-600);
    line-height: 1.2;
}

.custom-kpi-name {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 4px;
}

.custom-kpi-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

.custom-kpi-card:hover .custom-kpi-delete {
    opacity: 1;
}

[data-theme="dark"] .custom-kpi-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .custom-kpi-value {
    color: var(--primary-400);
}

@media (max-width: 768px) {
    .custom-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Image Usage Tracking
   ============================================ */
.image-used-by-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.image-used-by-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
}

.image-usage-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.15s;
}

.image-usage-item:hover {
    background: var(--primary-50);
    color: var(--primary-700);
}

.image-usage-empty {
    font-size: 13px;
    color: var(--gray-400);
    font-style: italic;
    padding: 4px 0;
}

[data-theme="dark"] .image-used-by-section {
    border-top-color: var(--gray-700);
}

[data-theme="dark"] .image-used-by-section h4 {
    color: var(--gray-300);
}

[data-theme="dark"] .image-usage-item {
    color: var(--gray-300);
}

[data-theme="dark"] .image-usage-item:hover {
    background: var(--primary-900);
    color: var(--primary-300);
}

[data-theme="dark"] .image-usage-empty {
    color: var(--gray-500);
}

/* ============================================
   Return/Refund Management
   ============================================ */
.return-info-section {
    border: 1px solid var(--gray-200);
}

.return-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.return-status-requested {
    background: var(--warning-100);
    color: var(--warning-700);
}

.return-status-approved {
    background: var(--primary-100);
    color: var(--primary-700);
}

.return-status-shipped_back {
    background: var(--info-100, var(--primary-100));
    color: var(--info-700, var(--primary-700));
}

.return-status-received {
    background: var(--primary-100);
    color: var(--primary-700);
}

.return-status-refunded {
    background: var(--success-100);
    color: var(--success-700);
}

.return-status-cancelled {
    background: var(--gray-100);
    color: var(--gray-600);
}

.btn-warning {
    background: var(--warning-500, #f59e0b);
    color: #fff;
    border: none;
}

.btn-warning:hover {
    background: var(--warning-600, #d97706);
}

.btn-error {
    background: var(--error-500, #ef4444);
    color: #fff;
    border: none;
}

.btn-error:hover {
    background: var(--error-600, #dc2626);
}

[data-theme="dark"] .btn-error {
    background: var(--error-600, #dc2626);
}

[data-theme="dark"] .btn-error:hover {
    background: var(--error-700, #b91c1c);
}

[data-theme="dark"] .return-info-section {
    border-color: var(--gray-600);
    background: var(--gray-800) !important;
}

[data-theme="dark"] .return-status-requested {
    background: var(--warning-900);
    color: var(--warning-300);
}

[data-theme="dark"] .return-status-approved {
    background: var(--primary-900);
    color: var(--primary-300);
}

[data-theme="dark"] .return-status-shipped_back {
    background: var(--primary-900);
    color: var(--primary-300);
}

[data-theme="dark"] .return-status-received {
    background: var(--primary-900);
    color: var(--primary-300);
}

[data-theme="dark"] .return-status-refunded {
    background: var(--success-900);
    color: var(--success-300);
}

[data-theme="dark"] .return-status-cancelled {
    background: var(--gray-700);
    color: var(--gray-400);
}

/* ============================================
   Calendar Task Dependencies
   ============================================ */
.event-dependency-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--primary-50);
    color: var(--primary-700);
    border: 1px solid var(--primary-200);
    margin-bottom: 8px;
}

[data-theme="dark"] .event-dependency-badge {
    background: var(--primary-900);
    color: var(--primary-300);
    border-color: var(--primary-700);
}

/* ============================================
   Login & Registration Enhancements
   ============================================ */

/* Field validation states */
.form-input.field-error {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 3px var(--error-light);
}

.form-input.field-valid {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 3px var(--success-light);
}

.field-error-text {
    color: var(--error);
    font-size: 12px;
    margin-top: 4px;
    display: none;
}

.field-error-text.visible {
    display: block;
}

/* Login alert banner */
.login-alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
    display: none;
}

.login-alert.alert-warning {
    display: block;
    background: var(--warning-light);
    color: #92400e;
    border: 1px solid var(--warning);
}

.login-alert.alert-danger {
    display: block;
    background: var(--error-light);
    color: #991b1b;
    border: 1px solid var(--error);
}

/* Remember me checkbox */
.remember-me-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray-600);
    cursor: pointer;
    margin-bottom: 16px;
}

.remember-me-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-600);
}

/* Password requirements checklist */
.password-requirements {
    margin-top: 8px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.password-req-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--gray-600);
    padding: 3px 0;
    transition: color 0.2s;
}

.password-req-item.met {
    color: var(--success);
}

.password-req-item .req-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Social login buttons */
.social-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--gray-400);
    font-size: 13px;
}

.social-divider::before,
.social-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid var(--gray-300);
}

.btn-social-google {
    background: #fff;
    color: var(--gray-700);
}

body.dark-mode .btn-social-google {
    background: #374151;
    color: #d1d5db;
    border-color: #4b5563;
}

.btn-social-google:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

body.dark-mode .btn-social-google:hover {
    background: #4b5563;
}

.btn-social-apple {
    background: #000;
    color: #fff;
    border-color: #000;
}

.btn-social-apple:hover {
    background: #1a1a1a;
}

.social-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Auth loading spinner */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
}

.btn-loading .btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

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

/* Forgot password link */
.forgot-password-link {
    display: inline-block;
    font-size: 13px;
    color: var(--primary-600);
    text-decoration: none;
    margin-bottom: 16px;
}

.forgot-password-link:hover {
    color: var(--primary-700);
    text-decoration: underline;
}

/* Email verification page */
.email-verify-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: var(--primary-600);
}

/* Auth loading spinner */
.auth-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

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

/* Lockout countdown */
.lockout-timer {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   Dashboard Improvements
   ============================================ */

/* Stale data banner */
.dashboard-stale-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--warning-50);
    border: 1px solid var(--warning-200);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--warning-700);
}
.dashboard-stale-banner span {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
body.dark-mode .dashboard-stale-banner {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

/* Activity item click hover */
.activity-item.clickable {
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
    padding: 12px 8px;
    margin: 0 -8px;
}
.activity-item.clickable:hover {
    background: var(--gray-50);
}
body.dark-mode .activity-item.clickable:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Widget error boundary */
.widget-error-boundary {
    border: 1px dashed var(--gray-300);
    background: var(--gray-50);
}
body.dark-mode .widget-error-boundary {
    border-color: #4b5563;
    background: rgba(255, 255, 255, 0.03);
}

/* Dashboard last updated text */
.dashboard-last-updated {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Stat card count-up value */
.stat-card-value[data-countup] {
    font-variant-numeric: tabular-nums;
}

/* Mobile FAB speed-dial menu */
.dashboard-fab-menu {
    position: fixed;
    bottom: 80px;
    right: 16px;
    z-index: 1001;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    animation: fabMenuIn 0.2s ease-out;
}
.fab-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, transform 0.15s;
}
.fab-action-item:hover {
    background: var(--gray-50);
    transform: scale(1.02);
}
body.dark-mode .fab-action-item {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}
body.dark-mode .fab-action-item:hover {
    background: #374151;
}
@keyframes fabMenuIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Sparkline Click-to-Expand
   ============================================ */
.sparkline-clickable {
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
    padding: 2px;
}
.sparkline-clickable:hover {
    background: var(--gray-100);
}
body.dark-mode .sparkline-clickable:hover {
    background: #374151;
}
.sparkline-modal-chart {
    width: 100%;
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    padding: 12px;
}
body.dark-mode .sparkline-modal-chart {
    background: #1f2937;
    border-color: #374151;
}
.sparkline-modal-chart svg text {
    font-family: inherit;
}

/* ============================================
   Comparison Period Selector
   ============================================ */
.comparison-period-select {
    padding: 3px 8px;
    font-size: 11px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: var(--white);
    color: var(--gray-700);
    cursor: pointer;
    outline: none;
}
.comparison-period-select:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 2px var(--primary-100);
}
body.dark-mode .comparison-period-select {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

/* ============================================
   Recent Items Strip Widget
   ============================================ */
.recent-items-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.recent-items-strip::-webkit-scrollbar {
    height: 4px;
}
.recent-items-strip::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 4px;
}
body.dark-mode .recent-items-strip::-webkit-scrollbar-thumb {
    background: var(--gray-600);
}
body.dark-mode .recent-items-strip {
    scrollbar-color: var(--gray-600) transparent;
}
.recent-item-card {
    flex: 0 0 140px;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
    background: var(--white);
}
.recent-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
body.dark-mode .recent-item-card {
    background: #1f2937;
    border-color: #374151;
}
.recent-item-thumb {
    width: 100%;
    height: 90px;
    overflow: hidden;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}
.recent-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.recent-item-placeholder {
    color: var(--gray-400);
}
body.dark-mode .recent-item-thumb {
    background: #374151;
}
.recent-item-info {
    padding: 8px 10px;
}
.recent-item-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.dark-mode .recent-item-title {
    color: #f3f4f6;
}
.recent-item-time {
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 2px;
}

/* ============================================
   Mini P&L Widget
   ============================================ */
.mini-pnl-widget {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mini-pnl-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mini-pnl-label {
    width: 60px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    flex-shrink: 0;
}
body.dark-mode .mini-pnl-label {
    color: #9ca3af;
}
.mini-pnl-bar-track {
    flex: 1;
    height: 10px;
    background: var(--gray-100);
    border-radius: 5px;
    overflow: hidden;
}
body.dark-mode .mini-pnl-bar-track {
    background: #374151;
}
.mini-pnl-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
    min-width: 2px;
}
.mini-pnl-value {
    width: 70px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.mini-pnl-divider {
    border-top: 1px dashed var(--gray-200);
    margin: 2px 0;
}
body.dark-mode .mini-pnl-divider {
    border-color: #4b5563;
}
.mini-pnl-net .mini-pnl-label {
    font-weight: 700;
    color: var(--gray-800);
}
body.dark-mode .mini-pnl-net .mini-pnl-label {
    color: #f3f4f6;
}

/* ============================================
   Pending Offers Urgency Widget
   ============================================ */
.offers-urgency-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    transition: background 0.15s;
}
.offers-urgency-item:hover {
    background: var(--gray-100);
}
.offers-urgency-item.urgent {
    background: var(--error-50, #fef2f2);
    border-color: var(--error-200, #fecaca);
}
body.dark-mode .offers-urgency-item {
    background: #1f2937;
    border-color: #374151;
}
body.dark-mode .offers-urgency-item:hover {
    background: #283341;
}
body.dark-mode .offers-urgency-item.urgent {
    background: #3b1c1c;
    border-color: #7f1d1d;
}
.offer-countdown {
    display: block;
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 2px;
}
.offer-countdown.urgent {
    color: var(--error);
    font-weight: 600;
}
.offer-countdown.expired {
    color: var(--gray-400);
    text-decoration: line-through;
}

/* ============================================
   Notification Dismiss Animation
   ============================================ */
.notification-dismiss {
    animation: notificationSlideOut 0.3s ease forwards;
    overflow: hidden;
}
@keyframes notificationSlideOut {
    0% { opacity: 1; transform: translateX(0); max-height: 100px; }
    70% { opacity: 0; transform: translateX(100%); max-height: 100px; }
    100% { opacity: 0; transform: translateX(100%); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border: none; }
}

/* ============================================
   Checklist: Task Creation Animation
   ============================================ */
.checklist-item-enter {
    animation: checklistItemSlideIn 0.5s ease-out;
}
@keyframes checklistItemSlideIn {
    0% { opacity: 0; transform: translateY(-20px) scale(0.97); max-height: 0; }
    50% { opacity: 0.7; transform: translateY(-5px) scale(0.99); }
    100% { opacity: 1; transform: translateY(0) scale(1); max-height: 200px; }
}

/* ============================================
   Checklist: Progress Bar
   ============================================ */
.checklist-progress-bar-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--gray-200);
}
.checklist-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}
.checklist-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500), var(--success));
    border-radius: 4px;
    transition: width 0.5s ease;
}
.checklist-progress-label {
    font-size: 12px;
    color: var(--gray-500);
    white-space: nowrap;
    font-weight: 500;
}
[data-theme="dark"] .checklist-progress-bar-container {
    border-bottom-color: var(--gray-700);
}
[data-theme="dark"] .checklist-progress-bar {
    background: var(--gray-700);
}

/* ============================================
   Checklist: Overdue Indicator
   ============================================ */
.checklist-overdue {
    border-left: 3px solid var(--error);
    background: rgba(239, 68, 68, 0.04);
    border-radius: 4px;
}
.checklist-overdue .checklist-item {
    padding-left: 12px;
}
[data-theme="dark"] .checklist-overdue {
    background: rgba(239, 68, 68, 0.08);
}

/* ============================================
   Changelog: Expand/Collapse Animation
   ============================================ */
.change-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.change-details.change-details-open {
    overflow: visible;
}
.change-expand-btn svg {
    transition: transform 0.3s ease;
}

/* ============================================
   Changelog: Version Badge Styling Per Type
   ============================================ */
.changelog-type-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: capitalize;
}
.changelog-type-feature {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.changelog-type-improvement {
    background: rgba(59, 130, 246, 0.12);
    color: #2563EB;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.changelog-type-fix {
    background: rgba(245, 158, 11, 0.12);
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.changelog-type-security {
    background: rgba(239, 68, 68, 0.12);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.changelog-type-breaking {
    background: rgba(139, 92, 246, 0.12);
    color: #7C3AED;
    border: 1px solid rgba(139, 92, 246, 0.3);
}
[data-theme="dark"] .changelog-type-feature { background: rgba(16, 185, 129, 0.2); color: #34D399; }
[data-theme="dark"] .changelog-type-improvement { background: rgba(59, 130, 246, 0.2); color: #93C5FD; }
[data-theme="dark"] .changelog-type-fix { background: rgba(245, 158, 11, 0.2); color: #FCD34D; }
[data-theme="dark"] .changelog-type-security { background: rgba(239, 68, 68, 0.2); color: #FCA5A5; }
[data-theme="dark"] .changelog-type-breaking { background: rgba(139, 92, 246, 0.2); color: #C4B5FD; }

/* ============================================
   Changelog: "New Since Last Visit" Badge
   ============================================ */
.changelog-new-badge {
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    animation: changelogNewPulse 2s ease infinite;
}
@keyframes changelogNewPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* ============================================
   Feedback: Submission Success Animation
   ============================================ */
.feedback-success-animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    z-index: 10;
    animation: feedbackSuccessFadeIn 0.3s ease;
}
[data-theme="dark"] .feedback-success-animation {
    background: rgba(30, 30, 30, 0.95);
}
.feedback-success-animation p {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--success);
}
.feedback-success-check {
    width: 64px;
    height: 64px;
}
.feedback-success-check circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: feedbackCircleDraw 0.6s ease forwards;
}
.feedback-success-path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: feedbackCheckDraw 0.4s 0.4s ease forwards;
}
@keyframes feedbackSuccessFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes feedbackCircleDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes feedbackCheckDraw {
    to { stroke-dashoffset: 0; }
}

/* ============================================
   Notification Empty State Illustration
   ============================================ */
.notification-empty-state {
    text-align: center;
    padding: 48px 24px;
}
.notification-empty-svg {
    margin-bottom: 20px;
    animation: notifEmptyFloat 3s ease-in-out infinite;
}
@keyframes notifEmptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.notification-empty-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--gray-800);
}
.notification-empty-text {
    color: var(--gray-500);
    font-size: 14px;
    max-width: 320px;
    margin: 0 auto;
}
[data-theme="dark"] .notification-empty-title { color: var(--gray-200); }

/* ============================================
   Notification Type-Specific Icons
   ============================================ */
.notification-type-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.notification-type-order { background: rgba(59, 130, 246, 0.12); color: #2563EB; }
.notification-type-sale { background: rgba(16, 185, 129, 0.12); color: #059669; }
.notification-type-offer { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.notification-type-shipping { background: rgba(99, 102, 241, 0.12); color: #4F46E5; }
.notification-type-warning { background: rgba(239, 68, 68, 0.12); color: #DC2626; }
.notification-type-success { background: rgba(16, 185, 129, 0.12); color: #059669; }
.notification-type-info { background: rgba(107, 114, 128, 0.12); color: #6B7280; }
[data-theme="dark"] .notification-type-order { background: rgba(59, 130, 246, 0.2); color: #93C5FD; }
[data-theme="dark"] .notification-type-sale { background: rgba(16, 185, 129, 0.2); color: #6EE7B7; }
[data-theme="dark"] .notification-type-offer { background: rgba(245, 158, 11, 0.2); color: #FCD34D; }
[data-theme="dark"] .notification-type-shipping { background: rgba(99, 102, 241, 0.2); color: #A5B4FC; }
[data-theme="dark"] .notification-type-warning { background: rgba(239, 68, 68, 0.2); color: #FCA5A5; }
[data-theme="dark"] .notification-type-info { background: rgba(107, 114, 128, 0.2); color: #D1D5DB; }

/* Notification click-to-navigate hover */
.notification-item { transition: background-color 0.15s ease; }
.notification-item:hover { background-color: var(--gray-50) !important; }
[data-theme="dark"] .notification-item:hover { background-color: var(--gray-800) !important; }

/* ============================================
   About: Team Card Hover Effects
   ============================================ */
.team-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}
.team-card-hover:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.team-card-hover:hover .team-avatar {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}
.team-social-links {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.team-card-hover:hover .team-social-links {
    opacity: 1;
    transform: translateY(0);
}
.team-social-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.team-social-icon:hover {
    background: var(--primary-500);
    color: white;
}
[data-theme="dark"] .team-social-icon { background: var(--gray-700); }

/* ============================================
   About: Version Badge
   ============================================ */
.about-version-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ============================================
   About: Tech Stack Visual
   ============================================ */
.tech-stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}
.tech-stack-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tech-stack-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.tech-stack-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.tech-stack-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--gray-800);
}
.tech-stack-desc {
    font-size: 12px;
    color: var(--gray-500);
    margin: 0;
}
[data-theme="dark"] .tech-stack-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}
[data-theme="dark"] .tech-stack-name { color: var(--gray-200); }
@media (max-width: 768px) {
    .tech-stack-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   Roadmap: Vote Pulse Animation
   ============================================ */
.vote-button {
    transition: transform 0.2s ease, color 0.2s ease;
}
.vote-button:hover {
    transform: scale(1.15);
}
.vote-button.voted {
    color: var(--warning-600);
}
.vote-pulse {
    animation: roadmapVotePulse 0.6s ease;
}
@keyframes roadmapVotePulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.vote-count {
    transition: transform 0.3s ease;
}
.vote-pulse + .vote-count {
    animation: voteCountBump 0.4s ease;
}
@keyframes voteCountBump {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: var(--warning-600); }
    100% { transform: scale(1); }
}

/* Roadmap status change animation */
.roadmap-feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.roadmap-feature-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.feature-title:hover {
    color: var(--primary-500);
    text-decoration: underline;
}

/* ============================================
   Batch 5: Orders & Automations Improvements
   ============================================ */

/* Orders Loading Skeleton */
.orders-loading-skeleton {
    padding: 16px;
}
.skeleton-row {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}
.skeleton-row:last-child {
    border-bottom: none;
}
.skeleton-cell {
    border-radius: 4px;
    background: var(--gray-200);
}
.skeleton-shimmer {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
[data-theme="dark"] .skeleton-shimmer {
    background: linear-gradient(90deg, var(--gray-700) 25%, var(--gray-600) 50%, var(--gray-700) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Pipeline Status Count Badges */
.pipeline-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
    padding: 0 8px;
    transition: transform 0.2s ease;
}
.pipeline-count-badge.pending {
    background: var(--warning-100);
    color: var(--warning-700);
}
.pipeline-count-badge.confirmed {
    background: var(--info-100, #dbeafe);
    color: var(--info-700, #1d4ed8);
}
.pipeline-count-badge.shipped {
    background: var(--primary-100);
    color: var(--primary-700);
}
.pipeline-count-badge.delivered {
    background: var(--success-100);
    color: var(--success-700);
}
.pipeline-stage:hover .pipeline-count-badge {
    transform: scale(1.15);
}
[data-theme="dark"] .pipeline-count-badge.pending {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}
[data-theme="dark"] .pipeline-count-badge.confirmed {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}
[data-theme="dark"] .pipeline-count-badge.shipped {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}
[data-theme="dark"] .pipeline-count-badge.delivered {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

/* Order Row Overdue Highlighting */
.order-row-overdue {
    background: var(--error-50, #fef2f2) !important;
    border-left: 3px solid var(--error-500);
}
.order-row-overdue:hover {
    background: var(--error-100, #fee2e2) !important;
}
.order-row-warning {
    background: var(--warning-50, #fffbeb) !important;
    border-left: 3px solid var(--warning-500);
}
.order-row-warning:hover {
    background: var(--warning-100, #fef3c7) !important;
}
[data-theme="dark"] .order-row-overdue {
    background: rgba(239, 68, 68, 0.1) !important;
}
[data-theme="dark"] .order-row-overdue:hover {
    background: rgba(239, 68, 68, 0.15) !important;
}
[data-theme="dark"] .order-row-warning {
    background: rgba(245, 158, 11, 0.1) !important;
}
[data-theme="dark"] .order-row-warning:hover {
    background: rgba(245, 158, 11, 0.15) !important;
}

/* Order Timeline Visualization */
.order-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    padding: 8px 0;
}
.order-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    text-align: center;
}
.order-timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-200);
    color: var(--gray-400);
    border: 2px solid var(--gray-300);
    z-index: 1;
    transition: all 0.3s ease;
}
.order-timeline-step.complete .order-timeline-dot {
    background: var(--success-500);
    color: white;
    border-color: var(--success-500);
}
.order-timeline-step.current .order-timeline-dot {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}
.order-timeline-line {
    position: absolute;
    top: 16px;
    left: calc(50% + 16px);
    width: calc(100% - 32px);
    height: 2px;
    background: var(--gray-200);
}
.order-timeline-line.complete {
    background: var(--success-500);
}
.order-timeline-label {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
}
.order-timeline-step.complete .order-timeline-label {
    color: var(--success-700);
}
.order-timeline-step.current .order-timeline-label {
    color: var(--primary-700);
}
.order-timeline-date {
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 2px;
}
[data-theme="dark"] .order-timeline-dot {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-500);
}
[data-theme="dark"] .order-timeline-line {
    background: var(--gray-700);
}

/* Automation Toggle Visual Feedback */
.automation-enabled-flash {
    animation: enabledFlash 600ms ease;
}
.automation-disabled-flash {
    animation: disabledFlash 600ms ease;
}
@keyframes enabledFlash {
    0% { background: inherit; }
    30% { background: var(--success-50); box-shadow: 0 0 0 2px var(--success-200); }
    100% { background: inherit; }
}
@keyframes disabledFlash {
    0% { background: inherit; }
    30% { background: var(--gray-100); box-shadow: 0 0 0 2px var(--gray-300); }
    100% { background: inherit; }
}
[data-theme="dark"] .automation-enabled-flash {
    animation: enabledFlashDark 600ms ease;
}
[data-theme="dark"] .automation-disabled-flash {
    animation: disabledFlashDark 600ms ease;
}
@keyframes enabledFlashDark {
    0% { background: inherit; }
    30% { background: rgba(34, 197, 94, 0.15); }
    100% { background: inherit; }
}
@keyframes disabledFlashDark {
    0% { background: inherit; }
    30% { background: rgba(107, 114, 128, 0.2); }
    100% { background: inherit; }
}

/* Automation Last Run Timestamp */
.automation-last-run {
    color: var(--gray-400);
    font-style: italic;
}

/* Execution History Loading Skeleton */
.run-history-loading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}
.history-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

/* Feature 1: Settings Save Confirmation Animation */
.settings-save-success {
    background: linear-gradient(90deg, var(--success, #10b981), rgba(16, 185, 129, 0.1)) !important;
    animation: settings-save-flash 600ms ease-out;
}

@keyframes settings-save-flash {
    0% {
        background: var(--success, #10b981);
        transform: scale(1);
    }
    50% {
        background: rgba(16, 185, 129, 0.7);
    }
    100% {
        background: linear-gradient(90deg, var(--success, #10b981), rgba(16, 185, 129, 0.1));
        transform: scale(1);
    }
}

/* Feature 3: Usage Statistics Dashboard Styles */
.usage-stats-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.usage-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.usage-stat-item {
    background: var(--gray-50);
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--gray-200);
}

.usage-stat-label {
    display: block;
    font-size: 12px;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.usage-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-600);
}

.usage-metrics {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.usage-metric-card {
    background: var(--gray-50);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.usage-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.usage-metric-label {
    font-weight: 600;
    color: var(--gray-700);
}

.usage-metric-value {
    font-size: 13px;
    color: var(--gray-500);
}

.usage-metric-bar-container {
    width: 100%;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.usage-metric-bar-fill {
    height: 100%;
    transition: width 400ms ease;
    border-radius: 4px;
}

.usage-metric-percent {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
}

/* Feature 4: Service Status Indicators */
.service-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse-status 2s infinite;
}

.service-status-dot.connected {
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
}

.service-status-dot.disconnected {
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
}

.service-status-dot.warning {
    background: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
}

@keyframes pulse-status {
    0% {
        box-shadow: 0 0 0 0 currentColor;
    }
    70% {
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* Feature 5: Settings Changelog Banner */
.settings-changelog-banner {
    animation: slide-in-banner 300ms ease-out;
}

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

/* Supplier Page Improvements */

/* Form Error Text */
.form-error-text {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-top: 4px;
    min-height: 16px;
}

/* CSV Import Preview Table */
#csv-preview {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

#csv-preview .table {
    margin: 0;
}

#csv-preview thead {
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

#csv-preview th {
    padding: 8px 12px;
    font-weight: 600;
    font-size: var(--font-size-xs);
    color: var(--gray-700);
}

#csv-preview td {
    padding: 8px 12px;
    font-size: var(--font-size-xs);
    color: var(--gray-600);
}

/* Supplier Card Footer - Delete Button */
.supplier-card-footer {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Search and Sort Controls */
.supplier-search-container {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Supplier Search Input */
#supplier-search-input {
    min-width: 150px;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: var(--font-size-sm);
    transition: border-color 200ms, box-shadow 200ms;
}

#supplier-search-input:focus {
    outline: none;
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px var(--primary-100);
}

/* Supplier Sort Select */
#supplier-sort-select {
    min-width: 130px;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: var(--font-size-sm);
    background-color: white;
    cursor: pointer;
    transition: border-color 200ms;
}

#supplier-sort-select:focus {
    outline: none;
    border-color: var(--primary-400);
}

#supplier-sort-select option {
    padding: 4px 8px;
}

/* Delete Confirmation Modal */
.delete-supplier-warning {
    padding: 12px;
    background-color: var(--warning-light);
    border-left: 3px solid var(--warning);
    border-radius: 4px;
    margin-bottom: 16px;
    color: var(--gray-700);
    font-size: var(--font-size-sm);
}

/* CSV Import Form */
#csv-import-input {
    padding: 8px 12px;
    border: 2px dashed var(--gray-300);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 200ms, background-color 200ms;
}

#csv-import-input:hover {
    border-color: var(--primary-400);
    background-color: var(--primary-50);
}

#csv-import-input:focus {
    outline: none;
    border-color: var(--primary-400);
}

/* Preview Table Container */
#csv-preview {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}

/* CSV Preview Heading */
#csv-preview h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
}

/* CSV No Preview State */
.csv-no-preview {
    padding: 24px;
    text-align: center;
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

/* Import Button State */
#import-suppliers-btn {
    transition: opacity 200ms;
}

#import-suppliers-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive - Stack search/sort vertically on small screens */
@media (max-width: 768px) {
    .supplier-search-container {
        flex-direction: column;
        width: 100%;
    }

    #supplier-search-input,
    #supplier-sort-select {
        width: 100%;
        max-width: 100%;
    }

    .supplier-card-footer {
        justify-content: flex-start;
    }
}

/* === Batch 7: My Listings Features === */

/* Listings Loading Skeleton */
.listings-loading-skeleton {
    padding: 16px;
}

.listing-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

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

/* Character Count Indicator */
.listing-char-count {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 500;
    display: inline-block;
}

.listing-char-count.short {
    background: var(--error-50, #fef2f2);
    color: var(--error, #ef4444);
}

.listing-char-count.good {
    background: var(--success-50, #f0fdf4);
    color: var(--success, #22c55e);
}

.listing-char-count.long {
    background: var(--warning-50, #fffbeb);
    color: var(--warning-600, #d97706);
}

/* Listing Expiration Countdown */
.listing-expiration {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    margin-top: 2px;
    font-weight: 500;
}

.listing-expiration.expired {
    color: var(--error, #ef4444);
}

.listing-expiration.urgent {
    color: var(--warning-600, #d97706);
    animation: pulse-text 2s ease-in-out infinite;
}

.listing-expiration.normal {
    color: var(--gray-500);
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Breadcrumb Navigation */
.listing-breadcrumb {
    padding: 8px 0;
}

.listing-breadcrumb a:hover {
    color: var(--primary-600) !important;
}

/* Dark Mode */
[data-theme="dark"] .listing-char-count.short {
    background: rgba(239, 68, 68, 0.15);
}

[data-theme="dark"] .listing-char-count.good {
    background: rgba(34, 197, 94, 0.15);
}

[data-theme="dark"] .listing-char-count.long {
    background: rgba(217, 119, 6, 0.15);
}

[data-theme="dark"] .listing-skeleton-row {
    border-bottom-color: var(--gray-700);
}

/* Character Count in Edit Forms */
.char-count {
    font-size: 12px;
    text-align: right;
    margin-top: 4px;
    transition: color 200ms;
}

/* === Batch 8: Transaction Features === */

/* Date Quick Select Buttons */
.btn-xs {
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 4px;
    line-height: 1.4;
}

/* Transaction Amount Validation */
.form-input.invalid {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

/* Duplicate Warning */
.tx-duplicate-warning {
    animation: slideDown 300ms ease-out;
}

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

/* Balance Trend Chart */
.balance-trend-chart svg {
    display: block;
}

[data-theme="dark"] .tx-duplicate-warning div {
    background: rgba(255, 200, 0, 0.1);
    border-color: rgba(255, 200, 0, 0.3);
}

/* === Batch 9: Offers Features === */

/* Counter Offer Visual Diff */
.counter-offer-diff {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    padding: 20px;
}

.diff-side {
    text-align: center;
    padding: 16px 24px;
    border-radius: 12px;
    min-width: 140px;
}

.diff-side.original {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.diff-side.counter {
    background: var(--primary-50, rgba(59, 130, 246, 0.05));
    border: 1px solid var(--primary-200, rgba(59, 130, 246, 0.2));
}

.diff-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.diff-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-800);
}

.diff-side.counter .diff-amount {
    color: var(--primary-600, #2563eb);
}

.diff-percent {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 4px;
}

.diff-arrow {
    color: var(--gray-400);
}

/* Best Offer Highlight */
.best-offer-highlight {
    animation: bestOfferGlow 3s ease-in-out infinite;
}

@keyframes bestOfferGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
    50% { box-shadow: 0 0 20px 0 rgba(251, 191, 36, 0.15); }
}

/* Offers Processing Spinner */
.offers-processing-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
}

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

/* Dark Mode */
[data-theme="dark"] .diff-side.original {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .diff-side.counter {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .diff-amount {
    color: var(--gray-100);
}

[data-theme="dark"] .best-offer-highlight {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.08));
    border-color: rgba(251, 191, 36, 0.4);
}

/* === Batch 8: Checklist Features === */

/* Enhanced Progress Bar */
.checklist-progress-fill.complete {
    background: var(--success) !important;
}

.checklist-progress-fill.high {
    background: var(--primary) !important;
}

.checklist-progress-fill.mid {
    background: var(--warning-500, #eab308) !important;
}

.checklist-progress-fill.low {
    background: var(--gray-400) !important;
}

.progress-milestone {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
}

.checklist-progress-bar {
    position: relative;
}

/* Item Creation Animation */
.checklist-item-new {
    animation: slideInFromTop 400ms ease-out;
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
}

/* Completion Celebration Overlay */
.checklist-celebration {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 300ms ease-out;
}

.checklist-celebration.fade-out {
    animation: fadeOut 500ms ease-out forwards;
}

.celebration-content {
    background: white;
    border-radius: 20px;
    padding: 40px 60px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: celebratePop 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body.dark-mode .celebration-content {
    background: #1f2937 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.celebration-icon {
    font-size: 64px;
    animation: celebrateBounce 600ms ease infinite;
}

@keyframes celebratePop {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes celebrateBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

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

/* Keyboard Hints */
kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-family: monospace;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 3px;
    box-shadow: 0 1px 0 var(--gray-300);
    color: var(--gray-600);
}

/* Dark Mode */
[data-theme="dark"] .celebration-content {
    background: var(--gray-800);
}

[data-theme="dark"] kbd {
    background: var(--gray-700);
    border-color: var(--gray-600);
    box-shadow: 0 1px 0 var(--gray-600);
    color: var(--gray-300);
}

/* ============================================
   Dashboard Period Selector
   ============================================ */
.dashboard-period-select {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    height: 32px;
}
.dashboard-period-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px var(--primary-100);
}
[data-theme="dark"] .dashboard-period-select {
    border-color: var(--gray-600);
    background: var(--gray-800);
}

/* ============================================
   Dashboard Export Dropdown
   ============================================ */
.dashboard-export-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 200px;
    background: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 4px 0;
    margin-top: 4px;
}
.dashboard-export-dropdown .dropdown-menu.show {
    display: block;
}
.dashboard-export-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-align: left;
}
.dashboard-export-dropdown .dropdown-item:hover {
    background: var(--gray-100);
}
[data-theme="dark"] .dashboard-export-dropdown .dropdown-menu {
    background: var(--gray-800);
    border-color: var(--gray-700);
}
[data-theme="dark"] .dashboard-export-dropdown .dropdown-item:hover {
    background: var(--gray-700);
}

/* ============================================
   Dashboard Print / PDF Export Styles
   ============================================ */
@media print {
    body.dashboard-print-mode * {
        visibility: hidden !important;
    }
    body.dashboard-print-mode .dashboard-widgets-container,
    body.dashboard-print-mode .dashboard-widgets-container *,
    body.dashboard-print-mode .dashboard-customize-section,
    body.dashboard-print-mode .dashboard-customize-section * {
        visibility: visible !important;
    }
    body.dashboard-print-mode .sidebar,
    body.dashboard-print-mode .top-nav,
    body.dashboard-print-mode .mobile-nav,
    body.dashboard-print-mode .toast-container,
    body.dashboard-print-mode .fab,
    body.dashboard-print-mode .dashboard-fab-menu,
    body.dashboard-print-mode .dashboard-stale-banner,
    body.dashboard-print-mode .dashboard-export-dropdown,
    body.dashboard-print-mode .dashboard-period-select,
    body.dashboard-print-mode .widget-collapse-btn,
    body.dashboard-print-mode button {
        display: none !important;
    }
    body.dashboard-print-mode .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    body.dashboard-print-mode .dashboard-widgets-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    body.dashboard-print-mode .dashboard-widgets-container::before {
        content: 'VaultLister Dashboard Report';
        display: block;
        visibility: visible !important;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        padding: 16px 0 8px;
        border-bottom: 2px solid #333;
        margin-bottom: 16px;
        color: #000;
    }
    body.dashboard-print-mode .dashboard-widgets-container::after {
        content: 'Generated ' attr(data-print-date);
        display: block;
        visibility: visible !important;
        font-size: 11px;
        text-align: center;
        color: #666;
        padding-top: 4px;
    }
    body.dashboard-print-mode .card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    body.dashboard-print-mode .collapsible-card.collapsed .card-body {
        display: block !important;
        max-height: none !important;
    }
}

/* Size Chart Print Mode */
@media print {
    body.size-chart-print-mode * {
        visibility: hidden !important;
    }
    body.size-chart-print-mode .card:has(.size-chart-table),
    body.size-chart-print-mode .card:has(.size-chart-table) * {
        visibility: visible !important;
    }
    body.size-chart-print-mode .sidebar,
    body.size-chart-print-mode .top-nav,
    body.size-chart-print-mode .mobile-nav,
    body.size-chart-print-mode .toast-container,
    body.size-chart-print-mode .fab,
    body.size-chart-print-mode .size-charts-hero,
    body.size-chart-print-mode .page-header button,
    body.size-chart-print-mode .size-charts-tabs {
        display: none !important;
    }
    body.size-chart-print-mode .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    body.size-chart-print-mode .card:has(.size-chart-table) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: none !important;
        border: none !important;
    }
    body.size-chart-print-mode .size-chart-table {
        width: 100%;
        border-collapse: collapse;
    }
    body.size-chart-print-mode .size-chart-table th,
    body.size-chart-print-mode .size-chart-table td {
        border: 1px solid #ccc !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        color: #000 !important;
        background: #fff !important;
    }
    body.size-chart-print-mode .size-chart-table th {
        background: #f3f4f6 !important;
        font-weight: 600 !important;
    }
    body.size-chart-print-mode .card-title {
        font-size: 18px !important;
        color: #000 !important;
        margin-bottom: 8px !important;
    }
    body.size-chart-print-mode .card-header .flex {
        display: none !important;
    }
}

/* Coming Soon platform badges */
.coming-soon-btn {
    background: var(--gray-100, #f3f4f6) !important;
    color: var(--gray-400, #9ca3af) !important;
    border: 1px solid var(--gray-200, #e5e7eb) !important;
    cursor: not-allowed !important;
    opacity: 0.65;
    pointer-events: none;
}

.coming-soon-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    background: var(--gray-400, #9ca3af);
    color: #fff;
    border-radius: 3px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ===================================================
   Mobile overflow guard — prevent horizontal scrolling
   =================================================== */
@media (max-width: 768px) {
    /* Raw tables without a .table-container wrapper */
    table {
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }

    /* Stat cards and image assets must not exceed viewport */
    .stat-card,
    .image-asset,
    .card {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Sidebar must not cause overflow when hidden off-screen */
    .sidebar {
        max-width: 85vw;
    }
}