/**
 * Fila Theme Enhancements for the25
 * Custom styles for improved link items and form inputs
 */

/* CSS Variables */
:root {
    --fila-primary: #3B82F6;
    --fila-primary-hover: #2563EB;
    --fila-primary-light: #60A5FA;
    --fila-success: #10B981;
    --fila-warning: #F59E0B;
    --fila-danger: #EF4444;
    --fila-info: #06B6D4;
    --fila-gray-50: #F9FAFB;
    --fila-gray-100: #F3F4F6;
    --fila-gray-200: #E5E7EB;
    --fila-gray-300: #D1D5DB;
    --fila-gray-400: #9CA3AF;
    --fila-gray-500: #6B7280;
    --fila-gray-600: #4B5563;
    --fila-gray-700: #374151;
    --fila-gray-800: #1F2937;
    --fila-gray-900: #111827;
}

/* ========================================
   KPI Cards (Stats Pages)
   ======================================== */

/* Desktop KPI Grid */
.fila-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
}

.fila-kpi-card {
    background: white;
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-200);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s ease;
    min-width: 0;
}

.fila-kpi-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow);
}

.fila-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(76, 124, 245, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer; /* Required for mobile tooltip tap */
}

.fila-kpi-icon .material-symbols-outlined {
    font-size: 22px;
}

.fila-kpi-icon-unique {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.fila-kpi-icon-referrer {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.fila-kpi-icon-country {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.fila-kpi-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.fila-kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.fila-kpi-clicks-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-500);
}

.fila-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

.fila-kpi-value-text {
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.fila-kpi-label {
    font-size: 13px;
    color: var(--gray-500);
    white-space: nowrap;
}

/* KPI Growth Badge */
.fila-kpi-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.fila-kpi-badge-positive {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.fila-kpi-badge-negative {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.fila-kpi-badge-neutral {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Mobile KPI Grid (inside header) */
.fila-kpi-grid-mobile {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    padding-bottom: 8px;
    border-top: 1px solid var(--gray-200);
    width: 100%;
}

.fila-kpi-card-mobile {
    background: white;
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-200);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fila-kpi-icon-mobile {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(76, 124, 245, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer; /* Required for mobile tooltip tap */
}

.fila-kpi-icon-mobile .material-symbols-outlined {
    font-size: 18px;
}

.fila-kpi-icon-mobile.fila-kpi-icon-unique {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.fila-kpi-icon-mobile.fila-kpi-icon-referrer {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.fila-kpi-icon-mobile.fila-kpi-icon-country {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.fila-kpi-content-mobile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.fila-kpi-label-mobile {
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-500);
}

.fila-kpi-mobile-value-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.fila-kpi-clicks-label-mobile {
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-500);
}

.fila-kpi-value-mobile {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

.fila-kpi-value-text-mobile {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

/* Dark mode for KPI cards */
[data-scheme="dark"] .fila-kpi-card {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

[data-scheme="dark"] .fila-kpi-value,
[data-scheme="dark"] .fila-kpi-value-mobile {
    color: var(--gray-900);
}

[data-scheme="dark"] .fila-kpi-card-mobile {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

[data-scheme="dark"] .fila-kpi-grid-mobile {
    border-top-color: var(--gray-300);
}

[data-scheme="dark"] .fila-kpi-value-mobile,
[data-scheme="dark"] .fila-kpi-value-text-mobile {
    color: var(--gray-900);
}

/* Mobile: Show mobile KPI grid, hide desktop KPI grid */
@media (max-width: 768px) {
    .fila-mobile-only.fila-kpi-grid-mobile {
        display: grid !important;
    }

    .fila-desktop-only.fila-kpi-grid {
        display: none !important;
    }

    /* Smaller KPI cards on very small screens */
    .fila-kpi-card-mobile {
        padding: 10px;
    }

    .fila-kpi-icon-mobile {
        width: 32px;
        height: 32px;
    }

    .fila-kpi-icon-mobile .material-symbols-outlined {
        font-size: 16px;
    }

    .fila-kpi-value-mobile {
        font-size: 16px;
    }

    .fila-kpi-value-text-mobile {
        font-size: 12px;
    }

    .fila-kpi-badge {
        font-size: 9px;
        padding: 1px 4px;
    }

    .fila-kpi-label-mobile {
        font-size: 10px;
    }

    /* Mobile date range - show on mobile */
    .fila-mobile-only.fila-mobile-date-range {
        display: flex !important;
    }

    .fila-mobile-date-range,
    .fila-mobile-date-range-standalone {
        display: flex;
        width: 100%;
    }

    .fila-mobile-date-range input[type="date"],
    .fila-mobile-date-range-standalone input[type="date"] {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    /* Hide desktop-only elements on mobile */
    .fila-desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .fila-mobile-only {
        display: block !important;
    }
}

/* ========================================
   Mobile Stats Box (separate container for date picker + KPIs)
   ======================================== */
.fila-mobile-stats-box {
    display: none;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    padding: 16px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .fila-mobile-stats-box.fila-mobile-only {
        display: block !important;
    }

    /* KPI grid inside mobile stats box - no border-top needed */
    .fila-mobile-stats-box .fila-kpi-grid-mobile {
        display: grid !important;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--gray-200);
    }
}

[data-scheme="dark"] .fila-mobile-stats-box {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

/* ========================================
   Mobile Date Range Picker
   ======================================== */
.fila-mobile-date-range,
.fila-mobile-date-range-standalone {
    display: none;
    align-items: center;
    gap: 6px;
}

/* Standalone version (in separate box) */
.fila-mobile-date-range-standalone {
    display: flex;
}

.fila-mobile-date-range input[type="date"],
.fila-mobile-date-range-standalone input[type="date"] {
    padding: 8px 10px;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    font-size: 14px;
    background: white;
    color: var(--gray-700);
    width: 125px;
    height: 36px;
}

.fila-mobile-date-range input[type="date"]:focus,
.fila-mobile-date-range-standalone input[type="date"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(76, 124, 245, 0.1);
}

.fila-mobile-date-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    background: white;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fila-mobile-date-clear:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}

.fila-mobile-date-clear .material-symbols-outlined {
    font-size: 20px;
}

/* Dark mode for mobile date inputs */
[data-scheme="dark"] .fila-mobile-date-range input[type="date"],
[data-scheme="dark"] .fila-mobile-date-range-standalone input[type="date"] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-800);
}

[data-scheme="dark"] .fila-mobile-date-clear {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-500);
}

[data-scheme="dark"] .fila-mobile-date-clear:hover {
    background: var(--gray-200);
    color: var(--gray-300);
}

/* ========================================
   Stats Tab Navigation (fila-tabs)
   ======================================== */
.fila-tabs {
    border-bottom: none;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
}

.fila-tabs.nav-tabs {
    border-bottom: none;
}

.fila-tabs .nav-item {
    margin-bottom: -1px;
}

.fila-tabs .nav-link {
    border: 1px solid #dee2e6;
    border-radius: 5px 5px 0 0;
    color: #6b7280;
    font-weight: 500;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    background: #f8f9fa;
    margin-right: 2px;
    position: relative;
}

.fila-tabs .nav-link .material-symbols-outlined {
    font-size: 20px;
}

.fila-tabs .nav-link:hover {
    color: var(--primary-color, #4C7CF5);
    background: #e9ecef;
    border-color: #dee2e6;
}

.fila-tabs .nav-link.active {
    color: var(--primary-color, #4C7CF5);
    background: #fff;
    border-color: #dee2e6 #dee2e6 #fff #dee2e6;
    border-bottom-color: #fff;
    border-radius: 5px 5px 0 0;
    z-index: 1;
}

.fila-tabs + .tab-content,
.tab-content {
    min-height: 300px;
}

/* Stats page tab content with connected border */
#statsTabContent {
    border: 1px solid #dee2e6;
    border-radius: 0 8px 8px 8px;
    padding: 24px;
    background: #fff;
    margin-top: 1px;
}

[data-scheme="dark"] #statsTabContent {
    border-color: #374151;
    background: #111827;
}

/* Dark mode support for fila-tabs */

[data-scheme="dark"] .fila-tabs .nav-link {
    background: #1f2937;
    color: #9ca3af;
    border-color: #4b5563;
}

[data-scheme="dark"] .fila-tabs .nav-link:hover {
    background: #374151;
    border-color: #4b5563;
}

[data-scheme="dark"] .fila-tabs .nav-link.active {
    background: #111827;
    border-color: #374151 #374151 #111827 #374151;
    color: #3b82f6;
}

/* ========================================
   Empty States
   ======================================== */
.fila-empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

/* Standard empty icon (circular with icon inside) */
.fila-empty-icon {
    width: 5rem;
    height: 5rem;
    background: var(--fila-gray-100, #F3F4F6);
    color: var(--fila-gray-400, #9CA3AF);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.fila-empty-icon .material-symbols-outlined {
    font-size: 2.5rem;
}

.fila-empty-title {
    font-weight: 600;
    color: var(--fila-gray-900, #111827);
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.fila-empty-description {
    color: var(--fila-gray-600, #4B5563);
    margin-bottom: 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Legacy empty state icon naming (for backward compatibility) */
.fila-empty-state-icon {
    font-size: 48px;
    color: var(--gray-300);
    margin-bottom: 16px;
}

.fila-empty-state-icon .material-symbols-outlined {
    font-size: 48px;
}

.fila-empty-state-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--gray-600);
    margin: 0 0 8px 0;
}

.fila-empty-state-text {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0;
}

/* Dark mode support for empty states */
[data-scheme="dark"] .fila-empty-icon {
    background: var(--fila-gray-200, #374151);
    color: var(--fila-gray-500, #6B7280);
}

[data-scheme="dark"] .fila-empty-title {
    color: var(--fila-gray-100, #F3F4F6);
}

[data-scheme="dark"] .fila-empty-description {
    color: var(--fila-gray-400, #9CA3AF);
}

[data-scheme="dark"] .fila-empty-state-icon {
    color: #4b5563;
}

[data-scheme="dark"] .fila-empty-state-title {
    color: #9ca3af;
}

[data-scheme="dark"] .fila-empty-state-text {
    color: #6b7280;
}

/* ========================================
   Visitor Map Styling (Individual Link Stats Page Only)
   ======================================== */
/* Remove padding from map card body */
#statsTabContent #visitor-map {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
}

#statsTabContent #visitor-map.card-body,
#statsTabContent .card-body:has(#visitor-map) {
    padding: 0 !important;
}

/* Map zoom buttons - desktop: left top, stacked vertically */
#statsTabContent #visitor-map .jvm-zoom-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    left: 10px !important;
    background: white !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: 6px !important;
    color: var(--gray-700) !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

#statsTabContent #visitor-map .jvm-zoom-btn:hover {
    background: var(--gray-100) !important;
    border-color: var(--gray-400) !important;
}

#statsTabContent #visitor-map .jvm-zoom-btn.jvm-zoomin {
    top: 10px !important;
}

#statsTabContent #visitor-map .jvm-zoom-btn.jvm-zoomout {
    top: 52px !important;
}

[data-scheme="dark"] #statsTabContent #visitor-map {
    background: var(--gray-800);
    border-color: var(--gray-600);
}

[data-scheme="dark"] #statsTabContent #visitor-map .jvm-zoom-btn {
    background: var(--gray-700) !important;
    border-color: var(--gray-600) !important;
    color: var(--gray-300) !important;
}

[data-scheme="dark"] #statsTabContent #visitor-map .jvm-zoom-btn:hover {
    background: var(--gray-600) !important;
}

/* Mobile: larger buttons at bottom */
@media (max-width: 768px) {
    /* Remove top-right border radius and top margin on mobile (tabs scroll horizontally) */
    #statsTabContent {
        border-radius: 0 0 8px 8px;
        margin-top: 0;
    }

    #statsTabContent #visitor-map .jvm-zoom-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
        border-radius: 8px !important;
        top: auto !important;
        bottom: 10px !important;
    }

    #statsTabContent #visitor-map .jvm-zoom-btn.jvm-zoomin {
        left: auto !important;
        right: 60px !important;
        top: auto !important;
    }

    #statsTabContent #visitor-map .jvm-zoom-btn.jvm-zoomout {
        left: auto !important;
        right: 10px !important;
        top: auto !important;
    }
}

/* ========================================
   Upgrade Button Responsive Text
   ======================================== */
.fila-upgrade-text-mobile {
    display: none;
}

.fila-upgrade-text-desktop {
    display: inline;
}

/* Show mobile text and hide desktop text on small screens */
@media (max-width: 768px) {
    .fila-upgrade-text-mobile {
        display: inline;
    }

    .fila-upgrade-text-desktop {
        display: none;
    }
}

/* ========================================
   Large Analytics Cards Styles
   ======================================== */
.fila-analytics-card-large {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.fila-analytics-card-large .fila-analytics-card-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fila-analytics-card-large .fila-map-container {
    flex: 1;
    min-height: 350px;
}

.fila-analytics-card-large .fila-data-list {
    flex: 1;
    min-height: 0;
}

/* Larger icons for analytics cards */
.fila-analytics-card-icon-large {
    font-size: 32px !important;
    margin-right: 12px;
    cursor: pointer; /* Required for mobile tooltip tap */
}

/* Better spacing for data lists */
.fila-analytics-card-large .fila-data-list li {
    padding: 12px 0;
    font-size: 15px;
}

.fila-analytics-card-large .fila-data-list li .badge {
    padding: 5px 10px;
    font-size: 13px;
}

/* ========================================
   Fila Link Item Styles
   ======================================== */
.fila-link-item {
  padding: 20px 24px;
  border-bottom: 1px solid #e9ecef;
  transition: all 0.2s ease;
  background: white;
  position: relative;
}

.fila-link-item:hover {
  background: #f8f9fa;
}

.fila-link-item:last-child {
  border-bottom: none;
}

/* Fix z-index issue: when dropdown is open, elevate the parent item above siblings */
.fila-link-item:has(.dropdown.show),
.fila-link-item:has(.dropdown-menu.show),
.fila-collection-item:has(.dropdown.show),
.fila-collection-item:has(.dropdown-menu.show) {
  z-index: 1000;
}

/* Horizontal Row Structure - Desktop */
.fila-link-row-1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.fila-link-row-2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  padding-left: 59px; /* Align with title (checkbox 18px + gap 16px + favicon 25px) */
  flex-wrap: nowrap; /* Prevent wrapping - keep on same row */
}

.fila-link-row-3 {
  display: flex;
  flex-wrap: nowrap; /* Keep badges on same row, allow overflow if needed */
  align-items: center; /* Prevent vertical stretching */
  gap: 8px;
  margin-bottom: 6px;
  margin-top: 12px;
  padding-left: 59px;
  overflow-x: auto; /* Allow horizontal scroll if too many badges */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #e5e7eb transparent; /* Firefox */
}

/* Custom scrollbar for badges row (WebKit/Blink) */
.fila-link-row-3::-webkit-scrollbar {
  height: 4px;
}

.fila-link-row-3::-webkit-scrollbar-thumb {
  background-color: #e5e7eb;
  border-radius: 4px;
}

.fila-link-row-3::-webkit-scrollbar-thumb:hover {
  background-color: #d1d5db;
}

.fila-link-row-3::-webkit-scrollbar-track {
  background: transparent;
}

/* Hide empty row 3 to prevent unnecessary margin */
.fila-link-row-3:empty {
  display: none !important;
  margin: 0 !important;
}

.fila-link-row-4 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap; /* Keep stats on same row */
  padding-left: 59px;
}

/* Action dropdown - positioned absolute on desktop too */
.fila-link-actions {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 10;
}

/* Fix dropdown menu z-index to appear above other elements */
/* Removed position: absolute to allow Bootstrap/Popper to handle positioning */
.fila-link-actions .dropdown-menu {
  z-index: 99999 !important;
}

.fila-link-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.fila-link-favicon {
  width: 25px;
  height: 25px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f8f9fa;
  padding: 3px;
}

.fila-link-favicon-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.fila-link-favicon-icon .material-symbols-outlined {
  font-size: 16px;
}

.fila-link-title {
    margin: 5px 0 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  padding-right: 50px; /* Prevent overflow behind action button */
}

.fila-link-title a {
  color: #212529;
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.fila-link-title a:hover {
  color: #0d6efd;
}

.fila-link-url {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.fila-link-short {
  font-size: 14px;
  color: #0d6efd;
  font-weight: 500;
}

.fila-copy-btn {
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid #dee2e6;
  background: white;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
  color: #495057;
}

.fila-copy-btn:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
  color: #212529;
}

.fila-copy-btn.fila-copy-success,
.copy.fila-copy-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: white !important;
  border-color: #10b981 !important;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  animation: copySuccess 0.3s ease-in-out;
}

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

/* Badge Styles */
.fila-link-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.fila-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 0;
  flex-shrink: 0; /* Prevent shrinking in flex container */
  white-space: nowrap; /* Keep badge text on one line */
}

.fila-badge-icon {
  font-size: 14px !important;
  line-height: 1;
}

.fila-badge.status-disabled {
  background: #f8d7da;
  color: #721c24;
}

.fila-badge.status-archived {
  background: #d1ecf1;
  color: #0c5460;
}

.fila-badge.collection {
  color: white;
  opacity: 0.9;
}

.fila-badge.feature {
  background: #e7f3ff;
  color: #004085;
}

.fila-badge.qr-code {
  background: var(--fila-gray-100);
  color: var(--fila-gray-600);
  cursor: pointer;
  transition: all 0.2s ease;
}

.fila-badge.qr-code:hover {
  background: var(--fila-gray-200);
  color: var(--fila-gray-700);
}

/* Stats and Actions */
.fila-link-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.fila-link-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: #6c757d;
  flex-wrap: wrap;
}

.fila-link-stats-link {
  color: #495057;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.fila-link-stats-link:hover {
  color: #0d6efd;
}

.fila-stats-number {
  font-weight: 700;
  color: #212529;
}

.fila-link-unique {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6c757d;
}

.fila-link-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fila-link-action {
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid #dee2e6;
  background: white;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #495057;
  transition: all 0.2s;
  font-weight: 500;
}

.fila-link-action:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
  color: #0d6efd;
}

.fila-link-dropdown-btn {
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6c757d;
  transition: all 0.2s;
  border-radius: 6px;
}

.fila-link-dropdown-btn:hover {
  background: #f8f9fa;
  color: #212529;
}

/* ========================================
   Alert Styles
   ======================================== */
.fila-alert {
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid;
}

.fila-alert-warning {
  background-color: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.fila-alert-info {
  background-color: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
}

.fila-alert-danger {
  background-color: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.fila-alert-success {
  background-color: #d1fae5;
  border-color: #86efac;
  color: #065f46;
}

.fila-alert-icon {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
}

.fila-alert-content {
  flex: 1;
  line-height: 1.5;
}

.fila-alert-content strong {
  font-weight: 600;
}

.fila-alert-actions {
  margin-left: auto;
  flex-shrink: 0;
}

.fila-alert-actions button,
.fila-alert-actions .btn {
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.fila-alert-warning .fila-alert-actions button {
  background: #f59e0b;
  color: white;
}

.fila-alert-warning .fila-alert-actions button:hover {
  background: #d97706;
}

.fila-alert-info .fila-alert-actions button {
  background: #3b82f6;
  color: white;
}

.fila-alert-info .fila-alert-actions button:hover {
  background: #2563eb;
}

.fila-alert-danger .fila-alert-actions button {
  background: #ef4444;
  color: white;
}

.fila-alert-danger .fila-alert-actions button:hover {
  background: #dc2626;
}

.fila-alert-success .fila-alert-actions button {
  background: #10b981;
  color: white;
}

.fila-alert-success .fila-alert-actions button:hover {
  background: #059669;
}

/* Alert close button - simple X with no borders */
.fila-alert .fila-alert-actions button.fila-alert-close,
.fila-alert-close {
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  margin-left: 8px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px !important;
  min-width: auto !important;
  width: auto !important;
  float: right;
}

.fila-alert .fila-alert-actions button.fila-alert-close:hover,
.fila-alert-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05) !important;
}

.fila-alert-close .material-symbols-outlined {
  font-size: 20px;
}

.fila-alert-warning .fila-alert-actions button.fila-alert-close,
.fila-alert-warning .fila-alert-close {
  color: #92400e !important;
}

.fila-alert-info .fila-alert-actions button.fila-alert-close,
.fila-alert-info .fila-alert-close {
  color: #1e40af !important;
}

.fila-alert-danger .fila-alert-actions button.fila-alert-close,
.fila-alert-danger .fila-alert-close {
  color: #991b1b !important;
}

.fila-alert-success .fila-alert-actions button.fila-alert-close,
.fila-alert-success .fila-alert-close {
  color: #065f46 !important;
}

.dark-mode .fila-alert-warning .fila-alert-actions button.fila-alert-close,
.dark-mode .fila-alert-warning .fila-alert-close {
  color: #fcd34d !important;
}

.dark-mode .fila-alert-info .fila-alert-actions button.fila-alert-close,
.dark-mode .fila-alert-info .fila-alert-close {
  color: #93c5fd !important;
}

.dark-mode .fila-alert-danger .fila-alert-actions button.fila-alert-close,
.dark-mode .fila-alert-danger .fila-alert-close {
  color: #fca5a5 !important;
}

.dark-mode .fila-alert-success .fila-alert-actions button.fila-alert-close,
.dark-mode .fila-alert-success .fila-alert-close {
  color: #86efac !important;
}

.dark-mode .fila-alert .fila-alert-actions button.fila-alert-close:hover,
.dark-mode .fila-alert-close:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Dark mode alert styles */
.dark-mode .fila-alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fcd34d;
}

.dark-mode .fila-alert-info {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

.dark-mode .fila-alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.dark-mode .fila-alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #86efac;
}

/* Mobile: Add icon before alert headings */
@media (max-width: 768px) {
    .fila-alert-danger .fila-alert-content strong:first-of-type::before {
        content: '\e000'; /* error icon */
        font-family: 'Material Symbols Outlined';
        font-size: 20px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 0.5rem;
        padding-bottom: 3px;
        color: #ef4444;
    }
}

/* ========================================
   Form Input Enhancements
   ======================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="week"],
input[type="month"],
textarea,
select,
.form-control,
.form-select {
  border: 1px solid #D1D5DB !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover,
input[type="week"]:hover,
input[type="month"]:hover,
textarea:hover,
select:hover,
.form-control:hover,
.form-select:hover {
  border-color: #9CA3AF !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="month"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Dark Mode Support */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="number"],
.dark-mode input[type="tel"],
.dark-mode input[type="url"],
.dark-mode input[type="search"],
.dark-mode input[type="date"],
.dark-mode input[type="datetime-local"],
.dark-mode input[type="time"],
.dark-mode input[type="week"],
.dark-mode input[type="month"],
.dark-mode textarea,
.dark-mode select,
.dark-mode .form-control,
.dark-mode .form-select {
  border-color: #4B5563 !important;
  background-color: #1F2937;
  color: #F9FAFB;
}

.dark-mode input[type="text"]:hover,
.dark-mode input[type="email"]:hover,
.dark-mode input[type="password"]:hover,
.dark-mode input[type="number"]:hover,
.dark-mode input[type="tel"]:hover,
.dark-mode input[type="url"]:hover,
.dark-mode input[type="search"]:hover,
.dark-mode input[type="date"]:hover,
.dark-mode input[type="datetime-local"]:hover,
.dark-mode input[type="time"]:hover,
.dark-mode input[type="week"]:hover,
.dark-mode input[type="month"]:hover,
.dark-mode textarea:hover,
.dark-mode select:hover,
.dark-mode .form-control:hover,
.dark-mode .form-select:hover {
  border-color: #6B7280 !important;
}

.dark-mode input[type="text"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode input[type="password"]:focus,
.dark-mode input[type="number"]:focus,
.dark-mode input[type="tel"]:focus,
.dark-mode input[type="url"]:focus,
.dark-mode input[type="search"]:focus,
.dark-mode input[type="date"]:focus,
.dark-mode input[type="datetime-local"]:focus,
.dark-mode input[type="time"]:focus,
.dark-mode input[type="week"]:focus,
.dark-mode input[type="month"]:focus,
.dark-mode textarea:focus,
.dark-mode select:focus,
.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
}

/* ========================================
   Disabled State Cursor
   ======================================== */
#single input:disabled,
#single textarea:disabled,
#single button:disabled,
#single select:disabled,
#single .form-control:disabled,
#single .form-select:disabled {
  cursor: not-allowed !important;
}

.dark-mode .fila-link-item {
  background: #1F2937;
  border-bottom-color: #374151;
}

.dark-mode .fila-link-item:hover {
  background: #111827;
}

.dark-mode .fila-link-title a {
  color: #F9FAFB;
}

.dark-mode .fila-link-title a:hover {
  color: #60A5FA;
}

.dark-mode .fila-copy-btn {
  background: #1F2937;
  border-color: #374151;
  color: #D1D5DB;
}

.dark-mode .fila-copy-btn:hover {
  background: #111827;
  border-color: #4B5563;
  color: #F9FAFB;
}

.dark-mode .fila-link-action {
  background: #1F2937;
  border-color: #374151;
  color: #D1D5DB;
}

.dark-mode .fila-link-action:hover {
  background: #111827;
  border-color: #4B5563;
  color: #60A5FA;
}

.dark-mode .fila-link-dropdown-btn {
  color: #9CA3AF;
}

.dark-mode .fila-link-dropdown-btn:hover {
  background: #374151;
  color: #F9FAFB;
}

/* ========================================
   Material Symbols Adjustments
   ======================================== */
.fila-link-meta .material-symbols-outlined,
.fila-link-action .material-symbols-outlined {
  font-size: 18px;
  vertical-align: middle;
}

/* ========================================
   URL Input - No Border Styling
   ======================================== */
#url {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

#url:focus {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

#url:hover {
  border: 0 !important;
}

/* Homepage URL input - restore normal borders */
#url-homepage {
  border: 1px solid #ced4da !important;
}

#url-homepage:focus {
  border-color: #86b7fe !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Desktop: Unified focus border for entire input-group */
@media (min-width: 576px) {
  .shortener-box-div .input-group:has(#url-homepage:focus) {
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    transition: box-shadow 0.15s ease-in-out;
  }

  /* Remove individual input focus shadow on desktop */
  .shortener-box-div #url-homepage:focus {
    box-shadow: none !important;
  }

  /* Disable button lift animation on desktop */
  .shortener-box-div .input-group .btn:hover,
  .shortener-box-div .input-group .fila-btn:hover {
    transform: none !important;
  }
}

/* Restore rounded corners on mobile when buttons are hidden */
@media (max-width: 575.98px) {
  #url-homepage {
    border-radius: 0.5rem !important;
  }

  /* Disable button lift animation on mobile */
  .shortener-box-div .fila-btn:hover,
  .shortener-box-div .btn:hover {
    transform: none !important;
  }

  /* Advanced options container - remove top/bottom padding */
  .advanced-options-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Reduce top margins from fields inside advanced options */
  .advanced-options-container .mt-3 {
    margin-top: 0.5rem !important;
  }

  /* Increase mobile Create app link button size */
  .shortener-box-div .fila-btn-lg {
    margin-bottom: 24px !important;
    padding-top: 1.3rem !important;
    padding-bottom: 1.3rem !important;
    font-size: 1.25rem !important;
  }
}

/* Dark mode support for URL input */
.dark-mode #url {
  border: 0 !important;
}

.dark-mode #url:focus {
  border: 0 !important;
  box-shadow: none !important;
}

.dark-mode #url:hover {
  border: 0 !important;
}

/* ========================================
   Filter Dropdown Fix
   ======================================== */
/* Fix dropdown visibility issues */
.fila-search-controls {
    overflow: visible !important;
    position: relative;
}

.fila-search-controls .dropdown {
    position: relative;
    overflow: visible !important;
}

.fila-links-table,
.fila-links-header,
.fila-links-actions {
    overflow: visible !important;
}

.fila-filter-dropdown {
    min-width: 320px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    background: white;
    z-index: 99999 !important;
    /* Removed hardcoded positioning to allow Bootstrap/Popper to handle it */
}

.fila-filter-section {
    margin-bottom: 0;
}

.fila-filter-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    display: block;
}

.fila-filter-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    color: #374151;
}

.fila-filter-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    color: #374151;
}

.fila-filter-apply {
    width: 100%;
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.fila-filter-apply:hover {
    background: #2563eb;
}

/* Dark mode support */
.dark-mode .fila-filter-dropdown {
    background: #1f2937;
    border-color: #374151;
}

.dark-mode .fila-filter-label {
    color: #d1d5db;
}

.dark-mode .fila-filter-select,
.dark-mode .fila-filter-input {
    background: #111827;
    border-color: #374151;
    color: #f9fafb;
}

/* Mobile filter dropdown - compact like action dropdown */
@media (max-width: 768px) {
    .fila-filter-dropdown {
        min-width: 292px !important;
        max-width: 436px !important;
        padding: 0.5rem;
        background-color: white !important;
        z-index: 99999 !important;
    }

    .fila-filter-section {
        margin-bottom: 0.25rem;
    }

    .fila-filter-section:last-child {
        margin-bottom: 0;
    }

    .fila-filter-label {
        font-size: 11px;
        margin-bottom: 2px;
        font-weight: 600;
    }

    .fila-filter-select,
    .fila-filter-input {
        font-size: 13px;
        padding: 4px 6px;
    }

    .fila-filter-apply {
        padding: 6px 10px;
        font-size: 12px;
        margin-top: 4px;
    }
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 768px) {
  .fila-link-item {
    padding: 16px;
    position: relative;
  }

  /* Row 1: Checkbox, Favicon and Title */
  .fila-link-row-1 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 6px !important;
  }

  .fila-link-checkbox {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0;
  }

  .fila-link-favicon {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    flex-shrink: 0;
    border-radius: 6px;
    align-self: flex-start !important;
  }

  .fila-link-title {
    flex: 1;
    font-size: 15px !important;
    margin: 0 !important;
    padding-right: 40px !important; /* Prevent overflow behind action button */
  }

  .fila-link-title a {
    display: inline;
    white-space: normal;
    word-break: break-word;
  }

  /* Row 2: Short URL and Copy Button - keep on same row */
  .fila-link-row-2 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 8px 0 !important;
    padding-left: 0 !important;
    flex-wrap: nowrap !important; /* Prevent wrapping */
  }

  .fila-link-short {
    flex: 1 !important; /* Take up available space */
    min-width: 150px !important; /* Ensure minimum width */
    max-width: calc(100% - 80px) !important; /* Leave room for copy button */
    font-size: 13px;
    line-height: 1.5 !important; /* Match button line-height for alignment */
    word-break: keep-all !important; /* Keep URLs together */
    overflow: hidden;
    white-space: nowrap !important; /* Prevent wrapping */
    display: flex !important;
    align-items: center !important;
  }

  .fila-copy-btn,
  .fila-link-row-2 button.fila-copy-btn.copy {
    flex: 0 0 auto !important;
    width: fit-content !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    margin-left: auto !important; /* Push to the right */
    background-color: #f3f4f6 !important; /* Light gray background */
    color: #374151 !important; /* Dark gray text */
    border: 1px solid #d1d5db !important; /* Gray border */
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .fila-copy-btn:hover,
  .fila-link-row-2 button.fila-copy-btn.copy:hover {
    background-color: #e5e7eb !important;
    color: #111827 !important;
  }

  /* Ensure the icon inside copy button is visible */
  .fila-copy-btn .material-symbols-outlined,
  .fila-link-row-2 button.fila-copy-btn.copy .material-symbols-outlined {
    color: inherit !important;
    font-size: 14px !important;
  }

  /* Row 3: Badges/Options - keep on same row with horizontal scroll */
  .fila-link-row-3 {
    display: flex !important;
    flex-wrap: nowrap !important; /* Keep on same row */
    gap: 6px !important;
    margin-bottom: 6px !important;
    padding-left: 0 !important;
    overflow-x: auto !important; /* Allow horizontal scroll */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #e5e7eb transparent; /* Firefox */
  }

  /* Thin scrollbar for badges row on mobile (WebKit/Blink) */
  .fila-link-row-3::-webkit-scrollbar {
    height: 3px;
  }

  .fila-link-row-3::-webkit-scrollbar-thumb {
    background-color: #e5e7eb;
    border-radius: 3px;
  }

  .fila-link-row-3::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Hide empty row 3 on mobile too */
  .fila-link-row-3:empty {
    display: none !important;
    margin: 0 !important;
  }


  .fila-badge {
    font-size: 11px !important;
    padding: 4px 8px !important;
    flex-shrink: 0; /* Prevent badges from shrinking */
    white-space: nowrap;
  }

  .fila-badge .material-symbols-outlined {
    font-size: 14px !important;
  }

  /* Row 4: Time and Click Stats - keep on same row */
  .fila-link-row-4 {
    display: flex !important;
    flex-direction: row !important; /* Force horizontal layout */
    flex-wrap: nowrap !important; /* Keep on same row */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important; /* Space between elements */
    padding-left: 0 !important;
    font-size: 12px !important; /* Slightly smaller font */
    overflow-x: auto !important; /* Allow scroll if needed */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling */
  }

  .fila-stat-item {
    font-size: 12px !important; /* Consistent with row */
    display: inline-flex !important;
    flex-direction: row !important; /* Force horizontal */
    align-items: center !important;
    gap: 3px !important; /* Small gap between icon and text */
    flex-shrink: 0; /* Prevent shrinking */
    white-space: nowrap; /* Keep together */
  }

  /* Ensure time element stays inline */
  .fila-link-row-4 > span:first-child {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .fila-stat-number {
    font-weight: 600;
    margin: 0 1px; /* Tighter margins */
  }

  /* Ensure icons in stats are properly sized */
  .fila-link-row-4 .material-symbols-outlined {
    font-size: 16px !important;
    vertical-align: middle;
  }

  /* Actions dropdown positioned absolute */
  .fila-link-actions {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10;
  }

  .fila-actions-btn {
    padding: 6px !important;
    background: rgba(248, 249, 250, 0.9) !important;
  }

  /* Dark mode overrides for mobile copy button */
  .dark-mode .fila-copy-btn,
  .dark-mode .fila-link-row-2 button.fila-copy-btn.copy {
    background-color: #374151 !important;
    color: #D1D5DB !important;
    border-color: #4B5563 !important;
  }

  .dark-mode .fila-copy-btn:hover,
  .dark-mode .fila-link-row-2 button.fila-copy-btn.copy:hover {
    background-color: #4B5563 !important;
    color: #F9FAFB !important;
  }
}

/* ========================================
   Fila Collections Page Styles
   ======================================== */

.fila-collections-page {
    background-color: var(--gray-50);
}

/* Page header */
.fila-page-header {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    padding: 24px;
    margin-bottom: 24px;
}

.fila-page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.fila-stats-page-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fila-page-subtitle {
    font-size: 16px;
    color: var(--gray-600);
    margin: 0;
}

/* Main content card */
.fila-collections-container {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    overflow: visible !important;
}

.fila-container-header {
    padding: 24px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: white;
}

.fila-container-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fila-collections-content {
    padding: 24px;
}

.fila-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fila-btn-primary {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
    border: none !important;
}

.fila-btn-primary:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
    color: white !important;
}

.fila-btn-outline {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}

.fila-btn-outline:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #1f2937;
}

/* Collections list styling - matching links list pattern */
.fila-collection-item {
    padding: 20px 24px;
    border-bottom: 1px solid #f3f4f6 !important;
    transition: all 0.2s ease;
    background: white;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.fila-collection-item:hover {
    background-color: #f9fafb;
}

.fila-collection-item:last-child {
    border-bottom: none;
}

/* Collection item styling - matching links pattern */
.fila-collection-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.fila-collection-main {
    flex: 1;
    min-width: 0;
}

.fila-collection-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.fila-collection-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.fila-collection-title a:hover {
    color: #3b82f6;
}

.fila-collection-description {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.fila-collection-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #9ca3af;
    flex-wrap: wrap;
}

.fila-collection-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.fila-collection-actions {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
}

.fila-actions-dropdown {
    position: relative;
}

.fila-actions-btn {
    background: #f3f4f6;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.fila-actions-btn:hover {
    background: #e5e7eb;
    color: #111827;
}

/* Fix dropdown positioning and z-index issue */
.fila-collection-item .dropdown {
    position: relative;
}

.fila-actions-dropdown .dropdown-menu {
    z-index: 99999 !important;
    /* Removed static positioning to allow Popper.js to work */
    /* position: absolute; */
    /* top: 100%; */
    /* right: 0; */
    /* left: auto; */
    /* transform: none; */ /* This was blocking Popper.js! */
    margin-top: 2px;
    min-width: 160px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Star button styling */
.fila-star-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fila-star-btn:hover {
    transform: scale(1.1);
}

/* Color badge styling */
.fila-color-badge {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Stat item styling - matching links pattern */
.fila-stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.fila-stat-item.clickable {
    cursor: pointer;
    width: auto;
    transition: color 0.2s ease;
}

.fila-stat-item.clickable:hover {
    color: #3b82f6;
}

.fila-stat-number {
    font-weight: 600;
}

.fila-stat-icon {
    width: 16px;
    height: 16px;
    color: #3b82f6;
}

/* Modal Styles */
.fila-modal-content {
    border-radius: 0.75rem;
    border: none;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.fila-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0.75rem 0.75rem 0 0;
}

.fila-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.fila-modal-body {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    background: white;
}

.fila-form-group {
    margin-bottom: 1.5rem;
}

.fila-form-group:last-child {
    margin-bottom: 0;
}

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

/* Info icon button (inline with labels) */
.fila-info-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 4px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--gray-400);
    cursor: pointer;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.fila-info-icon-btn:hover {
    color: var(--primary-color);
    background: rgba(59, 130, 246, 0.1);
}

.fila-info-icon-btn .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
}

[data-scheme="dark"] .fila-info-icon-btn {
    color: var(--gray-500);
}

[data-scheme="dark"] .fila-info-icon-btn:hover {
    color: var(--primary-color);
    background: rgba(59, 130, 246, 0.2);
}

.fila-form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: white;
    color: #111827;
}

.fila-form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.fila-form-text {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
    margin-bottom: 0;
}

.fila-form-group:last-child .fila-form-text {
    margin-bottom: 0;
}

.fila-form-group:last-child p {
    margin-bottom: 0;
}

.fila-form-group:last-child small {
    margin-bottom: 0;
}

.fila-form-group:last-child .fila-switch-content p,
.fila-form-group:last-child .fila-switch-content small {
    margin-bottom: 0 !important;
}

.fila-color-palette {
    display: grid;
    grid-template-columns: repeat(9, 32px);
    gap: 8px;
    width: fit-content;
}

.fila-color-option {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fila-color-option:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.fila-color-option.active {
    border: 3px solid #3b82f6;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.fila-color-option.active::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    font-size: 12px;
}

.fila-switch-container {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.fila-switch-content {
    flex: 1;
}

.fila-switch {
    position: relative;
    width: 48px;
    height: 24px;
    background: #d1d5db;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fila-switch.active {
    background: #3b82f6;
}

.fila-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.fila-switch.active .fila-switch-thumb {
    transform: translateX(24px);
}

.fila-modal-footer {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 0.75rem 0.75rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.fila-btn-secondary {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}

.fila-btn-secondary:hover {
    background: #f9fafb;
    color: #374151;
}

.fila-btn-danger {
    background: #dc2626;
    color: white !important;
    border: 1px solid #dc2626;
}

.fila-btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: white !important;
}

/* Pagination */
.fila-pagination {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* Responsive */
@media (max-width: 991px) {
    /* Hide Cancel buttons in modals on mobile/tablet */
    .modal .modal-content .modal-footer .fila-btn-secondary,
    .modal .modal-content .fila-modal-footer .fila-btn-secondary,
    .modal-footer .fila-btn-secondary,
    .fila-modal-footer .fila-btn-secondary,
    button.fila-btn.fila-btn-secondary[data-bs-dismiss="modal"] {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .fila-collection-item {
        padding: 16px;
        flex-direction: row;
        gap: 12px;
    }

    .fila-collection-main {
        flex: 1;
    }

    .fila-collection-actions {
        align-self: flex-start;
    }
    
    .fila-container-header {
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .fila-collection-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Search input styles - Missing from external CSS */
.fila-search-input-group {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.fila-search-icon {
    padding: 0 16px;
    color: var(--gray-400);
    background: white;
}

.fila-search-input {
    flex: 1;
    border: 0 !important;
    padding: 12px 16px 12px 0;
    font-size: 14px;
    outline: none;
    background: white;
    color: var(--gray-700);
}

.fila-search-input:focus {
    outline: none;
    box-shadow: none;
}

.fila-search-input::placeholder {
    color: var(--gray-400);
}

.fila-search-submit,
.fila-search-clear {
    background: var(--gray-100);
    border: none;
    border-left: 1px solid var(--gray-200);
    padding: 12px 16px;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
}

.fila-search-submit:hover,
.fila-search-clear:hover {
    background: var(--gray-200);
    color: var(--gray-900);
}

/* ============================================================
   FIX: Search Form Collapse Animation
   ============================================================ */

/* Base search form - no padding/border to allow Bootstrap collapse to work properly */
.fila-search-form {
    background: var(--gray-50);
}

/* Wrapper inside collapsible holds padding/border */
.fila-search-wrapper {
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-200);
}

/* Ensure standard Bootstrap animation works */
.fila-search-form.collapsing {
    transition: height 0.35s ease;
}

/* ============================================================
   FIX: QR Page Search Input Group (Seamless Style)
   ============================================================ */

/* 1. The Container gets the main border and rounded corners */
.fila-search-form .fila-search-input-group {
    display: flex;
    align-items: stretch; /* Ensures all elements stretch to the same height */
    gap: 0 !important;    /* CRITICAL: Removes the white space/gap between elements */
    border: 1px solid var(--fila-gray-300, var(--gray-300)); /* The single outer border */
    border-radius: 8px;   /* Rounded corners for the whole group */
    overflow: visible;    /* Allow button to extend beyond container */
    background: white;
    padding: 0;           /* Reset padding */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Highlight entire container when input or select is focused */
.fila-search-form .fila-search-input-group:has(.fila-search-input:focus),
.fila-search-form .fila-search-input-group:has(.fila-search-select:focus) {
    border-color: var(--fila-primary, var(--primary-color));
    box-shadow: 0 0 0 3px rgba(var(--fila-primary-rgb, 79, 70, 229), 0.15);
}

/* 2. The Input Field: Remove individual borders and radius */
.fila-search-form .fila-search-input {
    flex: 1;              /* Takes up remaining space */
    border: 0 !important;
    /* border-radius: 8px 0 0 8px !important; */
    padding: 12px 16px;
    font-size: 14px;
    background: white;
    color: var(--fila-gray-700, var(--gray-700));
    box-shadow: none !important; /* Remove focus shadows that might look like borders */
    outline: none !important; /* Remove individual focus outline */
}

.fila-search-form .fila-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 2b. Input Wrapper for Clear Button */
.fila-search-input-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    min-width: 0; /* Allow flex shrinking */
}

.fila-search-input-wrapper .fila-search-input {
    flex: 1;
    padding-right: 40px; /* Space for the clear button */
}

.fila-search-input-wrapper .fila-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--fila-gray-100, var(--gray-100));
    color: var(--fila-gray-500, var(--gray-500));
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.fila-search-input-wrapper .fila-search-clear:hover {
    background: var(--fila-gray-200, var(--gray-200));
    color: var(--fila-gray-700, var(--gray-700));
}

.fila-search-input-wrapper .fila-search-clear svg {
    width: 16px;
    height: 16px;
}

/* 3. The Select Dropdown: Remove borders, add a left divider */
.fila-search-select {
    width: auto;
    min-width: 130px;
    border: 0 !important; /* Remove the full border */
    border-left: 1px solid var(--fila-gray-200, var(--gray-200)) !important; /* Add just a thin divider line */
    border-radius: 0 !important;
    padding: 0 8px 0 16px;
    background: white;
    color: var(--fila-gray-700, var(--gray-700));
    cursor: pointer;
    margin: 0 8px 0 0; /* Add space between dropdown and button */
    outline: none; /* Remove individual focus outline */
}

.fila-search-select:focus,
.fila-search-select:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-left: 1px solid var(--fila-gray-200, var(--gray-200)) !important;
}

/* 4. The Button: Overlap the parent border so it looks clean */
.fila-search-form .fila-search-submit {
    border: 0 !important;
    /* Match the parent's border-radius on the right side only */
    border-radius: 0 8px 8px 0 !important;

    /* THE MAGIC FIX: Pull the button over the gray border */
    margin: -1px -1px -1px 0 !important;

    background: var(--fila-primary, var(--primary-color));
    color: white;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    align-self: stretch; /* Stretch to fill container height */
    gap: 8px;
    position: relative; /* Ensures it sits on top of the gray border */
    z-index: 1;
}

.fila-search-form .fila-search-submit:hover {
    background: var(--fila-primary-hover, var(--primary-hover));
}

/* Dark mode support for search inputs */
[data-scheme="dark"] .fila-search-input-group {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

[data-scheme="dark"] .fila-search-icon {
    background: var(--gray-100);
}

[data-scheme="dark"] .fila-search-input {
    background: var(--gray-100);
    color: var(--gray-800);
}

[data-scheme="dark"] .fila-search-input:focus {
    background: var(--gray-200);
}

[data-scheme="dark"] .fila-search-submit,
[data-scheme="dark"] .fila-search-clear {
    background: var(--gray-200);
    border-color: var(--gray-300);
}

[data-scheme="dark"] .fila-search-form .fila-search-input-group {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

[data-scheme="dark"] .fila-search-form .fila-search-input,
[data-scheme="dark"] .fila-search-select {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-800);
}

[data-scheme="dark"] .fila-search-input-wrapper .fila-search-clear {
    background: var(--gray-200);
    color: var(--gray-400);
}

[data-scheme="dark"] .fila-search-input-wrapper .fila-search-clear:hover {
    background: var(--gray-300);
    color: var(--gray-600);
}

/* ========================================
   Billing Page Styles
   ======================================== */
.fila-billing-container {
    background-color: var(--gray-50);
    min-height: 100vh;
}

/* Page header - common styles moved to fila-page-header */

.fila-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid var(--fila-gray-200);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.fila-card-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--fila-gray-200);
    background: var(--fila-gray-50);
}

.fila-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fila-gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fila-card-body {
    padding: 1.5rem;
}

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

.fila-table th {
    background: var(--fila-gray-50);
    color: var(--fila-gray-900);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid var(--fila-gray-200);
}

.fila-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--fila-gray-100);
    color: var(--fila-gray-700);
    vertical-align: middle;
}

.fila-table tr:hover {
    background: var(--fila-gray-50);
}

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

.fila-table code {
    color: #4b5563 !important;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.875rem;
}

.fila-badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
}

.fila-badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

.fila-badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
}

.fila-current-plan {
    background: white;
    color: var(--fila-gray-900);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--fila-gray-200);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.fila-current-plan h5 {
    color: var(--fila-gray-900) !important;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fila-current-plan .expiration {
    color: var(--fila-gray-600) !important;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.fila-current-plan p,
.fila-current-plan span,
.fila-current-plan li {
    color: var(--fila-gray-700) !important;
}

.fila-plan-features {
    background: var(--fila-gray-50);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
    border: 1px solid var(--fila-gray-200);
}

.fila-plan-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fila-plan-features li {
    display: flex;
    align-items: center;
    padding: 0.375rem 0;
    color: var(--fila-gray-700) !important;
    font-size: 0.875rem;
}

.fila-plan-features li i {
    margin-right: 0.5rem;
    color: var(--fila-primary) !important;
    width: 16px;
}

.fila-plan-show-more {
    display: flex;
    align-items: center;
    justify-content: left;
    background: transparent;
    border: none;
    color: var(--fila-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.5rem 0;
    cursor: pointer;
    width: 100%;
    margin-top: 0.25rem;
    transition: color 0.2s ease;
}

.fila-plan-show-more:hover {
    color: var(--fila-primary-hover);
}

.fila-plan-show-more i {
    font-size: 0.75rem;
}

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

.fila-btn-success:hover {
    background: #059669;
    border-color: #059669;
    color: white;
}

.fila-btn-white {
    background: white !important;
    color: var(--fila-gray-700) !important;
    border: 1px solid var(--fila-gray-300) !important;
}

.fila-btn-white:hover {
    background: var(--fila-gray-50) !important;
    color: var(--fila-gray-900) !important;
    border-color: var(--fila-gray-400) !important;
}

.fila-current-plan .fila-btn-white {
    background: var(--fila-primary) !important;
    color: white !important;
    border: 2px solid var(--fila-primary) !important;
    font-weight: 600;
}

.fila-current-plan .fila-btn-white:hover {
    background: var(--fila-primary-hover) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fila-addon-section {
    border: 1px solid var(--fila-gray-200);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--fila-gray-50);
}

.fila-addon-title {
    font-weight: 600;
    color: var(--fila-gray-900);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fila-addon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fila-addon-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--fila-gray-200);
}

.fila-addon-item:last-child {
    border-bottom: none;
}

.fila-addon-item span {
    color: #4b5563 !important;
}

.fila-addon-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fila-addon-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.fila-addon-actions a {
    color: var(--fila-primary);
    text-decoration: none;
    font-weight: 500;
}

.fila-addon-actions a:hover {
    color: var(--fila-primary-hover);
    text-decoration: underline;
}

.fila-redeem-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fila-gray-600) !important;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    margin-bottom: 1.5rem;
    border: 1px solid var(--fila-gray-300);
}

.fila-redeem-link:hover {
    background: var(--fila-gray-50);
    color: var(--fila-gray-900) !important;
    text-decoration: none;
    border-color: var(--fila-gray-400);
}

.fila-redeem-link i {
    font-size: 1.125rem;
}

.fila-management-section {
    background: var(--fila-gray-50);
    border: 1px solid var(--fila-gray-200);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
}

.fila-management-section p {
    color: #6b7280 !important;
}

.fila-management-icon {
    width: 3rem;
    height: 3rem;
    background: var(--fila-gray-400);
    color: white;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.25rem;
}

.fila-management-title {
    font-weight: 600;
    color: var(--fila-gray-900);
    margin-bottom: 0.5rem;
}

.fila-management-description {
    color: var(--fila-gray-600);
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

/* Billing responsive design */
@media (max-width: 768px) {
    .fila-card-header,
    .fila-card-body {
        padding: 1rem;
    }

    .fila-table {
        font-size: 0.875rem;
    }

    .fila-table th,
    .fila-table td {
        padding: 0.75rem 0.5rem;
    }

    .fila-addon-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .fila-addon-actions {
        align-self: flex-end;
    }

    .fila-voucher-form {
        flex-direction: column;
    }

    /* Current Plan buttons - stack vertically on mobile */
    .fila-current-plan .d-flex.gap-2 {
        flex-direction: column;
        gap: 0.5rem !important;
    }

    .fila-current-plan .d-flex.gap-2 .fila-btn {
        width: 100%;
    }

    .fila-current-plan > .fila-btn {
        width: 100%;
    }
}

/* Billing dark mode support */
[data-theme="dark"] .fila-card {
    background: var(--fila-gray-100);
    border-color: var(--fila-gray-200);
}

[data-theme="dark"] .fila-card-header {
    background: var(--fila-gray-200);
}

[data-theme="dark"] .fila-table th {
    background: var(--fila-gray-200);
}

[data-theme="dark"] .fila-table tr:hover {
    background: var(--fila-gray-200);
}

[data-theme="dark"] .fila-addon-section {
    background: var(--fila-gray-200);
    border-color: var(--fila-gray-300);
}

[data-theme="dark"] .fila-management-section {
    background: var(--fila-gray-200);
    border-color: var(--fila-gray-300);
}

[data-theme="dark"] .fila-form-control {
    background: var(--fila-gray-100);
    border-color: var(--fila-gray-300);
    color: var(--fila-gray-900);
}

/* ========================================
   Mobile Subscription Cards
   ======================================== */
.subscription-mobile-cards {
    padding: 1rem;
}

.subscription-mobile-card {
    background: white;
    border: 1px solid var(--fila-gray-200);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.subscription-mobile-card:last-child {
    margin-bottom: 0;
}

/* Row 1: Plan name + Badge | Price */
.subscription-mobile-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.subscription-mobile-plan {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.subscription-mobile-plan-name {
    font-weight: 600;
    color: var(--fila-gray-900);
    font-size: 1rem;
}

.subscription-mobile-price {
    font-weight: 600;
    color: var(--fila-gray-900);
    font-size: 0.9375rem;
    white-space: nowrap;
}

/* Row 2: Started | Expiry */
.subscription-mobile-row-2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.subscription-mobile-date {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.subscription-mobile-date-right {
    text-align: right;
    align-items: flex-end;
}

.subscription-mobile-label {
    font-size: 0.75rem;
    color: var(--fila-gray-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.subscription-mobile-value {
    font-size: 0.875rem;
    color: var(--fila-gray-700);
    font-weight: 500;
}

/* Row 3: Next Payment (conditional) */
.subscription-mobile-row-3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--fila-gray-100);
}

.subscription-mobile-row-3 .subscription-mobile-label {
    text-transform: none;
    font-size: 0.8125rem;
}

.subscription-mobile-row-3 .subscription-mobile-value {
    font-weight: 600;
}

/* Dark mode support for mobile subscription cards */
[data-theme="dark"] .subscription-mobile-card,
[data-scheme="dark"] .subscription-mobile-card {
    background: var(--fila-gray-100);
    border-color: var(--fila-gray-300);
}

[data-theme="dark"] .subscription-mobile-plan-name,
[data-scheme="dark"] .subscription-mobile-plan-name,
[data-theme="dark"] .subscription-mobile-price,
[data-scheme="dark"] .subscription-mobile-price {
    color: var(--fila-gray-900);
}

[data-theme="dark"] .subscription-mobile-label,
[data-scheme="dark"] .subscription-mobile-label {
    color: var(--fila-gray-500);
}

[data-theme="dark"] .subscription-mobile-value,
[data-scheme="dark"] .subscription-mobile-value {
    color: var(--fila-gray-700);
}

[data-theme="dark"] .subscription-mobile-row-3,
[data-scheme="dark"] .subscription-mobile-row-3 {
    border-top-color: var(--fila-gray-300);
}

/* ========================================
   Mobile Payment History Cards
   ======================================== */
.payment-mobile-cards {
    padding: 1rem;
}

.payment-mobile-card {
    background: white;
    border: 1px solid var(--fila-gray-200);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.payment-mobile-card:last-child {
    margin-bottom: 0;
}

.payment-mobile-card-failed {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

/* Row 1: Date + Provider | Amount */
.payment-mobile-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.payment-mobile-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.payment-mobile-badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
    margin-bottom: 0.25rem;
    width: fit-content;
}

.payment-mobile-date {
    font-weight: 600;
    color: var(--fila-gray-900);
    font-size: 0.9375rem;
}

.payment-mobile-provider {
    font-size: 0.75rem;
    color: var(--fila-gray-500);
}

.payment-mobile-amount {
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
}

/* Row 2: Action Buttons */
.payment-mobile-row-2 {
    display: flex;
    gap: 0.5rem;
}

.payment-mobile-btn {
    flex: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
}

/* Dark mode support for payment cards */
[data-theme="dark"] .payment-mobile-card,
[data-scheme="dark"] .payment-mobile-card {
    background: var(--fila-gray-100);
    border-color: var(--fila-gray-300);
}

[data-theme="dark"] .payment-mobile-card-failed,
[data-scheme="dark"] .payment-mobile-card-failed {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .payment-mobile-date,
[data-scheme="dark"] .payment-mobile-date {
    color: var(--fila-gray-900);
}

[data-theme="dark"] .payment-mobile-provider,
[data-scheme="dark"] .payment-mobile-provider {
    color: var(--fila-gray-500);
}

/* ========================================
   Mobile Add-on Subscriptions
   ======================================== */

/* Header layout */
.addon-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.addon-header-buttons {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .addon-card-header {
        flex-direction: column;
        align-items: stretch;
    }

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

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

/* Mobile cards */
.addon-mobile-cards {
    padding: 1rem;
}

.addon-mobile-card {
    background: white;
    border: 1px solid var(--fila-gray-200);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.addon-mobile-card:last-child {
    margin-bottom: 0;
}

/* Row 1: Type + Status | Quantity */
.addon-mobile-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.addon-mobile-type {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.addon-mobile-type-name {
    font-weight: 600;
    color: var(--fila-gray-900);
    font-size: 0.9375rem;
}

.addon-mobile-quantity {
    flex-shrink: 0;
}

/* Row 2: Next Billing | Expiry */
.addon-mobile-row-2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.addon-mobile-date {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.addon-mobile-date-right {
    text-align: right;
    align-items: flex-end;
}

.addon-mobile-label {
    font-size: 0.75rem;
    color: var(--fila-gray-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.addon-mobile-value {
    font-size: 0.875rem;
    color: var(--fila-gray-700);
    font-weight: 500;
}

/* Row 3: Action Button */
.addon-mobile-row-3 {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--fila-gray-100);
}

.addon-mobile-btn {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-bottom: 0 !important;
}

/* Dark mode support */
[data-theme="dark"] .addon-mobile-card,
[data-scheme="dark"] .addon-mobile-card {
    background: var(--fila-gray-100);
    border-color: var(--fila-gray-300);
}

[data-theme="dark"] .addon-mobile-type-name,
[data-scheme="dark"] .addon-mobile-type-name {
    color: var(--fila-gray-900);
}

[data-theme="dark"] .addon-mobile-label,
[data-scheme="dark"] .addon-mobile-label {
    color: var(--fila-gray-500);
}

[data-theme="dark"] .addon-mobile-value,
[data-scheme="dark"] .addon-mobile-value {
    color: var(--fila-gray-700);
}

[data-theme="dark"] .addon-mobile-row-3,
[data-scheme="dark"] .addon-mobile-row-3 {
    border-top-color: var(--fila-gray-300);
}

/* ========================================
   Link Edit Page Styles
   ======================================== */
.fila-page-header {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--fila-gray-200);
}

.fila-page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--fila-gray-900);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.fila-page-title .material-symbols-outlined {
    font-size: 32px;
    color: var(--fila-primary);
}

.fila-page-subtitle {
    font-size: 15px;
    color: var(--fila-gray-600);
    margin: 0;
    line-height: 1.6;
}

/* Fila Card Styles */
.fila-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--fila-gray-200);
    margin-bottom: 24px;
    transition: all 0.2s ease;
}

.fila-card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--fila-gray-200);
    background: var(--fila-gray-50);
    border-radius: 12px 12px 0 0;
    font-weight: 600;
}

.fila-card-body {
    padding: 24px;
}

/* Fila Section Card */
.fila-section-card {
    margin-top: 24px;
    border: 1px solid var(--fila-gray-200);
    padding: 20px;
    border-radius: 12px;
    background: var(--fila-gray-50);
}

.fila-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--fila-gray-900);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fila-section-title .material-symbols-outlined {
    font-size: 20px;
    color: var(--fila-primary);
}

/* Fila Form Elements */
.fila-form-group {
    margin-bottom: 20px;
}

.fila-form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--fila-gray-700);
    margin-bottom: 8px;
}

.fila-form-input,
.fila-form-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--fila-gray-300);
    border-radius: 8px;
    font-size: 14px;
    color: var(--fila-gray-900);
    background: white;
    transition: all 0.2s ease;
}

.fila-form-input:focus,
.fila-form-select:focus {
    outline: none;
    border-color: var(--fila-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.fila-form-input[disabled] {
    background: var(--fila-gray-100);
    color: var(--fila-gray-500);
    cursor: not-allowed;
}

.fila-form-text {
    font-size: 13px;
    color: var(--fila-gray-600);
    margin-top: 4px;
    line-height: 1.5;
}

/* Fila Input Group */
.fila-input-group {
    display: flex;
    align-items: center;
    position: relative;
}

#linksinput .fila-input-icon {
    position: static;
}

.fila-input-icon {
    position: absolute;
    left: 14px;
    color: var(--fila-gray-500);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.fila-input-icon .material-symbols-outlined {
    font-size: 20px;
}

.fila-input-group .fila-form-input,
.fila-input-group .fila-form-select {
    padding-left: 44px;
}

/* ========================================
   Fila Button Styles - SOURCE OF TRUTH
   ========================================
   DO NOT duplicate these button styles in individual page files!
   All button styling should be defined here for consistency.
   If you need page-specific button behavior, use scoped selectors
   like .your-page-class .fila-btn instead of redefining .fila-btn
   ======================================== */
.fila-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.5;
}

.fila-btn.fila-btn-disabled,
.fila-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    /* Removed pointer-events: none to allow cursor change on hover */
}

/* Loading state for buttons */
.fila-btn.fila-btn-loading {
    pointer-events: none;
}

/* Hide the original button content when loading */
.fila-btn.fila-btn-loading .fila-btn-text {
    display: none;
}

/* Show spinner and "Updating Link" text */
.fila-btn.fila-btn-loading::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: fila-spinner 0.6s linear infinite;
    vertical-align: middle;
}

.fila-btn.fila-btn-loading::after {
    content: 'Updating Link';
    vertical-align: middle;
}

@keyframes fila-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.fila-btn .material-symbols-outlined {
    font-size: 18px;
}

.fila-btn-primary {
    background: var(--fila-primary);
    color: white !important;
}

.fila-btn-primary:hover {
    background: var(--fila-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    color: white !important;
}

.fila-btn-outline {
    background: white;
    color: var(--fila-gray-700);
    border: 1px solid var(--fila-gray-300);
}

.fila-btn-outline:hover {
    background: var(--fila-gray-50);
    border-color: var(--fila-gray-400);
}

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

.fila-btn-secondary:hover {
    background: var(--fila-gray-50);
}

.fila-btn-danger {
    background: var(--fila-danger);
    color: white !important;
}

.fila-btn-danger:hover {
    background: #DC2626;
    transform: translateY(-1px);
}

.fila-btn-warning {
    background: #f59e0b;
    color: white !important;
}

.fila-btn-warning:hover {
    background: #d97706;
    transform: translateY(-1px);
}

.fila-btn-outline-warning {
    background: transparent;
    border: 1px solid #f59e0b;
    color: #f59e0b !important;
}

.fila-btn-outline-warning:hover {
    background: #f59e0b;
    color: white !important;
    transform: translateY(-1px);
}

.fila-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.fila-btn-sm .material-symbols-outlined {
    font-size: 16px;
}

.fila-btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.fila-btn-lg .material-symbols-outlined {
    font-size: 24px;
}

/* Upgrade to PRO button - outline style */
.fila-btn.fila-upgrade-btn {
    background: transparent !important;
    border: 1px solid var(--fila-primary) !important;
    color: var(--fila-primary) !important;
}

.fila-btn.fila-upgrade-btn:hover {
    background: var(--fila-primary) !important;
    color: white !important;
    border-color: var(--fila-primary) !important;
    transform: translateY(-1px);
}

/* ========================================
   Dropdown Menu Styles - SOURCE OF TRUTH
   ========================================
   DO NOT duplicate these dropdown styles in individual page files!
   All dropdown styling should be defined here for consistency.
   ======================================== */
.dropdown-menu {
    min-width: 180px;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--fila-gray-200, #e5e7eb);
    padding: 0.5rem;
    background-color: white !important; /* Ensures dropdown is not transparent */
}

/* Mobile: Keep dropdowns on screen */
@media (max-width: 768px) {
    .dropdown-menu {
        max-width: 90vw;
    }

    /* Stats page info features line spacing */
    .info-features-line {
        margin-bottom: 8px;
    }

    /* Hide feature labels (Collections:, Pixels:, etc.) on mobile */
    .feature-label {
        display: none;
    }
}

.dropdown-item {
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-item:hover {
    background: var(--fila-gray-100, #f3f4f6);
}

.dropdown-item:active,
.dropdown-item:focus {
    background: var(--fila-gray-100, #f3f4f6);
    color: var(--fila-gray-700, #374151) !important;
}

.dropdown-item .material-symbols-outlined {
    font-size: 18px;
}

.dropdown-item i {
    width: 16px;
    height: 16px;
}

/* Fila Switch Styles */

/* ========================================
   Switch Component Styles
   ======================================== */
.fila-switch-container {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.fila-switch {
    position: relative;
    width: 48px;
    height: 24px;
    background: var(--fila-gray-300);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.fila-switch.active {
    background: var(--fila-primary);
}

.fila-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.fila-switch.active .fila-switch-thumb {
    transform: translateX(24px);
}

.fila-switch-content {
    flex: 1;
}

.fila-switch-label {
    font-weight: 500;
    color: var(--fila-gray-900);
    margin-bottom: 4px;
    display: block;
}

/* ========================================
   Payment Failure Notification Styles
   ======================================== */
.payment-failure-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #ef4444;
    color: white !important;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
}

.payment-failure-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3);
}

.payment-failure-btn.btn-paypal {
    background: #0070ba;
}

.payment-failure-btn.btn-paypal:hover {
    background: #005ea6;
    box-shadow: 0 4px 6px -1px rgba(0, 112, 186, 0.3);
}

.payment-failure-btn.btn-secondary {
    background: #6b7280;
}

.payment-failure-btn.btn-secondary:hover {
    background: #4b5563;
    box-shadow: 0 4px 6px -1px rgba(107, 114, 128, 0.3);
}

.payment-failure-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Mobile: Stack payment failure buttons vertically */
@media (max-width: 768px) {
    .fila-alert-danger .fila-alert-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .fila-alert-danger .fila-alert-actions .payment-failure-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Support link styling */
.payment-support-link {
    color: #ef4444 !important;
    text-decoration: none !important;
    font-weight: 500;
}

.payment-support-link:hover {
    text-decoration: underline !important;
}

/* ========================================
   User Menu Dropdown Fix
   ======================================== */
/* Prevent horizontal scrolling when dropdown opens near edge of viewport */
.fila-user-menu {
    position: relative !important;
}

/* Let Bootstrap handle positioning, just set width and margin */
.fila-user-menu .dropdown-menu,
.dropdown.fila-user-menu .dropdown-menu {
    margin-top: 0.25rem !important;
    min-width: 200px !important;
    max-width: calc(100vw - 20px) !important;
}

/* Ensure dropdown stays within viewport on smaller screens */
@media (max-width: 768px) {
    .fila-user-menu .dropdown-menu,
    .dropdown.fila-user-menu .dropdown-menu {
        max-width: calc(100vw - 10px) !important;
    }
}

/* Mobile Dark Mode Toggle Switch */
.mobile-dark-mode-toggle {
    cursor: default;
    padding: 10px 16px;
}

.mobile-dark-mode-toggle:hover {
    background-color: transparent;
}

.dark-mode-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.dark-mode-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dark-mode-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: 0.3s;
}

.dark-mode-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dark-mode-switch input:checked + .dark-mode-slider {
    background-color: #0891b2;
}

.dark-mode-switch input:checked + .dark-mode-slider:before {
    transform: translateX(20px);
}

/* Dark mode styles for the toggle */
.dark-mode .mobile-dark-mode-toggle {
    color: var(--dark-text);
}

.dark-mode .dark-mode-slider {
    background-color: #475569;
}

/* Let Bootstrap handle positioning, just control the max-width */
.navbar .dropdown-menu,
header .dropdown-menu {
    max-width: calc(100vw - 20px) !important;
}

/* Removed overflow-x: hidden to allow Popper.js to correctly detect viewport boundaries */
/* This allows dropdowns to flip left/right intelligently based on available space */


/* =====================================================
   Link Edit Page - Enhanced UX Design
   ===================================================== */

/* Two-column layout */
.fila-edit-container {
    display: flex;
    gap: 24px;
    margin-top: 24px;
}

.fila-edit-sidebar {
    flex: 1 1 65%;
    max-width: 800px;
}

.fila-edit-preview {
    flex: 0 0 35%;
    min-width: 350px;
    position: relative;
    height: fit-content;
    transition: all 0.2s ease;
}

.fila-edit-preview.is-sticky {
    position: sticky;
    top: 24px;
}

/* Section styling */
.fila-edit-section {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--fila-gray-200);
    margin-bottom: 24px;
    overflow: visible;
}

.fila-edit-section-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--fila-gray-200);
    background: var(--fila-gray-50);
    border-radius: 12px 12px 0 0;
}

/* When section content is collapsed/hidden */
.fila-edit-section.collapsed .fila-edit-section-header {
    border-bottom: none;
    border-radius: 12px;
}

.fila-edit-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--fila-gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fila-edit-section-title .material-symbols-outlined {
    font-size: 20px;
    color: var(--fila-primary);
}

.fila-edit-section-description {
    font-size: 13px;
    color: var(--fila-gray-600);
    margin: 4px 0 0 28px;
}

.fila-edit-section-content {
    padding: 24px;
}

/* Option group styling (matching shortener.php) */
.fila-edit-section-content .fila-option-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.fila-edit-section-content .fila-option-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--fila-gray-700, #374151);
    margin-bottom: 4px;
}

.fila-edit-section-content .fila-option-label .material-symbols-outlined {
    font-size: 20px;
    color: var(--fila-gray-500, #6b7280);
}

.fila-edit-section-content .fila-form-control {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--fila-gray-300, #d1d5db);
    border-radius: 10px;
    background: white;
    color: var(--fila-gray-800, #1f2937);
    font-size: 14px;
    transition: all 0.2s ease;
}

.fila-edit-section-content .fila-form-control:focus {
    border-color: var(--fila-primary, #4C7CF5);
    box-shadow: 0 0 0 4px rgba(76, 124, 245, 0.1);
    outline: none;
}

.fila-edit-section-content .fila-form-control::placeholder {
    color: var(--fila-gray-400, #9ca3af);
}

.fila-edit-section .select2-selection__rendered {
    padding-left: 3em !important;
}

/* Form improvements */
.fila-form-group {
    margin-bottom: 20px;
}

.fila-form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--fila-gray-700);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fila-form-help {
    font-size: 12px;
    color: var(--fila-gray-500);
    margin: 2px 0 8px 0;
    line-height: 1.5;
}

.fila-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

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

/* Targeting subsections - Clean Settings List Style */
.fila-targeting-subsection {
    padding: 16px 0;
    background: transparent;
    border-bottom: 1px solid var(--fila-gray-200);
}

.fila-targeting-subsection:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fila-targeting-subsection:first-child {
    padding-top: 0;
}

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

.fila-targeting-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--fila-gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fila-targeting-title .material-symbols-outlined {
    font-size: 20px;
    color: var(--fila-primary, #4C7CF5);
}

/* Targeting toggle switch in header */
.fila-targeting-header .fila-switch {
    flex-shrink: 0;
}

/* Targeting rules - Accordion content */
.fila-targeting-rules {
    margin-top: 16px;
    padding: 16px;
    background: var(--fila-gray-50);
    border-radius: 8px;
    display: none;
    flex-direction: column;
}

.fila-targeting-subsection.expanded .fila-targeting-rules {
    display: flex;
}

/* Add button inside rules - always at bottom */
.fila-targeting-rules .fila-btn-add-rule {
    margin-top: 10px;
    margin-left: 12px;
    order: 999;
    align-self: flex-start;
}

/* Rules maintain natural order */
.fila-targeting-rule {
    order: 1;
}

.fila-targeting-rule {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 0;
    background: transparent;
    padding: 12px;
    border-radius: 8px;
    border: none;
}

/* Device targeting - device selector fixed, URL takes remaining width */
.fila-targeting-rule .row > .col-md-6:has(select[name*="device"]) {
    flex: 0 0 200px;
    max-width: 200px;
}

.fila-targeting-rule .row > .col-md-6:has(input[name*="device"][name*="url"]) {
    flex: 1;
    max-width: none;
}

/* Language targeting - language selector fixed, URL takes remaining width */
.fila-targeting-rule .row > .col-md-6:has(select[name*="language"]) {
    flex: 0 0 200px;
    max-width: 200px;
}

.fila-targeting-rule .row > .col-md-6:has(input[name*="language"][name*="url"]) {
    flex: 1;
    max-width: none;
}

/* Expiration rules - special layout for form fields */
.fila-expiration-rules {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.fila-targeting-subsection.expanded .fila-expiration-rules {
    display: flex;
}

.fila-expiration-rules .fila-form-group {
    margin-bottom: 0;
}

.fila-expiration-rules .row {
    margin-bottom: 0;
}

/* A/B Testing - percentage input fixed width */
.fila-input-percent {
    width: 100px;
    flex-shrink: 0;
}

/* A/B Testing - Main URL row (greyed out, read-only) */
.fila-ab-main-url {
    opacity: 0.7;
    position: relative;
}

.fila-ab-main-url .fila-form-input {
    background-color: var(--fila-gray-100) !important;
    color: var(--fila-gray-600) !important;
    cursor: not-allowed;
}

.fila-ab-main-url .fila-input-icon {
    color: var(--fila-gray-400);
}

.fila-ab-main-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--fila-gray-500);
    background: var(--fila-gray-200);
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
    flex-shrink: 0;
    align-self: center;
}

/* A/B Testing - Variant rows */
.fila-ab-variant .fila-ab-percent-input {
    text-align: center;
}

/* A/B Testing - Error state when total exceeds 100% */
.fila-ab-percent-input.fila-ab-error {
    border-color: var(--fila-danger) !important;
    background-color: #FEF2F2 !important;
}

.fila-ab-main-url.fila-ab-error .fila-form-input:first-of-type {
    border-color: var(--fila-danger) !important;
    background-color: #FEF2F2 !important;
}

/* A/B testing - URL takes most space, percentage fixed */
.fila-targeting-rule .row > .col-md-10:has(input[name*="ab"]) {
    flex: 1;
    max-width: none;
}

.fila-targeting-rule .row > .col-md-2:has(input[name*="percentage"]) {
    flex: 0 0 120px;
    max-width: 120px;
}

/* Ensure targeting rule rows use flexbox */
.fila-targeting-rule .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100%;
    gap: 12px;
}

.fila-targeting-inputs {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
}

.fila-targeting-inputs .fila-input-group {
    flex: 0 0 200px;
    min-width: 0;
}

.fila-targeting-inputs .fila-input-group:nth-child(1) {
    flex: 0 0 180px; /* Country dropdown - narrower */
}

.fila-targeting-inputs .fila-input-group:nth-child(2) {
    flex: 0 0 160px; /* State dropdown - narrower */
}

.fila-targeting-inputs .fila-input-full {
    flex: 1;
    min-width: 150px;
}

.fila-targeting-inputs .fila-input-flex {
    flex: 1;
    min-width: 0;
}

/* Device targeting - ensure URL field takes remaining width */
#device .fila-targeting-inputs .fila-input-group:first-child {
    flex: 0 0 180px; /* Device selector - fixed width */
}

#device .fila-targeting-inputs .fila-input-group:last-child {
    flex: 1; /* URL field - takes remaining width */
}

/* Language targeting - ensure URL field takes remaining width */
#language .fila-targeting-inputs .fila-input-group:first-child {
    flex: 0 0 180px; /* Language selector - fixed width */
}

#language .fila-targeting-inputs .fila-input-group:last-child {
    flex: 1; /* URL field - takes remaining width */
}

/* A/B Testing - percentage first (narrow), URL second (full width) */
#abtesting .fila-targeting-inputs {
    display: flex;
    gap: 12px;
    flex: 1;
}

#abtesting .fila-targeting-inputs .fila-input-percent {
    flex: 0 0 100px; /* Percentage field - fixed narrow width */
}

#abtesting .fila-targeting-inputs .fila-input-full {
    flex: 1; /* URL field - takes remaining width */
    min-width: 200px;
}

/* Parameter separator (equals sign) */
.fila-param-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    color: var(--fila-gray-400);
    padding: 0 8px;
    flex-shrink: 0;
}

/* Small form labels for parameters */
.fila-form-label-sm {
    position: absolute;
    top: -8px;
    left: 42px;
    font-size: 11px;
    font-weight: 500;
    color: var(--fila-gray-500);
    background: white;
    padding: 0 6px;
    z-index: 1;
    border-radius: 4px;
}

/* Parameters section specific styling */
#parameters .fila-targeting-inputs .fila-input-group {
    position: relative;
    flex: 1;
    min-width: 150px;
}

#parameters .fila-targeting-inputs .fila-input-group:first-child {
    flex: 0 0 200px; /* Parameter name - fixed width */
}

#parameters .fila-targeting-inputs .fila-input-group:last-child {
    flex: 1; /* Parameter value - takes remaining width */
    min-width: 200px;
}

/* ========================================
   Targeting Section Select2 Styles
   ======================================== */

/* Select2 container in targeting rules */
.fila-targeting-rule .select2-container {
    width: 100% !important;
}

/* Select2 selection box - match fila-form-select styling */
.fila-targeting-rule .select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid var(--fila-gray-300);
    border-radius: 8px;
    background: white;
    padding: 0;
    display: flex;
    align-items: center;
}

.fila-targeting-rule .select2-container--default .select2-selection--single:hover {
    border-color: var(--fila-gray-400);
}

.fila-targeting-rule .select2-container--default .select2-selection--single:focus,
.fila-targeting-rule .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--fila-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.fila-targeting-rule .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: 12px !important;
    padding-right: 28px !important;
    color: var(--fila-gray-800);
    font-size: 14px;
}

.fila-targeting-rule .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 8px;
}

.fila-targeting-rule .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--fila-gray-500) transparent transparent transparent;
}

/* Select2 dropdown - positioned correctly */
.fila-targeting-rule .select2-dropdown {
    border: 1px solid var(--fila-gray-300);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Ensure Select2 dropdowns appear above page content but below modals */
.select2-container--open {
    z-index: 1040 !important;
}

.select2-dropdown {
    z-index: 1040 !important;
}

/* Disabled state dropdown styling */
.fila-targeting-state.select2-disabled + .select2-container--disabled .select2-selection--single,
.fila-targeting-state:disabled + .select2-container--disabled .select2-selection--single {
    background-color: var(--fila-gray-100) !important;
    cursor: not-allowed;
    opacity: 0.6;
}

.fila-targeting-rule .select2-container--disabled .select2-selection--single {
    background-color: var(--fila-gray-100) !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Select2 search box */
.fila-targeting-rule .select2-container--default .select2-search--dropdown {
    padding: 8px;
}

.fila-targeting-rule .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--fila-gray-300);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
}

.fila-targeting-rule .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--fila-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Select2 results */
.fila-targeting-rule .select2-results__options {
    max-height: 250px;
    overflow-y: auto;
}

.fila-targeting-rule .select2-container--default .select2-results__option {
    padding: 10px 12px;
    font-size: 14px;
    color: var(--fila-gray-700);
}

.fila-targeting-rule .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--fila-primary);
    color: white;
}

.fila-targeting-rule .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--fila-gray-100);
    color: var(--fila-gray-800);
}

/* Hide the icon when Select2 is active */
.fila-targeting-rule .fila-input-group:has(.select2-container) .fila-input-icon {
    display: none;
}

/* Adjust input group styling for Select2 */
.fila-targeting-rule .fila-input-group .select2-container {
    flex: 1;
}

/* Icon buttons */
.fila-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fila-gray-300);
    border-radius: 8px;
    background: white;
    color: var(--fila-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fila-btn-icon:hover {
    background: var(--fila-gray-50);
    color: var(--fila-gray-800);
}

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

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

.fila-btn-icon .material-symbols-outlined {
    font-size: 18px;
}

/* Copy button success state */
.fila-btn-icon.btn-success {
    background: var(--fila-success) !important;
    color: white !important;
    border-color: var(--fila-success) !important;
}

.fila-btn-icon.btn-success:hover {
    background: #059669 !important;
    color: white !important;
}

/* Outlined buttons */
.fila-btn-outline-primary {
    background: white;
    color: var(--fila-primary);
    border: 1px solid var(--fila-primary);
}

.fila-btn-outline-primary:hover {
    background: var(--fila-primary-light);
    color: var(--fila-primary-dark);
}

.fila-btn-outline-secondary {
    background: white;
    color: var(--fila-gray-600);
    border: 1px solid var(--fila-gray-300);
}

.fila-btn-outline-secondary:hover {
    background: var(--fila-gray-50);
    color: var(--fila-gray-800);
    border-color: var(--fila-gray-400);
}

.fila-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.fila-btn-block {
    width: 100%;
    justify-content: center;
}

/* Button with PRO badge in corner */
.fila-btn-pro-badge {
    position: relative;
    overflow: visible;
}

.fila-pro-corner-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 9px !important;
    padding: 2px 5px !important;
    line-height: 1.2;
    border-radius: 4px;
    font-weight: 600;
    z-index: 1;
}

/* Preview cards */
.fila-preview-card {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--fila-gray-200);
    padding: 20px;
    margin-bottom: 20px;
}

.fila-preview-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--fila-gray-800);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fila-preview-title .material-symbols-outlined {
    font-size: 18px;
    color: var(--fila-primary);
}

/* QR Code section */
.fila-qr-section {
    display: flex;
    gap: 20px;
    align-items: center;
}

.fila-qr-code {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 2px solid var(--fila-gray-200);
}

.fila-url-info {
    flex: 1;
}

.fila-url-item {
    margin-bottom: 12px;
}

.fila-url-item:last-child {
    margin-bottom: 0;
}

.fila-url-item label {
    font-size: 12px;
    font-weight: 600;
    color: var(--fila-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
}

.fila-url-copy {
    display: flex;
    gap: 8px;
}

.fila-url-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--fila-gray-300);
    border-radius: 6px;
    font-size: 13px;
    color: var(--fila-gray-700);
    background: var(--fila-gray-50);
}

/* QR Download Buttons - Desktop/Mobile */
.fila-qr-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fila-qr-wrapper .fila-qr-code {
    margin-bottom: 5px;
}

.fila-qr-download-mobile {
    display: none;
    justify-content: center;
    gap: 4px;
}

.fila-qr-download-desktop {
    display: inline-flex;
}

@media (max-width: 991px) {
    .fila-qr-download-mobile {
        display: inline-flex !important;
    }

    .fila-qr-download-desktop {
        display: none !important;
    }
}

/* Social Media Preview */
.fila-social-preview {
    border: 1px solid var(--fila-gray-200);
    border-radius: 8px;
    overflow: hidden;
    background: #f0f2f5;
    padding: 12px;
}

.fila-preview-facebook {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.fila-preview-image {
    width: 100%;
    height: 180px;
    background: var(--fila-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

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

.fila-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--fila-gray-400);
}

.fila-preview-placeholder .material-symbols-outlined {
    font-size: 48px;
}

.fila-preview-content {
    padding: 12px;
}

.fila-preview-domain {
    font-size: 11px;
    color: var(--fila-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.fila-preview-title-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--fila-gray-900);
    margin: 0 0 4px 0;
    line-height: 1.3;
    /* Truncate to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fila-preview-desc {
    font-size: 13px;
    color: var(--fila-gray-600);
    margin: 0;
    line-height: 1.4;
    /* Truncate to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stats grid */
.fila-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.fila-stats-grid .fila-stat-item {
    text-align: center;
    padding: 16px;
    background: var(--fila-gray-50);
    border-radius: 8px;
}

.fila-stats-grid .fila-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--fila-primary);
    margin-bottom: 4px;
}

.fila-stats-grid .fila-stat-label {
    font-size: 12px;
    color: var(--fila-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Character counter */
.fila-char-count {
    float: right;
    font-size: 11px;
    color: var(--fila-gray-500);
    margin-top: 4px;
}

/* Switch toggle visibility */
#social-preview-fields {
    transition: all 0.3s ease;
}

#social-preview-fields.d-none {
    display: none !important;
}

/* Social Preview Layout */
.fila-social-preview-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.fila-social-preview-fields {
    flex: 1;
    min-width: 0;
}

.fila-social-preview-card {
    flex: 0 0 320px;
    max-width: 50%;
    position: sticky;
    top: 24px;
}

/* Mobile: Stack fields above preview */
@media (max-width: 768px) {
    .fila-social-preview-layout {
        flex-direction: column;
    }

    .fila-social-preview-card {
        flex: 1;
        width: 100%;
        position: static;
    }
}

/* Color palette improvements */
.fila-color-palette {
    display: grid;
    grid-template-columns: repeat(9, 32px);
    gap: 8px;
    width: fit-content;
}

.fila-color-option {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.fila-color-option:hover {
    transform: scale(1.1);
}

.fila-color-option.active {
    border-color: var(--fila-gray-800);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Mobile: Color palette always 2 rows (9 per row for 18 colors), adaptive sizing */
@media (max-width: 768px) {
    .fila-color-palette {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 6px;
        width: 100%;
    }

    .fila-color-option {
        width: 100%;
        aspect-ratio: 1;
        height: auto;
        min-width: 20px;
        max-width: 40px;
    }
}

/* Modal improvements */
.modal-dialog-centered {
    min-height: calc(100% - 1rem);
    display: flex;
    align-items: center;
    max-width: 600px;
}

.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--fila-gray-200);
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--fila-gray-200);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .fila-edit-container {
        flex-direction: column;
    }
    
    .fila-edit-sidebar {
        max-width: 100%;
    }
    
    .fila-edit-preview {
        position: static;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .fila-edit-section-header {
        padding: 16px;
    }
    
    .fila-edit-section-content {
        padding: 16px;
    }
    
    .fila-targeting-inputs {
        flex-wrap: wrap;
    }

    .fila-targeting-inputs .fila-input-group,
    .fila-targeting-inputs .fila-input-group:nth-child(1),
    .fila-targeting-inputs .fila-input-group:nth-child(2) {
        flex: 1 1 100%;
    }

    .fila-targeting-inputs .fila-input-full {
        flex: 1 1 100%;
    }
}

/* ========================================
   Select2 Width Fixes
======================================== */
.select2-container {
    width: 100% !important;
}

.fila-form-group .select2-container {
    width: 100% !important;
}

.fila-targeting-rule .select2-container {
    width: 100% !important;
}

/* Ensure Select2 works properly in grid columns */
.col-md-6 .select2-container {
    width: 100% !important;
}

/* Prevent Select2 dropdown from breaking layout */
.select2-dropdown {
    z-index: 9999;
}

/* ========================================
   Select2 Multi-Select Field Fixes
   ======================================== */

/* Collections and Tracking Pixels Select2 Container - Match other form fields */
.select2-container--default .select2-selection--multiple {
    border: 1px solid #D1D5DB !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 40px 0.5rem 0.5rem !important;
    min-height: 44px !important;
    background: white !important;
    cursor: pointer !important;
    position: relative !important;
}

.select2-container--default .select2-selection--multiple:hover {
    border-color: #9CA3AF !important;
}

/* Remove focus outline from Select2 container - add our custom box-shadow instead */
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

/* Styling for selected items (badges/tags) */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #3B82F6 !important;
    border: none !important;
    border-radius: 0.25rem !important;
    color: white !important;
    padding: 0.25rem 0.375rem 0.25rem 0.5rem !important;
    margin: 0.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

/* Remove button styling */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 0 0.125rem !important;
    line-height: 1 !important;
    font-size: 0.75rem !important;
    width: auto !important;
    min-width: 16px !important;
    text-align: center !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: white !important;
}

/* Search field - remove visible box around it */
.select2-container--default .select2-search--inline .select2-search__field {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    width: 100% !important;
}

.select2-container--default .select2-search--inline .select2-search__field:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: #9CA3AF !important;
}

/* Remove the arrow wrapper - we don't need it for multi-select */
.select2-container--default .select2-selection--multiple .select2-selection__arrow {
    display: none !important;
}

/* Ensure proper spacing in the selection area */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

/* Clear/Remove all button positioning */
.select2-container--default .select2-selection__clear {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
}

/* Dark mode support */
[data-scheme="dark"] .select2-container--default .select2-selection--multiple {
    border-color: #4B5563 !important;
    background: #1F2937 !important;
    color: #F9FAFB !important;
}

[data-scheme="dark"] .select2-container--default .select2-selection--multiple:hover {
    border-color: #6B7280 !important;
}

[data-scheme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
}

[data-scheme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
    background: transparent !important;
    color: #F9FAFB !important;
}

/* Highlighted "Create New" options should have white text */
.select2-results__option--highlighted span[style*="color: #007bff"],
.select2-results__option--highlighted span[style*="color:#007bff"] {
    color: white !important;
}

/* Hide redundant Delete links added by custom.min.js */
.fila-targeting-rules > p > a[data-trigger="deletemore"],
.fila-targeting-subsection p > a[data-trigger="deletemore"] {
    display: none !important;
}

/* Ensure delete buttons work properly */
.fila-btn-icon[data-trigger="deletemore"] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.fila-btn-icon[data-trigger="deletemore"]:hover {
    transform: scale(1.1);
}

/* .select2-container .select2-selection--single .select2-selection__rendered {
     padding-left: 40px; } 
*/


/* ================================
   Select2 Styling for the25 Theme - Shortener Dropdowns
   ================================ */

/* Select2 Container - matches fila-form-control */
.fila-select2-container .select2-selection--multiple {
    min-height: 48px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 15px;
    color: #111827;
    transition: all 0.2s ease;
    cursor: pointer;
}

.fila-select2-container .select2-selection--single {
    height: 48px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 15px;
    color: #111827;
    transition: all 0.2s ease;
}

.fila-select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding-left: 0;
    padding-right: 20px;
    color: #111827;
}

.fila-select2-container .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af;
}

.fila-select2-container .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 12px;
}

/* Focus state */
.fila-select2-container.select2-container--focus .select2-selection--multiple,
.fila-select2-container.select2-container--focus .select2-selection--single {
    border-color: #4c7cf5;
    box-shadow: 0 0 0 3px rgba(76, 124, 245, 0.1);
    outline: none;
}

/* Selected items (tags) */
.fila-select2-container .select2-selection--multiple .select2-selection__choice {
    background: #4c7cf5;
    border: none;
    border-radius: 8px;
    color: white;
    padding: 4px 10px;
    margin: 4px;
    font-size: 14px;
}

.fila-select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: white;
    margin-right: 4px;
    font-weight: bold;
}

.fila-select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #f3f4f6;
}

/* Search input */
.fila-select2-container .select2-search--inline .select2-search__field {
    height: 32px;
    margin-top: 6px;
    padding: 0 8px;
    font-size: 15px;
}

/* Dropdown */
.fila-select2-dropdown {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
}

.fila-select2-dropdown .select2-search--dropdown {
    padding: 8px;
}

.fila-select2-dropdown .select2-search--dropdown .select2-search__field {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
}

.fila-select2-dropdown .select2-results__option {
    padding: 10px 16px;
    font-size: 14px;
    color: #111827;
    transition: background 0.2s ease;
}

.fila-select2-dropdown .select2-results__option--highlighted {
    background: #f3f4f6;
    color: #111827;
}

.fila-select2-dropdown .select2-results__option--selected {
    background: #e5e7eb;
}

.fila-select2-dropdown .select2-results__option[aria-selected="true"] {
    background: #f9fafb;
}

/* Clear button */
.fila-select2-container .select2-selection__clear {
    margin-right: 8px;
    font-size: 18px;
    color: #6b7280;
}

/* Fix for badge colors - don't show black squares, only show colored ones */
.select2-results__option .badge {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
}

/* Hide badge if it's black (default color) */
.select2-results__option .badge[style*="background:#000000"],
.select2-results__option .badge[style*="background: #000000"],
.select2-results__option .badge[style*="background:rgb(0, 0, 0)"],
.select2-results__option .badge[style*="background: rgb(0, 0, 0)"] {
    display: none !important;
}

/* Dark mode support */
[data-scheme="dark"] .fila-select2-container .select2-selection--multiple,
[data-scheme="dark"] .fila-select2-container .select2-selection--single {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

[data-scheme="dark"] .fila-select2-container .select2-selection--single .select2-selection__rendered {
    color: #f9fafb;
}

[data-scheme="dark"] .fila-select2-container .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af;
}

[data-scheme="dark"] .fila-select2-dropdown {
    background: #374151;
    border-color: #4b5563;
}

[data-scheme="dark"] .fila-select2-dropdown .select2-search--dropdown .select2-search__field {
    background: #1f2937;
    border-color: #4b5563;
    color: #f9fafb;
}

[data-scheme="dark"] .fila-select2-dropdown .select2-results__option {
    color: #f9fafb;
}

[data-scheme="dark"] .fila-select2-dropdown .select2-results__option--highlighted {
    background: #4b5563;
}

/* Remove default Select2 outline */
.select2-container--default .select2-selection--multiple:focus,
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
    outline: none !important;
}

/* ========================================
   Pricing Page Current Subscription Styles
   ======================================== */
.current-subscription-column {
    box-shadow: 0 0 0 3px #3B82F6 inset !important;
    border-radius: 8px !important;
    background: rgba(59, 130, 246, 0.02) !important;
    position: relative;
}

/* Ensure the column maintains highlighting across all rows */
tbody tr .current-subscription-column {
    background: rgba(59, 130, 246, 0.02) !important;
}

/* Dark mode support for pricing page */
[data-scheme="dark"] .current-subscription-column {
    box-shadow: 0 0 0 3px #60A5FA inset !important;
    background: rgba(96, 165, 250, 0.05) !important;
}

[data-scheme="dark"] tbody tr .current-subscription-column {
    background: rgba(96, 165, 250, 0.05) !important;
}

/* ========================================
   Pricing Page Button Animations
   ======================================== */
.btn-primary,
.btn-upgrade {
    transition: all 0.3s ease !important;
}

.btn-primary:hover:not(.disabled),
a.btn-primary:hover:not(.disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(13, 110, 253, 0.3) !important;
}

.btn-upgrade:hover:not(.disabled),
a.btn-upgrade:hover:not(.disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.4) !important;
}

/* ========================================
   Sidebar Toggle - Responsive Visibility
   ======================================== */

/* Mobile logo visibility */
.fila-mobile-logo {
    display: none;
}

/* Show mobile logo only on mobile/tablet */
@media (max-width: 768px) {
    .fila-mobile-logo {
        display: flex;
    }
}

/* Sidebar toggle is now handled in dashboard.php CSS */

/* ========================================
   CRITICAL MOBILE FIXES
   ======================================== */

/* Fix sidebar menu text visibility on mobile */
@media (max-width: 768px) {
    /* Ensure sidebar text is always visible in offcanvas (override collapsed styles) */
    .fila-sidebar.offcanvas .fila-nav-text {
        opacity: 1 !important;
        width: auto !important;
        overflow: visible !important;
    }

    .fila-sidebar.offcanvas .fila-nav-icon {
        margin-right: 12px !important;
    }

    .fila-sidebar.offcanvas .fila-nav-link {
        padding: 12px 20px !important;
        justify-content: flex-start !important;
    }

    /* Ensure sidebar sections are visible in offcanvas */
    .fila-sidebar.offcanvas .fila-nav-section {
        display: block !important;
    }
}

/* ========================================
   COMPREHENSIVE MOBILE RESPONSIVENESS
   Using Bootstrap Breakpoints
   ======================================== */

/* ========================================
   Mobile: Small devices (phones, <576px)
   ======================================== */
@media (max-width: 575.98px) {
    /* ====== DASHBOARD - REORDER SECTIONS ====== */
    /* Note: display:flex removed - was breaking stats page KPI layout */
    /* Note: :not(.custom-alert) added - was breaking notification alignment */
    .fila-content > div:first-child:not(.custom-alert) {
        flex-direction: column !important;
    }

    /* Stats row (contains LINKS, CLICKS, Recent Clicks chart) - appears second */
    .fila-content > div:first-child > .row.mb-2,
    .fila-content > div:first-child > .row:has(.fila-stats-card) {
        order: 1 !important;
    }

    /* Create App Link row - appears first */
    .fila-content > div:first-child > .row:has(.fila-shortener-card) {
        order: 0 !important;
    }

    /* Recent Activity row - appears last */
    .fila-content > div:first-child > .row:not(.mb-2):not(:has(.fila-shortener-card)) {
        order: 2 !important;
    }

    /* ====== PAGE HEADER ====== */
    .fila-page-header {
        padding: 16px !important;
        margin-bottom: 20px !important;
    }

    .fila-page-title {
        font-size: 18px !important;
        margin-bottom: 8px !important;
        gap: 8px !important;
    }

    /* Stats pages - no bottom margin on title (buttons inline), no wrap */
    .fila-stats-page-title {
        margin-bottom: 0px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .fila-page-subtitle {
        font-size: 14px !important;
    }

    /* ====== CONTAINER HEADERS ====== */
    .fila-container-header,
    .fila-links-header,
    .fila-shortener-title {
        padding: 16px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .fila-container-title,
    .fila-links-title {
        font-size: 18px !important;
        width: 100%;
        margin-bottom: 0 !important;
    }

    /* Links header should keep actions on same line as title */
    .fila-links-header {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* ====== LINK SHORTENER CARD ====== */
    .fila-shortener-card {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    /* ====== SHORTENER CARD HEADER ====== */
    .fila-shortener-title {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        font-size: 18px !important;
    }

    .fila-shortener-title .material-symbols-outlined {
        font-size: 24px !important;
    }

    /* ====== SHORTENER INPUT GROUP (Create Link Section) ====== */
    .fila-input-group,
    .fila-textarea-group {
        flex-wrap: wrap !important;
    }

    /* Hide the input icon (link symbol) on mobile to save space */
    .fila-shortener-form .fila-input-icon {
        display: none !important;
    }

    .fila-form-control {
        flex: 1 1 100% !important;
        width: 100% !important;
        padding: 16px !important;
        font-size: 15px !important;
        border-radius: 12px 12px 0 0 !important;
    }

    /* Actions go to new row on mobile */
    .fila-input-actions {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        padding: 12px !important;
        gap: 10px !important;
        border-left: none !important;
        border-top: 1px solid var(--gray-200) !important;
        background: var(--gray-50) !important;
        border-radius: 0 0 12px 12px !important;
    }

    .fila-btn-icon {
        flex-shrink: 0 !important;
        width: 48px !important;
        height: 48px !important;
    }

    .fila-btn-icon .material-symbols-outlined {
        font-size: 22px !important;
    }

    .fila-input-actions .fila-btn {
        flex: 1 !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        min-height: 48px !important;
    }

    /* ====== BULK ACTIONS + SEARCH - ALL IN ONE ROW ====== */
    .fila-links-actions {
        width: 100% !important;
        flex-direction: row !important;
        gap: 5% !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    /* Make the form grow to push search-controls to the right */
    .fila-links-actions > form {
        flex: 1 1 auto !important;
    }

    .fila-bulk-actions {
        /* Note: Do not set display here - it's controlled by JavaScript via inline styles */
        /* display: inline-flex !important; - REMOVED: was overriding display:none on #bulkActionsContainer */
        gap: 3px !important;
        padding: 3px !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }

    /* Only apply inline-flex when bulk actions are visible (shown via JS) */
    .fila-bulk-actions[style*="display: flex"],
    .fila-bulk-actions[style*="display:flex"] {
        display: flex !important;
        gap: 3px !important;
    }

    .fila-bulk-btn {
        padding: 8px 6px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        width: 40px !important;
        flex: 0 0 40px !important;
        justify-content: center !important;
        font-size: 0 !important;
    }

    .fila-bulk-btn .material-symbols-outlined {
        font-size: 18px !important;
    }

    /* ====== SEARCH CONTROLS - COMPACT ====== */
    .fila-search-controls {
        display: inline-flex !important;
        gap: 0 !important;
        flex: 0 0 auto !important;
        position: relative !important;
        overflow: visible !important;
    }

    .fila-search-controls .dropdown {
        position: static !important;
        overflow: visible !important;
    }

    /* Ensure parent containers don't clip dropdown on mobile */
    .fila-links-header,
    .fila-links-actions {
        overflow: visible !important;
        position: relative !important;
    }

    .fila-search-btn,
    .fila-filter-btn {
        padding: 8px 10px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        width: 40px !important;
        flex: 0 0 40px !important;
    }

    .fila-search-btn .material-symbols-outlined,
    .fila-filter-btn .material-symbols-outlined {
        font-size: 18px !important;
    }

    /* ====== SEARCH FORM ====== */
    /* Padding moved to .fila-search-wrapper to fix Bootstrap collapse animation */
    .fila-search-wrapper {
        padding: 16px !important;
    }

    .fila-search-input-group {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .fila-search-input-wrapper {
        width: 100% !important;
    }

    .fila-search-input-wrapper .fila-search-input {
        padding-right: 44px !important; /* Space for clear button on mobile */
    }

    .fila-search-input-wrapper .fila-search-clear {
        right: 10px !important;
        width: 32px !important;
        height: 32px !important;
    }

    .fila-search-input {
        width: 100% !important;
        padding: 14px 16px !important;
        border-bottom: 1px solid var(--gray-200) !important;
    }

    .fila-search-submit {
        width: 100% !important;
        padding: 12px !important;
        border-left: none !important;
        justify-content: center;
        font-size: 15px !important;
    }

    /* ====== DROPDOWN POSITIONING - Let Bootstrap/Popper handle it ====== */
    /* Removed hardcoded positioning to allow Popper.js to intelligently position dropdowns */

    .fila-filter-section {
        padding: 0 !important;
    }

    .fila-filter-label {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    .fila-filter-select,
    .fila-filter-input {
        font-size: 15px !important;
        padding: 12px !important;
        width: 100% !important;
    }

    .fila-filter-apply {
        margin: 12px 16px !important;
        padding: 14px !important;
        font-size: 15px !important;
        width: calc(100% - 32px) !important;
    }

    /* ====== LINK ITEMS - COMPACT MOBILE LAYOUT ====== */
    .fila-link-item {
        padding: 16px !important;
        display: block !important;
        position: relative;
    }

    .fila-link-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100%;
        padding-left: 0 !important;
    }

    /* Checkbox positioned absolute top-left */
    .fila-link-checkbox {
        position: absolute !important;
        top: 17px !important;
        left: 16px !important;
        width: 18px !important;
        height: 18px !important;
        z-index: 10;
        margin: 0 !important;
    }

    /* Smaller favicon on same row as content */
    .fila-link-favicon {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        margin-left: 28px !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
        align-self: flex-start !important;
    }

    /* Main content area next to favicon */
    .fila-link-main {
        flex: 1 !important;
        min-width: 0 !important;
        padding-right: 44px !important;
        margin: 0 !important;
    }

    /* Title on same row as favicon */
    .fila-link-title {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
    }

    .fila-link-title a {
        white-space: normal !important;
        word-break: break-word !important;
        display: inline !important;
    }

    /* URL section */
    .fila-link-url {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .fila-link-short {
        display: block !important;
        font-size: 13px !important;
        word-break: break-all;
        width: 100%;
        margin: 4px 0 !important;
        color: var(--primary-color) !important;
        font-weight: 500 !important;
    }

    /* Badges if present */
    .fila-link-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100%;
        margin: 8px 0 !important;
    }

    /* Stats - ALL IN ONE ROW */
    .fila-link-stats {
        display: block !important;
        width: 100%;
        margin-top: 8px !important;
    }

    .fila-link-meta {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100%;
        font-size: 12px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .fila-link-meta::-webkit-scrollbar {
        display: none !important;
    }

    /* Each stat item inline */
    .fila-link-meta > span,
    .fila-link-stats-link,
    .fila-stat-item,
    .fila-link-unique {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Position the ACTION CONTAINER in the top-right corner */
    .fila-link-actions,
    .fila-collection-actions {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 10;
    }

    /* Style the BUTTON itself, but DO NOT use absolute positioning on it */
    .fila-link-dropdown-btn,
    .fila-actions-btn,
    .fila-link-actions button {
        padding: 6px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        border-radius: 50% !important;
    }

    .fila-link-dropdown-btn:hover,
    .fila-actions-btn:hover {
        background: var(--gray-100) !important;
    }

    /* ====== COLLECTION ITEMS ====== */
    .fila-collection-item {
        padding: 16px !important;
        flex-direction: column;
        align-items: flex-start !important;
        position: relative;
    }

    .fila-collection-icon {
        position: absolute;
        top: 16px;
        left: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .fila-star-btn {
        padding: 4px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .fila-collection-main {
        width: 100% !important;
        padding-left: 48px !important;
        padding-right: 48px !important;
    }

    .fila-collection-title {
        font-size: 17px !important;
        margin-bottom: 8px !important;
    }

    .fila-collection-description {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    .fila-collection-stats {
        width: 100%;
    }

    .fila-collection-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
        width: 100%;
    }

    .fila-stat-item {
        font-size: 14px !important;
        /* width: 100%; */
    }

    .fila-collection-actions {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
    }

    .fila-actions-dropdown .fila-actions-btn {
        position: static !important;
    }

    /* ====== BUTTONS ====== */
    .fila-btn:not(.fila-btn-icon):not(.fila-input-actions .fila-btn):not(.modal-footer .fila-btn-secondary):not(.fila-modal-footer .fila-btn-secondary) {
        padding: 12px 20px !important;
        font-size: 15px !important;
        min-height: 32px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* Buttons inside input actions should flex to fill */
    .fila-input-actions .fila-btn {
        width: auto !important;
    }

    .fila-btn-primary,
    .fila-btn-danger,
    .fila-btn-success {
        margin-bottom: 8px !important;
    }

    /* Icon-only buttons stay small */
    .fila-btn-icon {
        width: 48px !important;
        height: 48px !important;
        padding: 12px !important;
    }

    /* ====== BOOTSTRAP GRID OVERRIDES ====== */
    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .row > [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Most columns go full width on mobile */
    .col-md-9,
    .col-md-3,
    .col-lg-8,
    .col-lg-4,
    .col-md-8,
    .col-md-4,
    .col-md-6,
    .col-lg-6,
    .col-xl-7 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* EXCEPT stats cards which should be side by side (50% each) */
    .col-xl-2.col-lg-3.col-md-4.col-sm-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* ====== SIDEBAR WIDGETS ====== */
    .col-md-3 .card,
    .sidebar-widget {
        margin-bottom: 16px !important;
    }

    /* ====== STATS CARDS - Already handled by Bootstrap col-sm-6 ====== */
    /* Stats cards use col-sm-6 which creates 2 columns on mobile automatically */
    /* Specific override is in the Bootstrap Grid Overrides section below */

    /* ====== COLLECTIONS GRID ====== */
    .fila-collections-container,
    .collection-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Page Header */
    .page-header {
        padding: 16px 0 !important;
        margin-bottom: 20px !important;
    }

    .page-header h1 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }

    .page-header p {
        font-size: 14px !important;
    }

    /* Cards */
    .card {
        margin-bottom: 16px !important;
        border-radius: 12px !important;
    }

    .card-body {
        padding: 16px !important;
    }

    .card-header {
        padding: 12px 16px !important;
        font-size: 15px !important;
    }

    /* Buttons */
    .btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
        margin-bottom: 8px;
    }

    .btn-group {
        flex-direction: column !important;
        width: 100%;
    }

    .btn-group .btn {
        border-radius: 8px !important;
        margin-bottom: 8px;
    }

    /* Link Items */
    .fila-link-item {
        padding: 16px !important;
        flex-direction: column;
        align-items: flex-start !important;
    }

    .fila-link-content {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .fila-link-checkbox {
        position: absolute;
        top: 16px;
        left: 16px;
    }

    .fila-link-favicon {
        width: 40px;
        height: 40px;
        margin-left: 30px;
    }

    .fila-link-main {
        width: 100%;
        margin-left: 30px;
    }

    .fila-link-title {
        font-size: 15px !important;
    }

    .fila-link-title a {
        white-space: normal !important;
        overflow: visible !important;
    }

    /* These conflicting styles have been removed - see earlier in file for correct mobile styles */

    .fila-link-badges {
        width: 100%;
    }

    /* .fila-link-meta styles moved earlier in the file - see line 3566 */

    .fila-link-actions-row {
        width: 100%;
        flex-direction: column;
    }

    .fila-link-action {
        width: 100%;
        justify-content: center;
    }

    .fila-link-dropdown-btn {
        position: absolute;
        top: 16px;
        right: 16px;
    }

    .stats-card h3,
    .stat-card h3 {
        font-size: 28px !important;
    }

    .stats-card p,
    .stat-card p {
        font-size: 13px !important;
    }

    /* Collections Grid */
    .collection-item,
    .collection-card {
        margin-bottom: 16px;
    }

    /* Remove margin from fila-collection-item */
    .fila-collection-item {
        margin-bottom: 0 !important;
    }

    .collection-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Form Groups */
    .form-group {
        margin-bottom: 16px !important;
    }

    .form-label {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    .form-control,
    .form-select {
        font-size: 15px !important;
        padding: 12px !important;
    }

    /* Input Groups */
    .input-group {
        flex-wrap: wrap;
    }

    .input-group .form-control {
        width: 100%;
        margin-bottom: 8px;
    }

    .input-group-text {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    /* Tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

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

    .table th,
    .table td {
        padding: 10px 8px !important;
        white-space: nowrap;
    }

    /* Modals */
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100% - 16px) !important;
    }

    .modal-content {
        border-radius: 12px !important;
    }

    .modal-header {
        padding: 16px !important;
    }

    .modal-body {
        padding: 16px !important;
    }

    .modal-footer {
        padding: 12px 16px !important;
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 4px 0 !important;
    }

    /* Dropdowns */
    /* Force dropdowns to open to the LEFT (right-aligned) on mobile */
    .dropdown-menu,
    .dropdown-menu-md-end {
        right: 0 !important;
        left: auto !important;
        max-width: calc(100vw - 32px);
        font-size: 14px !important;
    }

    .dropdown-item {
        padding: 12px 16px !important;
    }

    /* Alerts */
    .fila-alert {
        padding: 12px !important;
        flex-direction: column;
        gap: 8px;
    }

    .fila-alert-icon {
        font-size: 18px !important;
    }

    .fila-alert-content {
        font-size: 14px !important;
    }

    .fila-alert-actions {
        width: 100%;
        margin-left: 0 !important;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .fila-alert-actions button,
    .fila-alert-actions .btn {
        width: 100%;
    }

    .fila-alert-actions button.fila-alert-close {
        width: auto !important;
        flex-shrink: 0;
        float: none;
    }

    /* Email Verification Alert - compact single-line layout on mobile */
    #emailVerificationAlert {
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    #emailVerificationAlert .fila-alert-icon {
        display: flex !important;
        font-size: 18px !important;
        flex-shrink: 0;
    }

    #emailVerificationAlert .fila-alert-content {
        flex: 1;
        display: flex;
        align-items: center;
    }

    #emailVerificationAlert .fila-alert-content strong {
        font-size: 13px;
        white-space: nowrap;
    }

    /* Hide the description text on mobile, show only the title */
    #emailVerificationAlert .fila-alert-content {
        font-size: 0 !important; /* Hide all text */
    }

    #emailVerificationAlert .fila-alert-content strong {
        font-size: 13px !important; /* Show only the strong text */
    }

    #emailVerificationAlert .fila-alert-actions {
        width: auto !important;
        margin-left: 0 !important;
        flex-shrink: 0;
    }

    #emailVerificationAlert .fila-alert-actions button {
        width: auto !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }

    /* Hide the CSS pseudo-element icon since we already have the inline icon */
    #emailVerificationAlert .fila-alert-content strong:first-of-type::before {
        display: none !important;
    }

    /* Usage notice mobile - hide description and reset text */
    .usage-description-text {
        display: none !important;
    }

    .usage-reset-text {
        display: none !important;
    }

    /* Hide upgrade button on mobile when usage <= 50% */
    .usage-upgrade-hidden-mobile {
        display: none !important;
    }

    /* Hide the standalone icon on mobile - we use the inline one instead */
    .usage-info-icon.fila-alert-icon {
        display: none !important;
    }

    /* Show the inline mobile info icon */
    .usage-info-icon-mobile {
        display: inline-flex !important;
        align-items: center;
        vertical-align: middle;
        cursor: pointer;
    }

    .usage-info-icon-mobile .material-symbols-outlined {
        font-size: 18px;
        color: #3b82f6;
    }

    /* Hide the CSS pseudo-element icon for usage alerts since we show the inline icon */
    .fila-alert-info:has(.usage-info-icon-mobile) .fila-alert-content strong:first-of-type::before {
        display: none !important;
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-item {
        margin: 2px;
    }

    .page-link {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }

    /* Create Link Section */
    .create-link-section,
    [class*="create-link"],
    .link-generator {
        margin-bottom: 20px;
    }

    .create-link-section .card-body {
        padding: 16px !important;
    }

    .create-link-section h3 {
        font-size: 18px !important;
        margin-bottom: 16px;
    }

    /* Link List Header Actions */
    .link-list-header,
    .links-header-actions,
    .bulk-actions {
        flex-direction: column;
        gap: 12px;
    }

    .link-list-header h3 {
        font-size: 18px !important;
    }

    .links-actions {
        width: 100%;
        justify-content: space-between;
    }

    .links-actions-left,
    .links-actions-right {
        display: flex;
        gap: 8px;
    }

    .links-actions a,
    .links-actions button {
        padding: 8px !important;
        font-size: 14px !important;
    }

    /* Sidebar Widgets */
    .sidebar-widget,
    [class*="sidebar-"] .card {
        margin-bottom: 16px;
    }

    /* Dashboard Grid */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Charts */
    .chart-container {
        height: 250px !important;
        margin-bottom: 16px;
    }

    /* QR Code Preview */
    .qr-preview,
    .qr-code-preview {
        max-width: 100%;
        padding: 16px;
    }

    /* Settings Pages */
    .settings-section {
        margin-bottom: 20px;
    }

    .settings-label {
        font-size: 14px !important;
    }

    /* Tab Navigation */
    .nav-tabs {
        flex-wrap: wrap;
        border-bottom: 2px solid #e5e7eb;
    }

    .nav-tabs .nav-link {
        padding: 10px 16px !important;
        font-size: 14px !important;
        margin-bottom: -2px;
    }

    /* Badge Adjustments */
    .badge {
        font-size: 11px !important;
        padding: 8px 8px !important;
    }

    /* Icon Buttons */
    .icon-btn,
    [class*="icon-button"] {
        padding: 10px !important;
        min-width: 40px;
        min-height: 40px;
    }

    /* Search Input */
    .search-input,
    [class*="search-"] input {
        font-size: 15px !important;
        padding: 12px !important;
    }
}

/* ========================================
   Tablet: Medium devices (tablets, 576px to 768px)
   ======================================== */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Two-column grid for collections/stats */
    .collection-grid,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* Link items can show side-by-side content */
    .fila-link-item {
        padding: 18px !important;
    }

    .fila-link-content {
        flex-direction: row;
    }

    .fila-link-main {
        margin-left: 0;
    }

    /* Buttons can be inline */
    .btn {
        width: auto;
        margin-bottom: 0;
    }

    .btn-group {
        flex-direction: row !important;
    }

    .btn-group .btn {
        margin-bottom: 0;
    }

    /* Modal can be larger */
    .modal-dialog {
        max-width: 540px !important;
        margin: 30px auto !important;
    }

    .modal-footer {
        flex-direction: row;
        justify-content: flex-end;
    }

    .modal-footer .btn {
        width: auto;
        margin: 0 0 0 8px !important;
    }
}

/* ========================================
   Large Tablet / Small Desktop (768px to 991px)
   ======================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Three-column grid for collections */
    .collection-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Stats cards in rows of 2 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Content padding */
    .fila-content {
        padding: 20px !important;
    }

    /* Card spacing */
    .card {
        margin-bottom: 20px !important;
    }
}

/* ========================================
   Global Mobile Optimizations (all mobile devices)
   ======================================== */
@media (max-width: 991.98px) {
    /* Touch-friendly tap targets */
    a, button, .btn, .nav-link, .dropdown-item {
        min-height: 22px;
        display: inline-flex;
        align-items: center;
    }

    /* Larger text for readability */
    body {
        font-size: 15px !important;
        line-height: 1.6;
    }

    /* Hide desktop-only elements */
    .d-mobile-none {
        display: none !important;
    }

    /* Full-width containers */
    .container,
    .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Header improvements - STICKY ON MOBILE */
    .fila-header {
        padding: 12px 16px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        background: white !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    /* Dark mode support for sticky header */
    .dark-mode .fila-header {
        background: #1a1a1a !important;
        box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1) !important;
    }

    .fila-header-left {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Mobile Logo in Header */
    .fila-mobile-logo {
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
        color: var(--gray-900) !important;
        font-weight: 600 !important;
        font-size: 16px !important;
    }

    .fila-mobile-logo img {
        max-height: 28px !important;
        width: auto !important;
    }

    /* Hide mobile logo when offcanvas sidebar is open */
    .fila-sidebar.offcanvas.show ~ .fila-main .fila-mobile-logo {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .fila-header-right {
        gap: 8px !important;
    }

    .fila-user-button {
        padding: 4px 8px !important;
    }

    /* Footer - Compact with middle dots */
    .fila-footer {
        padding: 16px !important;
    }

    .fila-footer-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }

    .fila-footer-links {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-left: 0 !important;
        font-size: 13px !important;
    }

    /* Add middle dot separator between links */
    .fila-footer-links a:not(:last-child)::after {
        content: '•';
        margin-left: 8px;
        color: var(--gray-400);
        pointer-events: none;
    }

    .fila-footer-links .dropdown:not(:last-child)::after {
        content: '•';
        margin-left: 8px;
        color: var(--gray-400);
        pointer-events: none;
    }

    /* Sidebar adjustments on mobile - adapt to content */
    .fila-sidebar.offcanvas {
        width: auto !important;
        min-width: 250px !important;
        max-width: 280px !important;
    }

    /* Offcanvas sidebar shadow when shown */
    .fila-sidebar.offcanvas.show {
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
    }

    /* Content margins on mobile */
    .fila-main {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Improve scrolling - allow vertical, prevent horizontal */
    html {
        overflow-x: hidden;
        overflow-y: auto;
    }

    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh;
    }

    .fila-wrapper {
        min-height: auto !important;
        height: auto !important;
    }

    .fila-main {
        min-height: auto !important;
        height: auto !important;
    }

    .fila-content {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
    }

    /* Better select2 on mobile */
    .select2-container {
        font-size: 15px !important;
    }

    .select2-dropdown {
        font-size: 15px !important;
    }

    /* Improve form spacing */
    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .row > [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* ====== STATS PAGE SPECIFIC ====== */
    /* URL display - keep arrow with destination */
    .info-urls-line {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .info-inline-item {
        flex: 0 0 100% !important;
    }

    .info-destination-wrapper {
        display: flex !important;
        gap: 8px !important;
        align-items: flex-start !important;
        flex: 0 0 100% !important;
    }

    .info-separator {
        flex-shrink: 0 !important;
        margin-top: 2px !important;
    }

    .info-url {
        word-break: break-all !important;
        flex: 1 !important;
    }

    /* Stats page header positioning */
    .fila-page-header {
        position: relative !important;
    }

    .fila-page-header .row {
        position: relative !important;
    }

    /* Stats page 3-dot menu - positioned top-right */
    .fila-stats-actions-menu {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        z-index: 10 !important;
    }

    .fila-stats-actions-menu .fila-actions-btn {
        background: transparent !important;
        border: none !important;
        color: var(--gray-600) !important;
        padding: 10px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .fila-stats-actions-menu .fila-actions-btn:hover {
        background: var(--gray-100) !important;
        color: var(--gray-900) !important;
    }

    .fila-stats-actions-menu .dropdown-menu {
        position: absolute !important;
        z-index: 1000 !important;
    }

    /* Tabs - horizontal scroll only (hide scrollbar) */
    .nav-tabs,
    .fila-tabs,
    ul[role="tablist"] {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }

    .nav-tabs::-webkit-scrollbar,
    .fila-tabs::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari, Opera */
    }

    /* Stats tab container - stack vertically on mobile */
    #statsTab,
    #collectionTab {
        width: 100% !important;
        flex: 0 0 100% !important;
        order: 1 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }

    #statsTab::-webkit-scrollbar,
    #collectionTab::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari, Opera */
    }

    #statsTab .nav-item,
    #collectionTab .nav-item {
        flex: 0 0 auto !important;
    }

    /* Date picker below tabs on mobile */
    #statsTab + .ms-auto,
    #collectionTab + .ms-auto {
        flex: 0 0 100% !important;
        order: 2 !important;
        margin-left: 0 !important;
    }

    .nav-tabs .nav-item,
    .fila-tabs .nav-item {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .nav-tabs .nav-link,
    .fila-tabs .nav-link {
        white-space: nowrap !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
    }

    /* Stats tabs container - stack date picker and tabs vertically */
    .d-flex.align-items-center.mb-4.flex-wrap:has(.fila-tabs) {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .d-flex.align-items-center.mb-4.flex-wrap:has(.fila-tabs) > .fila-tabs {
        order: 2 !important;
        flex-grow: 1 !important;
    }

    .d-flex.align-items-center.mb-4.flex-wrap:has(.fila-tabs) > div.ms-auto {
        order: 1 !important;
        margin-left: 0 !important;
        margin-bottom: 1rem !important;
        width: 100% !important;
    }

    .d-flex.align-items-center.mb-4.flex-wrap:has(.fila-tabs) > div.ms-auto .form-control {
        width: 100% !important;
    }

    /* Stats cards - ensure 50/50 */
    .col-lg-3.col-sm-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .fila-stat-card {
        padding: 16px !important;
    }

    .fila-stat-value {
        font-size: 24px !important;
    }
}

/* ========================================
   Landscape Mobile Phones
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .fila-sidebar {
        height: 100vh;
        overflow-y: auto;
    }

    .fila-header {
        padding: 8px 16px !important;
    }

    .fila-content {
        padding: 16px !important;
    }

    .page-header {
        padding: 12px 0 !important;
        margin-bottom: 16px !important;
    }
}

/* ========================================
   Mobile Sidebar Scroll Lock
   Prevents background page scrolling when
   the mobile sidebar (offcanvas) is open
   ======================================== */
@media (max-width: 768px) {
    /* Lock body scroll when offcanvas sidebar is shown */
    /* Using overflow:hidden only - position:fixed breaks touch scroll in sidebar */
    body.offcanvas-open,
    body:has(.offcanvas.show) {
        overflow: hidden !important;
    }

    /* Ensure sidebar is scrollable with touch support */
    .fila-sidebar.offcanvas {
        /* Fix iOS Safari/Chrome viewport height issue - 100vh includes browser chrome */
        height: 100vh !important;
        height: -webkit-fill-available !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        /* Use flexbox to allow nav to fill remaining space and scroll */
        display: flex !important;
        flex-direction: column !important;
    }

    /* Ensure the nav inside sidebar can scroll and fills available space */
    .fila-sidebar.offcanvas .fila-nav {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        /* Add bottom padding so last items aren't cut off by rounded corners/safe area */
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    }

    /* Prevent sidebar brand from shrinking */
    .fila-sidebar.offcanvas .fila-sidebar-brand {
        flex-shrink: 0 !important;
    }

    /* Prevent scroll bleed through the backdrop */
    .offcanvas-backdrop {
        touch-action: none !important;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .fila-sidebar,
    .fila-header,
    .fila-footer,
    .btn,
    .fila-link-dropdown-btn,
    .fila-link-checkbox,
    .pagination {
        display: none !important;
    }

    .fila-main {
        margin-left: 0 !important;
    }

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

    .fila-link-item {
        page-break-inside: avoid;
    }
}

/* ========================================
   Link Edit Page - Sticky Sidebar
   ======================================== */

/* Hide bottom update button on mobile */
.fila-update-link-bottom {
    display: none;
}

/* Desktop only - sticky sidebar for edit page */
@media (min-width: 1201px) {
    /* Override the max-width: 1200px media query that sets position: static */
    .fila-edit-preview.is-sticky {
        position: sticky !important;
        top: 24px !important;
        height: fit-content !important;
    }

    /* Show and style the centered Update Link button below sticky cards */
    .fila-update-link-bottom {
        display: block;
        margin-top: 20px;
        text-align: center;
        padding: 0 20px;
    }

    .fila-update-link-bottom .fila-btn {
        width: 100%;
        justify-content: center;
        font-size: 16px;
        padding: 16px 32px;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
        transition: all 0.2s ease;
    }

    .fila-update-link-bottom .fila-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
    }

    .fila-update-link-bottom .fila-btn:active {
        transform: translateY(0);
    }
}

/* ========================================
   Success Modal Enhancements
   ======================================== */

.the25-success-modal {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.the25-success-modal .modal-header {
    padding: 24px 24px 16px 24px;
}

.the25-success-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #10B981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.the25-success-icon .material-symbols-outlined {
    font-size: 32px;
    color: white;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 32;
}

.the25-success-modal .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--fila-gray-900);
}

.the25-success-modal .modal-body {
    padding: 24px;
}

/* QR Code Section */
.the25-success-modal .modal-qr {
    padding: 16px;
}

.the25-success-modal .modal-qr img {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 8px;
    background: white;
}

/* Input Group */
.the25-modal-input-group {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.the25-modal-input-group .form-control {
    border: 1px solid var(--fila-gray-300);
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    background: var(--fila-gray-50);
}

.the25-modal-input-group .form-control:focus {
    box-shadow: none;
    border-color: var(--fila-primary);
}

.the25-modal-input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 12px 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Quick Actions */
.the25-modal-actions h6 {
    font-size: 14px;
    color: var(--fila-gray-700);
}

.the25-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    border-width: 1.5px;
}

.the25-action-btn .material-symbols-outlined {
    font-size: 18px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 18;
}

.the25-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: white !important;
}

.the25-action-btn:hover .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 18;
}

/* Share Section */
.the25-modal-share h6 {
    font-size: 14px;
    color: var(--fila-gray-700);
}

.the25-modal-share #modal-share {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.the25-modal-share #modal-share a {
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    text-decoration: none;
}

.the25-modal-share #modal-share a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Modal Footer */
.the25-success-modal .modal-footer {
    padding: 16px 24px 24px 24px;
    justify-content: flex-end;
}

.the25-success-modal .modal-footer .btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .the25-success-modal .modal-body .col-md-4 {
        border-right: none;
        border-bottom: 1px solid var(--fila-gray-200);
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .the25-success-icon {
        width: 40px;
        height: 40px;
    }

    .the25-success-icon .material-symbols-outlined {
        font-size: 24px;
    }

    .the25-success-modal .modal-title {
        font-size: 18px;
    }

    .the25-action-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ========================================
   Upgrade Modal Styles
   ======================================== */

.the25-upgrade-modal {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.the25-upgrade-modal .modal-header {
    padding: 24px 24px 16px 24px;
}

.the25-upgrade-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #9333ea, #7c3aed);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.the25-upgrade-icon .material-symbols-outlined {
    font-size: 32px;
    color: white;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 32;
}

.the25-upgrade-modal .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--fila-gray-900);
}

.the25-upgrade-modal .modal-body {
    padding: 24px;
    font-size: 15px;
    color: var(--fila-gray-700);
}

.the25-upgrade-modal .modal-body strong {
    color: var(--fila-gray-900);
    font-weight: 600;
}

.the25-upgrade-modal .modal-body p {
    margin-bottom: 16px;
    line-height: 1.6;
}

/* Enhanced info box for upgrade modal */
.the25-upgrade-modal .alert-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.08));
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.the25-upgrade-modal .alert-info a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.the25-upgrade-modal .alert-info a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.the25-upgrade-modal .copy.inline-copy {
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    padding: 4px 12px;
    color: #2563eb;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    margin-left: 8px;
}

.the25-upgrade-modal .copy.inline-copy:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: #2563eb;
    color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.the25-upgrade-modal .modal-footer {
    padding: 16px 24px 24px 24px;
    justify-content: flex-end;
}

.the25-upgrade-modal .modal-footer .btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.the25-upgrade-modal .modal-footer .btn-secondary {
    background: var(--fila-gray-100);
    border: 1px solid var(--fila-gray-300);
    color: var(--fila-gray-700);
    transition: all 0.2s ease;
}

.the25-upgrade-modal .modal-footer .btn-secondary:hover {
    background: white;
    border-color: var(--fila-gray-400);
    color: var(--fila-gray-800);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.the25-upgrade-modal .modal-footer .btn-primary {
    background: linear-gradient(135deg, #9333ea, #7c3aed);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.the25-upgrade-modal .modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #7c3aed, #6b21a8);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(147, 51, 234, 0.3);
}

/* Upgrade modal responsive */
@media (max-width: 768px) {
    .the25-upgrade-icon {
        width: 40px;
        height: 40px;
    }

    .the25-upgrade-icon .material-symbols-outlined {
        font-size: 24px;
    }

    .the25-upgrade-modal .modal-title {
        font-size: 18px;
    }

    .the25-upgrade-modal .alert-info {
        flex-direction: column;
        text-align: center;
    }

    .the25-upgrade-modal .modal-footer {
        flex-direction: column;
        gap: 8px;
    }

    .the25-upgrade-modal .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ================================
   Link Creation Loading Indicator
   ================================ */
.link-creation-loading {
    position: absolute;
    bottom: 16px;
    left: 24px;
    color: #6B7280;
    font-size: 13px;
    font-weight: 400;
    display: none;
    align-items: center;
    gap: 8px;
    z-index: 10;
    animation: fadeIn 0.3s ease-out;
}

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

/* Green spinner animation */
.link-creation-loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #E5E7EB;
    border-top-color: #10B981;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

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

.link-creation-loading .loading-dots {
    display: inline;
}

/* Ensure the shortener card has relative positioning for absolute loading indicator */
.fila-shortener-card {
    position: relative;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .link-creation-loading {
        bottom: 10px;
        left: 16px;
        font-size: 12px;
    }

    .link-creation-loading::before {
        width: 12px;
        height: 12px;
        margin-right: 6px;
    }
}

/* ========================================
   Browser Extension Guide Styles
   ======================================== */

/* Extension guide container */
.extension-guide {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Guide section */
.guide-section {
    border-left: 3px solid var(--fila-primary);
    padding-left: 0;
    margin-bottom: 0.5rem;
}

.guide-section:last-child {
    margin-bottom: 0;
}

/* Guide header with number */
.guide-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.guide-header:hover {
    background: var(--fila-gray-50);
}

.guide-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--fila-primary) 0%, var(--fila-primary-hover) 100%);
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    flex-shrink: 0;
}

.guide-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fila-gray-800);
}

.collapse-icon {
    color: var(--fila-gray-500);
    transition: transform 0.3s ease;
    font-size: 0.875rem;
}

.guide-header[aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg);
}

/* Guide content */
.guide-content {
    padding: 1rem 1rem 0.5rem 1rem;
}

.guide-list {
    margin: 0;
    padding-left: 1.5rem;
    list-style: none;
    counter-reset: guide-counter;
}

.guide-list li {
    counter-increment: guide-counter;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.6;
    color: var(--fila-gray-700);
}

.guide-list li:last-child {
    margin-bottom: 0;
}

.guide-list li::before {
    content: counter(guide-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background: var(--fila-gray-100);
    border: 2px solid var(--fila-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fila-primary);
}

/* Method sections */
.method-section {
    background: var(--fila-gray-50);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--fila-gray-200);
}

.method-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fila-gray-800);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.method-title i {
    color: var(--fila-primary);
}

.method-section .guide-list {
    padding-left: 1.25rem;
}

.method-section .guide-list li {
    padding-left: 1.75rem;
    font-size: 0.95rem;
}

.method-section .guide-list li::before {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
}

/* Pro tips section - uses standard Bootstrap alerts */

/* Responsive adjustments */
@media (max-width: 768px) {
    .guide-header {
        gap: 0.75rem;
    }

    .guide-number {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .guide-title {
        font-size: 1rem;
    }

    .guide-list li {
        font-size: 0.9rem;
        padding-left: 1.25rem;
    }

    .method-section {
        padding: 0.875rem;
    }

    .method-title {
        font-size: 0.95rem;
    }
}

/* ========================================
   Mobile App Page - Notification Card
   ======================================== */
.mobile-app-notification-card {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
    position: relative;
    overflow: hidden;
    margin: 2rem 0;
}

.mobile-app-notification-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.mobile-app-notification-card::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.notification-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
}

.notification-icon-wrapper i {
    font-size: 2.5rem;
    color: #FFFFFF;
    animation: bellRing 2s ease-in-out infinite;
}

@keyframes bellRing {
    0%, 100% {
        transform: rotate(0deg);
    }
    10%, 30% {
        transform: rotate(-10deg);
    }
    20%, 40% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(0deg);
    }
}

.notification-title {
    color: #FFFFFF;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.notification-text {
    color: #E0E7FF;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.notification-btn {
    background: #FFFFFF;
    color: #3B82F6;
    border: none;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.notification-btn:hover {
    background: #F3F4F6;
    color: #2563EB;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.notification-btn i {
    margin-right: 0.5rem;
}

/* Dark mode support for mobile app notification card */
@media (prefers-color-scheme: dark) {
    .mobile-app-notification-card {
        background: linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%);
        box-shadow: 0 10px 30px rgba(30, 64, 175, 0.3);
    }

    .notification-btn {
        background: #1F2937;
        color: #60A5FA;
    }

    .notification-btn:hover {
        background: #111827;
        color: #93C5FD;
    }
}

/* Responsive adjustments for mobile app notification card */
@media (max-width: 768px) {
    .mobile-app-notification-card {
        padding: 2rem 1.5rem;
        border-radius: 12px;
    }

    .notification-icon-wrapper {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }

    .notification-icon-wrapper i {
        font-size: 2rem;
    }

    .notification-title {
        font-size: 1.35rem;
    }

    .notification-text {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .notification-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }
}

/* ========================================
   Import Page Step Numbers
   ======================================== */
.step-number {
    width: 40px;
    height: 40px;
    font-weight: 600;
}

/* ========================================
   Card Styles (matching pixels page)
   ======================================== */
.import-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #E5E7EB;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

/* ========================================
   User Dashboard Stats - Mobile Styles
   ======================================== */
@media (max-width: 768px) {
    .fila-stats-change {
        margin-bottom: 0;
        align-items: center !important;
    }

    .fila-stats-header {
        margin-bottom: 0;
    }
}

/* Mobile-specific styles for Recent Click Activity visitor items */
@media (max-width: 768px) {
    /* Stack visitor items vertically on mobile */
    .fila-click-visitor {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    /* Make each visitor item display with icon on top of text */
    .fila-visitor-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 4px !important;
        width: auto !important;
        min-width: 80px !important;
        padding: 8px !important;
        background-color: var(--gray-50) !important;
        border-radius: 8px !important;
    }

    /* Ensure images and icons are properly sized and centered */
    .fila-visitor-item img,
    .fila-visitor-item .material-symbols-outlined {
        margin-bottom: 2px !important;
        display: block !important;
    }

    /* Ensure links maintain proper styling */
    .fila-visitor-item a {
        text-align: center !important;
        word-break: break-word !important;
    }

    /* Alternative layout: Horizontal scroll for visitor items */
    .fila-click-visitor {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding-bottom: 8px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Hide scrollbar for cleaner look */
    .fila-click-visitor::-webkit-scrollbar {
        height: 4px !important;
    }

    .fila-click-visitor::-webkit-scrollbar-track {
        background: transparent !important;
    }

    .fila-click-visitor::-webkit-scrollbar-thumb {
        background: var(--gray-300) !important;
        border-radius: 2px !important;
    }
}

/* ========================================
   CRITICAL DROPDOWN POSITIONING FIX
   ======================================== */

/* This rule allows dropdown menus within link and collection items
   to overflow their parent containers, fixing positioning issues on mobile. */
.fila-link-item,
.fila-collection-item {
    position: relative; /* Establishes a stacking context for z-index to work reliably. */
    overflow: visible !important; /* This is the key: it overrides the 'overflow: hidden' from the body/main content. */
}

/* Hide mobile-only elements on desktop */
#successModal .mobile-qr-download,
#successModal .mobile-action-buttons,
#successModal .mobile-stats-btn {
    display: none !important;
}

/* Recent Activity Pagination - Match Links Pagination */
#dashboard-pagination-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--fila-gray-200);
    background: white;
}

#dashboard-pagination-footer .d-flex {
    justify-content: center !important;
}

#dashboard-pagination-footer nav {
    width: 100%;
    display: flex;
    justify-content: center;
}

#dashboard-pagination-controls {
    margin-bottom: 0 !important;
}

#dashboard-pagination-controls.pagination-sm {
    font-size: inherit !important;
}

#dashboard-pagination-controls .page-link {
    padding: 0.5rem 0.75rem !important;
}

/* Hide the "Showing X-Y of Z entries" text */
#dashboard-pagination-info {
    display: none;
}

@media (max-width: 768px) {
    #dashboard-pagination-footer {
        padding: 12px 16px;
    }

    #dashboard-pagination-controls {
        justify-content: center;
    }
}

/* Search Results Heading Styling */
#link-holder > .my-4:first-child,
.my-4:has(> h4.fw-bold) {
    margin: 0 0 6px 0 !important;
    padding: 12px 24px;
    background: var(--fila-gray-50);
    border-top: 1px solid var(--fila-gray-200);
    border-radius: 0 0 6px 6px;
}

#link-holder > .my-4:first-child h4,
.my-4 h4.fw-bold {
    color: var(--fila-gray-700);
    font-size: 15px !important;
}

@media (max-width: 768px) {
    #link-holder > .my-4:first-child,
    .my-4:has(> h4.fw-bold) {
        text-align: center;
        padding: 12px 16px;
    }
}

/* =====================================================
   MOBILE OPTIMIZED CENTER MODAL (#successModal)
   ===================================================== */
@media (max-width: 768px) {

    /* 1. Center Positioning & Spacing */
    #successModal .modal-dialog {
        margin: 20px !important; /* Breathing room from edges */
        max-width: 100% !important;
        display: flex;
        align-items: center;     /* Vertical Center */
        min-height: calc(100% - 40px);
    }

    #successModal .modal-content {
        border-radius: 16px !important; /* Nice rounded corners */
        padding: 0 !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
        max-height: 90vh;        /* Prevent it from being taller than screen */
        overflow-y: auto;        /* Scroll inside if needed */
    }

    /* 2. HIDE Desktop Sections on Mobile */

    /* Hide the large desktop QR code section */
    #successModal .modal-body .col-md-4 {
        display: none !important;
    }

    /* Hide the Quick Actions section */
    #successModal .the25-modal-actions {
        display: none !important;
    }

    /* Link Section takes full width */
    #successModal .modal-body .col-md-8 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    /* Mobile: Reflow Input Group to Stack Vertically */
    #successModal .the25-modal-input-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        box-shadow: none !important;
    }

    #successModal .the25-modal-input-group .form-control {
        border-radius: 8px !important;
        border: 1px solid var(--fila-gray-300) !important;
        font-size: 14px;
    }

    /* Copy Button: Full Width & Match Desktop Style */
    #successModal .the25-modal-input-group .btn.copy {
        width: 100%;
        border-radius: 8px !important;
        padding: 12px 20px;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.2s ease !important;
    }

    #successModal .the25-modal-input-group .btn.copy:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    #successModal .the25-modal-input-group .btn.copy .material-symbols-outlined {
        font-size: 18px;
    }

    /* Copy Button Success Animation */
    #successModal .the25-modal-input-group .btn.copy.fila-copy-success {
        background: linear-gradient(135deg, #10b981, #059669) !important;
        color: white !important;
        transform: scale(1) !important;
        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
        animation: copySuccessPulse 0.3s ease-in-out;
    }

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

    /* 3. Mobile-Only QR Download Section */
    #successModal .mobile-qr-download {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px 16px;
        border: 1px solid var(--fila-gray-300);
        border-radius: 8px;
        background: var(--fila-gray-50);
        margin-top: 16px;
    }

    #successModal .mobile-qr-download .qr-left {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    #successModal .mobile-qr-download img {
        width: 40px;
        height: 40px;
        padding: 2px;
        border: 1px solid var(--fila-gray-300);
        border-radius: 4px;
        background: white;
    }

    #successModal .mobile-qr-download .qr-text {
        font-size: 14px;
        color: var(--fila-gray-700);
        font-weight: 500;
    }

    #successModal .mobile-qr-download .btn-download {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: white;
        border: 1px solid var(--fila-gray-300);
        color: var(--fila-gray-700);
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 13px;
        white-space: nowrap;
        text-decoration: none;
    }

    #successModal .mobile-qr-download .btn-download .material-symbols-outlined {
        font-size: 18px;
    }

    /* 4. Visual Cleanup */
    #successModal .modal-header {
        padding: 16px 16px 8px 16px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    #successModal .modal-header .d-flex {
        flex: 1;
        min-width: 0;
        gap: 8px !important;
    }

    /* Smaller icon on mobile */
    #successModal .the25-success-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    #successModal .the25-success-icon .material-symbols-outlined {
        font-size: 24px !important;
    }

    /* Smaller title font on mobile */
    #successModal .modal-title {
        font-size: 16px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }

    #successModal .modal-header .text-muted {
        font-size: 12px !important;
    }

    #successModal .modal-header .btn-close {
        margin-left: 8px;
        flex-shrink: 0;
    }

    #successModal .modal-body {
        padding: 10px 20px 20px 20px !important;
    }

    /* Make the Copy button look actionable */
    #successModal .copy {
        background-color: var(--fila-primary);
        color: white;
        border: none;
        font-weight: 600;
    }

    /* Ensure "Short Link" label is visible */
    #successModal .modal-body label {
        display: block;
        font-size: 13px;
        color: var(--fila-gray-600);
        margin-bottom: 8px;
        font-weight: 500;
    }

    /* Destination URL styling (↳ bmw.com ✎ Edit) */
    #successModal #destination-url-display {
        margin-top: 12px;
        margin-bottom: 0;
    }

    #successModal #destination-url-display label {
        display: block !important;
        margin-bottom: 0 !important;
    }

    /* Hide the main Copy button on mobile (we have one in mobile-action-buttons) */
    #successModal .the25-modal-input-group .copy {
        display: none !important;
    }

    /* Vertical layout: URL on top, Edit button below */
    #successModal #destination-url-display {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #successModal #destination-url-display .d-flex {
        display: flex !important;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--fila-gray-600);
    }

    #successModal #destination-url-display .material-symbols-outlined {
        font-size: 16px !important;
        flex-shrink: 0;
    }

    #successModal #destination-url-display .d-flex a {
        color: var(--fila-gray-700);
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
        font-weight: 500;
        flex: 1;
        min-width: 0;
    }

    /* Mobile action buttons container (Copy + Edit side by side) */
    #successModal #destination-url-display .mobile-action-buttons {
        display: flex !important;
        gap: 8px;
        width: 100%;
    }

    /* Copy button style */
    #successModal #destination-url-display .mobile-copy-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: white;
        background: var(--fila-primary);
        border: 1.5px solid var(--fila-primary);
        border-radius: 8px;
        padding: 10px 16px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        flex: 1;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    #successModal #destination-url-display .mobile-copy-btn:hover {
        background: #2563EB;
        border-color: #2563EB;
    }

    #successModal #destination-url-display .mobile-copy-btn .material-symbols-outlined {
        font-size: 18px;
    }

    /* Edit button style */
    #successModal #destination-url-display .mobile-edit-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: var(--fila-primary);
        background: white;
        border: 1.5px solid var(--fila-primary);
        border-radius: 8px;
        padding: 10px 16px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        flex: 1;
        transition: all 0.2s ease;
    }

    #successModal #destination-url-display .mobile-edit-btn:hover {
        background: rgba(59, 130, 246, 0.05);
        border-color: #2563EB;
        transform: translateY(-1px);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    #successModal #destination-url-display .mobile-edit-btn .material-symbols-outlined {
        font-size: 18px;
    }

    /* View Stats button style (outlined gray) */
    #successModal #destination-url-display .mobile-stats-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: var(--fila-gray-600);
        background: white;
        border: 1.5px solid var(--fila-gray-300);
        border-radius: 8px;
        padding: 10px 16px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        width: 100%;
        margin-top: 8px;
        transition: all 0.2s ease;
    }

    #successModal #destination-url-display .mobile-stats-btn:hover {
        background: var(--fila-gray-50);
        border-color: var(--fila-gray-400);
    }

    #successModal #destination-url-display .mobile-stats-btn .material-symbols-outlined {
        font-size: 18px;
    }
}

/* =====================================================
   MOBILE STAT ITEMS ALIGNMENT
   ===================================================== */
@media (max-width: 768px) {
    /* Keep stats aligned left next to date */
    .fila-link-row-4 {
        justify-content: flex-start !important;
    }

    /* Keep click stat inline with date */
    .fila-link-row-4 a.fila-stat-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Truncate link title to 2 lines - use wrapper h4 for truncation, not the <a> itself */
    .fila-link-title {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.4 !important;
        max-height: 2.8em !important; /* 2 lines * 1.4 line-height */
    }

    /* Keep the link inside title as inline so clickable area = text only */
    .fila-link-title a {
        display: inline !important;
    }

    .fila-link-row-2 a {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.4 !important;
        max-height: 2.8em !important; /* 2 lines * 1.4 line-height */
    }

    /* Fix URL input padding to prevent text going under clear & paste icons */
    .fila-shortener-card input[name="url"],
    .fila-shortener-card #url {
        padding-right: 85px !important; /* Make room for clear & paste icons */
    }

    /* Pagination - Simple centered layout */
    .pagination {
        justify-content: center;
    }
}

/* ============================================
   SELECT2 MODALS - FIX FOR MOBILE & Z-INDEX
   ============================================ */

/* Fix Select2 (Dropdowns) - below Bootstrap Modals (1050) */
.select2-container {
    width: 100% !important;
    z-index: 1040;
}

.select2-dropdown {
    z-index: 1040 !important; /* Below Bootstrap Modal (1050) */
    border: 1px solid var(--gray-200);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border-radius: 8px;
}

.select2-search__field {
    border-radius: 6px !important;
    padding: 8px 12px !important;
}

.select2-results__option {
    padding: 8px 12px;
    font-size: 14px;
}

.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
    border: 1px solid var(--gray-300) !important;
    border-radius: 8px !important;
    min-height: 45px;
    display: flex;
    align-items: center;
    padding: 2px 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 45px;
}

/* Color Badge in Dropdown */
.select2-result-badge {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Fix Select2 Chips Spacing */
.select2-container--default .select2-selection--multiple {
    min-height: 45px;
    padding: 4px 8px;
    height: auto;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    display: block; /* Reset flex to avoid squash issues */
    line-height: 24px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--chip-bg-color, #e5e7eb) !important;
    border: 1px solid var(--chip-border-color, var(--gray-300)) !important;
    color: var(--chip-text-color, #1f2937) !important;
    margin-top: 4px !important;
    margin-right: 6px !important;
    margin-bottom: 4px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    float: left; /* Standard Select2 behavior */
    font-size: 13px;
}

/* The "x" button on the chip */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 6px !important;
    color: var(--chip-text-color, #666) !important;
    font-weight: bold;
}

/* The input cursor - keep it aligned */
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 6px !important;
    height: 24px !important;
    line-height: 24px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--chip-text-color, #1f2937) !important;
    margin-right: 4px !important;
    font-size: 16px !important;
    opacity: 0.7;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--chip-text-color, #1f2937) !important;
    opacity: 1;
}

/* Mobile Specific Fixes for Modals */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin-top: 4px;
        max-width: 100%; /* Prevent overflow */
    }
}

/* ============================================
   CUSTOM MULTI-SELECT UI (No Select2)
   ============================================ */

/* Custom Multi-Select UI */
.fila-chip-container {
    min-height: 48px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 8px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    cursor: text; /* visual cue only */
}

.fila-chip {
    display: inline-flex;
    align-items: center;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 50px; /* Pill shape */
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    user-select: none;
}

.fila-chip-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
}

.fila-chip-remove {
    margin-left: 6px;
    cursor: pointer;
    color: var(--gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    transition: all 0.2s;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    padding: 0;
    flex-shrink: 0;
}

.fila-chip-remove .material-symbols-outlined {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.fila-chip-remove:hover {
    background: rgba(220, 38, 38, 0.15);
    color: var(--danger-color);
}

/* ============================================
   MERGED CHIP-DROPDOWN COMPONENT
   A fusion of chip container and dropdown trigger
   ============================================ */

.fila-chip-dropdown-trigger {
    min-height: 48px;
    border: 2px solid var(--gray-300);
    border-radius: 10px;
    padding: 8px 12px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.fila-chip-dropdown-trigger:hover {
    border-color: var(--primary-color);
    background: var(--gray-50);
}

.fila-chip-dropdown-trigger[aria-expanded="true"] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(76, 124, 245, 0.15);
}

.fila-chip-dropdown-trigger[aria-expanded="true"] .fila-chip-dropdown-arrow {
    transform: rotate(180deg);
}

.fila-chip-dropdown-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 28px;
}

.fila-chip-placeholder {
    color: var(--gray-500);
    font-size: 14px;
    font-weight: 400;
}

.fila-chip-dropdown-arrow {
    color: var(--gray-500);
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Chips inside the merged component */
.fila-chip-dropdown-trigger .fila-chip {
    margin: 0;
    background: var(--primary-light);
    border-color: rgba(76, 124, 245, 0.2);
    color: var(--primary-color);
}

.fila-chip-dropdown-trigger .fila-chip-remove {
    background: rgba(76, 124, 245, 0.15);
    color: var(--primary-color);
}

.fila-chip-dropdown-trigger .fila-chip-remove:hover {
    background: rgba(220, 38, 38, 0.15);
    color: var(--danger-color);
}

/* Dark mode support */
[data-scheme="dark"] .fila-chip-dropdown-trigger {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

[data-scheme="dark"] .fila-chip-dropdown-trigger:hover {
    background: var(--gray-200);
    border-color: var(--primary-color);
}

[data-scheme="dark"] .fila-chip-placeholder {
    color: var(--gray-600);
}

[data-scheme="dark"] .fila-chip-dropdown-arrow {
    color: var(--gray-600);
}

[data-scheme="dark"] .fila-chip-dropdown-trigger .fila-chip {
    background: rgba(76, 124, 245, 0.2);
    border-color: rgba(76, 124, 245, 0.3);
}

/* Scrollable Dropdown */
.fila-custom-dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
    padding: 8px;
    /* Force dropdown to open below */
    inset: auto auto auto 0 !important;
    transform: translateY(0) !important;
    top: 100% !important;
    margin-top: 4px !important;
}

/* Mobile Bottom Sheet Styles */
@media (max-width: 991px) {
    .fila-custom-dropdown-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        transform: none !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 60vh !important;
        min-height: 200px !important;
        overflow-y: auto !important;
        padding: 0 16px 16px 16px !important;
        -webkit-overflow-scrolling: touch;
        z-index: 1050 !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
        border: none !important;
        inset: auto 0 0 0 !important;
    }

    /* Handle bar at top - when not using JS handle */
    .fila-custom-dropdown-menu::before {
        content: '';
        display: block;
        width: 40px;
        height: 5px;
        background: var(--gray-300);
        border-radius: 3px;
        margin: 12px auto 12px auto;
        cursor: pointer;
    }

    /* Hide pseudo-element when JS handle is added */
    .fila-custom-dropdown-menu.has-handle::before {
        display: none;
    }

    /* JS Handle bar element */
    .fila-bottom-sheet-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 16px 12px;
        margin: 0 -16px 8px -16px;
        border-bottom: 1px solid var(--gray-100);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .fila-bottom-sheet-handle::before {
        content: '';
        width: 40px;
        height: 5px;
        background: var(--gray-300);
        border-radius: 3px;
    }

    /* Make dropdown items larger for touch */
    .fila-custom-dropdown-menu .fila-dropdown-item {
        padding: 14px 16px !important;
        font-size: 15px !important;
        border-bottom: 1px solid var(--gray-100);
        border-radius: 8px;
        margin-bottom: 4px;
    }

    .fila-custom-dropdown-menu .fila-dropdown-item:last-child {
        border-bottom: none;
    }

    /* Dropdown headers */
    .fila-custom-dropdown-menu .dropdown-header {
        padding: 12px 16px 8px;
        font-size: 12px;
        color: var(--gray-500);
    }

    /* ========================================
       Fila Bottom Sheet (Mobile)
       Reusable component for mobile select dropdowns
       ======================================== */
    .fila-bottom-sheet-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 1060;
    }

    .fila-bottom-sheet-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    .fila-bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
        z-index: 1070;
        max-height: 70vh;
        display: flex;
        flex-direction: column;
    }

    .fila-bottom-sheet.show {
        transform: translateY(0);
    }

    .fila-bottom-sheet-header {
        padding: 0 1.25rem 0.75rem;
        border-bottom: 1px solid var(--gray-200);
    }

    .fila-bottom-sheet-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--gray-800);
        margin: 0;
    }

    .fila-bottom-sheet-body {
        padding: 0;
        overflow-y: auto;
        flex: 1;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Bottom sheet list items */
    .fila-bottom-sheet-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
        cursor: pointer;
        border-bottom: 1px solid var(--gray-100);
        transition: background 0.15s ease;
    }

    .fila-bottom-sheet-item:hover,
    .fila-bottom-sheet-item:active {
        background: var(--gray-50);
    }

    .fila-bottom-sheet-item.selected {
        background: #eff6ff;
    }

    .fila-bottom-sheet-item-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--gray-100);
        border-radius: 8px;
        color: var(--gray-600);
    }

    .fila-bottom-sheet-item-text {
        flex: 1;
        font-size: 0.9375rem;
        color: var(--gray-700);
    }

    .fila-bottom-sheet-item-check {
        color: var(--primary-color);
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .fila-bottom-sheet-item.selected .fila-bottom-sheet-item-check {
        opacity: 1;
    }

    /* Mobile select trigger button */
    .fila-mobile-select-trigger {
        display: none; /* Hidden by default, shown on mobile */
    }

    .fila-mobile-select-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0.75rem;
        background: white;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-size: 0.875rem;
        color: var(--gray-500);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .fila-mobile-select-trigger:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .fila-mobile-select-trigger.has-value {
        color: var(--gray-900);
    }

    .fila-mobile-select-trigger .material-symbols-outlined {
        font-size: 20px;
        color: var(--gray-400);
    }

    /* Hide native select on mobile when using bottom sheet */
    .fila-form-select.has-mobile-sheet {
        display: none;
    }
}

/* Shortener Form Dropdown - Same as custom */
.fila-shortener-dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
    padding: 8px;
}

.fila-dropdown-item {
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.2s;
    color: var(--gray-700);
    text-decoration: none;
}

.fila-dropdown-item:hover {
    background-color: var(--gray-50);
    color: var(--primary-color);
}

.fila-dropdown-item.active-selection {
    background-color: var(--primary-light);
    color: var(--primary-color);
    pointer-events: none; /* Prevent selecting twice */
    opacity: 0.6;
}

/* Create New Collection Button in Dropdown */
.fila-dropdown-item[data-action="create-new-collection"] {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: white !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
    transition: all 0.2s ease;
}

.fila-dropdown-item[data-action="create-new-collection"]:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
    color: white !important;
}

/* ========================================
   Modern Notifications (Solid Color Toast)
   ======================================== */
[data-notify="container"] {
    width: 380px;
    max-width: 90vw;
    border-radius: 12px !important;
    border: none !important;
    padding: 0 !important;
    overflow: hidden;
    cursor: default;
    font-family: inherit;
    z-index: 999999 !important;
    height: auto !important;
    bottom: auto !important;
    top: 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* The Flex Layout */
.fila-notify-layout {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    gap: 12px;
    position: relative;
}

/* Icon Styling - simple white icon */
.fila-notify-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fila-notify-icon .material-symbols-outlined {
    font-size: 22px;
    color: white;
}

/* Content Text - white on colored background */
.fila-notify-content {
    flex: 1;
    padding-right: 24px;
}

[data-notify="title"] {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
}

[data-notify="message"] {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.4;
    font-weight: 500;
}

/* Close Button - white */
button[data-notify="dismiss"] {
    position: absolute;
    right: 12px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    outline: none !important;
    align-self: center;
}

button[data-notify="dismiss"]:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Type Variations - Solid Colors */
.fila-notify-success {
    background: #10b981 !important;
}

.fila-notify-danger {
    background: #ef4444 !important;
}

.fila-notify-warning {
    background: #f59e0b !important;
}

.fila-notify-info {
    background: #3b82f6 !important;
}

/* Progress Bar */
[data-notify="progressbar"] {
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
}

[data-notify="progressbar"] .progress-bar {
    background: rgba(255, 255, 255, 0.5);
}

/* Mobile Specific Optimization */
@media (max-width: 768px) {
    [data-notify="container"] {
        width: calc(100% - 32px) !important;
        margin: 16px !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 12px !important;
    }

    /* Center close button vertically on mobile */
    [data-notify="container"] button[data-notify="dismiss"],
    .fila-notify-layout button[data-notify="dismiss"],
    button.close[data-notify="dismiss"] {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* Dark Mode - same solid colors work well */
[data-scheme="dark"] [data-notify="container"] {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* ========================================
   Badge "+X More" Counter Styling
   ======================================== */

/* Fix Tooltip Z-Index */
.tooltip {
    z-index: 1000000 !important; /* Ensure it sits on top of everything */
}

/* Make badges interactable */
.fila-badge-more,
.fila-badge.feature {
    cursor: pointer !important;
    touch-action: manipulation; /* Improves tap response on mobile */
    user-select: none;
    position: relative;
}

/* Style for the "+X" counter badge */
.fila-badge-more {
    background-color: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
    font-weight: 600;
}

.fila-badge-more:hover,
.fila-badge-more:active {
    background-color: var(--gray-200);
    color: var(--gray-800);
}

/* Mobile Specific Tweak: Ensure tooltips work on tap */
@media (max-width: 768px) {
    .fila-badge-more {
        /* Make it large enough to tap easily */
        padding: 4px 10px;
    }

    /* Mobile: Hide badges 2 and 3 (show only first badge) */
    .fila-badge-1,
    .fila-badge-2 {
        display: none !important;
    }

    /* Hide their parent <a> tags too to prevent whitespace gaps */
    a:has(.fila-badge-1),
    a:has(.fila-badge-2) {
        display: none !important;
    }

    /* Mobile: Show mobile "+X" badge, hide desktop one */
    .fila-badge-more-desktop {
        display: none !important;
    }

    .fila-badge-more-mobile {
        display: inline-flex !important;
    }

    /* Remove bottom margin from shortener on mobile */
    .fila-shortener-main {
        margin-bottom: 0 !important;
    }

    /* Remove top padding from shortener card on mobile */
    .fila-shortener-card {
        padding-top: 0 !important;
    }

    /* ADVANCED OPTIONS - MOBILE FORM STYLING */
    .fila-advanced-options .fila-form-control {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        border: 1px solid var(--gray-300) !important;
        border-radius: 8px !important;
        background: white !important;
        color: var(--gray-900) !important;
        transition: all 0.2s ease;
    }

    .fila-advanced-options .fila-form-control:focus {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
        outline: none !important;
    }

    /* Option groups spacing */
    .fila-advanced-options .fila-option-group {
        margin-bottom: 16px !important;
    }

    /* Labels */
    .fila-advanced-options .fila-option-label {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--gray-700) !important;
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Info icons on mobile - only target tooltip icons */
    .fila-advanced-options .fila-option-label [data-bs-toggle="tooltip"] {
        margin-left: auto !important;
        padding: 8px !important; /* Larger tap target */
        margin-right: -8px !important; /* Compensate padding to keep alignment */
    }

    /* Show info icon on mobile, hide desktop notice */
    .fila-info-icon-mobile {
        display: inline-block !important;
        margin-left: auto !important;
    }

    .fila-info-notice-desktop {
        display: none !important;
    }

    /* Advanced Options heading - match shortener heading size */
    .fila-options-title {
        font-size: 18px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        margin-bottom: 16px !important;
    }

    .fila-options-title .material-symbols-outlined:first-child {
        font-size: 24px !important;
    }

    /* Options grid - remove gaps on mobile */
    .fila-options-grid {
        gap: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Advanced options - reduce top margin on mobile */
    .fila-advanced-options {
        margin-top: 8px !important;
    }

    /* Show mobile submit button at bottom */
    .fila-mobile-submit-bottom {
        display: block !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .fila-mobile-submit-bottom .fila-btn {
        margin-bottom: 0 !important;
    }

    /* MOBILE BOTTOM SHEET (App-Like Drawer) */
    .fila-advanced-options .dropdown-menu,
    .fila-shortener-card .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: translate(0, 100%); /* Start hidden below screen */
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        border-radius: 20px 20px 0 0 !important; /* Round top corners */
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.15) !important;
        z-index: 999999 !important;
        max-height: 60vh !important; /* Max 60% screen height */
        display: block !important;
        opacity: 0;
        pointer-events: none;
    }

    /* When dropdown is open */
    .fila-advanced-options .dropdown-menu.show,
    .fila-shortener-card .dropdown-menu.show {
        transform: translate(0, 0) !important; /* Slide up */
        opacity: 1;
        pointer-events: auto;
    }

    /* Scrollable content inside sheet */
    .fila-shortener-dropdown-menu {
        overflow-y: auto !important;
        max-height: 50vh !important;
        padding: 16px !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Handle bar to look like a drawer */
    .fila-shortener-dropdown-menu::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--gray-300);
        border-radius: 2px;
        margin: 0 auto 16px auto;
    }

    /* Make items larger for touch */
    .fila-shortener-dropdown-menu .fila-dropdown-item {
        padding: 16px !important;
        font-size: 16px !important;
        border-bottom: 1px solid var(--gray-100);
    }

}

/* Desktop: Show all badges, hide mobile "+X" */
@media (min-width: 769px) {
    .fila-badge-more-mobile {
        display: none !important;
    }

    .fila-badge-more-desktop {
        display: inline-flex !important;
    }

    /* Desktop: Normal dropdown positioning (override any mobile styles) */
    .fila-advanced-options .dropdown-menu,
    .fila-shortener-card .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        bottom: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        transition: none !important;
        border-radius: 8px !important;
        padding: 8px !important;
        margin-top: 4px !important;
        border: 1px solid var(--gray-200) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
        max-height: 300px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Hide handle bar on desktop */
    .fila-shortener-dropdown-menu::before {
        display: none !important;
    }

    /* Show info notice on desktop, hide icon */
    .fila-info-notice-desktop {
        display: flex !important;
    }

    .fila-info-icon-mobile {
        display: none !important;
    }

    /* Hide the inline usage info icon on desktop - use the standalone one */
    .usage-info-icon-mobile {
        display: none !important;
    }

    /* Advanced Options heading - consistent size on desktop too */
    .fila-options-title {
        font-size: 20px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        margin-bottom: 20px !important;
    }

    .fila-options-title .material-symbols-outlined {
        font-size: 24px !important;
    }

    /* Hide mobile submit button on desktop */
    .fila-mobile-submit-bottom {
        display: none !important;
    }
}


/* ========================================
   Info Modal Styles (UTM Parameters, Deep Links, etc.)
   ======================================== */
.fila-info-section {
    margin-bottom: 24px;
}

.fila-info-section:last-child {
    margin-bottom: 0;
}

.fila-info-heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--fila-gray-900);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
}

[data-scheme="dark"] .fila-info-heading {
    color: var(--fila-gray-100);
}

.fila-info-text {
    font-size: 14px;
    color: var(--fila-gray-700);
    line-height: 1.6;
    margin: 0 0 12px 0;
}

[data-scheme="dark"] .fila-info-text {
    color: var(--fila-gray-300);
}

.fila-info-list {
    font-size: 14px;
    color: var(--fila-gray-700);
    line-height: 1.8;
    padding-left: 20px;
    margin: 0;
}

[data-scheme="dark"] .fila-info-list {
    color: var(--fila-gray-300);
}

.fila-info-list li {
    margin-bottom: 8px;
}

.fila-info-list li:last-child {
    margin-bottom: 0;
}

/* ========================================
   UTM Parameters Preview
   ======================================== */
.fila-utm-preview {
    margin-top: 0;
    padding: 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
}

[data-scheme="dark"] .fila-utm-preview {
    background: transparent;
}

.fila-utm-preview-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--fila-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fila-utm-preview-label .material-symbols-outlined {
    font-size: 16px;
}

[data-scheme="dark"] .fila-utm-preview-label {
    color: var(--fila-gray-400);
}

.fila-utm-preview-url {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;
    color: var(--fila-gray-700);
    background: var(--fila-gray-100);
    padding: 10px 12px;
    border-radius: 6px;
    border: none;
}

[data-scheme="dark"] .fila-utm-preview-url {
    background: var(--fila-gray-700);
    color: var(--fila-gray-200);
}

.fila-utm-preview-base {
    color: var(--fila-gray-600);
}

[data-scheme="dark"] .fila-utm-preview-base {
    color: var(--fila-gray-300);
}

.fila-utm-preview-params {
    color: var(--fila-primary);
    font-weight: 500;
}

[data-scheme="dark"] .fila-utm-preview-params {
    color: var(--fila-primary-light);
}

/* Parameter name input with datalist */
.fila-param-name-group {
    min-width: 140px;
    max-width: 180px;
}

.fila-param-name-input {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 13px;
}

/* =====================================================
   QR CODE CREATE PAGE - Modern Redesign
   ===================================================== */

/* Desktop: Tabs */
.qr-tabs {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fila-gray-200);
}

.qr-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 2px solid var(--fila-gray-200);
    border-radius: 12px;
    background: white;
    color: var(--fila-gray-600);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qr-tab:hover {
    border-color: var(--fila-primary);
    color: var(--fila-primary);
    background: rgba(76, 124, 245, 0.05);
}

.qr-tab.active {
    border-color: var(--fila-primary);
    background: rgba(76, 124, 245, 0.1);
    color: var(--fila-primary);
}

.qr-tab .material-symbols-outlined {
    font-size: 20px;
}

.qr-tab-badge {
    font-size: 11px;
    font-weight: 500;
    color: var(--fila-gray-500);
    background: var(--fila-gray-100);
    padding: 2px 8px;
    border-radius: 20px;
}

.qr-tab.active .qr-tab-badge {
    background: rgba(76, 124, 245, 0.2);
    color: var(--fila-primary);
}

/* Desktop: Icon Grid */
.qr-icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}

.qr-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px 12px;
    border: 2px solid var(--fila-gray-200);
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 110px;
}

.qr-icon-card:hover {
    border-color: var(--fila-primary);
    background: rgba(76, 124, 245, 0.03);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 124, 245, 0.15);
}

.qr-icon-card.active {
    border-color: var(--fila-primary);
    background: rgba(76, 124, 245, 0.1);
    box-shadow: 0 0 0 3px rgba(76, 124, 245, 0.2);
}

.qr-icon-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fila-gray-100);
    border-radius: 12px;
    color: var(--fila-gray-600);
    transition: all 0.2s ease;
}

.qr-icon-card:hover .qr-icon-card-icon,
.qr-icon-card.active .qr-icon-card-icon {
    background: rgba(76, 124, 245, 0.2);
    color: var(--fila-primary);
}

.qr-icon-card-icon svg {
    width: 24px;
    height: 24px;
}

.qr-icon-card-icon i {
    font-size: 22px;
    line-height: 1;
}

.qr-icon-card-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--fila-gray-700);
    text-align: center;
    line-height: 1.3;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-icon-card.active .qr-icon-card-label {
    color: var(--fila-primary);
    font-weight: 600;
}

/* Fixed Preview Panel on Desktop */
@media (min-width: 992px) {
    .qr-preview-sticky {
        position: fixed;
        top: 104px;
        z-index: 1; /* Lowest z-index - sits behind everything (dropdowns, notifications, modals) */
        /* Width is set dynamically via JavaScript to match parent column */
    }

    /* Compact QR preview image */
    .qr-preview-sticky #return-ajax img,
    .qr-preview-sticky #qr-preview img {
        max-width: 160px;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    /* Compact section padding */
    .qr-preview-sticky .fila-edit-section-content {
        padding: 12px !important;
    }
}

/* QR Form Sections */
.qr-form-section {
    animation: qrFadeIn 0.2s ease;
}

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

/* QR Page Mobile Responsive */
@media (max-width: 767.98px) {
    .qr-preview-sticky {
        position: static;
    }

    /* Smaller tabs on mobile */
    .qr-tabs {
        gap: 8px;
        padding-bottom: 6px;
    }

    .qr-icons-grid {
        padding-top: 6px;
    }

    .qr-tab {
        padding: 10px 12px;
        font-size: 13px;
        flex: 1;
        justify-content: center;
    }

    .qr-tab .material-symbols-outlined {
        font-size: 18px;
    }

    .qr-tab-badge {
        display: none;
    }

    /* Smaller icon cards on mobile - 4 columns */
    .qr-icons-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .qr-icon-card {
        padding: 10px 6px;
        border-radius: 10px;
        min-height: 85px;
    }

    .qr-icon-card-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .qr-icon-card-icon svg {
        width: 16px;
        height: 16px;
    }

    .qr-icon-card-icon i {
        font-size: 15px;
    }

    .qr-icon-card-label {
        font-size: 10px;
        min-height: 26px;
    }

    /* Consistent spacing for form groups on mobile */
    #qr-create-form .fila-option-group,
    #qr-create-form .fila-form-group,
    #qr-edit-form .fila-option-group,
    #qr-edit-form .fila-form-group {
        margin-bottom: 20px !important;
    }

    /* Round input field corners on mobile */
    #qr-create-form .fila-form-control,
    #qr-edit-form .fila-form-control {
        border-radius: 8px !important;
    }

    /* 12px margin between sections on mobile */
    #qr-create-form .fila-edit-section,
    #qr-edit-form .fila-edit-section {
        margin-bottom: 12px !important;
    }
}

/* Dark mode support */
[data-scheme="dark"] .qr-tab {
    background: var(--fila-gray-800);
    border-color: var(--fila-gray-600);
    color: var(--fila-gray-300);
}

[data-scheme="dark"] .qr-tab:hover,
[data-scheme="dark"] .qr-tab.active {
    border-color: var(--fila-primary);
    background: rgba(76, 124, 245, 0.15);
    color: #93c5fd;
}

[data-scheme="dark"] .qr-icon-card {
    background: var(--fila-gray-800);
    border-color: var(--fila-gray-600);
}

[data-scheme="dark"] .qr-icon-card:hover,
[data-scheme="dark"] .qr-icon-card.active {
    border-color: var(--fila-primary);
    background: rgba(76, 124, 245, 0.15);
}

[data-scheme="dark"] .qr-icon-card-icon {
    background: var(--fila-gray-700);
    color: var(--fila-gray-400);
}

[data-scheme="dark"] .qr-icon-card:hover .qr-icon-card-icon,
[data-scheme="dark"] .qr-icon-card.active .qr-icon-card-icon {
    background: rgba(76, 124, 245, 0.3);
    color: #93c5fd;
}

[data-scheme="dark"] .qr-icon-card-label {
    color: var(--fila-gray-300);
}

/* QR Color Picker - Modern Design */
.qr-color-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid var(--fila-gray-200);
    border-radius: 8px;
    padding: 4px 4px 4px 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hide Spectrum color picker if it gets auto-initialized */
.qr-color-picker .sp-replacer {
    display: none !important;
}

.qr-color-code {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 14px;
    color: var(--fila-gray-700);
    padding: 0 8px;
}

/* QR Logo Selection Grid */
.qr-logo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 767px) {
    .qr-logo-grid.mb-3 {
        margin-bottom: 1.5rem !important;
    }
}

.qr-logo-option {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid var(--fila-gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qr-logo-option:hover {
    border-color: var(--fila-gray-300);
}

.qr-logo-option.active {
    border-color: var(--fila-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.qr-logo-option img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.qr-logo-option .material-symbols-outlined {
    font-size: 24px;
    color: var(--fila-gray-400);
}

/* Fila Segmented Control (for logo size, etc.) */
.fila-segmented {
    display: flex;
    background: var(--fila-gray-100, #f3f4f6);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    width: 100%;
}

.fila-segmented input[type="radio"] {
    display: none;
}

.fila-segmented label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fila-gray-600, #4b5563);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

.fila-segmented label:hover {
    color: var(--fila-gray-800, #1f2937);
    background: var(--fila-gray-200, #e5e7eb);
}

.fila-segmented input[type="radio"]:checked + label {
    background: white;
    color: var(--fila-gray-900, #111827);
    border: 2px solid var(--fila-primary, #3b82f6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Dark mode support */
[data-theme="dark"] .fila-segmented {
    background: var(--fila-gray-800, #1f2937);
}

[data-theme="dark"] .fila-segmented label {
    color: var(--fila-gray-400, #9ca3af);
}

[data-theme="dark"] .fila-segmented label:hover {
    color: var(--fila-gray-200, #e5e7eb);
    background: var(--fila-gray-700, #374151);
}

[data-theme="dark"] .fila-segmented input[type="radio"]:checked + label {
    background: var(--fila-gray-700, #374151);
    color: white;
    border: 2px solid var(--fila-primary, #3b82f6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.qr-color-picker:focus-within {
    border-color: var(--fila-primary);
    box-shadow: 0 0 0 3px rgba(76, 124, 245, 0.15);
}

.qr-color-picker-swatch {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    background: none;
}

.qr-color-picker-swatch::-webkit-color-swatch-wrapper {
    padding: 0;
}

.qr-color-picker-swatch::-webkit-color-swatch {
    border: 1px solid var(--fila-gray-300);
    border-radius: 6px;
}

.qr-color-picker-swatch::-moz-color-swatch {
    border: 1px solid var(--fila-gray-300);
    border-radius: 6px;
}

.qr-color-picker-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 8px !important;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 13px;
    box-shadow: none !important;
}

.qr-color-picker-input:focus {
    outline: none;
    box-shadow: none !important;
}

/* Dark mode for color picker */
[data-scheme="dark"] .qr-color-picker {
    background: var(--fila-gray-800);
    border-color: var(--fila-gray-600);
}

[data-scheme="dark"] .qr-color-picker:focus-within {
    border-color: var(--fila-primary);
    box-shadow: 0 0 0 3px rgba(76, 124, 245, 0.2);
}

[data-scheme="dark"] .qr-color-picker-input {
    color: var(--fila-gray-200);
}

[data-scheme="dark"] .qr-color-picker-swatch::-webkit-color-swatch {
    border-color: var(--fila-gray-500);
}

[data-scheme="dark"] .qr-color-picker-swatch::-moz-color-swatch {
    border-color: var(--fila-gray-500);
}

/* Optional color picker label styling */
.fila-option-label .optional-label {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 400;
    color: var(--fila-gray-400);
    vertical-align: baseline;
}

[data-scheme="dark"] .fila-option-label .optional-label {
    color: var(--fila-gray-500);
}

/* Optional color picker (Eye Frame/Eye Color) */
.qr-color-optional {
    position: relative;
}

.qr-color-optional[data-optional="true"] .qr-color-picker-swatch {
    opacity: 0.4;
}

.qr-color-optional[data-optional="true"] .qr-color-code {
    color: var(--fila-gray-400);
    font-style: italic;
}

.qr-color-optional[data-optional="false"] .qr-color-reset {
    display: flex;
}

.qr-color-reset {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: auto;
    background: var(--fila-gray-100);
    border: 1px solid var(--fila-gray-300);
    border-radius: 6px;
    color: var(--fila-gray-500);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.qr-color-reset:hover {
    background: var(--fila-gray-200);
    color: var(--fila-gray-700);
    border-color: var(--fila-gray-400);
}

.qr-color-reset svg {
    width: 14px;
    height: 14px;
}

[data-scheme="dark"] .qr-color-reset {
    background: var(--fila-gray-700);
    border-color: var(--fila-gray-500);
    color: var(--fila-gray-400);
}

[data-scheme="dark"] .qr-color-reset:hover {
    background: var(--fila-gray-600);
    color: var(--fila-gray-200);
}

[data-scheme="dark"] .qr-color-optional[data-optional="true"] .qr-color-code {
    color: var(--fila-gray-500);
}

/* QR Download Group */
.fila-download-group {
    background: var(--fila-gray-100, #f3f4f6);
    border-radius: 12px;
    padding: 12px;
    transition: opacity 0.2s ease;
}

.fila-download-group.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.fila-download-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fila-gray-600, #4b5563);
    margin-bottom: 8px;
}

.fila-download-label .material-symbols-outlined {
    font-size: 18px;
}

.fila-download-options {
    display: flex;
    gap: 8px;
}

.fila-download-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fila-gray-700, #374151);
    background: white;
    border: 1px solid var(--fila-gray-200, #e5e7eb);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.fila-download-btn:hover {
    background: var(--fila-primary, #3b82f6);
    border-color: var(--fila-primary, #3b82f6);
    color: white;
    text-decoration: none;
}

/* Dark mode */
[data-scheme="dark"] .fila-download-group {
    background: var(--fila-gray-800, #1f2937);
}

[data-scheme="dark"] .fila-download-label {
    color: var(--fila-gray-400, #9ca3af);
}

[data-scheme="dark"] .fila-download-btn {
    background: var(--fila-gray-700, #374151);
    border-color: var(--fila-gray-600, #4b5563);
    color: var(--fila-gray-200, #e5e7eb);
}

[data-scheme="dark"] .fila-download-btn:hover {
    background: var(--fila-primary, #3b82f6);
    border-color: var(--fila-primary, #3b82f6);
    color: white;
}

/* ========================================
   QR Color Mode Toggle (Single/Gradient)
   ======================================== */
.qr-color-mode-toggle {
    display: inline-flex;
    background: var(--fila-gray-100, #f3f4f6);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}

.qr-color-mode-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fila-gray-600, #4b5563);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.qr-color-mode-btn:hover {
    color: var(--fila-gray-800, #1f2937);
    background: var(--fila-gray-200, #e5e7eb);
}

.qr-color-mode-btn.active {
    background: white;
    color: var(--fila-primary, #3b82f6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    font-weight: 600;
}

/* Dark mode */
[data-scheme="dark"] .qr-color-mode-toggle {
    background: var(--fila-gray-700, #374151);
}

[data-scheme="dark"] .qr-color-mode-btn {
    color: var(--fila-gray-400, #9ca3af);
}

[data-scheme="dark"] .qr-color-mode-btn:hover {
    color: var(--fila-gray-200, #e5e7eb);
    background: var(--fila-gray-600, #4b5563);
}

[data-scheme="dark"] .qr-color-mode-btn.active {
    background: var(--fila-gray-800, #1f2937);
    color: var(--fila-primary-light, #60a5fa);
}

/* ========================================
   QR Style Options (Matrix, Eye Frame, Eye Style)
   ======================================== */
.qr-style-options .btn,
[data-toggle="buttons"] .btn {
    transition: all 0.15s ease;
    border-color: var(--fila-gray-300, #d1d5db) !important;
}

.qr-style-options .btn:hover,
[data-toggle="buttons"] .btn:hover {
    border-color: var(--fila-primary, #3b82f6) !important;
    background: var(--fila-gray-50, #f9fafb) !important;
}

/* Selected state - when radio is checked */
.qr-style-options .btn:has(input:checked),
[data-toggle="buttons"] .btn:has(input:checked) {
    border-color: var(--fila-primary, #3b82f6) !important;
    background: rgba(59, 130, 246, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Dark mode */
[data-scheme="dark"] .qr-style-options .btn,
[data-scheme="dark"] [data-toggle="buttons"] .btn {
    background: var(--fila-gray-700, #374151) !important;
    border-color: var(--fila-gray-600, #4b5563) !important;
}

[data-scheme="dark"] .qr-style-options .btn:hover,
[data-scheme="dark"] [data-toggle="buttons"] .btn:hover {
    border-color: var(--fila-primary-light, #60a5fa) !important;
    background: var(--fila-gray-600, #4b5563) !important;
}

[data-scheme="dark"] .qr-style-options .btn:has(input:checked),
[data-scheme="dark"] [data-toggle="buttons"] .btn:has(input:checked) {
    border-color: var(--fila-primary-light, #60a5fa) !important;
    background: rgba(96, 165, 250, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* ========================================
   Fila Date Range Picker Button Styles
   Used in statistics pages for date filtering
   ======================================== */
.fila-date-range-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: var(--border-radius, 8px);
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 8px;
    min-width: 200px;
    font-weight: 500;
    color: var(--gray-700, #374151);
}

.fila-date-range-picker:hover {
    border-color: var(--primary-color, #4C7CF5);
    box-shadow: 0 0 0 3px rgba(76, 124, 245, 0.1);
    background: var(--gray-50, #f9fafb);
}

.fila-date-range-picker:focus {
    outline: none;
    border-color: var(--primary-color, #4C7CF5);
    box-shadow: 0 0 0 3px rgba(76, 124, 245, 0.1);
}

.fila-date-range-icon {
    color: var(--primary-color, #4C7CF5);
    font-size: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.fila-date-range-text {
    flex: 1;
    color: var(--gray-700, #374151);
    font-weight: 500;
    text-align: left;
}

.fila-date-range-picker input[type="hidden"] {
    display: none;
}

/* Dark mode for date range picker */
[data-scheme="dark"] .fila-date-range-picker {
    background: var(--gray-100, #1f2937);
    border-color: var(--gray-200, #374151);
    color: var(--gray-300, #d1d5db);
}

[data-scheme="dark"] .fila-date-range-picker:hover {
    background: var(--gray-200, #374151);
    border-color: var(--primary-color, #4C7CF5);
}

[data-scheme="dark"] .fila-date-range-text {
    color: var(--gray-300, #d1d5db);
}

/* Responsive date range picker */
@media (max-width: 768px) {
    .fila-date-range-picker {
        min-width: auto;
        width: 100%;
    }

    /* When used in flex container with tabs */
    .d-flex.align-items-center.flex-wrap .fila-date-range-picker {
        width: auto;
        flex-shrink: 0;
    }
}

/* ========================================
   Analytics Cards - Shared Styles
   (Used by both user/stats.php and stats/index.php)
   ======================================== */

/* Analytics container */
.fila-analytics-container {
    max-width: 100%;
}

/* Analytics row - two cards side by side */
.fila-analytics-row {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    max-width: 100%;
    align-items: stretch;
}

.fila-analytics-row > .fila-analytics-card {
    flex: 1;
    min-width: 0;
}

/* Analytics card base */
.fila-analytics-card {
    background: white;
    border-radius: var(--border-radius, 12px);
    box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,0.1));
    border: 1px solid var(--gray-200, #E5E7EB);
    overflow: hidden;
    transition: all 0.3s ease;
    max-width: 100%;
}

.fila-analytics-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,0.15));
}

/* Card header */
.fila-analytics-card-header {
    padding: 20px 24px 16px 24px;
    border-bottom: 1px solid var(--gray-200, #E5E7EB);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fila-analytics-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900, #111827);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fila-analytics-card-icon {
    font-size: 20px;
    color: var(--primary-color, #3B82F6);
}

/* Card body */
.fila-analytics-card-body {
    padding: 24px;
    max-height: 400px;
    overflow-y: auto;
}

/* Chart body - fixed height for charts */
.fila-chart-body {
    padding: 24px;
    height: 350px;
    overflow: hidden;
}

.fila-chart-body canvas {
    max-width: 100% !important;
}

/* Map body */
.fila-map-body {
    padding: 20px;
    height: 400px;
    overflow: hidden;
}

#visitor-map {
    width: 100%;
    height: 100%;
    max-width: 100%;
}

#visitor-map svg {
    max-width: 100%;
}

/* Map container */
.fila-map-container {
    height: 350px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-100, #F3F4F6);
    position: relative;
}

/* Map zoom buttons */
.fila-map-container .jvm-zoom-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
    left: 10px !important;
}

.fila-map-container .jvm-zoom-btn.jvm-zoomin {
    top: 10px !important;
}

.fila-map-container .jvm-zoom-btn.jvm-zoomout {
    top: 48px !important;
}

/* Visitor Map Card - no padding, no top corners for seamless header-to-map */
#visitorMapCard {
    padding: 0 !important;
}

#visitorMapCard .fila-map-container,
#visitorMapCard .fila-map-container svg {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Data lists */
.fila-data-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fila-data-list li {
    padding: 12px 0;
    border-bottom: none;
    position: relative;
}

/* Hover effect for list items */
.fila-data-list li::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -24px;
    right: -24px;
    background-color: transparent;
    transition: background-color 0.2s ease;
    pointer-events: none;
    z-index: -1;
}

.fila-data-list li:hover::before {
    background-color: var(--gray-50, #F9FAFB);
}

/* Stat item row with progress bar */
.stat-item-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
}

.stat-item-row img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
    margin: 4px;
}

.stat-item-name {
    font-weight: 600;
    color: var(--gray-900, #111827);
    white-space: nowrap;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.stat-item-bar-container {
    flex: 1;
    height: 8px;
    background: transparent;
    border-radius: 4px;
    overflow: hidden;
    min-width: 60px;
}

.stat-item-bar {
    height: 100%;
    background: var(--primary-color, #3B82F6);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.stat-item-percentage {
    color: var(--gray-500, #6B7280);
    font-size: 14px;
    font-weight: 500;
    width: 45px;
    text-align: right;
    flex-shrink: 0;
}

.stat-item-row .badge {
    margin-left: 0 !important;
    min-width: 45px;
    text-align: center;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
}

.stat-item-row .referrer-icon {
    width: 24px;
    height: 24px;
    margin: 4px;
    flex-shrink: 0;
    border-radius: 4px;
}

/* City toggle button for countries */
.city-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(76, 124, 245, 0.08);
    color: var(--primary-color, #3B82F6);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.city-toggle-btn .material-symbols-outlined {
    font-size: 18px;
}

.city-toggle-btn:hover {
    background: rgba(76, 124, 245, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(76, 124, 245, 0.2);
}

.city-toggle-btn.active {
    background: var(--primary-color, #3B82F6);
    color: #fff;
    box-shadow: 0 2px 4px rgba(76, 124, 245, 0.3);
}

/* Country item needs column layout for accordion */
.country-item {
    display: flex !important;
    flex-direction: column;
}

/* City accordion */
.city-accordion {
    display: none;
    margin-left: 30px;
    margin-right: 114px;
    margin-top: 8px;
    margin-bottom: 4px;
    padding: 12px 16px;
    background: var(--gray-50, #F9FAFB);
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    width: calc(100% - 30px - 114px);
}

.city-accordion.open {
    display: block;
}

/* City row */
.city-row {
    display: flex;
    align-items: center;
    padding: 6px 0;
    gap: 12px;
}

.city-row:last-child {
    padding-bottom: 0;
}

.city-row:first-child {
    padding-top: 0;
}

.city-row .city-name {
    font-weight: 500;
    color: var(--gray-700, #374151);
    width: 148px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.city-row .city-bar-container {
    flex: 1;
    height: 4px;
    background: var(--gray-100, #F3F4F6);
    border-radius: 2px;
    overflow: hidden;
    min-width: 40px;
}

.city-row .city-bar {
    height: 100%;
    background: var(--primary-color, #3B82F6);
    border-radius: 2px;
    transition: width 0.3s ease;
    opacity: 0.45;
}

.city-row .city-clicks {
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 40px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #EFF6FF;
    color: #3B82F6;
    text-align: center;
}

/* Loading and empty states for city accordion */
.city-accordion-loading {
    padding: 4px 0;
    color: var(--gray-500, #6B7280);
    font-size: 13px;
}

.city-accordion-empty {
    padding: 4px 0;
    color: var(--gray-400, #9CA3AF);
    font-size: 13px;
    font-style: italic;
}

/* Empty states */
.fila-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--gray-500, #6B7280);
}

.fila-empty-state-icon {
    font-size: 48px;
    color: var(--gray-300, #D1D5DB);
    margin-bottom: 16px;
}

.fila-empty-state-icon .material-symbols-outlined {
    font-size: 48px;
}

.fila-empty-state-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-700, #374151);
    margin: 0 0 8px 0;
}

.fila-empty-state-text {
    font-size: 14px;
    color: var(--gray-500, #6B7280);
    margin: 0;
}

/* Loading spinner */
.fila-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

/* Chart wrapper */
.fila-chart-wrapper {
    position: relative;
    width: 100%;
    height: 350px;
}

.fila-chart-wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Thin, light scrollbars for card bodies */
.fila-analytics-card-body::-webkit-scrollbar {
    width: 6px;
}

.fila-analytics-card-body::-webkit-scrollbar-thumb {
    background-color: #e5e7eb;
    border-radius: 4px;
}

.fila-analytics-card-body::-webkit-scrollbar-track {
    background: transparent;
}

/* Responsive - Analytics cards */
@media (max-width: 992px) {
    .fila-analytics-row {
        flex-direction: column;
    }

    .fila-analytics-card-header,
    .fila-analytics-card-body,
    .fila-chart-body {
        padding: 16px;
    }

    .fila-data-list li::before {
        left: -16px;
        right: -16px;
    }

    .stat-item-name {
        width: 120px;
    }

    .city-accordion {
        margin-right: 80px;
        width: calc(100% - 30px - 80px);
    }
}

@media (max-width: 576px) {
    .stat-item-name {
        width: 100px;
    }

    .stat-item-bar-container {
        min-width: 40px;
    }

    .city-accordion {
        margin-left: 20px;
        margin-right: 60px;
        width: calc(100% - 20px - 60px);
    }

    .city-row .city-name {
        width: 100px;
    }
}

/* Dark mode - Analytics cards */
[data-scheme="dark"] .fila-analytics-card,
[data-theme="dark"] .fila-analytics-card {
    background: var(--gray-800, #1F2937);
    border-color: var(--gray-700, #374151);
}

[data-scheme="dark"] .fila-analytics-card-header,
[data-theme="dark"] .fila-analytics-card-header {
    border-color: var(--gray-700, #374151);
}

[data-scheme="dark"] .fila-analytics-card-title,
[data-theme="dark"] .fila-analytics-card-title {
    color: var(--gray-100, #F3F4F6);
}

[data-scheme="dark"] .fila-data-list li:hover::before,
[data-theme="dark"] .fila-data-list li:hover::before {
    background-color: var(--gray-700, #374151);
}

[data-scheme="dark"] .stat-item-name,
[data-theme="dark"] .stat-item-name {
    color: var(--gray-100, #F3F4F6);
}

[data-scheme="dark"] .fila-map-container,
[data-theme="dark"] .fila-map-container {
    background: var(--gray-700, #374151);
}

[data-scheme="dark"] .city-toggle-btn,
[data-theme="dark"] .city-toggle-btn {
    background: rgba(76, 124, 245, 0.12);
}

[data-scheme="dark"] .city-toggle-btn:hover,
[data-theme="dark"] .city-toggle-btn:hover {
    background: rgba(76, 124, 245, 0.2);
    box-shadow: 0 2px 4px rgba(76, 124, 245, 0.25);
}

[data-scheme="dark"] .city-accordion,
[data-theme="dark"] .city-accordion {
    background: var(--gray-700, #374151);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

[data-scheme="dark"] .city-row .city-name,
[data-theme="dark"] .city-row .city-name {
    color: var(--gray-200, #E5E7EB);
}

[data-scheme="dark"] .city-row .city-bar-container,
[data-theme="dark"] .city-row .city-bar-container {
    background: var(--gray-600, #4B5563);
}

[data-scheme="dark"] .city-row .city-clicks,
[data-theme="dark"] .city-row .city-clicks {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}

[data-scheme="dark"] .fila-empty-state-title,
[data-theme="dark"] .fila-empty-state-title {
    color: var(--gray-300, #D1D5DB);
}

[data-scheme="dark"] .fila-analytics-card-body::-webkit-scrollbar-thumb,
[data-theme="dark"] .fila-analytics-card-body::-webkit-scrollbar-thumb {
    background-color: var(--gray-600, #4B5563);
}

[data-scheme="dark"] .stat-item-bar-container,
[data-theme="dark"] .stat-item-bar-container {
    background: var(--gray-600, #4B5563);
}

[data-scheme="dark"] .stat-item-bar,
[data-theme="dark"] .stat-item-bar {
    background: var(--primary-color, #3B82F6);
}

/* Dark mode form checkboxes and switches */
[data-scheme="dark"] .form-check-input,
[data-theme="dark"] .form-check-input,
.dark-mode .form-check-input {
    background-color: #334155;
    border-color: #475569;
}

[data-scheme="dark"] .form-check-input:checked,
[data-theme="dark"] .form-check-input:checked,
.dark-mode .form-check-input:checked {
    background-color: #4C7CF5 !important;
    border-color: #4C7CF5 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

[data-scheme="dark"] .form-switch .form-check-input,
[data-theme="dark"] .form-switch .form-check-input,
.dark-mode .form-switch .form-check-input {
    background-color: #475569;
    border-color: #475569;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cbd5e1'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
}

[data-scheme="dark"] .form-switch .form-check-input:checked,
[data-theme="dark"] .form-switch .form-check-input:checked,
.dark-mode .form-switch .form-check-input:checked {
    background-color: #4C7CF5 !important;
    border-color: #4C7CF5 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
}

[data-scheme="dark"] .form-check-label,
[data-theme="dark"] .form-check-label,
.dark-mode .form-check-label {
    color: #e2e8f0;
}

/* ========================================
   Floating Feedback Widget
   ======================================== */

/* Feedback Tab Button - Right Side */
.feedback-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background: linear-gradient(180deg, #0891b2 0%, #06b6d4 100%);
    color: white;
    padding: 16px 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    box-shadow: -2px 0 10px rgba(8, 145, 178, 0.3);
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Only apply hover effects on devices with mouse (prevents mobile touch glitches) */
@media (hover: hover) {
    .feedback-tab:hover {
        padding-right: 14px;
        box-shadow: -4px 0 15px rgba(8, 145, 178, 0.4);
    }
}

.feedback-tab .material-symbols-outlined {
    font-size: 18px;
    writing-mode: horizontal-tb;
}

.feedback-tab.hidden {
    transform: translateY(-50%) translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* Minimized state - shows just 3px peek */
.feedback-tab.minimized {
    transform: translateY(-50%) translateX(calc(100% - 3px));
}

/* On peek state, show the full tab */
.feedback-tab.minimized.peek {
    transform: translateY(-50%) translateX(0);
}

/* On hover when minimized - only for devices with mouse */
@media (hover: hover) {
    .feedback-tab.minimized:hover:not(.force-hidden) {
        transform: translateY(-50%) translateX(0);
    }
}

/* Force hidden state - prevents hover from showing tab after clicking hide */
.feedback-tab.minimized.force-hidden {
    transform: translateY(-50%) translateX(calc(100% - 3px)) !important;
}

/* Hide the close button when minimized (until peeked/hovered) */
.feedback-tab.minimized .feedback-hide-btn {
    opacity: 0;
}

.feedback-tab.minimized.peek .feedback-hide-btn {
    opacity: 1;
}

@media (hover: hover) {
    .feedback-tab.minimized:hover .feedback-hide-btn {
        opacity: 1;
    }
}

/* Feedback Panel */
.feedback-panel {
    position: fixed;
    right: -400px;
    top: 50%;
    transform: translateY(-50%);
    width: 360px;
    max-width: calc(100vw - 20px);
    background: white;
    border-radius: 16px 0 0 16px;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    transition: right 0.3s ease;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.feedback-panel.open {
    right: 0;
}

.feedback-panel-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    border-radius: 16px 0 0 0;
    color: white;
}

.feedback-panel-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feedback-panel-header h3 .material-symbols-outlined {
    font-size: 22px;
}

.feedback-panel-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    position: relative;
}

/* Create invisible 48x48px touch target around close button */
.feedback-panel-close::after {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
}

/* Only apply hover effects on devices with mouse */
@media (hover: hover) {
    .feedback-panel-close:hover {
        background: rgba(255, 255, 255, 0.3);
    }
}

.feedback-panel-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.feedback-form-group {
    margin-bottom: 20px;
}

.feedback-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.feedback-form-group textarea {
    width: 100%;
    min-height: 140px;
    padding: 14px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.feedback-form-group textarea:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.feedback-form-group textarea::placeholder {
    color: var(--gray-400);
}

.feedback-char-count {
    text-align: right;
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 6px;
}

.feedback-submit-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.feedback-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.feedback-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.feedback-submit-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Success State */
.feedback-success {
    text-align: center;
    padding: 40px 20px;
}

.feedback-success-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.feedback-success-icon .material-symbols-outlined {
    font-size: 32px;
    color: white;
}

.feedback-success h4 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--gray-800);
}

.feedback-success p {
    margin: 0;
    color: var(--gray-500);
    font-size: 14px;
    line-height: 1.5;
}

/* Hide Feedback Button - Small X */
.feedback-hide-btn {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 20px;
    height: 20px;
    background: var(--gray-600);
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

/* Only apply hover effects on devices with mouse */
@media (hover: hover) {
    .feedback-hide-btn:hover {
        background: var(--gray-800);
        transform: scale(1.1);
    }
}

/* Overlay */
.feedback-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.feedback-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .feedback-tab {
        padding: 12px 8px;
        font-size: 11px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .feedback-tab.hidden {
        transform: translateY(-50%) translateX(100%);
    }

    .feedback-tab.minimized {
        transform: translateY(-50%) translateX(calc(100% - 3px));
    }

    /* Larger invisible touch target for minimized tab on mobile */
    .feedback-tab.minimized::before {
        content: '';
        position: absolute;
        top: -10px;
        bottom: -10px;
        left: -20px; /* Extend touch area to the left */
        right: 0;
    }

    .feedback-panel {
        width: 100%;
        max-width: 100%;
        right: -100%;
        top: 0;
        transform: none;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .feedback-panel.open {
        right: 0;
    }

    .feedback-panel-header {
        border-radius: 0;
        padding: 16px 20px;
    }

    /* Larger close button on mobile for easier tapping */
    .feedback-panel-close {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.25);
    }

    .feedback-panel-body {
        padding: 20px;
    }
}

/* Dark Mode */
[data-scheme="dark"] .feedback-panel,
[data-theme="dark"] .feedback-panel {
    background: var(--gray-800);
}

[data-scheme="dark"] .feedback-panel-header,
[data-theme="dark"] .feedback-panel-header {
    border-bottom-color: var(--gray-700);
}

[data-scheme="dark"] .feedback-form-group label,
[data-theme="dark"] .feedback-form-group label {
    color: var(--gray-300);
}

[data-scheme="dark"] .feedback-form-group textarea,
[data-theme="dark"] .feedback-form-group textarea {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-200);
}

[data-scheme="dark"] .feedback-form-group textarea:focus,
[data-theme="dark"] .feedback-form-group textarea:focus {
    border-color: #0891b2;
}

[data-scheme="dark"] .feedback-success h4,
[data-theme="dark"] .feedback-success h4 {
    color: var(--gray-200);
}

[data-scheme="dark"] .feedback-success p,
[data-theme="dark"] .feedback-success p {
    color: var(--gray-400);
}

/* Dark Mode - .dark-mode class */
.dark-mode .feedback-panel {
    background: #1e293b;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.4);
}

.dark-mode .feedback-panel-header {
    border-bottom-color: var(--dark-border);
}

.dark-mode .feedback-panel-header h3 {
    color: var(--dark-text);
}

.dark-mode .feedback-panel-body {
    background: #1e293b;
}

.dark-mode .feedback-form-group label {
    color: var(--dark-text-muted);
}

.dark-mode .feedback-form-group textarea {
    background: var(--dark-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

.dark-mode .feedback-form-group textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.2);
}

.dark-mode .feedback-form-group textarea::placeholder {
    color: var(--dark-text-muted);
}

.dark-mode .feedback-char-count {
    color: var(--dark-text-muted);
}

.dark-mode .feedback-success h4 {
    color: var(--dark-text);
}

.dark-mode .feedback-success p {
    color: var(--dark-text-muted);
}

/* =====================================================
   FOOTER STYLES - Main Landing Page Footer
   ===================================================== */

#footer-main {
    background-color: var(--fila-gray-50, #f8fafc);
    border-top: 1px solid var(--fila-gray-200, #e2e8f0);
}

/* Footer Headings */
.footer-heading {
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fila-gray-800, #1e293b);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bs-primary, #f87171);
    display: inline-block;
}

/* Footer Links List */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.625rem;
}

.footer-links li a {
    color: var(--fila-gray-600, #475569);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}

.footer-links li a:hover {
    color: var(--bs-primary, #f87171);
    padding-left: 4px;
}

/* Footer Partner Badge */
.footer-partner-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--fila-gray-200, #e2e8f0);
    font-size: 0.875rem;
}

.footer-partner-badge img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Footer Social Links */
.footer-social-links {
    display: flex;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--fila-gray-200, #e2e8f0);
    color: var(--fila-gray-600, #475569);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.footer-social-icon:hover {
    background: var(--bs-primary, #f87171);
    border-color: var(--bs-primary, #f87171);
    color: #fff;
    transform: translateY(-2px);
}

/* Footer Company Info */
.footer-company-info {
    font-size: 0.9375rem;
    line-height: 1.6;
}

.footer-company-info p {
    margin: 0;
}

.footer-duns {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--fila-gray-100, #f1f5f9);
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 0.8125rem;
    color: var(--fila-gray-700, #334155);
    margin-top: 0.5rem;
}

/* Footer Bottom Bar */
.footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--fila-gray-200, #e2e8f0);
}

.footer-bottom-links {
    gap: 0;
}

.footer-bottom-links .nav-link {
    color: var(--fila-gray-600, #475569);
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
    transition: color 0.2s ease;
}

.footer-bottom-links .nav-link:hover {
    color: var(--bs-primary, #f87171);
}

/* Coming Soon Badge */
.footer-links .badge.bg-warning {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 0.25rem;
}

/* Dark Mode Footer Styles */
[data-theme="dark"] #footer-main {
    background-color: var(--bg-primary, #0f172a);
    border-top-color: var(--bs-border-color, #485263);
}

[data-theme="dark"] .footer-heading {
    color: #fff;
}

[data-theme="dark"] .footer-links li a {
    color: var(--fila-gray-400, #94a3b8);
}

[data-theme="dark"] .footer-links li a:hover {
    color: var(--bs-primary, #f87171);
}

[data-theme="dark"] .footer-partner-badge {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--bs-border-color, #485263);
}

[data-theme="dark"] .footer-partner-badge span {
    color: #fff;
}

[data-theme="dark"] .footer-social-icon {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--bs-border-color, #485263);
    color: #fff;
}

[data-theme="dark"] .footer-social-icon:hover {
    background: var(--bs-primary, #f87171);
    border-color: var(--bs-primary, #f87171);
    color: #fff;
}

[data-theme="dark"] .footer-company-info p,
[data-theme="dark"] .footer-company-info strong {
    color: #fff;
}

[data-theme="dark"] .footer-duns {
    background: var(--bg-secondary, #1e293b);
    color: var(--fila-gray-300, #cbd5e1);
}

[data-theme="dark"] .footer-bottom {
    border-top-color: var(--bs-border-color, #485263);
}

[data-theme="dark"] .footer-bottom-links .nav-link {
    color: var(--fila-gray-400, #94a3b8);
}

[data-theme="dark"] .footer-bottom-links .nav-link:hover {
    color: var(--bs-primary, #f87171);
}

[data-theme="dark"] .footer-bottom .copyright a {
    color: var(--bs-primary, #f87171);
}

/* Responsive Footer Styles */
@media (max-width: 991px) {
    .footer-heading {
        margin-bottom: 0.75rem;
    }

    .footer-links li {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 767px) {
    #footer-main {
        text-align: center;
    }

    .footer-heading {
        display: inline-block;
        border-bottom: 2px solid var(--bs-primary, #f87171);
        padding-bottom: 0.5rem;
    }

    .footer-partner-badge {
        justify-content: center;
    }

    .footer-social-links {
        justify-content: center;
    }

    .footer-company-info {
        text-align: left;
    }

    .footer-company-info p strong,
    .footer-company-info p {
        text-align: left;
    }

    .footer-bottom {
        margin-top: 2rem;
        padding-top: 1rem;
    }

    .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center !important;
    }

    .footer-bottom-links .nav-link {
        padding: 0.5rem;
    }
}

/* ========================================
   Danger Icon Button (Reset Stats)
   ======================================== */
.fila-btn-danger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--border-radius);
    color: #dc2626;
    text-decoration: none;
    transition: all 0.2s ease;
}

.fila-btn-danger-icon:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
    text-decoration: none;
}

.fila-btn-danger-icon .material-symbols-outlined {
    font-size: 20px;
}

[data-scheme="dark"] .fila-btn-danger-icon {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.4);
}

/* ========================================
   Icon Wall - Landing Page App Icons Grid
   ======================================== */
.lp3-icon-wall {
    margin-top: 2rem;
    text-align: center;
}

.lp3-icon-wall-label {
    color: var(--lp2-white);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.lp3-icon-wall-label a {
    color: var(--lp2-white);
    text-decoration: underline;
}

.lp3-icon-wall-label a:hover {
    color: var(--lp2-white);
    opacity: 0.8;
}

.lp3-icon-wall-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.75rem;
    max-width: 480px;
    margin: 0 auto;
}

.lp3-icon-wall-grid img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin: 0 auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    object-fit: contain;
}

.lp3-icon-wall-grid img:hover {
    transform: scale(1.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments for icon wall */
@media (max-width: 576px) {
    .lp3-icon-wall-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 0.4rem;
        max-width: 100%;
        padding: 0 0.5rem;
    }

    .lp3-icon-wall-grid img {
        width: 36px;
        height: 36px;
        padding: 4px;
        border-radius: 10px;
    }
}

@media (max-width: 400px) {
    .lp3-icon-wall-grid img {
        width: 32px;
        height: 32px;
        padding: 3px;
        border-radius: 8px;
    }
}

/* ========================================
   Checkout Page - Stripe Input Matching
   ======================================== */
.stripe-match-input {
    font-size: 16px !important;
}

.stripe-match-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
    opacity: 1; /* Firefox fix */
}

.stripe-match-input::-webkit-input-placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.stripe-match-input::-moz-placeholder {
    color: #9ca3af;
    font-weight: 400;
    opacity: 1;
}

.stripe-match-input:-ms-input-placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.stripe-match-input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    outline: none;
}

/* ========================================
   Checkout Page Mobile Optimizations
   ======================================== */
@media (max-width: 768px) {
    /* 1. Mobile Header - Compact single row */
    .checkout-header-mobile {
        padding: 0.75rem 0;
        background: white;
        border-bottom: 1px solid #e5e7eb;
    }

    /* Hide headline section on mobile - replaced by compact header */
    .checkout-headline,
    .checkout-subtext,
    .text-center.mb-4:has(.checkout-headline) {
        display: none !important;
    }

    /* Fallback for browsers without :has() support */
    .checkout-content > .container > .row > div > .text-center:first-child {
        display: none !important;
    }

    /* Reduce top section padding */
    .bg-light.py-3 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .text-center.mb-4 {
        margin-bottom: 0.75rem !important;
    }

    /* 2. Tighten Price Card */
    .checkout-price-container {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.2rem !important;
        padding: 0.5rem 0.75rem !important; /* Tighter vertical padding */
    }

    .checkout-price-label {
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        color: #6b7280 !important;
        margin-bottom: 0 !important;
    }

    .checkout-price-value {
        flex-direction: column !important;
        align-items: center !important;
    }

    .checkout-price-value #final-total {
        font-size: 1.75rem !important;
        line-height: 1.2;
    }

    .checkout-price-currency {
        margin-left: 0 !important;
        margin-top: 0.1rem;
        text-align: center;
    }

    /* Combine USD and Tax incl. on same line */
    .checkout-price-currency div {
        display: inline !important;
        font-size: 0.65rem !important;
    }

    .checkout-price-currency div:first-child::after {
        content: ' · ';
    }

    /* Blue card wrapper - tighter */
    .card.border-0.mb-3[style*="linear-gradient"] {
        margin-bottom: 0.75rem !important;
    }

    .card.border-0.mb-3[style*="linear-gradient"] .card-body {
        padding: 0.75rem !important;
    }

    /* 3. Consolidate Value Props - Tighter spacing */
    .checkout-plan-info {
        margin-left: 0 !important;
        margin-top: 0.5rem;
    }

    .checkout-plan-line {
        margin-bottom: 0.4rem !important; /* Tighter */
        font-size: 0.8rem !important;
        padding-left: 1.5rem;
        position: relative;
        line-height: 1.4;
    }

    .checkout-plan-line i {
        position: absolute;
        left: 0;
        top: 0.1rem;
        font-size: 0.85rem;
    }

    .checkout-cancel-line {
        font-size: 0.8rem !important;
        padding-left: 1.5rem;
        position: relative;
        line-height: 1.4;
    }

    .checkout-cancel-line i {
        position: absolute;
        left: 0;
        top: 0.1rem;
        font-size: 0.85rem;
    }

    /* 4. Streamline Payment Section */
    .card.border-0.shadow-sm.mb-2 {
        margin-bottom: 0.5rem !important;
    }

    .card.border-0.shadow-sm.mb-2 .card-body {
        padding: 0.75rem !important;
    }

    /* PayPal option button - smaller */
    .paypal-option-btn {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* 5. Form Field Tweaks (scoped to checkout) */
    /* Stripe form labels - smaller */
    .checkout-content label,
    .checkout-content .form-label {
        font-size: 0.7rem !important;
        font-weight: 500 !important;
        margin-bottom: 0.25rem !important;
        letter-spacing: 0.3px;
    }

    /* Reduce gaps between form rows in checkout */
    .checkout-content .mb-3 {
        margin-bottom: 0.5rem !important;
    }

    .checkout-content .mb-2 {
        margin-bottom: 0.4rem !important;
    }

    /* Payment method header */
    .checkout-content h5 {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Submit button area */
    .checkout-submit-btn,
    .checkout-content button[type="submit"] {
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem !important;
    }

    /* Stripe Elements container - tighter */
    #stripe-payment-element-container {
        padding: 0 !important;
    }

    /* "Enter card details" header row */
    .checkout-content .d-flex.align-items-center.justify-content-between.mb-3 {
        margin-bottom: 0.5rem !important;
    }

    /* 6. Hide input icons on mobile to give more space for text */
    .input-icon-left {
        display: none !important;
    }

    /* Hide bottom-right Stripe badge on mobile (shown inline with Card Number label instead) */
    .stripe-badge-corner {
        display: none !important;
    }

    /* Card Number label row on mobile - label has its own margin */
    .card-number-label-row {
        margin-bottom: 0 !important;
    }

    .stripe-badge-inline {
        line-height: 1;
        display: flex;
        align-items: center;
    }

    /* Remove left padding since icons are hidden */
    #card-expiry-element,
    #card-cvc-element,
    input#card-name,
    input#card-zip {
        padding-left: 12px !important;
    }

    /* Accepted cards icons - smaller on mobile */
    .accepted-cards img {
        height: 14px !important;
    }

    /* Secure payment image - reduce top margin */
    .secure-payment-img {
        margin-top: 10px !important;
    }
}

/* ========================================
   Desktop Layout - Prevent Horizontal Scroll
   Fix for stats page and other pages with sidebar
   ======================================== */
@media (min-width: 769px) {
    /* Constrain main content width when sidebar is visible */
    .fila-main {
        max-width: calc(100vw - 280px);
        overflow-x: hidden;
    }

    /* When sidebar is collapsed */
    .fila-sidebar.collapsed + .fila-main {
        max-width: calc(100vw - 80px);
    }
}

/* ========================================
   COMPREHENSIVE DARK MODE STYLES
   Using .dark-mode class (set by JavaScript)
   ======================================== */

/* Dark Mode CSS Custom Properties Override */
.dark-mode {
    --gray-50: #0f172a;
    --gray-100: #1e293b;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #64748b;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #f1f5f9;
    --gray-900: #f8fafc;
    --primary-light: rgba(76, 124, 245, 0.15);
}

/* Base Body and Wrapper */
.dark-mode,
.dark-mode body {
    background-color: #0f172a !important;
    color: #e2e8f0;
}

.dark-mode .fila-wrapper {
    background-color: #0f172a;
}

/* Sidebar */
.dark-mode .fila-sidebar {
    background: #1e293b;
    border-right-color: #334155;
}

.dark-mode .fila-sidebar-brand {
    border-bottom-color: #334155;
    color: #f8fafc;
}

.dark-mode .fila-nav-link {
    color: #94a3b8;
}

.dark-mode .fila-nav-link:hover {
    color: #60a5fa;
    background-color: rgba(96, 165, 250, 0.1);
}

.dark-mode .fila-nav-link.active {
    color: #60a5fa;
    background-color: rgba(96, 165, 250, 0.15);
    border-right-color: #60a5fa;
}

.dark-mode .fila-nav-section,
.dark-mode .fila-nav-section-toggle {
    color: #64748b;
}

.dark-mode .fila-nav-section-toggle:hover {
    color: #94a3b8;
}

.dark-mode .fila-sidebar::-webkit-scrollbar-thumb {
    background: #475569;
}

/* Mobile Sidebar (Offcanvas) */
@media (max-width: 768px) {
    .dark-mode .fila-sidebar.offcanvas {
        background: #1e293b;
        border-right-color: #334155;
    }
}

/* Header */
.dark-mode .fila-header {
    background: #1e293b;
    border-bottom-color: #334155;
}

.dark-mode .fila-sidebar-toggle {
    color: #94a3b8;
}

.dark-mode .fila-sidebar-toggle:hover {
    background-color: #334155;
    color: #f8fafc;
}

.dark-mode .fila-header-button {
    color: #94a3b8;
}

.dark-mode .fila-header-button:hover {
    background-color: #334155;
    color: #f8fafc;
}

.dark-mode .fila-user-name {
    color: #f8fafc;
}

.dark-mode .fila-user-role {
    color: #94a3b8;
}

.dark-mode .fila-user-button:hover {
    background-color: #334155;
}

/* Search Input */
.dark-mode .fila-search-input {
    background-color: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

.dark-mode .fila-search-input:focus {
    background-color: #1e293b;
    border-color: #4C7CF5;
}

.dark-mode .fila-search-input::placeholder {
    color: #64748b;
}

/* Content Area */
.dark-mode .fila-content {
    background-color: #0f172a;
}

/* Footer */
.dark-mode .fila-footer {
    background: #1e293b;
    border-top-color: #334155;
}

.dark-mode .fila-footer-content {
    color: #94a3b8;
}

.dark-mode .fila-footer-link {
    color: #94a3b8;
}

.dark-mode .fila-footer-link:hover {
    color: #60a5fa;
}

/* Cards */
.dark-mode .card,
.dark-mode .fila-card {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

.dark-mode .card-header,
.dark-mode .fila-card-header {
    background-color: #1e293b;
    border-bottom-color: #334155;
    color: #f8fafc;
}

.dark-mode .card-footer,
.dark-mode .fila-card-footer {
    background-color: #1e293b;
    border-top-color: #334155;
}

.dark-mode .card-title,
.dark-mode .fila-card-title {
    color: #f8fafc;
}

.dark-mode .card-body {
    color: #e2e8f0;
}

/* Dropdowns */
.dark-mode .dropdown-menu {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}

.dark-mode .dropdown-item {
    color: #e2e8f0;
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: #334155;
    color: #f8fafc;
}

.dark-mode .dropdown-item.active,
.dark-mode .dropdown-item:active {
    background-color: #4C7CF5;
    color: white;
}

.dark-mode .dropdown-header {
    color: #94a3b8;
}

.dark-mode .dropdown-divider {
    border-color: #334155;
}

/* Modals */
.dark-mode .modal-content {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

.dark-mode .modal-header {
    border-bottom-color: #334155;
    color: #f8fafc;
}

.dark-mode .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.dark-mode .modal-title {
    color: #f8fafc;
}

.dark-mode .modal-body {
    color: #e2e8f0;
}

.dark-mode .modal-footer {
    border-top-color: #334155;
}

/* Tables */
.dark-mode table,
.dark-mode .table {
    color: #e2e8f0;
}

.dark-mode .table thead th {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

.dark-mode .table tbody td {
    border-color: #334155;
    color: #e2e8f0;
}

.dark-mode .table tbody tr:hover {
    background-color: rgba(51, 65, 85, 0.5);
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(30, 41, 59, 0.5);
}

.dark-mode .fila-table th {
    background-color: #1e293b;
    color: #f8fafc;
    border-color: #334155;
}

.dark-mode .fila-table td {
    border-color: #334155;
    color: #e2e8f0;
}

.dark-mode .fila-table tr:hover {
    background-color: rgba(51, 65, 85, 0.3);
}

/* Buttons - Default */
.dark-mode .btn-default,
.dark-mode .btn.btn-default {
    background-color: #334155;
    border-color: #475569;
    color: #f8fafc;
}

.dark-mode .btn-default:hover,
.dark-mode .btn.btn-default:hover {
    background-color: #475569;
    border-color: #64748b;
    color: #f8fafc;
}

/* Buttons - Outline */
.dark-mode .btn-outline-secondary {
    border-color: #475569;
    color: #94a3b8;
}

.dark-mode .btn-outline-secondary:hover {
    background-color: #334155;
    border-color: #64748b;
    color: #f8fafc;
}

.dark-mode .btn-outline-primary {
    border-color: #4C7CF5;
    color: #60a5fa;
}

.dark-mode .btn-outline-primary:hover {
    background-color: #4C7CF5;
    border-color: #4C7CF5;
    color: white;
}

/* Buttons - Light */
.dark-mode .btn-light {
    background-color: #334155;
    border-color: #475569;
    color: #f8fafc;
}

.dark-mode .btn-light:hover {
    background-color: #475569;
    color: #f8fafc;
}

/* Fila Buttons */
.dark-mode .fila-btn {
    color: #e2e8f0;
}

.dark-mode .fila-btn-outline {
    border-color: #475569;
    color: #94a3b8;
}

.dark-mode .fila-btn-outline:hover {
    background-color: #334155;
    color: #f8fafc;
}

/* Link Items */
.dark-mode .fila-link-item {
    background-color: #1e293b;
    border-color: #334155;
}

.dark-mode .fila-link-item:hover {
    border-color: #475569;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .fila-link-title a {
    color: #f8fafc;
}

.dark-mode .fila-link-title a:hover {
    color: #60a5fa;
}

.dark-mode .fila-link-url {
    color: #94a3b8;
}

.dark-mode .fila-copy-btn {
    background-color: #334155;
    border-color: #475569;
    color: #94a3b8;
}

.dark-mode .fila-copy-btn:hover {
    background-color: #475569;
    color: #f8fafc;
}

.dark-mode .fila-link-action {
    background-color: #334155;
    border-color: #475569;
    color: #94a3b8;
}

.dark-mode .fila-link-action:hover {
    background-color: #475569;
    color: #f8fafc;
}

.dark-mode .fila-link-dropdown-btn {
    color: #94a3b8;
}

.dark-mode .fila-link-dropdown-btn:hover {
    color: #f8fafc;
    background-color: #334155;
}

/* Badges */
.dark-mode .badge,
.dark-mode .fila-badge {
    color: inherit;
}

.dark-mode .badge-light,
.dark-mode .fila-badge-light {
    background-color: #334155;
    color: #e2e8f0;
}

.dark-mode .bg-light {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Borders */
.dark-mode .border {
    border-color: #334155 !important;
}

.dark-mode .border-top {
    border-top-color: #334155 !important;
}

.dark-mode .border-bottom {
    border-bottom-color: #334155 !important;
}

.dark-mode .border-start,
.dark-mode .border-left {
    border-left-color: #334155 !important;
}

.dark-mode .border-end,
.dark-mode .border-right {
    border-right-color: #334155 !important;
}

/* Backgrounds */
.dark-mode .bg-white {
    background-color: #1e293b !important;
}

.dark-mode .bg-gray-50,
.dark-mode .bg-gray-100 {
    background-color: #0f172a !important;
}

/* Text Colors */
.dark-mode .text-dark {
    color: #e2e8f0 !important;
}

.dark-mode .text-muted {
    color: #94a3b8 !important;
}

.dark-mode .text-secondary {
    color: #94a3b8 !important;
}

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

.dark-mode h1, .dark-mode h2, .dark-mode h3,
.dark-mode h4, .dark-mode h5, .dark-mode h6,
.dark-mode .h1, .dark-mode .h2, .dark-mode .h3,
.dark-mode .h4, .dark-mode .h5, .dark-mode .h6 {
    color: #f8fafc;
}

/* Form Labels */
.dark-mode label,
.dark-mode .form-label {
    color: #e2e8f0;
}

.dark-mode .form-text {
    color: #94a3b8 !important;
}

/* Input Groups */
.dark-mode .input-group-text {
    background-color: #334155;
    border-color: #475569;
    color: #94a3b8;
}

/* Placeholders */
.dark-mode ::placeholder {
    color: #64748b !important;
    opacity: 1;
}

.dark-mode ::-webkit-input-placeholder {
    color: #64748b !important;
}

.dark-mode ::-moz-placeholder {
    color: #64748b !important;
}

/* Select2 */
.dark-mode .select2-container--default .select2-selection--single,
.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: #1e293b;
    border-color: #475569;
}

.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f8fafc;
}

.dark-mode .select2-dropdown {
    background-color: #1e293b;
    border-color: #475569;
}

.dark-mode .select2-search__field {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

.dark-mode .select2-container--default .select2-results__option {
    color: #e2e8f0;
}

.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #4C7CF5;
    color: white;
}

.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #334155;
}

/* Pagination */
.dark-mode .pagination a,
.dark-mode .pagination .page-link {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

.dark-mode .pagination a:hover,
.dark-mode .pagination .page-link:hover {
    background-color: #334155;
    border-color: #475569;
    color: #f8fafc;
}

.dark-mode .pagination li.active a,
.dark-mode .page-item.active .page-link {
    background-color: #4C7CF5;
    border-color: #4C7CF5;
    color: white;
}

/* List Groups */
.dark-mode .list-group-item {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

.dark-mode .list-group-item:hover {
    background-color: #334155;
}

.dark-mode .list-group-item.active {
    background-color: #4C7CF5;
    border-color: #4C7CF5;
}

/* Alerts */
.dark-mode .alert {
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .alert-light {
    background-color: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

/* Nav Tabs */
.dark-mode .nav-tabs {
    border-bottom-color: #334155;
}

.dark-mode .nav-tabs .nav-link {
    color: #94a3b8;
}

.dark-mode .nav-tabs .nav-link:hover {
    border-color: #475569;
    color: #f8fafc;
}

.dark-mode .nav-tabs .nav-link.active {
    background-color: #1e293b;
    border-color: #334155 #334155 #1e293b;
    color: #f8fafc;
}

/* Progress Bars */
.dark-mode .progress {
    background-color: #334155;
}

/* Tooltips */
.dark-mode .tooltip-inner {
    background-color: #1e293b;
    color: #f8fafc;
}

.dark-mode .tooltip.bs-tooltip-top .tooltip-arrow::before,
.dark-mode .tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: #1e293b;
}

/* Code and Pre */
.dark-mode code {
    background-color: #334155;
    color: #f472b6;
}

.dark-mode pre {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

/* Horizontal Rules */
.dark-mode hr {
    border-color: #334155;
}

/* Close Buttons */
.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Charts and Maps */
.dark-mode #visitor-map {
    background: #1e293b !important;
    border-color: #334155 !important;
}

.dark-mode .jvm-zoom-btn {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

.dark-mode .jvm-zoom-btn:hover {
    background: #475569 !important;
}

/* Date Range Picker */
.dark-mode .daterangepicker {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

.dark-mode .daterangepicker .calendar-table {
    background-color: #1e293b;
    border-color: #334155;
}

.dark-mode .daterangepicker td.off,
.dark-mode .daterangepicker td.off.in-range,
.dark-mode .daterangepicker td.off.start-date,
.dark-mode .daterangepicker td.off.end-date {
    background-color: #0f172a;
    color: #64748b;
}

.dark-mode .daterangepicker td.available:hover,
.dark-mode .daterangepicker th.available:hover {
    background-color: #334155;
    color: #f8fafc;
}

.dark-mode .daterangepicker td.in-range {
    background-color: rgba(76, 124, 245, 0.2);
    color: #e2e8f0;
}

.dark-mode .daterangepicker .drp-buttons {
    border-top-color: #334155;
}

/* Filter Dropdowns */
.dark-mode .fila-filter-dropdown {
    background-color: #1e293b;
    border-color: #334155;
}

.dark-mode .fila-filter-label {
    color: #94a3b8;
}

.dark-mode .fila-filter-select,
.dark-mode .fila-filter-input {
    background-color: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

/* URL Input */
.dark-mode #url {
    background-color: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

.dark-mode #url:focus {
    border-color: #4C7CF5;
    box-shadow: 0 0 0 3px rgba(76, 124, 245, 0.2);
}

.dark-mode #url:hover {
    border-color: #64748b;
}

/* Stats Cards */
.dark-mode .stats-card {
    background-color: #1e293b;
    border-color: #334155;
}

.dark-mode .stats-value {
    color: #f8fafc;
}

.dark-mode .stats-label {
    color: #94a3b8;
}

/* Empty States */
.dark-mode .fila-empty-icon {
    background: #334155;
    color: #64748b;
}

.dark-mode .fila-empty-title {
    color: #f8fafc;
}

.dark-mode .fila-empty-description {
    color: #94a3b8;
}

/* Upgrade Button */
.dark-mode .fila-upgrade-btn {
    background: linear-gradient(135deg, #4C7CF5 0%, #3b6ad6 100%);
    color: white;
}

.dark-mode .fila-upgrade-btn:hover {
    background: linear-gradient(135deg, #3b6ad6 0%, #2a5ac6 100%);
    color: white;
}

/* Accordion */
.dark-mode .accordion-item {
    background-color: #1e293b;
    border-color: #334155;
}

.dark-mode .accordion-button {
    background-color: #1e293b;
    color: #f8fafc;
}

.dark-mode .accordion-button:not(.collapsed) {
    background-color: #334155;
    color: #f8fafc;
}

.dark-mode .accordion-button::after {
    filter: invert(1);
}

.dark-mode .accordion-body {
    background-color: #1e293b;
    color: #e2e8f0;
}

/* Offcanvas */
.dark-mode .offcanvas {
    background-color: #1e293b;
    color: #e2e8f0;
}

.dark-mode .offcanvas-header {
    border-bottom-color: #334155;
}

.dark-mode .offcanvas-title {
    color: #f8fafc;
}

/* Popover */
.dark-mode .popover {
    background-color: #1e293b;
    border-color: #334155;
}

.dark-mode .popover-header {
    background-color: #334155;
    border-bottom-color: #475569;
    color: #f8fafc;
}

.dark-mode .popover-body {
    color: #e2e8f0;
}

/* Breadcrumb */
.dark-mode .breadcrumb {
    background-color: transparent;
}

.dark-mode .breadcrumb-item a {
    color: #60a5fa;
}

.dark-mode .breadcrumb-item.active {
    color: #94a3b8;
}

.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: #64748b;
}

/* Toasts / Notifications */
.dark-mode .toast {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

.dark-mode .toast-header {
    background-color: #334155;
    border-bottom-color: #475569;
    color: #f8fafc;
}

/* Spinners and Loading States */
.dark-mode .spinner-border,
.dark-mode .spinner-grow {
    color: #60a5fa;
}

/* Collection Cards */
.dark-mode .collection-card {
    background-color: #1e293b;
    border-color: #334155;
}

.dark-mode .collection-card:hover {
    border-color: #475569;
}

.dark-mode .collection-name {
    color: #f8fafc;
}

.dark-mode .collection-count {
    color: #94a3b8;
}

/* Billing/Subscription Cards */
.dark-mode .subscription-mobile-card,
.dark-mode .payment-mobile-card,
.dark-mode .addon-mobile-card {
    background-color: #1e293b;
    border-color: #334155;
}

.dark-mode .subscription-mobile-plan-name,
.dark-mode .subscription-mobile-price,
.dark-mode .addon-mobile-type-name {
    color: #f8fafc;
}

.dark-mode .subscription-mobile-label,
.dark-mode .payment-mobile-label,
.dark-mode .addon-mobile-label {
    color: #64748b;
}

.dark-mode .subscription-mobile-value,
.dark-mode .payment-mobile-value,
.dark-mode .addon-mobile-value {
    color: #e2e8f0;
}

.dark-mode .payment-mobile-date {
    color: #94a3b8;
}

/* Note/Text Editor */
.dark-mode .note-editor {
    background-color: #1e293b;
    border-color: #334155;
}

.dark-mode .note-toolbar {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark-mode .note-btn {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

.dark-mode .note-btn:hover {
    background-color: #475569 !important;
}

.dark-mode .note-editable {
    background-color: #1e293b;
    color: #e2e8f0 !important;
}

.dark-mode .note-statusbar {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Scrollbar Styling */
.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Checkbox and Radio Custom Styling */
.dark-mode .form-check-input {
    background-color: #334155;
    border-color: #475569;
}

.dark-mode .form-check-input:checked {
    background-color: #4C7CF5;
    border-color: #4C7CF5;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.dark-mode .form-check-label {
    color: #e2e8f0;
}

/* Switch Toggle */
.dark-mode .form-switch .form-check-input {
    background-color: #475569;
}

.dark-mode .form-switch .form-check-input:checked {
    background-color: #4C7CF5;
}

/* Range Input */
.dark-mode input[type="range"] {
    background-color: transparent;
}

.dark-mode input[type="range"]::-webkit-slider-runnable-track {
    background: #334155;
}

.dark-mode input[type="range"]::-webkit-slider-thumb {
    background: #4C7CF5;
}

/* File Input */
.dark-mode input[type="file"]::file-selector-button {
    background-color: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

.dark-mode input[type="file"]::file-selector-button:hover {
    background-color: #475569;
}

/* Color Picker */
.dark-mode .sp-replacer {
    background: #334155;
    border-color: #475569;
}

.dark-mode .sp-container {
    background: #1e293b;
    border-color: #334155;
}

.dark-mode .sp-input {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

/* Icon Picker */
.dark-mode .iconpicker-popover {
    background: #1e293b;
}

.dark-mode .iconpicker-popover .popover-title {
    background: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

.dark-mode .iconpicker .iconpicker-items {
    background: #1e293b;
}

.dark-mode .iconpicker .iconpicker-item {
    color: #e2e8f0;
}

.dark-mode .iconpicker .iconpicker-item:hover {
    background: #334155;
}

/* Font Selector */
.dark-mode .font-select > span,
.dark-mode .font-select-active > span {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

.dark-mode .font-select .fs-drop {
    background: #1e293b;
    color: #e2e8f0;
}

/* Autocomplete */
.dark-mode .autocomplete-suggestions {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.dark-mode .autocomplete-suggestion {
    color: #e2e8f0;
}

.dark-mode .autocomplete-suggestion:hover,
.dark-mode .autocomplete-selected {
    background: #334155;
}

/* Bootstrap Tags Input */
.dark-mode .bootstrap-tagsinput {
    background-color: transparent;
}

.dark-mode .bootstrap-tagsinput input {
    color: #f8fafc;
}

.dark-mode .bootstrap-tagsinput input::placeholder {
    color: #64748b;
}

.dark-mode .bootstrap-tagsinput .badge {
    background: #4C7CF5;
}

/* Data Tables */
.dark-mode .dataTables_wrapper {
    color: #e2e8f0;
}

.dark-mode .dataTables_filter input {
    background-color: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

.dark-mode .dataTables_length select {
    background-color: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

.dark-mode .dataTables_info {
    color: #94a3b8;
}

/* Specific Dashboard Elements */
.dark-mode .page-header {
    color: #f8fafc;
}

.dark-mode .page-title {
    color: #f8fafc;
}

.dark-mode .page-description {
    color: #94a3b8;
}

/* Action Bars */
.dark-mode .action-bar {
    background-color: #1e293b;
    border-color: #334155;
}

/* Quick Actions Panel */
.dark-mode .quick-actions {
    background-color: #1e293b;
    border-color: #334155;
}

/* Settings Forms */
.dark-mode .settings-section {
    background-color: #1e293b;
    border-color: #334155;
}

.dark-mode .settings-section-title {
    color: #f8fafc;
}

.dark-mode .settings-section-description {
    color: #94a3b8;
}

/* Profile Card */
.dark-mode .profile-card {
    background-color: #1e293b;
    border-color: #334155;
}

.dark-mode .profile-name {
    color: #f8fafc;
}

.dark-mode .profile-email {
    color: #94a3b8;
}

/* QR Code Container */
.dark-mode .qr-container {
    background-color: white;
    padding: 16px;
    border-radius: 8px;
}

/* Help Text and Hints */
.dark-mode .help-text,
.dark-mode .hint-text {
    color: #94a3b8;
}

/* Dividers and Separators */
.dark-mode .divider,
.dark-mode .separator {
    border-color: #334155;
}

/* Skeleton Loading */
.dark-mode .skeleton {
    background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
    background-size: 200% 100%;
}

/* No Results State */
.dark-mode .no-results {
    color: #94a3b8;
}

.dark-mode .no-results-icon {
    color: #475569;
}

/* Shadow Adjustments for Dark Mode */
.dark-mode .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure Link Colors */
.dark-mode a {
    color: #60a5fa;
}

.dark-mode a:hover {
    color: #93c5fd;
}

/* Ensure Primary Color Links Don't Change */
.dark-mode a.text-primary {
    color: #60a5fa !important;
}

.dark-mode a.text-primary:hover {
    color: #93c5fd !important;
}

/* Mobile-specific Dark Mode Fixes */
@media (max-width: 768px) {
    .dark-mode .offcanvas-backdrop {
        background-color: rgba(0, 0, 0, 0.7);
    }
}

/* ========================================
   Tools Pages - Browser Extension & Mobile App
   ======================================== */

/* Hero Section */
.tools-hero {
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
    border-radius: 16px;
    padding: 48px;
    display: flex;
    align-items: center;
    gap: 48px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.tools-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}

.tools-hero-extension {
    background: linear-gradient(135deg, #4285F4 0%, #3B82F6 50%, #6366F1 100%);
}

.tools-hero-mobile {
    background: linear-gradient(135deg, #10B981 0%, #14B8A6 50%, #06B6D4 100%);
}

.tools-hero-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.tools-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 100px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
}

.tools-hero-badge .material-symbols-outlined {
    font-size: 18px;
}

.tools-badge-coming {
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.3);
}

.tools-hero-title {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.2;
}

.tools-hero-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 1.125rem;
    margin-bottom: 24px;
    max-width: 400px;
}

.tools-hero-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-tools-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: white;
    color: #1e40af;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    width: fit-content;
}

.btn-tools-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    color: #1e40af;
    background: white;
}

.btn-tools-primary i {
    font-size: 20px;
}

.tools-hero-note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
}

.tools-hero-note i {
    color: #4ade80;
}

/* Hero Visual - Browser Mockup */
.tools-hero-visual {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.tools-browser-mockup {
    width: 320px;
    background: #1e293b;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
}

.browser-mockup-toolbar {
    background: #334155;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.browser-dots {
    display: flex;
    gap: 6px;
}

.browser-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #475569;
}

.browser-dots span:first-child { background: #f87171; }
.browser-dots span:nth-child(2) { background: #fbbf24; }
.browser-dots span:last-child { background: #4ade80; }

.browser-address-bar {
    flex: 1;
    background: #1e293b;
    padding: 8px 12px;
    border-radius: 6px;
    color: #94a3b8;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.browser-address-bar i {
    color: #4ade80;
    font-size: 10px;
}

.browser-mockup-content {
    padding: 20px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.extension-popup-preview {
    background: white;
    border-radius: 10px;
    padding: 16px;
    width: 200px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.popup-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.popup-url-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f3f4f6;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #374151;
}

.popup-url-display .material-symbols-outlined {
    font-size: 16px;
    color: #3b82f6;
}

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

.popup-btn {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    background: #f3f4f6;
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.popup-btn.primary {
    background: #3b82f6;
    color: white;
}

/* Hero Visual - Phone Mockup */
.tools-phone-mockup {
    width: 220px;
    height: 420px;
    background: #1e293b;
    border-radius: 36px;
    padding: 12px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
}

.phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 24px;
    background: #0f172a;
    border-radius: 0 0 16px 16px;
    z-index: 10;
}

.phone-screen {
    background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%);
    border-radius: 28px;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.phone-app-header {
    padding: 40px 16px 16px;
    text-align: center;
}

.phone-app-content {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.phone-link-card {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.phone-link-icon {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-link-icon .material-symbols-outlined {
    font-size: 18px;
    color: white;
}

.phone-link-text {
    flex: 1;
    font-size: 12px;
    color: white;
    font-weight: 500;
}

.phone-link-action .material-symbols-outlined {
    font-size: 18px;
    color: rgba(255,255,255,0.7);
}

.phone-app-fab {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.phone-app-fab .material-symbols-outlined {
    font-size: 24px;
    color: #3b82f6;
}

/* App Store Buttons */
.app-store-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.app-store-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: default;
}

.app-store-btn.disabled {
    opacity: 0.8;
}

.app-store-btn i {
    font-size: 28px;
    color: white;
}

.app-store-text {
    display: flex;
    flex-direction: column;
}

.coming-text {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

.store-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

/* Features Section */
.tools-features-section {
    margin-bottom: 32px;
}

.tools-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 24px;
    text-align: center;
}

.tools-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.tools-feature-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.tools-feature-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.tools-feature-card.feature-planned {
    position: relative;
}

.tools-feature-card.feature-planned::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.03) 10px,
        rgba(255,255,255,0.03) 20px
    );
    border-radius: 12px;
    pointer-events: none;
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.feature-icon .material-symbols-outlined {
    font-size: 28px;
}

.feature-icon-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.feature-icon-purple {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.feature-icon-green {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.feature-icon-orange {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.tools-feature-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.tools-feature-card p {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.5;
    margin: 0;
}

/* How To Section */
.tools-howto-section {
    background: white;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    border: 1px solid var(--gray-200);
}

.tools-steps-horizontal {
    display: flex;
    justify-content: center;
    gap: 0;
}

.tools-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    max-width: 260px;
    position: relative;
}

.step-number {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.step-content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.step-content p {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.5;
    margin: 0;
}

.step-connector {
    position: absolute;
    top: 24px;
    left: calc(50% + 24px);
    width: calc(100% - 48px);
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    z-index: 1;
}

.tools-step:last-child .step-connector {
    display: none;
}

/* Tips Section */
.tools-tips-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.tools-tip-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.tip-icon {
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.tip-icon .material-symbols-outlined {
    font-size: 22px;
    color: #0284c7;
}

.tip-content h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.tip-content p {
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.5;
    margin: 0;
}

.tip-content a {
    color: #0284c7;
    font-weight: 500;
}

/* Meantime Section (Mobile App) */
.tools-meantime-section {
    margin-bottom: 32px;
}

.meantime-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    padding: 32px;
}

.meantime-content {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.meantime-icon {
    width: 64px;
    height: 64px;
    background: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.meantime-icon .material-symbols-outlined {
    font-size: 32px;
    color: #16a34a;
}

.meantime-text h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.meantime-text p {
    font-size: 15px;
    color: var(--gray-600);
    line-height: 1.5;
    margin: 0;
}

.meantime-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-tools-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: var(--gray-700);
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid var(--gray-300);
    transition: all 0.2s ease;
}

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

.btn-tools-outline .material-symbols-outlined {
    font-size: 20px;
}

/* Notify Section */
.tools-notify-section {
    margin-bottom: 32px;
}

.notify-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.notify-icon {
    font-size: 28px;
    color: #f59e0b;
}

.notify-content {
    flex: 1;
}

.notify-content h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.notify-content p {
    font-size: 14px;
    color: var(--gray-600);
    margin: 0;
}

.notify-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.notify-link:hover {
    text-decoration: underline;
}

.notify-link .material-symbols-outlined {
    font-size: 18px;
}

/* Dark Mode for Tools Pages */
.dark-mode .tools-feature-card,
.dark-mode .tools-howto-section,
.dark-mode .notify-card {
    background: var(--dark-card-bg);
    border-color: var(--dark-border);
}

.dark-mode .tools-feature-card.feature-planned::after {
    display: none;
}

.dark-mode .tools-section-title,
.dark-mode .tools-feature-card h4,
.dark-mode .step-content h4,
.dark-mode .tip-content h5,
.dark-mode .meantime-text h3,
.dark-mode .notify-content h4 {
    color: var(--dark-text);
}

.dark-mode .tools-feature-card p,
.dark-mode .step-content p,
.dark-mode .tip-content p,
.dark-mode .meantime-text p,
.dark-mode .notify-content p {
    color: var(--dark-text-muted);
}

.dark-mode .tools-tip-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-color: rgba(59, 130, 246, 0.2);
}

.dark-mode .tip-icon,
.dark-mode .meantime-icon {
    background: var(--dark-card-bg);
}

.dark-mode .meantime-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%);
    border-color: rgba(16, 185, 129, 0.2);
}

.dark-mode .btn-tools-outline {
    background: var(--dark-card-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

.dark-mode .btn-tools-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.dark-mode .extension-popup-preview {
    background: var(--dark-card-bg);
}

.dark-mode .popup-header {
    border-color: var(--dark-border);
}

.dark-mode .popup-url-display {
    background: var(--dark-bg);
    color: var(--dark-text);
}

.dark-mode .popup-btn {
    background: var(--dark-bg);
    color: var(--dark-text-muted);
}

.dark-mode .popup-btn.primary {
    background: #3b82f6;
    color: white;
}

/* Phone Mockup V2 - More Realistic Design */
.tools-phone-mockup-v2 {
    position: relative;
}

.phone-frame {
    width: 260px;
    height: 520px;
    background: #1a1a1a;
    border-radius: 44px;
    padding: 10px;
    box-shadow:
        0 0 0 2px #333,
        0 0 0 4px #1a1a1a,
        0 30px 60px -15px rgba(0,0,0,0.5),
        inset 0 0 2px rgba(255,255,255,0.1);
    position: relative;
}

.phone-notch-v2 {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 28px;
    background: #1a1a1a;
    border-radius: 0 0 18px 18px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-camera {
    width: 10px;
    height: 10px;
    background: #2a2a2a;
    border-radius: 50%;
    border: 2px solid #333;
}

.phone-screen-v2 {
    background: #f8fafc;
    border-radius: 36px;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.phone-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
}

.status-icons {
    display: flex;
    gap: 4px;
    font-size: 10px;
}

.phone-app-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px 12px;
}

.phone-logo {
    height: 22px;
}

.phone-header-icons .material-symbols-outlined {
    font-size: 20px;
    color: #6b7280;
}

.phone-kpi-row {
    display: flex;
    gap: 8px;
    padding: 0 12px 10px;
}

.phone-kpi-card {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.phone-kpi-card .material-symbols-outlined {
    font-size: 18px;
    color: #3b82f6;
    margin-bottom: 4px;
}

.phone-kpi-value {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.phone-kpi-label {
    font-size: 9px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.phone-create-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 10px;
    background: white;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.phone-create-bar .material-symbols-outlined {
    font-size: 18px;
    color: #3b82f6;
}

.phone-create-placeholder {
    font-size: 11px;
    color: #9ca3af;
}

.phone-links-list {
    flex: 1;
    padding: 0 12px;
    overflow: hidden;
}

.phone-link-item-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.phone-link-favicon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.phone-link-favicon img {
    width: 16px;
    height: 16px;
}

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

.phone-link-title {
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phone-link-url {
    font-size: 9px;
    color: #3b82f6;
}

.phone-link-stats {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #9ca3af;
    font-size: 10px;
}

.phone-link-stats .material-symbols-outlined {
    font-size: 14px;
}

.phone-bottom-nav {
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 8px 12px;
    border-top: 1px solid #f3f4f6;
    position: relative;
}

.phone-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #9ca3af;
    font-size: 8px;
}

.phone-nav-item .material-symbols-outlined {
    font-size: 18px;
}

.phone-nav-item.active {
    color: #3b82f6;
}

.phone-nav-item span:last-child {
    font-weight: 500;
}

.phone-nav-fab {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -24px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.phone-nav-fab .material-symbols-outlined {
    font-size: 24px;
    color: white;
}

/* Responsive for Tools Pages */
@media (max-width: 1024px) {
    .tools-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tools-tips-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tools-hero {
        flex-direction: column;
        padding: 32px 24px;
        text-align: center;
    }

    .tools-hero-subtitle {
        max-width: 100%;
    }

    .tools-hero-cta {
        align-items: center;
    }

    .tools-hero-visual {
        order: -1;
        margin-bottom: 8px;
    }

    .tools-browser-mockup {
        width: 280px;
    }

    .tools-phone-mockup {
        width: 180px;
        height: 340px;
    }

    .phone-notch {
        width: 60px;
        height: 18px;
    }

    .phone-frame {
        width: 220px;
        height: 440px;
    }

    .phone-notch-v2 {
        width: 80px;
        height: 24px;
    }

    .phone-status-bar {
        padding: 12px 20px 6px;
        font-size: 10px;
    }

    .phone-kpi-value {
        font-size: 16px;
    }

    .phone-nav-fab {
        width: 38px;
        height: 38px;
        margin-top: -20px;
    }

    .phone-nav-fab .material-symbols-outlined {
        font-size: 20px;
    }

    .tools-features-grid {
        grid-template-columns: 1fr;
    }

    .tools-steps-horizontal {
        flex-direction: column;
        gap: 24px;
    }

    .tools-step {
        max-width: 100%;
        flex-direction: row;
        text-align: left;
        gap: 16px;
    }

    .step-number {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .step-connector {
        display: none;
    }

    .tools-tips-section {
        grid-template-columns: 1fr;
    }

    .tools-howto-section {
        padding: 24px;
    }

    .app-store-buttons {
        justify-content: center;
    }

    .meantime-content {
        flex-direction: column;
        text-align: center;
    }

    .meantime-actions {
        justify-content: center;
    }

    .notify-card {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
}

/* Pixels Page - Selected Count */
.fila-selected-count {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
    padding-left: 15px;
}