/* ============================================
   M&H Capital - Framework7 Theme Override
   ============================================ */

:root {
  /* Primary Brand Colors */
  --f7-theme-color: #D4AF37;
  --f7-theme-color-rgb: 212, 175, 55;
  --f7-theme-color-shade: #B8860B;
  --f7-theme-color-tint: #E5C158;

  /* Dark Theme Backgrounds */
  --f7-page-bg-color: #0F1112;
  --f7-bars-bg-color: #181C1F;
  --f7-bars-bg-color-rgb: 24, 28, 31;
  --f7-list-bg-color: #181C1F;
  --f7-block-bg-color: #181C1F;
  --f7-card-bg-color: #181C1F;
  --f7-card-header-bg-color: transparent;
  --f7-popup-bg-color: #181C1F;
  --f7-sheet-bg-color: #181C1F;
  --f7-panel-bg-color: #181C1F;
  --f7-dialog-bg-color: #181C1F;
  --f7-actions-bg-color: #181C1F;

  /* Text Colors */
  --f7-text-color: #ffffff;
  --f7-bars-text-color: #ffffff;
  --f7-block-title-text-color: #A7A9AC;
  --f7-list-item-title-text-color: #ffffff;
  --f7-list-item-after-text-color: #A7A9AC;

  /* Border Colors */
  --f7-list-border-color: #22272B;
  --f7-bars-border-color: #22272B;
  --f7-card-border-color: #22272B;
  --f7-block-strong-border-color: #22272B;

  /* Input */
  --f7-input-bg-color: #22272B;
  --f7-input-text-color: #ffffff;
  --f7-input-placeholder-color: #6B7280;
  --f7-label-text-color: #A7A9AC;

  /* Panel (Drawer) */
  --f7-panel-width: 380px;
  --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.6);

  /* Toolbar (Bottom Nav) */
  --f7-toolbar-height: 64px;
  --f7-tabbar-labels-height: 64px;
  --f7-tabbar-link-active-color: #D4AF37;
  --f7-tabbar-link-inactive-color: #6B7280;

  /* Sheet */
  --f7-sheet-border-color: #22272B;

  /* Swipeout */
  --f7-swipeout-button-bg-color: #D4AF37;
  --f7-swipeout-delete-button-bg-color: #ef4444;

  /* Preloader */
  --f7-preloader-color: #D4AF37;

  /* PTR (Pull to Refresh) */
  --f7-ptr-preloader-size: 28px;

  /* Safe Areas */
  --f7-safe-area-left: env(safe-area-inset-left);
  --f7-safe-area-right: env(safe-area-inset-right);
  --f7-safe-area-top: env(safe-area-inset-top);
  --f7-safe-area-bottom: env(safe-area-inset-bottom);

  /* Custom M&H Variables (for compatibility) */
  --mh-gold: #D4AF37;
  --mh-gold-light: #E5C158;
  --mh-dark: #0F1112;
  --mh-dark-secondary: #181C1F;
  --mh-dark-tertiary: #22272B;
  --mh-text-primary: #ffffff;
  --mh-text-secondary: #A7A9AC;
  --mh-text-muted: #6B7280;
  --mh-success: #10b981;
  --mh-warning: #f59e0b;
  --mh-error: #ef4444;
  --mh-blue: #3b82f6;
}

/* Light Theme Support */
.theme-light,
[data-theme="light"] {
  --f7-page-bg-color: #f5f5f7;
  --f7-bars-bg-color: #ffffff;
  --f7-list-bg-color: #ffffff;
  --f7-block-bg-color: #ffffff;
  --f7-card-bg-color: #ffffff;
  --f7-popup-bg-color: #ffffff;
  --f7-sheet-bg-color: #ffffff;
  --f7-panel-bg-color: #ffffff;
  --f7-dialog-bg-color: #ffffff;
  --f7-text-color: #1a1a1a;
  --f7-bars-text-color: #1a1a1a;
  --f7-list-border-color: #e5e5e5;
  --f7-bars-border-color: #e5e5e5;
  --f7-input-bg-color: #f5f5f5;
  --f7-input-text-color: #1a1a1a;
}

/* ============================================
   Custom Component Styles
   ============================================ */

/* Navbar adjustments */
.navbar {
  --f7-navbar-bg-color: var(--f7-bars-bg-color);
  --f7-navbar-border-color: var(--f7-bars-border-color);
}

.navbar .title {
  font-weight: 600;
}

/* Tabbar (Bottom Navigation) */
.tabbar-labels .tab-link {
  padding-top: 8px;
  padding-bottom: 8px;
  flex-direction: column;
  gap: 4px;
}

.tabbar-labels .tab-link .icon {
  width: 24px;
  height: 24px;
  stroke: var(--f7-tabbar-link-inactive-color);
  transition: stroke 0.2s ease;
}

.tabbar-labels .tab-link.tab-link-active {
  color: var(--f7-theme-color);
}

.tabbar-labels .tab-link.tab-link-active .icon {
  stroke: var(--f7-theme-color);
}

.tabbar-labels .tab-link.tab-link-active i {
  color: var(--f7-theme-color);
}

.tabbar-label {
  font-size: 11px;
  font-weight: 500;
  margin-top: 0;
}

/* Badge on tabbar */
.tabbar .badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 20px);
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  line-height: 18px;
  border-radius: 9px;
  background: var(--mh-error);
  color: #fff;
}

/* Panel (Drawer) styling */
.panel {
  background: var(--f7-panel-bg-color);
}

.panel .page-content {
  padding-top: 0;
}

/* Property drawer panel */
#drawerPanel {
  --f7-panel-width: 420px;
}

#drawerPanel .navbar {
  background: var(--mh-dark-secondary);
}

#drawerPanel .drawer-header {
  padding: 16px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

#drawerPanel .toolbar.tabbar {
  background: var(--mh-dark-secondary);
}

#drawerPanel .drawer-content {
  padding: 0;
}

/* Mobile: panel fullscreen */
@media (max-width: 768px) {
  #drawerPanel {
    --f7-panel-width: 100%;
  }
}

/* Sheet modal */
.sheet-modal {
  border-radius: 16px 16px 0 0;
}

.sheet-modal .swipe-handler {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheet-modal .swipe-handler::after {
  content: '';
  width: 40px;
  height: 4px;
  background: var(--mh-text-muted);
  border-radius: 2px;
}

/* Profile sheet */
.profile-sheet {
  max-height: 70vh;
}

.profile-sheet .mobile-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0 16px;
}

.profile-sheet .mobile-profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mh-gold);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
}

.profile-sheet .mobile-profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-sheet .mobile-profile-email {
  font-size: 15px;
  font-weight: 500;
  color: var(--mh-text-primary);
}

.profile-sheet .mobile-profile-role {
  font-size: 13px;
  color: var(--mh-text-secondary);
}

.profile-sheet .list .icon {
  width: 24px;
  height: 24px;
  stroke: var(--mh-text-secondary);
}

.profile-sheet .list .item-link:active {
  background: var(--mh-dark-tertiary);
}

/* Card styling */
.card {
  border: 1px solid var(--f7-card-border-color);
  border-radius: 12px;
  margin: 12px;
  box-shadow: none;
}

.card-header {
  padding: 12px 16px;
  font-weight: 600;
}

.card-content {
  padding: 12px 16px;
}

/* List styling */
.list ul {
  background: var(--f7-list-bg-color);
}

.list .item-link:active {
  background: var(--mh-dark-tertiary);
}

/* Swipeout actions */
.swipeout-actions-left .swipeout-button,
.swipeout-actions-right .swipeout-button {
  font-weight: 500;
}

.swipeout-actions-left .swipeout-button {
  background: var(--mh-success);
}

.swipeout-actions-right .swipeout-button {
  background: var(--mh-error);
}

/* Buttons */
.button {
  font-weight: 500;
  text-transform: none;
}

.button-fill {
  background: var(--f7-theme-color);
  color: #000;
}

.button-fill:active {
  background: var(--f7-theme-color-shade);
}

/* Toast */
.toast {
  background: var(--mh-dark-secondary);
  border: 1px solid var(--mh-dark-tertiary);
}

.toast-success {
  border-left: 3px solid var(--mh-success);
}

.toast-error {
  border-left: 3px solid var(--mh-error);
}

/* Dialog */
.dialog {
  border-radius: 12px;
}

.dialog-button {
  color: var(--f7-theme-color);
  font-weight: 500;
}

/* Preloader */
.preloader-inner {
  color: var(--f7-theme-color);
}

/* PTR */
.ptr-preloader {
  color: var(--f7-theme-color);
}

/* Popup */
.popup {
  border-radius: 16px 16px 0 0;
  background: var(--f7-popup-bg-color);
}

/* Ensure popups don't intercept pointer events when closed */
.popup:not(.popup-in):not(.modal-in) {
  pointer-events: none !important;
  visibility: hidden;
}

/* Ensure popups capture events when open */
.popup.popup-in,
.popup.modal-in {
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Alerts panel should not block login screen */
.alerts-popup:not(.popup-in):not(.modal-in) {
  display: none !important;
}

/* F7 Popup view/page positioning */
.popup .view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.popup .page {
  position: relative;
  height: 100%;
  width: 100%;
  background: var(--mh-dark-secondary);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 1;
}

.popup.popup-in .page,
.popup.modal-in .page {
  transform: translateY(0);
}

.popup .page-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Schedule Visit Popup */
#scheduleVisitModal.popup {
  max-height: 90vh;
}

#scheduleVisitModal .page-content {
  padding: 0;
  padding-bottom: 0;
}

#scheduleVisitModal .schedule-visit-modal {
  max-width: none;
  width: 100%;
  padding: 0;
}

#scheduleVisitModal .schedule-modal-header {
  padding: 16px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
  background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(0,82,136,0.1));
}

#scheduleVisitModal .visit-form {
  padding: 16px;
}

#scheduleVisitModal .form-actions {
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--mh-dark-tertiary);
  background: var(--mh-dark-secondary);
  position: sticky;
  bottom: 0;
}

/* Add Opportunity Popup */
#addOpportunityModal.popup {
  max-height: 95vh;
}

#addOpportunityModal .page-content {
  padding: 0;
  padding-bottom: 0;
}

#addOpportunityModal .manual-opportunity-modal {
  max-width: none;
  width: 100%;
  padding: 0;
}

#addOpportunityModal .manual-modal-header {
  padding: 16px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
  background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(0,82,136,0.1));
}

#addOpportunityModal .manual-form {
  padding: 16px;
  max-height: none;
  overflow: visible;
}

#addOpportunityModal .manual-form-actions {
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--mh-dark-tertiary);
  background: var(--mh-dark-secondary);
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 12px;
}

/* Desktop popup adjustments */
@media (min-width: 769px) {
  #scheduleVisitModal.popup,
  #addOpportunityModal.popup {
    max-width: 560px;
    max-height: 85vh;
    margin: auto;
    border-radius: 16px;
    left: 50%;
    transform: translateX(-50%);
  }

  #scheduleVisitModal.popup .page-content,
  #addOpportunityModal.popup .page-content {
    padding-bottom: 0;
  }
}

/* Safe areas */
.ios .toolbar-bottom,
.md .toolbar-bottom {
  padding-bottom: var(--f7-safe-area-bottom);
}

.ios .page-content,
.md .page-content {
  padding-bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
}

/* Hide F7 toolbar on desktop */
@media (min-width: 769px) {
  .toolbar-bottom.tabbar#mobileBottomNav {
    display: none !important;
  }

  .page-content {
    padding-bottom: 0;
  }

  /* Show legacy pipeline nav on desktop */
  .pipeline-nav {
    display: flex;
  }
}

/* Show F7 toolbar only on mobile */
@media (max-width: 768px) {
  #mobileBottomNav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    background: var(--mh-dark-secondary) !important;
    border-top: 1px solid var(--mh-dark-tertiary) !important;
    z-index: 300 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  #mobileBottomNav .toolbar-inner {
    display: flex !important;
    height: 100% !important;
    justify-content: space-around !important;
    align-items: stretch !important;
  }

  #mobileBottomNav .tab-link {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--mh-text-muted) !important;
    text-decoration: none !important;
    gap: 4px !important;
    padding: 8px 4px !important;
  }

  #mobileBottomNav .tab-link.tab-link-active {
    color: var(--mh-gold) !important;
  }

  #mobileBottomNav .tab-link .icon {
    width: 24px !important;
    height: 24px !important;
  }

  #mobileBottomNav .tab-link.tab-link-active .icon {
    stroke: var(--mh-gold) !important;
  }

  #mobileBottomNav .tabbar-label {
    font-size: 11px !important;
    font-weight: 500 !important;
  }

  /* Hide legacy pipeline nav on mobile */
  .pipeline-nav {
    display: none !important;
  }

  /* Ensure content has bottom padding for tabbar */
  .main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* Transitions */
.page-transition-enter-active,
.page-transition-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-transition-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.page-transition-leave-to {
  opacity: 0;
}

/* ============================================
   Swiper (Carousel) Styles
   ============================================ */

.swiper-gallery {
  width: 100%;
  height: 250px;
  background: var(--mh-dark-tertiary);
  border-radius: 8px;
  overflow: hidden;
}

.swiper-gallery .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-gallery .swiper-lazy-preloader {
  border-color: var(--mh-gold);
  border-top-color: transparent;
}

.swiper-gallery .swiper-pagination-bullet {
  background: var(--mh-text-muted);
  opacity: 0.5;
}

.swiper-gallery .swiper-pagination-bullet-active {
  background: var(--mh-gold);
  opacity: 1;
}

.swiper-gallery .swiper-button-prev,
.swiper-gallery .swiper-button-next {
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.swiper-gallery .swiper-button-prev::after,
.swiper-gallery .swiper-button-next::after {
  font-size: 14px;
}

.swiper-gallery .swiper-counter {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 10;
}

.no-images {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-muted);
  border-radius: 8px;
}

/* ============================================
   F7 Swipeout Styles
   ============================================ */

/* Mobile cards list container for F7 Swipeout */
.mobile-cards-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-cards-list .swipeout {
  overflow: visible;
  border-radius: 12px;
}

.mobile-cards-list .swipeout-content {
  border-radius: 12px;
  overflow: hidden;
}

/* Card styling inside swipeout */
.mobile-cards-list .mobile-card-content {
  background: var(--mh-dark-secondary);
  padding: 16px;
  cursor: pointer;
}

.swipeout-content {
  background: var(--mh-dark-secondary);
}

.swipeout-actions-left {
  background: var(--mh-success);
}

.swipeout-actions-right {
  background: var(--mh-error);
}

.swipeout-actions-left a,
.swipeout-actions-right a,
.swipeout-actions a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 20px;
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  min-width: 80px;
}

.swipeout-actions-left a svg,
.swipeout-actions-right a svg {
  flex-shrink: 0;
}

.swipeout-actions .icon {
  width: 20px;
  height: 20px;
}

/* PTR (Pull to Refresh) Styles */
.ptr-preloader {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -50px;
  z-index: 10;
}

.ptr-preloader .preloader {
  width: 28px;
  height: 28px;
  color: var(--mh-gold);
}

/* ============================================
   F7 FAB (Floating Action Button) - Add Opportunity
   ============================================ */

.fab-add-opportunity {
  --f7-fab-size: 56px;
  --f7-fab-bg-color: var(--mh-gold);
  --f7-fab-pressed-bg-color: var(--f7-theme-color-shade);
  --f7-fab-text-color: #000000;
  position: fixed;
  right: 16px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  display: none; /* Hidden by default, shown via JS */
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.fab-add-opportunity.fab-visible {
  display: block;
}

.fab-add-opportunity.fab-hidden {
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

.fab-add-opportunity > a {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mh-gold);
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4),
              0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  text-decoration: none;
}

.fab-add-opportunity > a:hover {
  background: var(--mh-gold-light);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5),
              0 4px 12px rgba(0, 0, 0, 0.25);
}

.fab-add-opportunity > a:active {
  transform: scale(0.92);
  background: var(--f7-theme-color-shade);
}

.fab-add-opportunity > a i.icon {
  font-size: 28px;
  color: #000000;
}

/* FAB ripple effect */
.fab-add-opportunity > a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.3s;
}

.fab-add-opportunity > a:active::after {
  opacity: 1;
  transform: scale(1);
}

/* Desktop: position without tabbar offset */
@media (min-width: 769px) {
  .fab-add-opportunity {
    bottom: 24px;
    right: 24px;
  }
}

/* Mobile: ensure FAB is above tabbar */
@media (max-width: 768px) {
  .fab-add-opportunity {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
    right: 16px;
  }

  /* Hide old legacy fab-add when F7 FAB is present */
  .fab-add {
    display: none !important;
  }
}

/* Small screens: slightly smaller FAB */
@media (max-width: 375px) {
  .fab-add-opportunity {
    --f7-fab-size: 52px;
    right: 12px;
  }

  .fab-add-opportunity > a {
    width: 52px;
    height: 52px;
  }

  .fab-add-opportunity > a i.icon {
    font-size: 24px;
  }
}

/* Light theme adjustments */
.theme-light .fab-add-opportunity > a,
[data-theme="light"] .fab-add-opportunity > a {
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3),
              0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================
   F7 Photo Browser (Fullscreen Gallery)
   ============================================ */

/* Dark theme styling */
.photo-browser-dark {
  --f7-photobrowser-bg-color: rgba(0, 0, 0, 0.95);
  --f7-photobrowser-bars-bg-color: rgba(15, 17, 18, 0.9);
  --f7-photobrowser-bars-text-color: #ffffff;
  --f7-photobrowser-caption-font-size: 14px;
  --f7-photobrowser-caption-light-color: #A7A9AC;
}

.photo-browser-dark .navbar,
.photo-browser-dark .toolbar {
  background: var(--f7-photobrowser-bars-bg-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.photo-browser-dark .navbar .title {
  color: #ffffff;
  font-weight: 500;
}

.photo-browser-dark .navbar .link {
  color: var(--mh-gold);
}

.photo-browser-dark .navbar .link i {
  color: var(--mh-gold);
}

/* Photo counter styling */
.photo-browser-dark .photo-browser-slide-number {
  color: #ffffff;
  font-weight: 500;
}

.photo-browser-dark .photo-browser-of {
  color: var(--mh-text-secondary);
}

/* Navigation arrows */
.photo-browser-dark .photo-browser-prev,
.photo-browser-dark .photo-browser-next {
  color: var(--mh-gold);
}

.photo-browser-dark .photo-browser-prev:hover,
.photo-browser-dark .photo-browser-next:hover {
  color: var(--mh-gold-light);
}

/* Swiper pagination in photo browser */
.photo-browser-dark .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.photo-browser-dark .swiper-pagination-bullet-active {
  background: var(--mh-gold);
}

/* Photo loading indicator */
.photo-browser-dark .photo-browser-slide .preloader {
  color: var(--mh-gold);
}

.photo-browser-dark .swiper-lazy-preloader {
  border-color: var(--mh-gold);
  border-top-color: transparent;
}

/* Caption styling */
.photo-browser-dark .photo-browser-caption {
  color: #ffffff;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  padding: 20px 16px 16px;
}

/* Zoom indication - cursor */
.photo-browser-trigger {
  cursor: zoom-in;
}

.photo-browser-dark .photo-browser-slide.swiper-slide-zoomed .swiper-zoom-container {
  cursor: grab;
}

.photo-browser-dark .photo-browser-slide.swiper-slide-zoomed .swiper-zoom-container:active {
  cursor: grabbing;
}

/* Swiper gallery trigger indicator */
.swiper-gallery .photo-browser-trigger {
  position: relative;
}

.swiper-gallery .photo-browser-trigger::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14L21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  pointer-events: none;
}

.swiper-gallery .photo-browser-trigger:hover::after,
.swiper-gallery .photo-browser-trigger:active::after {
  opacity: 1;
}

/* Mobile: always show expand icon briefly */
@media (max-width: 768px) {
  .swiper-gallery .photo-browser-trigger::after {
    opacity: 0.7;
  }
}

/* Exposition mode (hide bars on tap) */
.photo-browser-exposed .navbar,
.photo-browser-exposed .toolbar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.photo-browser-dark:not(.photo-browser-exposed) .navbar,
.photo-browser-dark:not(.photo-browser-exposed) .toolbar {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Close button styling */
.photo-browser-dark .photo-browser-close-link {
  color: var(--mh-gold);
}

.photo-browser-dark .photo-browser-close-link:active {
  color: var(--mh-gold-light);
}

/* Page type photo browser adjustments */
.photo-browser-page .page-content {
  background: #000000;
}

/* Popup type photo browser adjustments */
.photo-browser-popup {
  background: rgba(0, 0, 0, 0.95);
}

/* Safe area handling for notched devices */
.photo-browser-dark .navbar {
  padding-top: env(safe-area-inset-top, 0);
}

.photo-browser-dark .toolbar {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Legacy carousel photo browser trigger */
.mobile-detail-carousel-slide.photo-browser-trigger {
  cursor: zoom-in;
  position: relative;
}

.mobile-detail-carousel-slide.photo-browser-trigger::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14L21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  pointer-events: none;
  z-index: 5;
}

.mobile-detail-carousel-slide.photo-browser-trigger:hover::after,
.mobile-detail-carousel-slide.photo-browser-trigger:active::after {
  opacity: 1;
}

/* Mobile: always show expand icon */
@media (max-width: 768px) {
  .mobile-detail-carousel-slide.photo-browser-trigger::after {
    opacity: 0.7;
  }
}

/* ============================================
   Infinite Scroll Styles
   ============================================ */

.infinite-scroll-preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.infinite-scroll-preloader.visible,
.infinite-scroll-content.infinite-scroll-loading .infinite-scroll-preloader {
  opacity: 1;
  visibility: visible;
}

.infinite-scroll-preloader .preloader {
  width: 32px;
  height: 32px;
  color: var(--mh-gold);
}

/* Hide infinite scroll preloader when disabled */
.infinite-scroll-content.infinite-scroll-disabled .infinite-scroll-preloader {
  display: none;
}

/* Add loading state indicator text */
.infinite-scroll-preloader::after {
  content: 'Cargando mas...';
  margin-left: 12px;
  font-size: 14px;
  color: var(--mh-text-secondary);
}

/* No more items indicator */
.infinite-scroll-end {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  font-size: 14px;
  color: var(--mh-text-muted);
}

.infinite-scroll-end.visible {
  display: flex;
}

.infinite-scroll-end::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--mh-dark-tertiary);
  margin-right: 12px;
}

.infinite-scroll-end::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--mh-dark-tertiary);
  margin-left: 12px;
}

/* Adjust table container for infinite scroll */
.table-container {
  /* Remove any max-height that might interfere */
  max-height: none;
}

/* Mobile: ensure bottom padding for infinite scroll */
@media (max-width: 768px) {
  .infinite-scroll-preloader {
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .infinite-scroll-end {
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================
   Framework7 Skeleton Loading States
   ============================================ */

/* Base skeleton styles with shimmer animation */
.skeleton-block,
.skeleton-text {
  background: var(--mh-dark-tertiary) !important;
  position: relative;
  overflow: hidden;
}

/* Shimmer wave animation effect */
.skeleton-effect-wave .skeleton-block::after,
.skeleton-effect-wave .skeleton-text::after,
.skeleton-effect-wave.skeleton-block::after,
.skeleton-effect-wave.skeleton-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 80%,
    transparent 100%
  );
  animation: skeleton-wave 1.5s ease-in-out infinite;
  transform: translateX(-100%);
}

@keyframes skeleton-wave {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Light theme adjustment */
[data-theme="light"] .skeleton-effect-wave .skeleton-block::after,
[data-theme="light"] .skeleton-effect-wave .skeleton-text::after,
[data-theme="light"] .skeleton-effect-wave.skeleton-block::after,
[data-theme="light"] .skeleton-effect-wave.skeleton-text::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.03) 20%,
    rgba(0, 0, 0, 0.06) 50%,
    rgba(0, 0, 0, 0.03) 80%,
    transparent 100%
  );
}

/* Skeleton Property Card */
.skeleton-property-card {
  background: var(--mh-dark-secondary);
  border: 1px solid var(--mh-dark-tertiary);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.skeleton-property-card .skeleton-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.skeleton-property-card .skeleton-district {
  width: 120px;
  height: 16px;
  border-radius: 4px;
}

.skeleton-property-card .skeleton-roe {
  width: 70px;
  height: 24px;
  border-radius: 12px;
}

.skeleton-property-card .skeleton-address {
  width: 80%;
  height: 18px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-property-card .skeleton-cadastral {
  width: 50%;
  height: 14px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.skeleton-property-card .skeleton-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.skeleton-property-card .skeleton-kpi {
  text-align: center;
}

.skeleton-property-card .skeleton-kpi-value {
  height: 22px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.skeleton-property-card .skeleton-kpi-label {
  height: 12px;
  width: 60%;
  margin: 0 auto;
  border-radius: 4px;
}

/* Skeleton KPI Card */
.skeleton-kpi-card {
  background: var(--mh-dark-secondary);
  border: 1px solid var(--mh-dark-tertiary);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.skeleton-kpi-card .skeleton-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}

.skeleton-kpi-card .skeleton-content {
  flex: 1;
}

.skeleton-kpi-card .skeleton-label {
  width: 80px;
  height: 14px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-kpi-card .skeleton-value {
  width: 100px;
  height: 24px;
  border-radius: 4px;
}

/* Skeleton List Item */
.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--mh-dark-secondary);
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.skeleton-list-item:last-child {
  border-bottom: none;
}

.skeleton-list-item .skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-list-item .skeleton-content {
  flex: 1;
}

.skeleton-list-item .skeleton-title {
  width: 60%;
  height: 16px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.skeleton-list-item .skeleton-subtitle {
  width: 40%;
  height: 12px;
  border-radius: 4px;
}

/* Skeleton Table Row */
.skeleton-table-row {
  display: grid;
  grid-template-columns: 40px 2fr 1fr 1fr 1fr 80px;
  gap: 12px;
  padding: 12px 16px;
  align-items: center;
  background: var(--mh-dark-secondary);
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.skeleton-table-row .skeleton-cell {
  height: 16px;
  border-radius: 4px;
}

.skeleton-table-row .skeleton-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.skeleton-table-row .skeleton-action {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

/* Skeleton Kanban Card */
.skeleton-kanban-card {
  background: var(--mh-dark-secondary);
  border: 1px solid var(--mh-dark-tertiary);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}

.skeleton-kanban-card .skeleton-title {
  width: 80%;
  height: 16px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-kanban-card .skeleton-district {
  width: 50%;
  height: 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.skeleton-kanban-card .skeleton-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.skeleton-kanban-card .skeleton-price {
  width: 60px;
  height: 16px;
  border-radius: 4px;
}

.skeleton-kanban-card .skeleton-roe {
  width: 50px;
  height: 16px;
  border-radius: 8px;
}

.skeleton-kanban-card .skeleton-profit {
  width: 70px;
  height: 14px;
  border-radius: 4px;
}

/* Skeleton Calendar Event */
.skeleton-calendar-event {
  background: var(--mh-dark-secondary);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  border-left: 3px solid var(--mh-dark-tertiary);
}

.skeleton-calendar-event .skeleton-time {
  width: 80px;
  height: 14px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-calendar-event .skeleton-title {
  width: 70%;
  height: 16px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.skeleton-calendar-event .skeleton-location {
  width: 50%;
  height: 12px;
  border-radius: 4px;
}

/* Loading container with skeletons */
.skeleton-loading-container {
  padding: 16px;
}

.skeleton-loading-container.cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-loading-container.kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.skeleton-loading-container.kanban-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* Mobile-specific skeleton adjustments */
@media (max-width: 768px) {
  .skeleton-property-card {
    padding: 14px;
    margin-bottom: 10px;
  }

  .skeleton-property-card .skeleton-kpis {
    gap: 8px;
  }

  .skeleton-kpi-card {
    padding: 14px;
  }

  .skeleton-loading-container.kpis-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .skeleton-kanban-card {
    padding: 10px;
  }
}

/* Fade-out animation when content loads */
.skeleton-fade-out {
  animation: skeleton-fade 0.3s ease-out forwards;
}

@keyframes skeleton-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .skeleton-effect-wave .skeleton-block::after,
  .skeleton-effect-wave .skeleton-text::after,
  .skeleton-effect-wave.skeleton-block::after,
  .skeleton-effect-wave.skeleton-text::after {
    animation: none;
  }
}

/* ============================================
   F7 Searchbar - Property Search
   ============================================ */

/* Searchbar container */
#propertySearchbar.searchbar {
  --f7-searchbar-bg-color: transparent;
  --f7-searchbar-input-bg-color: var(--mh-dark-tertiary);
  --f7-searchbar-input-text-color: var(--mh-text-primary);
  --f7-searchbar-placeholder-color: var(--mh-text-muted);
  --f7-searchbar-icon-color: var(--mh-text-muted);
  --f7-searchbar-clear-button-color: var(--mh-text-secondary);
  --f7-searchbar-disable-button-color: var(--mh-gold);
  --f7-searchbar-input-font-size: 15px;
  --f7-searchbar-input-height: 44px;
  --f7-searchbar-input-border-radius: 22px;
  flex: 1;
  min-width: 200px;
  max-width: 500px;
  width: auto;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Searchbar inner */
#propertySearchbar .searchbar-inner {
  padding: 0;
  gap: 8px;
}

/* Input wrapper */
#propertySearchbar .searchbar-input-wrap {
  background: var(--mh-dark-tertiary);
  border-radius: 22px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

#propertySearchbar .searchbar-input-wrap:hover {
  background: var(--mh-dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#propertySearchbar.searchbar-focused .searchbar-input-wrap,
#propertySearchbar.searchbar-enabled .searchbar-input-wrap {
  background: var(--mh-dark);
  border-color: var(--mh-gold);
  box-shadow: 0 2px 12px rgba(212, 175, 55, 0.2);
}

/* Input field */
#propertySearchbar input[type="search"] {
  padding: 12px 80px 12px 44px;
  font-size: 15px;
  font-weight: 400;
  color: var(--mh-text-primary);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  height: 44px;
  -webkit-appearance: none;
  appearance: none;
}

#propertySearchbar input[type="search"]::placeholder {
  color: var(--mh-text-muted);
  font-weight: 400;
}

#propertySearchbar input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

/* Search icon */
#propertySearchbar .searchbar-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--mh-text-muted);
  transition: color 0.2s ease;
}

#propertySearchbar .searchbar-icon::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-size: contain;
}

#propertySearchbar.searchbar-focused .searchbar-icon::after,
#propertySearchbar.searchbar-enabled .searchbar-icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
}

/* Clear button (X) */
#propertySearchbar .input-clear-button {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mh-dark-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s ease;
  cursor: pointer;
}

#propertySearchbar .input-clear-button::after {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A7A9AC' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  background-size: contain;
}

#propertySearchbar.searchbar-not-empty .input-clear-button {
  opacity: 1;
  visibility: visible;
}

#propertySearchbar .input-clear-button:hover {
  background: var(--mh-dark);
}

#propertySearchbar .input-clear-button:active {
  transform: translateY(-50%) scale(0.9);
}

/* Loading indicator */
#propertySearchbar .searchbar-loading {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

#propertySearchbar .searchbar-loading .preloader {
  width: 20px;
  height: 20px;
  color: var(--mh-gold);
}

#propertySearchbar .searchbar-loading.searchbar-loading-visible,
#propertySearchbar.searchbar-loading-active .searchbar-loading {
  opacity: 1;
  visibility: visible;
}

/* Hide clear button when loading */
#propertySearchbar.searchbar-loading-active .input-clear-button {
  opacity: 0;
  visibility: hidden;
}

/* Cancel/Disable button (mobile) */
#propertySearchbar .searchbar-disable-button {
  color: var(--mh-gold);
  font-weight: 500;
  font-size: 15px;
  padding: 0 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

#propertySearchbar.searchbar-enabled .searchbar-disable-button {
  opacity: 1;
  visibility: visible;
}

/* Hide desktop class helper */
.hide-desktop {
  display: none;
}

@media (max-width: 768px) {
  .hide-desktop {
    display: inline;
  }
}

/* Mobile searchbar adjustments */
@media (max-width: 768px) {
  #propertySearchbar.searchbar {
    width: 100%;
    min-width: unset;
    max-width: none;
  }

  #propertySearchbar input[type="search"] {
    padding: 14px 70px 14px 44px;
    font-size: 16px; /* Prevents iOS zoom */
    height: 48px;
  }

  #propertySearchbar .searchbar-input-wrap {
    border-radius: 12px;
  }

  #propertySearchbar .input-clear-button {
    right: 38px;
    width: 32px;
    height: 32px;
  }

  #propertySearchbar .searchbar-loading {
    right: 10px;
  }

  /* Expandable behavior */
  #propertySearchbar.searchbar-expandable:not(.searchbar-enabled) {
    flex: 0;
    min-width: 48px;
    width: 48px;
    padding: 0;
  }

  #propertySearchbar.searchbar-expandable:not(.searchbar-enabled) .searchbar-input-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
  }

  #propertySearchbar.searchbar-expandable:not(.searchbar-enabled) input[type="search"] {
    opacity: 0;
    width: 48px;
    padding: 0;
  }

  #propertySearchbar.searchbar-expandable:not(.searchbar-enabled) .searchbar-icon {
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #propertySearchbar.searchbar-expandable:not(.searchbar-enabled) .input-clear-button,
  #propertySearchbar.searchbar-expandable:not(.searchbar-enabled) .searchbar-loading {
    display: none;
  }

  #propertySearchbar.searchbar-expandable.searchbar-enabled {
    flex: 1;
    width: auto;
    transition: flex 0.3s ease, width 0.3s ease;
  }

  #propertySearchbar.searchbar-expandable.searchbar-enabled .searchbar-input-wrap {
    width: 100%;
    border-radius: 12px;
  }

  #propertySearchbar.searchbar-expandable.searchbar-enabled input[type="search"] {
    opacity: 1;
    width: 100%;
    transition: opacity 0.2s ease 0.1s;
  }

  #propertySearchbar.searchbar-expandable.searchbar-enabled .searchbar-icon {
    left: 14px;
    transform: translateY(-50%);
  }
}

/* Light theme searchbar */
.theme-light #propertySearchbar .searchbar-input-wrap,
[data-theme="light"] #propertySearchbar .searchbar-input-wrap {
  background: #f5f5f5;
  border-color: transparent;
}

.theme-light #propertySearchbar .searchbar-input-wrap:hover,
[data-theme="light"] #propertySearchbar .searchbar-input-wrap:hover {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.theme-light #propertySearchbar.searchbar-focused .searchbar-input-wrap,
.theme-light #propertySearchbar.searchbar-enabled .searchbar-input-wrap,
[data-theme="light"] #propertySearchbar.searchbar-focused .searchbar-input-wrap,
[data-theme="light"] #propertySearchbar.searchbar-enabled .searchbar-input-wrap {
  background: #ffffff;
  border-color: var(--mh-gold);
  box-shadow: 0 2px 12px rgba(212, 175, 55, 0.15);
}

.theme-light #propertySearchbar input[type="search"],
[data-theme="light"] #propertySearchbar input[type="search"] {
  color: #1a1a1a;
}

.theme-light #propertySearchbar input[type="search"]::placeholder,
[data-theme="light"] #propertySearchbar input[type="search"]::placeholder {
  color: #9ca3af;
}

.theme-light #propertySearchbar .searchbar-icon::after,
[data-theme="light"] #propertySearchbar .searchbar-icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
}

.theme-light #propertySearchbar.searchbar-focused .searchbar-icon::after,
.theme-light #propertySearchbar.searchbar-enabled .searchbar-icon::after,
[data-theme="light"] #propertySearchbar.searchbar-focused .searchbar-icon::after,
[data-theme="light"] #propertySearchbar.searchbar-enabled .searchbar-icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
}

.theme-light #propertySearchbar .input-clear-button,
[data-theme="light"] #propertySearchbar .input-clear-button {
  background: #e5e5e5;
}

.theme-light #propertySearchbar .input-clear-button:hover,
[data-theme="light"] #propertySearchbar .input-clear-button:hover {
  background: #d1d1d1;
}

.theme-light #propertySearchbar .input-clear-button::after,
[data-theme="light"] #propertySearchbar .input-clear-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Searchbar animations */
#propertySearchbar .searchbar-input-wrap {
  transform: translateZ(0);
  will-change: border-color, box-shadow;
}

/* Focus ring for accessibility */
#propertySearchbar input[type="search"]:focus-visible {
  outline: none;
}

#propertySearchbar.searchbar-focused .searchbar-input-wrap:focus-within {
  outline: none;
  border-color: var(--mh-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}

/* ============================================
   F7 Form Elements - Dark Theme with Gold Accents
   ============================================ */

/* F7 List Form Styling */
.f7-form-list {
  --f7-list-bg-color: var(--mh-dark-secondary);
  --f7-list-item-border-color: var(--mh-dark-tertiary);
  margin: 0 0 16px 0;
}

.f7-form-list ul {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  overflow: hidden;
}

.f7-form-list li {
  --f7-list-item-min-height: 48px;
}

.f7-form-list .item-content {
  padding-left: 16px;
}

.f7-form-list .item-inner {
  padding-right: 16px;
}

/* F7 Input styling */
.f7-form-list .item-input .item-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 16px 12px 0;
}

.f7-form-list .item-title.item-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--mh-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  width: 100%;
}

.f7-form-list .item-input-wrap {
  width: 100%;
}

.f7-form-list .item-input-wrap input,
.f7-form-list .item-input-wrap select,
.f7-form-list .item-input-wrap textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--mh-dark-tertiary);
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.f7-form-list .item-input-wrap input:focus,
.f7-form-list .item-input-wrap select:focus,
.f7-form-list .item-input-wrap textarea:focus {
  border-color: var(--mh-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.f7-form-list .item-input-wrap input::placeholder,
.f7-form-list .item-input-wrap textarea::placeholder {
  color: var(--mh-text-muted);
}

.f7-form-list .item-input-wrap textarea {
  min-height: 80px;
  resize: vertical;
}

/* Select dropdown styling */
.f7-form-list .input-dropdown-wrap {
  position: relative;
}

.f7-form-list .input-dropdown-wrap select {
  padding-right: 36px;
  cursor: pointer;
}

.f7-form-list .input-dropdown-wrap::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--mh-text-muted);
  pointer-events: none;
}

/* Required field indicator */
.input-required {
  color: var(--mh-error);
  font-weight: 600;
}

/* F7 Block Title styling */
.f7-block-title {
  color: var(--mh-gold);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 16px 8px;
  margin: 0;
}

.f7-block-title.form-divider-title {
  text-align: center;
  color: var(--mh-text-muted);
  font-size: 12px;
  position: relative;
  padding: 24px 16px;
}

.f7-block-title.form-divider-title::before,
.f7-block-title.form-divider-title::after {
  content: '';
  position: absolute;
  top: 50%;
  height: 1px;
  width: calc(50% - 80px);
  background: var(--mh-dark-tertiary);
}

.f7-block-title.form-divider-title::before {
  left: 16px;
}

.f7-block-title.form-divider-title::after {
  right: 16px;
}

/* F7 Import Block */
.f7-import-block {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(0, 82, 136, 0.05));
  border: 1px solid var(--mh-dark-tertiary);
  border-radius: 12px;
  padding: 16px;
  margin: 0 16px 16px;
}

.f7-import-block .import-hint {
  font-size: 13px;
  color: var(--mh-text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.f7-import-block .f7-form-list {
  margin-bottom: 12px;
}

.f7-import-btn {
  --f7-button-bg-color: var(--mh-gold);
  --f7-button-text-color: #000000;
  font-weight: 600;
}

.f7-import-btn:active {
  --f7-button-bg-color: var(--f7-theme-color-shade);
}

/* F7 Toggle Switch - Gold Accent */
.toggle.color-gold {
  --f7-toggle-active-color: var(--mh-gold);
  --f7-toggle-inactive-color: var(--mh-dark-tertiary);
  --f7-toggle-border-color: var(--mh-dark-tertiary);
}

.toggle.color-gold .toggle-icon {
  background: var(--mh-dark-tertiary);
  border: 2px solid var(--mh-dark-tertiary);
}

.toggle.color-gold input:checked + .toggle-icon {
  background: var(--mh-gold);
  border-color: var(--mh-gold);
}

.toggle.color-gold .toggle-icon::before {
  background: var(--mh-text-muted);
}

.toggle.color-gold input:checked + .toggle-icon::before {
  background: #000000;
}

/* F7 Checkbox styling */
.f7-form-list .item-checkbox .icon-checkbox {
  --f7-checkbox-inactive-color: var(--mh-dark-tertiary);
  --f7-checkbox-active-color: var(--mh-gold);
  border-color: var(--mh-dark-tertiary);
  border-width: 2px;
}

.f7-form-list .item-checkbox input:checked ~ .icon-checkbox {
  background: var(--mh-gold);
  border-color: var(--mh-gold);
}

.f7-form-list .item-checkbox input:checked ~ .icon-checkbox::after {
  border-color: #000000;
}

/* F7 Range Slider - Gold Accent */
.range-slider.color-gold {
  --f7-range-bar-bg-color: var(--mh-dark-tertiary);
  --f7-range-bar-active-bg-color: var(--mh-gold);
  --f7-range-knob-color: var(--mh-gold);
  --f7-range-knob-size: 24px;
  --f7-range-bar-size: 6px;
  --f7-range-bar-border-radius: 3px;
}

.range-slider.color-gold .range-knob {
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

.range-slider.color-gold .range-knob::after {
  background: var(--mh-gold);
}

/* Range slider with value display */
.f7-range-container {
  padding: 16px;
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  margin-bottom: 16px;
}

.f7-range-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.f7-range-label {
  font-size: 13px;
  color: var(--mh-text-secondary);
}

.f7-range-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--mh-gold);
}

.f7-range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--mh-text-muted);
}

/* F7 Input Validation States */
.f7-form-list .item-input-wrap input.input-invalid,
.f7-form-list .item-input-wrap select.input-invalid,
.f7-form-list .item-input-wrap textarea.input-invalid {
  border-color: var(--mh-error);
}

.f7-form-list .item-input-wrap input.input-invalid:focus,
.f7-form-list .item-input-wrap select.input-invalid:focus,
.f7-form-list .item-input-wrap textarea.input-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.f7-form-list .item-input-wrap input.input-valid,
.f7-form-list .item-input-wrap select.input-valid,
.f7-form-list .item-input-wrap textarea.input-valid {
  border-color: var(--mh-success);
}

.f7-form-list .item-input-wrap input.input-valid:focus,
.f7-form-list .item-input-wrap select.input-valid:focus,
.f7-form-list .item-input-wrap textarea.input-valid:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Input error message */
.f7-input-error {
  font-size: 12px;
  color: var(--mh-error);
  margin-top: 4px;
  display: none;
}

.f7-input-error.visible {
  display: block;
}

/* F7 Item Input Error Message (used by validation helpers) */
.item-input-error-message {
  font-size: 12px;
  color: var(--mh-error);
  margin-top: 4px;
  padding-left: 2px;
  animation: fadeInError 0.2s ease-out;
}

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

/* Validation state visual feedback */
.item-input-valid .item-input-wrap,
.item-input-invalid .item-input-wrap {
  position: relative;
}

.item-content.item-input-invalid .item-title {
  color: var(--mh-error);
}

.item-content.item-input-valid .item-title {
  color: var(--mh-success);
}

/* F7 Stepper for number inputs */
.stepper.color-gold {
  --f7-stepper-button-bg-color: var(--mh-dark-tertiary);
  --f7-stepper-button-text-color: var(--mh-text-primary);
  --f7-stepper-button-pressed-bg-color: var(--mh-gold);
  --f7-stepper-button-pressed-text-color: #000000;
  --f7-stepper-value-text-color: var(--mh-text-primary);
  --f7-stepper-value-bg-color: var(--mh-dark-tertiary);
}

/* Light theme form adjustments */
.theme-light .f7-form-list ul,
[data-theme="light"] .f7-form-list ul {
  background: #ffffff;
}

.theme-light .f7-form-list .item-input-wrap input,
.theme-light .f7-form-list .item-input-wrap select,
.theme-light .f7-form-list .item-input-wrap textarea,
[data-theme="light"] .f7-form-list .item-input-wrap input,
[data-theme="light"] .f7-form-list .item-input-wrap select,
[data-theme="light"] .f7-form-list .item-input-wrap textarea {
  background: #f5f5f5;
  border-color: #e5e5e5;
  color: #1a1a1a;
}

.theme-light .f7-form-list .item-input-wrap input:focus,
.theme-light .f7-form-list .item-input-wrap select:focus,
.theme-light .f7-form-list .item-input-wrap textarea:focus,
[data-theme="light"] .f7-form-list .item-input-wrap input:focus,
[data-theme="light"] .f7-form-list .item-input-wrap select:focus,
[data-theme="light"] .f7-form-list .item-input-wrap textarea:focus {
  border-color: var(--mh-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.theme-light .f7-form-list .item-input-wrap input::placeholder,
.theme-light .f7-form-list .item-input-wrap textarea::placeholder,
[data-theme="light"] .f7-form-list .item-input-wrap input::placeholder,
[data-theme="light"] .f7-form-list .item-input-wrap textarea::placeholder {
  color: #9ca3af;
}

.theme-light .toggle.color-gold .toggle-icon,
[data-theme="light"] .toggle.color-gold .toggle-icon {
  background: #e5e5e5;
  border-color: #d1d5db;
}

.theme-light .f7-range-container,
[data-theme="light"] .f7-range-container {
  background: #ffffff;
}

.theme-light .f7-import-block,
[data-theme="light"] .f7-import-block {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.03), rgba(0, 82, 136, 0.03));
  border-color: #e5e5e5;
}

/* Mobile form adjustments */
@media (max-width: 768px) {
  .f7-form-list .item-input .item-inner {
    padding: 10px 12px 10px 0;
  }

  .f7-form-list .item-input-wrap input,
  .f7-form-list .item-input-wrap select,
  .f7-form-list .item-input-wrap textarea {
    padding: 14px 12px;
    font-size: 16px; /* Prevents iOS zoom */
  }

  .f7-range-value {
    font-size: 16px;
  }

  .f7-block-title {
    padding: 12px 12px 6px;
  }
}

/* ============================================
   F7 Action Sheet - Dark Theme Styling
   ============================================ */

/* Action Sheet Container */
.actions-modal {
  --f7-actions-bg-color: var(--mh-dark-secondary);
  --f7-actions-button-text-color: var(--mh-text-primary);
  --f7-actions-label-text-color: var(--mh-text-secondary);
  --f7-actions-button-height: 56px;
  --f7-actions-button-border-color: var(--mh-dark-tertiary);
  --f7-actions-grid-button-text-color: var(--mh-text-primary);
  --f7-actions-button-pressed-bg-color: var(--mh-dark-tertiary);
  max-width: 420px;
  margin: 0 auto;
}

/* Action sheet groups */
.actions-modal .actions-group {
  background: var(--mh-dark-secondary);
  border-radius: 14px;
  margin: 8px;
  overflow: hidden;
}

.actions-modal .actions-group:last-child {
  margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* Action buttons */
.actions-modal .actions-button {
  background: var(--mh-dark-secondary);
  border-top: 1px solid var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
  font-size: 17px;
  font-weight: 400;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  gap: 16px;
  text-align: left;
  transition: background-color 0.15s ease;
}

.actions-modal .actions-button:first-child {
  border-top: none;
}

.actions-modal .actions-button:active,
.actions-modal .actions-button.active-state {
  background: var(--mh-dark-tertiary);
}

/* Action button icons */
.action-sheet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.action-sheet-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--mh-gold);
  stroke-width: 1.8;
}

/* Destructive action styling */
.actions-modal .actions-button[class*="color-red"],
.actions-modal .actions-button.actions-button-color-red {
  color: var(--mh-error);
}

.action-sheet-icon-destructive svg {
  stroke: var(--mh-error);
}

/* Label (header) styling */
.actions-modal .actions-label {
  background: var(--mh-dark-secondary);
  color: var(--mh-text-secondary);
  font-size: 13px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
  min-height: auto;
  height: auto;
  line-height: normal;
}

/* Property header in action sheet */
.action-sheet-property-header {
  text-align: center;
  padding: 8px 0;
}

.action-sheet-property-address {
  font-size: 15px;
  font-weight: 600;
  color: var(--mh-text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.action-sheet-property-details {
  font-size: 13px;
  color: var(--mh-gold);
  font-weight: 500;
}

/* Cancel button - bold styling */
.actions-modal .actions-group:last-child .actions-button {
  font-weight: 600;
  justify-content: center;
  color: var(--mh-gold);
}

/* Backdrop */
.actions-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* Light theme overrides */
.theme-light .actions-modal,
[data-theme="light"] .actions-modal {
  --f7-actions-bg-color: #ffffff;
  --f7-actions-button-text-color: #1a1a1a;
  --f7-actions-label-text-color: #6B7280;
  --f7-actions-button-border-color: #e5e5e5;
  --f7-actions-button-pressed-bg-color: #f5f5f5;
}

.theme-light .actions-modal .actions-group,
[data-theme="light"] .actions-modal .actions-group {
  background: #ffffff;
}

.theme-light .actions-modal .actions-button,
[data-theme="light"] .actions-modal .actions-button {
  background: #ffffff;
  border-top-color: #e5e5e5;
  color: #1a1a1a;
}

.theme-light .actions-modal .actions-button:active,
.theme-light .actions-modal .actions-button.active-state,
[data-theme="light"] .actions-modal .actions-button:active,
[data-theme="light"] .actions-modal .actions-button.active-state {
  background: #f5f5f5;
}

.theme-light .actions-modal .actions-label,
[data-theme="light"] .actions-modal .actions-label {
  background: #ffffff;
  border-bottom-color: #e5e5e5;
}

.theme-light .action-sheet-property-address,
[data-theme="light"] .action-sheet-property-address {
  color: #1a1a1a;
}

.theme-light .actions-backdrop,
[data-theme="light"] .actions-backdrop {
  background: rgba(0, 0, 0, 0.4);
}

/* ============================================
   F7 Calendar Picker - Dark Theme Styling
   ============================================ */

/* Calendar modal/sheet container */
.calendar-modal,
.calendar-sheet-modal {
  --f7-calendar-bg-color: var(--mh-dark-secondary);
  --f7-calendar-border-color: var(--mh-dark-tertiary);
  --f7-calendar-picker-selected-bg-color: var(--mh-gold);
  --f7-calendar-picker-selected-text-color: #000000;
  --f7-calendar-picker-hover-bg-color: rgba(212, 175, 55, 0.15);
  --f7-calendar-footer-bg-color: var(--mh-dark-secondary);
  --f7-calendar-header-bg-color: var(--mh-dark-secondary);
  --f7-calendar-week-header-bg-color: var(--mh-dark-secondary);
}

/* Calendar container */
.calendar {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  overflow: hidden;
}

/* Calendar header (month/year navigation) */
.calendar-header {
  background: var(--mh-dark-secondary);
  border-bottom: 1px solid var(--mh-dark-tertiary);
  padding: 12px 16px;
}

.calendar-month-selector,
.calendar-year-selector {
  color: var(--mh-text-primary);
  font-weight: 600;
  font-size: 16px;
}

.calendar-month-selector:hover,
.calendar-year-selector:hover {
  color: var(--mh-gold);
}

/* Navigation arrows */
.calendar-prev-month-button,
.calendar-next-month-button {
  color: var(--mh-text-secondary);
  transition: color 0.2s ease;
}

.calendar-prev-month-button:hover,
.calendar-next-month-button:hover {
  color: var(--mh-gold);
}

.calendar-prev-month-button i,
.calendar-next-month-button i {
  font-size: 24px;
}

/* Week header (days of week) */
.calendar-week-header {
  background: var(--mh-dark-secondary);
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.calendar-week-header .calendar-week-day {
  color: var(--mh-text-muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

/* Month rows */
.calendar-months {
  background: var(--mh-dark-secondary);
}

.calendar-row {
  border-bottom: 1px solid rgba(34, 39, 43, 0.5);
}

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

/* Day cells */
.calendar-day {
  color: var(--mh-text-primary);
  font-size: 15px;
  font-weight: 400;
  transition: all 0.15s ease;
}

.calendar-day:not(.calendar-day-disabled):not(.calendar-day-selected):hover {
  background: rgba(212, 175, 55, 0.1);
  border-radius: 50%;
}

/* Today */
.calendar-day-today .calendar-day-number {
  color: var(--mh-gold);
  font-weight: 600;
}

.calendar-day-today:not(.calendar-day-selected) {
  position: relative;
}

.calendar-day-today:not(.calendar-day-selected)::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mh-gold);
}

/* Selected day */
.calendar-day-selected {
  background: var(--mh-gold) !important;
  border-radius: 50%;
}

.calendar-day-selected .calendar-day-number {
  color: #000000 !important;
  font-weight: 600;
}

/* Disabled days (past dates, etc.) */
.calendar-day-disabled {
  color: var(--mh-text-muted);
  opacity: 0.4;
}

.calendar-day-disabled .calendar-day-number {
  color: var(--mh-text-muted);
}

/* Days from other months */
.calendar-day-prev,
.calendar-day-next {
  color: var(--mh-text-muted);
  opacity: 0.5;
}

/* Calendar footer */
.calendar-footer {
  background: var(--mh-dark-secondary);
  border-top: 1px solid var(--mh-dark-tertiary);
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.calendar-footer .button {
  min-width: 80px;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
}

.calendar-footer .button-outline {
  border: 1px solid var(--mh-dark-tertiary);
  color: var(--mh-text-secondary);
}

.calendar-footer .button-outline:active {
  background: var(--mh-dark-tertiary);
}

.calendar-footer .button-fill {
  background: var(--mh-gold);
  color: #000000;
}

.calendar-footer .button-fill:active {
  background: var(--f7-theme-color-shade);
}

/* Time picker styling */
.calendar-time-picker {
  background: var(--mh-dark-secondary);
  border-top: 1px solid var(--mh-dark-tertiary);
  padding: 16px;
}

.calendar-time-picker-label {
  color: var(--mh-text-secondary);
  font-size: 13px;
  margin-bottom: 8px;
}

.calendar-time-picker .picker-column {
  color: var(--mh-text-primary);
}

.calendar-time-picker .picker-item {
  color: var(--mh-text-secondary);
}

.calendar-time-picker .picker-item-selected {
  color: var(--mh-gold);
  font-weight: 600;
}

/* Inline calendar (in modal content) */
.calendar-inline {
  border: 1px solid var(--mh-dark-tertiary);
  border-radius: 12px;
  overflow: hidden;
}

/* Calendar modal specific */
.calendar-modal .modal-inner {
  background: var(--mh-dark-secondary);
  border-radius: 16px;
  overflow: hidden;
  max-width: 340px;
  margin: auto;
}

/* Calendar sheet modal specific */
.calendar-sheet-modal {
  border-radius: 16px 16px 0 0;
  max-height: 70vh;
}

.calendar-sheet-modal .sheet-modal-inner {
  background: var(--mh-dark-secondary);
}

/* Custom calendar input styling */
.calendar-input {
  cursor: pointer;
  background: var(--mh-dark-tertiary);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--mh-text-primary);
  font-size: 15px;
  width: 100%;
  transition: all 0.2s ease;
}

.calendar-input:hover {
  background: var(--mh-dark);
  border-color: var(--mh-dark-tertiary);
}

.calendar-input:focus,
.calendar-input.input-focused {
  background: var(--mh-dark);
  border-color: var(--mh-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.calendar-input::placeholder {
  color: var(--mh-text-muted);
}

/* Calendar input with icon */
.calendar-input-wrapper {
  position: relative;
}

.calendar-input-wrapper .calendar-input {
  padding-right: 44px;
}

.calendar-input-wrapper .calendar-input-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mh-text-muted);
  pointer-events: none;
  transition: color 0.2s ease;
}

.calendar-input-wrapper:hover .calendar-input-icon,
.calendar-input-wrapper .calendar-input:focus + .calendar-input-icon {
  color: var(--mh-gold);
}

/* Light theme overrides */
.theme-light .calendar,
[data-theme="light"] .calendar {
  background: #ffffff;
}

.theme-light .calendar-header,
.theme-light .calendar-week-header,
.theme-light .calendar-months,
.theme-light .calendar-footer,
[data-theme="light"] .calendar-header,
[data-theme="light"] .calendar-week-header,
[data-theme="light"] .calendar-months,
[data-theme="light"] .calendar-footer {
  background: #ffffff;
}

.theme-light .calendar-header,
.theme-light .calendar-week-header,
.theme-light .calendar-footer,
.theme-light .calendar-row,
[data-theme="light"] .calendar-header,
[data-theme="light"] .calendar-week-header,
[data-theme="light"] .calendar-footer,
[data-theme="light"] .calendar-row {
  border-color: #e5e5e5;
}

.theme-light .calendar-month-selector,
.theme-light .calendar-year-selector,
[data-theme="light"] .calendar-month-selector,
[data-theme="light"] .calendar-year-selector {
  color: #1a1a1a;
}

.theme-light .calendar-day,
[data-theme="light"] .calendar-day {
  color: #1a1a1a;
}

.theme-light .calendar-day-prev,
.theme-light .calendar-day-next,
[data-theme="light"] .calendar-day-prev,
[data-theme="light"] .calendar-day-next {
  color: #9ca3af;
}

.theme-light .calendar-input,
[data-theme="light"] .calendar-input {
  background: #f5f5f5;
  color: #1a1a1a;
}

.theme-light .calendar-input:hover,
[data-theme="light"] .calendar-input:hover {
  background: #ffffff;
  border-color: #e5e5e5;
}

.theme-light .calendar-input:focus,
[data-theme="light"] .calendar-input:focus {
  background: #ffffff;
  border-color: var(--mh-gold);
}

.theme-light .calendar-inline,
[data-theme="light"] .calendar-inline {
  border-color: #e5e5e5;
}

/* Mobile calendar adjustments */
@media (max-width: 768px) {
  .calendar-modal .modal-inner {
    max-width: none;
    margin: 8px;
    border-radius: 14px;
  }

  .calendar-sheet-modal {
    max-height: 80vh;
  }

  .calendar-day {
    font-size: 14px;
  }

  .calendar-week-day {
    font-size: 11px;
  }
}

/* Animation for action sheet */
.actions-modal {
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.actions-modal.modal-in {
  transform: translateY(0);
}

.actions-modal.modal-out {
  transform: translateY(100%);
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .actions-modal {
    max-width: none;
  }

  .actions-modal .actions-group {
    margin: 8px 8px;
    border-radius: 12px;
  }

  .actions-modal .actions-button {
    height: 52px;
    font-size: 16px;
    padding: 0 16px;
    gap: 14px;
  }

  .action-sheet-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* Small screens */
@media (max-width: 375px) {
  .actions-modal .actions-button {
    height: 48px;
    font-size: 15px;
    padding: 0 14px;
    gap: 12px;
  }

  .action-sheet-icon svg {
    width: 18px;
    height: 18px;
  }

  .action-sheet-property-address {
    font-size: 14px;
  }

  .action-sheet-property-details {
    font-size: 12px;
  }
}

/* ============================================
   F7 Notifications - Enhanced Notification System
   ============================================ */

/* Base notification styling */
.notification {
  --f7-notification-bg-color: var(--mh-dark-secondary);
  --f7-notification-title-color: var(--mh-text-primary);
  --f7-notification-subtitle-color: var(--mh-text-primary);
  --f7-notification-text-color: var(--mh-text-secondary);
  --f7-notification-title-font-size: 14px;
  --f7-notification-title-font-weight: 600;
  --f7-notification-subtitle-font-size: 15px;
  --f7-notification-text-font-size: 13px;
  --f7-notification-icon-size: 24px;
  --f7-notification-border-radius: 12px;
  max-width: 420px;
  margin: 0 auto;
}

/* M&H Custom notification wrapper */
.mhc-notification {
  background: var(--mh-dark-secondary);
  border: 1px solid var(--mh-dark-tertiary);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 2px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin: 8px;
  margin-top: calc(8px + env(safe-area-inset-top, 0px));
}

/* Notification inner container */
.mhc-notification .notification-content {
  display: flex;
  align-items: flex-start;
  padding: 14px 16px;
  gap: 12px;
}

/* Notification icon container */
.mhc-notification .notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}

.mhc-notification .notification-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

/* Text content area */
.mhc-notification .notification-header {
  flex: 1;
  min-width: 0;
}

.mhc-notification .notification-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mh-text-primary);
  margin-bottom: 2px;
  line-height: 1.3;
}

.mhc-notification .notification-subtitle {
  font-size: 15px;
  font-weight: 500;
  color: var(--mh-text-primary);
  line-height: 1.4;
  margin-bottom: 2px;
}

.mhc-notification .notification-text {
  font-size: 13px;
  color: var(--mh-text-secondary);
  line-height: 1.4;
  margin-top: 4px;
}

/* Close button */
.mhc-notification .notification-close-button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.mhc-notification .notification-close-button:hover {
  background: var(--mh-dark-tertiary);
}

.mhc-notification .notification-close-button::before,
.mhc-notification .notification-close-button::after {
  background: var(--mh-text-secondary);
}

/* ============================================
   Notification Type Variants
   ============================================ */

/* Success notification */
.notification-success {
  border-left: 4px solid var(--mh-success);
}

.notification-success .notification-icon {
  background: rgba(16, 185, 129, 0.15);
  color: var(--mh-success);
}

.notification-success .notification-icon svg {
  stroke: var(--mh-success);
}

/* Error notification */
.notification-error {
  border-left: 4px solid var(--mh-error);
}

.notification-error .notification-icon {
  background: rgba(239, 68, 68, 0.15);
  color: var(--mh-error);
}

.notification-error .notification-icon svg {
  stroke: var(--mh-error);
}

/* Warning notification */
.notification-warning {
  border-left: 4px solid var(--mh-warning);
}

.notification-warning .notification-icon {
  background: rgba(245, 158, 11, 0.15);
  color: var(--mh-warning);
}

.notification-warning .notification-icon svg {
  stroke: var(--mh-warning);
}

/* Info notification */
.notification-info {
  border-left: 4px solid var(--mh-blue);
}

.notification-info .notification-icon {
  background: rgba(59, 130, 246, 0.15);
  color: var(--mh-blue);
}

.notification-info .notification-icon svg {
  stroke: var(--mh-blue);
}

/* ============================================
   Notification Action Buttons
   ============================================ */

.notification-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--mh-dark-tertiary);
}

.notification-action-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mh-gold);
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s ease, transform 0.1s ease;
  min-height: 36px;
}

.notification-action-btn:hover {
  background: var(--mh-dark-tertiary);
}

.notification-action-btn:active {
  transform: scale(0.96);
}

.notification-action-bold {
  font-weight: 600;
}

/* Destructive action button */
.notification-action-btn[style*="color: var(--mh-error)"],
.notification-action-btn.notification-action-destructive {
  color: var(--mh-error);
}

/* ============================================
   Notification Animations
   ============================================ */

.notification.modal-in {
  animation: notification-slide-in 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.notification.modal-out {
  animation: notification-slide-out 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes notification-slide-in {
  0% {
    opacity: 0;
    transform: translateY(-100%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes notification-slide-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(0.9);
  }
}

/* ============================================
   Toast Enhancements (for existing showToast)
   ============================================ */

/* Warning toast */
.toast-warning {
  border-left: 3px solid var(--mh-warning);
}

/* Info toast */
.toast-info {
  border-left: 3px solid var(--mh-blue);
}

/* ============================================
   Light Theme Notification Overrides
   ============================================ */

.theme-light .mhc-notification,
[data-theme="light"] .mhc-notification {
  background: #ffffff;
  border-color: #e5e5e5;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
              0 2px 8px rgba(0, 0, 0, 0.06);
}

.theme-light .mhc-notification .notification-title,
.theme-light .mhc-notification .notification-subtitle,
[data-theme="light"] .mhc-notification .notification-title,
[data-theme="light"] .mhc-notification .notification-subtitle {
  color: #1a1a1a;
}

.theme-light .mhc-notification .notification-text,
[data-theme="light"] .mhc-notification .notification-text {
  color: #6B7280;
}

.theme-light .mhc-notification .notification-close-button:hover,
[data-theme="light"] .mhc-notification .notification-close-button:hover {
  background: #f5f5f5;
}

.theme-light .notification-actions,
[data-theme="light"] .notification-actions {
  border-top-color: #e5e5e5;
}

.theme-light .notification-action-btn:hover,
[data-theme="light"] .notification-action-btn:hover {
  background: #f5f5f5;
}

.theme-light .notification-success .notification-icon,
[data-theme="light"] .notification-success .notification-icon {
  background: rgba(16, 185, 129, 0.1);
}

.theme-light .notification-error .notification-icon,
[data-theme="light"] .notification-error .notification-icon {
  background: rgba(239, 68, 68, 0.1);
}

.theme-light .notification-warning .notification-icon,
[data-theme="light"] .notification-warning .notification-icon {
  background: rgba(245, 158, 11, 0.1);
}

.theme-light .notification-info .notification-icon,
[data-theme="light"] .notification-info .notification-icon {
  background: rgba(59, 130, 246, 0.1);
}

/* Light theme toasts */
.theme-light .toast-warning,
[data-theme="light"] .toast-warning {
  border-left: 3px solid var(--mh-warning);
}

.theme-light .toast-info,
[data-theme="light"] .toast-info {
  border-left: 3px solid var(--mh-blue);
}

/* ============================================
   Mobile-Specific Notification Styles
   ============================================ */

@media (max-width: 768px) {
  .notification {
    max-width: none;
  }

  .mhc-notification {
    margin: 8px;
    margin-top: calc(8px + env(safe-area-inset-top, 0px));
    border-radius: 12px;
  }

  .mhc-notification .notification-content {
    padding: 12px 14px;
    gap: 10px;
  }

  .mhc-notification .notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .mhc-notification .notification-icon svg {
    width: 20px;
    height: 20px;
  }

  .mhc-notification .notification-subtitle {
    font-size: 14px;
  }

  .mhc-notification .notification-text {
    font-size: 12px;
  }

  .notification-actions {
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
  }

  .notification-action-btn {
    padding: 6px 12px;
    font-size: 13px;
    min-height: 32px;
  }
}

/* Small screens */
@media (max-width: 375px) {
  .mhc-notification .notification-content {
    padding: 10px 12px;
    gap: 8px;
  }

  .mhc-notification .notification-icon {
    width: 32px;
    height: 32px;
  }

  .mhc-notification .notification-icon svg {
    width: 18px;
    height: 18px;
  }

  .mhc-notification .notification-subtitle {
    font-size: 13px;
  }

  .mhc-notification .notification-close-button {
    width: 24px;
    height: 24px;
    top: 6px;
    right: 6px;
  }
}

/* ============================================
   Stacked Notifications
   ============================================ */

/* When multiple notifications are shown, stack them */
.notification + .notification {
  margin-top: 8px;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .notification.modal-in,
  .notification.modal-out {
    animation: none;
  }
}

/* ============================================
   F7 Preloader - Gold Themed Styles
   ============================================ */

/* Base preloader gold color */
.preloader.color-gold,
.preloader-gold {
  --f7-preloader-color: var(--mh-gold);
  color: var(--mh-gold);
}

/* Ensure preloader color is applied consistently */
.preloader-inner,
.preloader-inner-line {
  stroke: currentColor;
}

/* Full-screen preloader backdrop */
.preloader-backdrop {
  background: rgba(15, 17, 18, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Dialog preloader styling */
.dialog-preloader .preloader {
  color: var(--mh-gold);
}

.dialog.dialog-preloader {
  background: var(--mh-dark-secondary);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--mh-dark-tertiary);
}

.dialog-preloader .dialog-inner {
  padding: 0;
}

.dialog-preloader .dialog-title {
  color: var(--mh-text-primary);
  font-size: 15px;
  font-weight: 500;
  margin-top: 16px;
}

/* Preloader sizes */
.preloader-small,
.preloader.preloader-small {
  width: 20px;
  height: 20px;
}

.preloader-medium,
.preloader.preloader-medium {
  width: 32px;
  height: 32px;
}

.preloader-large,
.preloader.preloader-large {
  width: 44px;
  height: 44px;
}

/* Button loading state */
.button-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.9;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button-loading .preloader-button {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.button-loading-text {
  font-weight: 500;
}

/* Button preloader - inherit color from button context */
.button-fill .preloader-button {
  color: inherit;
}

/* Specific button preloader with gold on dark backgrounds */
.preloader-button.color-gold {
  color: var(--mh-gold);
}

/* White preloader for gold/filled buttons */
.button-fill.color-gold .preloader-button,
.button-fill.button-loading .preloader-button,
.button[style*="gold"] .preloader-button {
  color: #000000;
}

/* Submit button loading states - specific buttons */
#scheduleSubmitBtn.button-loading,
#submitManualBtn.button-loading,
#importIdealistaBtn.button-loading {
  background: var(--mh-gold);
  color: #000000;
}

#scheduleSubmitBtn.button-loading .preloader-button,
#submitManualBtn.button-loading .preloader-button,
#importIdealistaBtn.button-loading .preloader-button {
  color: #000000;
}

/* Content loading container */
.content-loading {
  position: relative;
  min-height: 200px;
}

.content-preloader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
}

.content-preloader-container .preloader {
  width: 36px;
  height: 36px;
}

.content-preloader-text {
  font-size: 14px;
  color: var(--mh-text-secondary);
  font-weight: 500;
}

/* Inline preloader for text/buttons */
.inline-preloader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.inline-preloader .preloader {
  width: 16px;
  height: 16px;
}

/* Refresh button loading state */
#refreshBtn.loading {
  pointer-events: none;
}

#refreshBtn.loading .icon,
#refreshBtn.loading svg {
  animation: spin 1s linear infinite;
}

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

/* Searchbar preloader */
.searchbar-loading .preloader {
  color: var(--mh-gold);
}

/* Infinite scroll preloader enhancement */
.infinite-scroll-preloader .preloader {
  color: var(--mh-gold);
  width: 28px;
  height: 28px;
}

/* PTR (Pull to Refresh) preloader */
.ptr-preloader .preloader,
.ptr-preloader .ptr-preloader-icon {
  color: var(--mh-gold);
}

/* Swiper lazy preloader */
.swiper-lazy-preloader {
  border-color: var(--mh-gold);
  border-top-color: transparent;
}

/* Photo Browser preloader */
.photo-browser .preloader,
.photo-browser-slide .preloader {
  color: var(--mh-gold);
}

/* Card/list loading state indicator */
.card-loading,
.list-loading {
  position: relative;
}

.card-loading::after,
.list-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid var(--mh-dark-tertiary);
  border-top-color: var(--mh-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Import status loading icon animation */
.import-status.loading .import-status-icon {
  animation: pulse 1.5s ease-in-out infinite;
}

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

/* Spinner for legacy compatibility */
.spinner-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

.spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* Loading spinner legacy class */
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--mh-dark-tertiary);
  border-top-color: var(--mh-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

/* Light theme adjustments for preloaders */
.theme-light .preloader.color-gold,
[data-theme="light"] .preloader.color-gold {
  color: var(--mh-gold);
}

.theme-light .dialog.dialog-preloader,
[data-theme="light"] .dialog.dialog-preloader {
  background: #ffffff;
  border-color: #e5e5e5;
}

.theme-light .dialog-preloader .dialog-title,
[data-theme="light"] .dialog-preloader .dialog-title {
  color: #1a1a1a;
}

.theme-light .content-preloader-text,
[data-theme="light"] .content-preloader-text {
  color: #6B7280;
}

.theme-light .preloader-backdrop,
[data-theme="light"] .preloader-backdrop {
  background: rgba(255, 255, 255, 0.85);
}

.theme-light .card-loading::after,
.theme-light .list-loading::after,
[data-theme="light"] .card-loading::after,
[data-theme="light"] .list-loading::after {
  border-color: #e5e5e5;
  border-top-color: var(--mh-gold);
}

.theme-light .loading-spinner,
[data-theme="light"] .loading-spinner {
  border-color: #e5e5e5;
  border-top-color: var(--mh-gold);
}

/* Reduce motion preference for preloaders */
@media (prefers-reduced-motion: reduce) {
  .preloader,
  .spinner-sm,
  .spinner-lg,
  .loading-spinner,
  #refreshBtn.loading .icon,
  #refreshBtn.loading svg,
  .card-loading::after,
  .list-loading::after {
    animation: none;
  }

  .import-status.loading .import-status-icon {
    animation: none;
  }
}

/* ============================================
   F7 GAUGE - ROE/KPI Visualization
   ============================================ */
.gauge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gauge-svg {
  max-width: 100%;
  height: auto;
}

.gauge-value-text {
  font-weight: 700;
  font-size: 16px;
  fill: var(--f7-text-color);
}

.gauge-label-text {
  font-size: 11px;
  fill: var(--mh-text-muted);
}

/* ROE Gauge Colors */
.gauge-roe-excellent .gauge-stroke { stroke: var(--mh-green) !important; }
.gauge-roe-good .gauge-stroke { stroke: var(--mh-gold) !important; }
.gauge-roe-medium .gauge-stroke { stroke: var(--mh-orange) !important; }
.gauge-roe-low .gauge-stroke { stroke: var(--mh-red) !important; }

/* Gauge Sizes */
.gauge-small { width: 48px; height: 48px; }
.gauge-medium { width: 80px; height: 80px; }
.gauge-large { width: 120px; height: 120px; }

.gauge-small .gauge-value-text { font-size: 12px; }
.gauge-medium .gauge-value-text { font-size: 18px; }
.gauge-large .gauge-value-text { font-size: 24px; }

/* ============================================
   F7 DATA TABLE - Analytics Tables
   ============================================ */
.data-table { overflow-x: auto; }
.data-table table { width: 100%; border-collapse: collapse; }

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--mh-border);
}

.data-table th {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mh-text-muted);
  background: var(--mh-bg-tertiary);
  position: sticky;
  top: 0;
}

.data-table tbody tr:hover { background: var(--mh-bg-tertiary); }
.data-table .numeric-cell { text-align: right; font-variant-numeric: tabular-nums; }

.data-table .sortable-cell { cursor: pointer; user-select: none; }
.data-table .sortable-cell:hover { color: var(--mh-gold); }
.data-table .sortable-cell::after { content: '↕'; margin-left: 4px; opacity: 0.4; }
.data-table .sortable-cell-active.sortable-asc::after { content: '↑'; opacity: 1; color: var(--mh-gold); }
.data-table .sortable-cell-active.sortable-desc::after { content: '↓'; opacity: 1; color: var(--mh-gold); }

/* ============================================
   F7 CHIP - Tags & Filters
   ============================================ */
.chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 14px;
  background: var(--mh-bg-tertiary);
  color: var(--f7-text-color);
  margin: 2px;
}

.chip-label { white-space: nowrap; }
.chip-outline { background: transparent; border: 1px solid var(--mh-border); }
.chip-outline:hover { border-color: var(--mh-gold); color: var(--mh-gold); }

.chip-gold, .chip.color-primary { background: rgba(212, 175, 55, 0.2); color: var(--mh-gold); }
.chip-green { background: rgba(16, 185, 129, 0.2); color: var(--mh-green); }
.chip-red { background: rgba(239, 68, 68, 0.2); color: var(--mh-red); }
.chip-orange { background: rgba(245, 158, 11, 0.2); color: var(--mh-orange); }

.chips-container { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }

/* ============================================
   F7 PROGRESSBAR
   ============================================ */
.progressbar {
  height: 4px;
  background: var(--mh-bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.progressbar > span {
  display: block;
  height: 100%;
  background: var(--mh-gold);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.progressbar-infinite::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, transparent, var(--mh-gold), transparent);
  animation: progressbar-infinite 1.5s linear infinite;
}

@keyframes progressbar-infinite {
  0% { left: -50%; }
  100% { left: 100%; }
}

/* ============================================
   F7 POPOVER
   ============================================ */
.popover {
  position: absolute;
  z-index: 13500;
  background: var(--mh-bg-secondary);
  border-radius: 12px;
  box-shadow: var(--mh-shadow-lg);
  min-width: 150px;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.2s ease;
  pointer-events: none;
}

.popover.popover-in {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.popover-inner { border-radius: 12px; overflow: hidden; }
.popover .list { margin: 0; }
.popover .list ul { list-style: none; padding: 0; margin: 0; }

.popover .list-button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--f7-text-color);
  text-decoration: none;
  cursor: pointer;
}

.popover .list-button:hover { background: var(--mh-bg-tertiary); }
.popover .list-button-danger { color: var(--mh-red); }

/* ============================================
   F7 STEPPER
   ============================================ */
.stepper {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border-radius: 8px;
  background: var(--mh-bg-tertiary);
  border: 1px solid var(--mh-border);
}

.stepper-button-minus,
.stepper-button-plus {
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mh-gold);
  font-size: 20px;
  user-select: none;
}

.stepper-button-minus:hover,
.stepper-button-plus:hover { background: rgba(212, 175, 55, 0.1); }

.stepper-button-minus::before { content: '−'; }
.stepper-button-plus::before { content: '+'; }

.stepper-input-wrap {
  flex: 1;
  min-width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--mh-border);
  border-right: 1px solid var(--mh-border);
}

.stepper-input-wrap input {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--f7-text-color);
  background: transparent;
  border: none;
}

/* ============================================
   F7 TOOLTIP
   ============================================ */
.tooltip {
  position: fixed;
  z-index: 20000;
  background: #1a1a1a;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  max-width: 250px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tooltip.tooltip-in { opacity: 1; }

/* ============================================
   F7 ACCORDION
   ============================================ */
.accordion-item { border-bottom: 1px solid var(--mh-border); }

.accordion-item-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
}

.accordion-item-toggle:hover { background: var(--mh-bg-tertiary); }

.accordion-item-toggle-icon {
  transition: transform 0.3s;
}

.accordion-item-toggle-icon::before {
  content: '▶';
  font-size: 10px;
  color: var(--mh-text-muted);
}

.accordion-item-opened .accordion-item-toggle-icon { transform: rotate(90deg); }

.accordion-item-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-item-opened .accordion-item-content { max-height: 2000px; }
.accordion-item-content-inner { padding: 0 16px 16px; }

/* ============================================
   F7 MESSAGES - Notes
   ============================================ */
.messages { display: flex; flex-direction: column; gap: 12px; padding: 16px; }

.message { display: flex; gap: 10px; max-width: 85%; }
.message-sent { align-self: flex-end; flex-direction: row-reverse; }
.message-received { align-self: flex-start; }

.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mh-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--mh-gold);
}

.message-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
}

.message-received .message-bubble { background: var(--mh-bg-tertiary); }
.message-sent .message-bubble { background: var(--mh-gold); color: #0F1112; }

/* ============================================
   LIGHT THEME - New Components
   ============================================ */
.theme-light .data-table th,
[data-theme="light"] .data-table th { background: #f5f5f5; color: #666; }

.theme-light .chip,
[data-theme="light"] .chip { background: #f0f0f0; color: #1a1a1a; }

.theme-light .popover,
[data-theme="light"] .popover { background: #ffffff; }

.theme-light .stepper,
[data-theme="light"] .stepper { background: #f5f5f5; border-color: #e5e5e5; }

.theme-light .message-received .message-bubble,
[data-theme="light"] .message-received .message-bubble { background: #f0f0f0; color: #1a1a1a; }

/* ============================================
   F7 SMART SELECT - Enhanced Dropdowns
   ============================================ */

/* Smart Select popup/sheet styling */
.smart-select-mh-theme .smart-select-page,
.smart-select-mh-theme .popup,
.smart-select-mh-theme .sheet-modal {
  --f7-page-bg-color: var(--mh-dark);
  --f7-list-bg-color: var(--mh-dark-secondary);
  --f7-list-item-border-color: var(--mh-dark-tertiary);
}

.smart-select-mh-theme .navbar {
  background: var(--mh-dark-secondary);
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.smart-select-mh-theme .navbar .title {
  color: var(--mh-text-primary);
}

.smart-select-mh-theme .navbar .link {
  color: var(--mh-gold);
}

/* Smart Select searchbar */
.smart-select-mh-theme .searchbar {
  background: var(--mh-dark-secondary);
}

.smart-select-mh-theme .searchbar input {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.smart-select-mh-theme .searchbar .searchbar-icon {
  color: var(--mh-text-muted);
}

/* Smart Select list items */
.smart-select-mh-theme .list ul {
  background: var(--mh-dark-secondary);
}

.smart-select-mh-theme .list .item-content {
  color: var(--mh-text-primary);
}

.smart-select-mh-theme .list .item-content:active {
  background: var(--mh-dark-tertiary);
}

/* Smart Select radio/checkbox */
.smart-select-mh-theme .icon-radio,
.smart-select-mh-theme .icon-checkbox {
  border-color: var(--mh-dark-tertiary);
}

.smart-select-mh-theme input:checked ~ .icon-radio::after,
.smart-select-mh-theme input:checked ~ .icon-checkbox {
  background: var(--mh-gold);
  border-color: var(--mh-gold);
}

.smart-select-mh-theme input:checked ~ .icon-checkbox::after {
  border-color: #000;
}

/* Light theme */
.theme-light .smart-select-mh-theme .list ul,
[data-theme="light"] .smart-select-mh-theme .list ul {
  background: #ffffff;
}

.theme-light .smart-select-mh-theme .list .item-content,
[data-theme="light"] .smart-select-mh-theme .list .item-content {
  color: #1a1a1a;
}

/* ============================================
   F7 AUTOCOMPLETE - Search Suggestions
   ============================================ */

/* Autocomplete dropdown */
.autocomplete-dropdown.autocomplete-mh-theme {
  background: var(--mh-dark-secondary);
  border: 1px solid var(--mh-dark-tertiary);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  margin-top: 4px;
}

.autocomplete-mh-theme .autocomplete-dropdown-inner {
  max-height: 300px;
}

/* Autocomplete placeholder */
.autocomplete-mh-theme .autocomplete-dropdown-placeholder {
  padding: 12px 16px;
  color: var(--mh-text-muted);
  font-size: 14px;
  text-align: center;
}

/* Autocomplete items */
.autocomplete-mh-theme .autocomplete-dropdown-item {
  padding: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.autocomplete-mh-theme .autocomplete-dropdown-item:not(:last-child) {
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.autocomplete-mh-theme .autocomplete-dropdown-item:hover,
.autocomplete-mh-theme .autocomplete-dropdown-item:active {
  background: var(--mh-dark-tertiary);
}

.autocomplete-mh-theme .autocomplete-dropdown-item .item-content {
  padding: 12px 16px;
}

.autocomplete-mh-theme .autocomplete-dropdown-item .item-title {
  color: var(--mh-text-primary);
  font-size: 14px;
  font-weight: 500;
}

.autocomplete-mh-theme .autocomplete-dropdown-item .item-subtitle {
  color: var(--mh-text-secondary);
  font-size: 12px;
  margin-top: 2px;
}

.autocomplete-mh-theme .autocomplete-dropdown-item .item-after .badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 10px;
}

.autocomplete-mh-theme .autocomplete-dropdown-item .item-after .badge.color-green {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.autocomplete-mh-theme .autocomplete-dropdown-item .item-after .badge.color-gold {
  background: rgba(212, 175, 55, 0.15);
  color: var(--mh-gold);
}

.autocomplete-mh-theme .autocomplete-dropdown-item .item-after .badge.color-orange {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

/* Autocomplete preloader */
.autocomplete-mh-theme .autocomplete-preloader {
  padding: 16px;
  display: flex;
  justify-content: center;
}

.autocomplete-mh-theme .autocomplete-preloader .preloader {
  color: var(--mh-gold);
}

/* Autocomplete not found */
.autocomplete-mh-theme .autocomplete-not-found {
  padding: 24px 16px;
  text-align: center;
  color: var(--mh-text-muted);
  font-size: 14px;
}

/* Light theme */
.theme-light .autocomplete-dropdown.autocomplete-mh-theme,
[data-theme="light"] .autocomplete-dropdown.autocomplete-mh-theme {
  background: #ffffff;
  border-color: #e5e5e5;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.theme-light .autocomplete-mh-theme .autocomplete-dropdown-item .item-title,
[data-theme="light"] .autocomplete-mh-theme .autocomplete-dropdown-item .item-title {
  color: #1a1a1a;
}

.theme-light .autocomplete-mh-theme .autocomplete-dropdown-item:hover,
[data-theme="light"] .autocomplete-mh-theme .autocomplete-dropdown-item:hover {
  background: #f5f5f5;
}

/* ============================================
   F7 DUAL RANGE SLIDER - Price/Area Filters
   ============================================ */

.dual-range-slider-container {
  padding: 16px;
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  margin-bottom: 16px;
}

.dual-range-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.dual-range-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--mh-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dual-range-values {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.dual-range-min-value,
.dual-range-max-value {
  color: var(--mh-gold);
  font-size: 15px;
}

.dual-range-separator {
  color: var(--mh-text-muted);
  font-size: 12px;
}

.dual-range-track {
  position: relative;
  height: 6px;
  background: var(--mh-dark-tertiary);
  border-radius: 3px;
  margin: 0 10px;
}

.dual-range-track-fill {
  position: absolute;
  height: 100%;
  background: var(--mh-gold);
  border-radius: 3px;
  pointer-events: none;
  transition: left 0.1s ease, width 0.1s ease;
}

.dual-range-input {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 24px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  margin: 0;
}

.dual-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--mh-gold);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 2px solid var(--mh-dark-secondary);
}

.dual-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5);
}

.dual-range-input::-webkit-slider-thumb:active {
  transform: scale(1.1);
}

.dual-range-input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--mh-gold);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
  border: 2px solid var(--mh-dark-secondary);
}

.dual-range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  color: var(--mh-text-muted);
}

/* Light theme */
.theme-light .dual-range-slider-container,
[data-theme="light"] .dual-range-slider-container {
  background: #ffffff;
}

.theme-light .dual-range-track,
[data-theme="light"] .dual-range-track {
  background: #e5e5e5;
}

.theme-light .dual-range-input::-webkit-slider-thumb,
[data-theme="light"] .dual-range-input::-webkit-slider-thumb {
  border-color: #ffffff;
}

/* ============================================
   F7 TIMELINE - Property History
   ============================================ */

.timeline {
  position: relative;
  padding: 0;
  margin: 0;
}

.timeline-item {
  display: flex;
  position: relative;
  padding-bottom: 20px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item-date {
  flex: 0 0 70px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 16px;
  padding-top: 2px;
}

.timeline-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--mh-text-primary);
}

.timeline-time {
  font-size: 11px;
  color: var(--mh-text-muted);
}

.timeline-item-divider {
  flex: 0 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.timeline-item-divider::before {
  content: '';
  position: absolute;
  top: 32px;
  bottom: -20px;
  left: 50%;
  width: 2px;
  background: var(--mh-dark-tertiary);
  transform: translateX(-50%);
}

.timeline-item:last-child .timeline-item-divider::before {
  display: none;
}

.timeline-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mh-dark-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: all 0.2s ease;
}

.timeline-item-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--mh-text-secondary);
}

/* Timeline item colors */
.timeline-item-success .timeline-item-icon {
  background: rgba(16, 185, 129, 0.15);
}

.timeline-item-success .timeline-item-icon svg {
  stroke: #10b981;
}

.timeline-item-gold .timeline-item-icon {
  background: rgba(212, 175, 55, 0.15);
}

.timeline-item-gold .timeline-item-icon svg {
  stroke: var(--mh-gold);
}

.timeline-item-blue .timeline-item-icon {
  background: rgba(59, 130, 246, 0.15);
}

.timeline-item-blue .timeline-item-icon svg {
  stroke: #3b82f6;
}

.timeline-item-warning .timeline-item-icon {
  background: rgba(245, 158, 11, 0.15);
}

.timeline-item-warning .timeline-item-icon svg {
  stroke: #f59e0b;
}

.timeline-item-error .timeline-item-icon {
  background: rgba(239, 68, 68, 0.15);
}

.timeline-item-error .timeline-item-icon svg {
  stroke: #ef4444;
}

.timeline-item-content {
  flex: 1;
  padding-left: 16px;
  padding-top: 4px;
  min-width: 0;
}

.timeline-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--mh-text-primary);
  margin-bottom: 4px;
}

.timeline-item-text {
  font-size: 13px;
  color: var(--mh-text-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
}

.timeline-item-user {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--mh-text-muted);
}

.timeline-item-user svg {
  width: 12px;
  height: 12px;
  stroke: var(--mh-text-muted);
}

/* Timeline empty state */
.timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--mh-text-muted);
}

.timeline-empty svg {
  stroke: var(--mh-text-muted);
  margin-bottom: 16px;
  opacity: 0.5;
}

.timeline-empty p {
  font-size: 14px;
  margin: 0;
}

/* Timeline animation */
.timeline-item-enter {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
}

.timeline-item-first .timeline-item-icon {
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
}

/* Light theme */
.theme-light .timeline-item-icon,
[data-theme="light"] .timeline-item-icon {
  background: #f5f5f5;
}

.theme-light .timeline-item-divider::before,
[data-theme="light"] .timeline-item-divider::before {
  background: #e5e5e5;
}

/* ============================================
   F7 SEGMENTED CONTROL - View Switcher
   ============================================ */

.segmented {
  display: inline-flex;
  position: relative;
  background: var(--mh-dark-tertiary);
  padding: 4px;
  border-radius: 10px;
  gap: 2px;
}

.segmented-rounded {
  border-radius: 20px;
}

.segmented-highlight {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background: var(--mh-gold);
  border-radius: 8px;
  transition: transform 0.2s ease, width 0.2s ease;
  z-index: 0;
}

.segmented-rounded .segmented-highlight {
  border-radius: 16px;
}

.segmented-button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--mh-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.segmented-button:hover:not(.segmented-button-active) {
  color: var(--mh-text-primary);
}

.segmented-button-active {
  color: #000000;
}

.segmented-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.segmented-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.segmented-label {
  font-size: inherit;
}

/* Segmented sizes */
.segmented-small .segmented-button {
  padding: 6px 12px;
  font-size: 12px;
}

.segmented-small .segmented-icon svg {
  width: 14px;
  height: 14px;
}

.segmented-large .segmented-button {
  padding: 10px 20px;
  font-size: 14px;
}

.segmented-large .segmented-icon svg {
  width: 18px;
  height: 18px;
}

/* Light theme */
.theme-light .segmented,
[data-theme="light"] .segmented {
  background: #e5e5e5;
}

.theme-light .segmented-button,
[data-theme="light"] .segmented-button {
  color: #6b7280;
}

.theme-light .segmented-button:hover:not(.segmented-button-active),
[data-theme="light"] .segmented-button:hover:not(.segmented-button-active) {
  color: #1a1a1a;
}

/* ============================================
   F7 PICKER - Wheel Selector
   ============================================ */

.picker-mh-theme {
  --f7-picker-bg-color: var(--mh-dark-secondary);
  --f7-picker-column-font-size: 16px;
  --f7-picker-item-height: 44px;
  --f7-picker-toolbar-bg-color: var(--mh-dark-secondary);
}

.picker-mh-theme .picker-columns {
  background: var(--mh-dark-secondary);
}

.picker-mh-theme .picker-column {
  color: var(--mh-text-muted);
}

.picker-mh-theme .picker-item {
  color: var(--mh-text-muted);
  transition: color 0.15s ease;
}

.picker-mh-theme .picker-item-selected {
  color: var(--mh-gold);
  font-weight: 600;
}

.picker-mh-theme .picker-center-highlight {
  background: var(--mh-dark-tertiary);
  border-radius: 8px;
}

.picker-mh-theme .picker-center-highlight::before,
.picker-mh-theme .picker-center-highlight::after {
  display: none;
}

.picker-mh-theme .toolbar {
  background: var(--mh-dark-secondary);
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.picker-mh-theme .toolbar .link {
  color: var(--mh-gold);
  font-weight: 500;
}

/* Light theme */
.theme-light .picker-mh-theme,
[data-theme="light"] .picker-mh-theme {
  --f7-picker-bg-color: #ffffff;
  --f7-picker-toolbar-bg-color: #ffffff;
}

.theme-light .picker-mh-theme .picker-columns,
[data-theme="light"] .picker-mh-theme .picker-columns {
  background: #ffffff;
}

.theme-light .picker-mh-theme .picker-center-highlight,
[data-theme="light"] .picker-mh-theme .picker-center-highlight {
  background: #f5f5f5;
}

/* ============================================
   F7 FILTER PANEL - Filters Sheet/Popup
   ============================================ */

.filters-panel {
  --f7-sheet-bg-color: var(--mh-dark-secondary);
  max-height: 85vh;
}

.filters-panel .sheet-modal-inner {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

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

.filters-panel-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--mh-text-primary);
}

.filters-panel-close {
  color: var(--mh-gold);
  font-weight: 500;
  font-size: 15px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.filters-panel-content {
  padding: 16px;
  overflow-y: auto;
  max-height: calc(85vh - 130px);
}

.filters-panel-section {
  margin-bottom: 24px;
}

.filters-panel-section:last-child {
  margin-bottom: 0;
}

.filters-panel-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--mh-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.filters-panel-footer {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--mh-dark-tertiary);
  background: var(--mh-dark-secondary);
}

.filters-panel-footer .button {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filters-panel-footer .button-reset {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-secondary);
  border: none;
}

.filters-panel-footer .button-reset:active {
  background: var(--mh-dark);
}

.filters-panel-footer .button-apply {
  background: var(--mh-gold);
  color: #000000;
  border: none;
}

.filters-panel-footer .button-apply:active {
  background: var(--f7-theme-color-shade);
}

/* Active filter count badge */
.filters-button-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--mh-gold);
  color: #000;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Filter chips */
.active-filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background: var(--mh-dark-secondary);
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  font-size: 12px;
  color: var(--mh-gold);
}

.active-filter-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.2);
  cursor: pointer;
  transition: background 0.15s ease;
}

.active-filter-chip-remove:hover {
  background: rgba(212, 175, 55, 0.4);
}

.active-filter-chip-remove svg {
  width: 10px;
  height: 10px;
  stroke: var(--mh-gold);
  stroke-width: 2.5;
}

.clear-all-filters {
  color: var(--mh-text-muted);
  font-size: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  transition: color 0.15s ease;
}

.clear-all-filters:hover {
  color: var(--mh-text-primary);
}

/* Light theme */
.theme-light .filters-panel,
[data-theme="light"] .filters-panel {
  --f7-sheet-bg-color: #ffffff;
}

.theme-light .filters-panel-footer .button-reset,
[data-theme="light"] .filters-panel-footer .button-reset {
  background: #f5f5f5;
}

.theme-light .active-filters-bar,
[data-theme="light"] .active-filters-bar {
  background: #ffffff;
  border-bottom-color: #e5e5e5;
}

/* ============================================
   Mobile Filter Bar
   ============================================ */

@media (max-width: 768px) {
  .mobile-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--mh-dark-secondary);
    border-bottom: 1px solid var(--mh-dark-tertiary);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mobile-filter-bar::-webkit-scrollbar {
    display: none;
  }

  .mobile-filter-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--mh-dark-tertiary);
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mh-text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }

  .mobile-filter-button:active {
    transform: scale(0.95);
  }

  .mobile-filter-button.active {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
    color: var(--mh-gold);
  }

  .mobile-filter-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
  }

  .mobile-filter-button-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--mh-gold);
    color: #000;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Sort dropdown */
  .mobile-sort-dropdown {
    margin-left: auto;
    padding-left: 8px;
    border-left: 1px solid var(--mh-dark-tertiary);
  }

  .mobile-sort-dropdown .mobile-filter-button {
    background: transparent;
    border: none;
    padding: 8px;
  }

  /* Light theme */
  .theme-light .mobile-filter-bar,
  [data-theme="light"] .mobile-filter-bar {
    background: #ffffff;
    border-bottom-color: #e5e5e5;
  }

  .theme-light .mobile-filter-button,
  [data-theme="light"] .mobile-filter-button {
    background: #f5f5f5;
  }
}

/* ============================================
   TIMELINE ACTIONS BAR - Drawer
   ============================================ */

.timeline-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px;
  background: var(--mh-dark-secondary);
  border-bottom: 1px solid var(--mh-dark-tertiary);
  margin: -16px -16px 16px -16px;
}

.timeline-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--mh-dark-tertiary);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--mh-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.timeline-action-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  flex-shrink: 0;
}

.timeline-action-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
  color: var(--mh-gold);
}

.timeline-action-btn:active {
  transform: scale(0.95);
}

/* Timeline container in drawer */
.timeline-container {
  padding: 0 16px 16px;
}

/* Override F7 timeline styles for drawer context */
#propertyTimeline .timeline {
  padding: 0;
}

#propertyTimeline .timeline-item {
  padding-bottom: 16px;
}

#propertyTimeline .timeline-item-date {
  flex: 0 0 65px;
  padding-right: 12px;
}

#propertyTimeline .timeline-date {
  font-size: 11px;
}

#propertyTimeline .timeline-time {
  font-size: 10px;
}

#propertyTimeline .timeline-item-icon {
  width: 28px;
  height: 28px;
}

#propertyTimeline .timeline-item-icon svg {
  width: 14px;
  height: 14px;
}

#propertyTimeline .timeline-item-content {
  padding-left: 12px;
}

#propertyTimeline .timeline-item-title {
  font-size: 13px;
}

#propertyTimeline .timeline-item-text {
  font-size: 12px;
  white-space: pre-line;
}

#propertyTimeline .timeline-item-user {
  font-size: 11px;
}

#propertyTimeline .timeline-empty {
  padding: 32px 16px;
}

#propertyTimeline .timeline-empty svg {
  width: 40px;
  height: 40px;
}

#propertyTimeline .timeline-empty p {
  font-size: 13px;
}

/* Legacy timeline styles override for drawer */
#drawerContent .timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#drawerContent .timeline-event {
  position: relative;
  padding: 12px 12px 12px 36px;
  border-left: 2px solid var(--mh-dark-tertiary);
  margin-left: 10px;
}

#drawerContent .timeline-event:last-child {
  border-left-color: transparent;
}

#drawerContent .timeline-icon {
  position: absolute;
  left: -11px;
  top: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mh-dark-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

#drawerContent .timeline-event.created .timeline-icon,
#drawerContent .timeline-event.new .timeline-icon {
  background: rgba(16, 185, 129, 0.15);
}

#drawerContent .timeline-event.stage_change .timeline-icon,
#drawerContent .timeline-event.moved .timeline-icon {
  background: rgba(212, 175, 55, 0.15);
}

#drawerContent .timeline-event.visit .timeline-icon,
#drawerContent .timeline-event.scheduled .timeline-icon {
  background: rgba(59, 130, 246, 0.15);
}

#drawerContent .timeline-event.offer .timeline-icon,
#drawerContent .timeline-event.bid .timeline-icon {
  background: rgba(212, 175, 55, 0.15);
}

#drawerContent .timeline-event.note .timeline-icon,
#drawerContent .timeline-event.comment .timeline-icon,
#drawerContent .timeline-event.call .timeline-icon {
  background: var(--mh-dark-tertiary);
}

#drawerContent .timeline-event.purchased .timeline-icon,
#drawerContent .timeline-event.sold .timeline-icon {
  background: rgba(16, 185, 129, 0.2);
}

#drawerContent .timeline-event.discarded .timeline-icon,
#drawerContent .timeline-event.rejected .timeline-icon {
  background: rgba(239, 68, 68, 0.15);
}

#drawerContent .timeline-event.price_change .timeline-icon {
  background: rgba(245, 158, 11, 0.15);
}

#drawerContent .timeline-date {
  font-size: 10px;
  color: var(--mh-text-muted);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

#drawerContent .timeline-author {
  color: var(--mh-gold);
  font-weight: 500;
}

#drawerContent .timeline-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--mh-text-primary);
  margin-bottom: 2px;
}

#drawerContent .timeline-desc {
  font-size: 12px;
  color: var(--mh-text-secondary);
  line-height: 1.4;
  white-space: pre-line;
}

/* Light theme */
.theme-light .timeline-actions-bar,
[data-theme="light"] .timeline-actions-bar {
  background: #ffffff;
  border-bottom-color: #e5e5e5;
}

.theme-light .timeline-action-btn,
[data-theme="light"] .timeline-action-btn {
  background: #f5f5f5;
  color: #6b7280;
}

.theme-light .timeline-action-btn:hover,
[data-theme="light"] .timeline-action-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  color: var(--mh-gold);
}

.theme-light #drawerContent .timeline-event,
[data-theme="light"] #drawerContent .timeline-event {
  border-left-color: #e5e5e5;
}

.theme-light #drawerContent .timeline-icon,
[data-theme="light"] #drawerContent .timeline-icon {
  background: #f5f5f5;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .timeline-actions-bar {
    padding: 12px;
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .timeline-actions-bar::-webkit-scrollbar {
    display: none;
  }

  .timeline-action-btn {
    padding: 8px 12px;
    font-size: 12px;
    flex-shrink: 0;
  }

  .timeline-action-btn svg {
    width: 14px;
    height: 14px;
  }

  #propertyTimeline .timeline-item-date {
    flex: 0 0 55px;
  }

  #drawerContent .timeline-event {
    padding: 10px 10px 10px 32px;
    margin-left: 8px;
  }

  #drawerContent .timeline-icon {
    width: 18px;
    height: 18px;
    font-size: 9px;
    left: -10px;
  }
}

/* ============================================
   F7 SORTABLE LIST - Drag & Drop
   ============================================ */

.sortable-item {
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.sortable-item:active {
  cursor: grabbing;
}

.sortable-handle {
  cursor: grab;
  padding: 8px;
  color: var(--mh-text-muted);
  touch-action: none;
}

.sortable-handle:hover {
  color: var(--mh-text-secondary);
}

.sortable-handle svg {
  width: 16px;
  height: 16px;
}

.sortable-ghost {
  opacity: 0.4;
}

.sortable-drag {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.sortable-placeholder {
  background: rgba(212, 175, 55, 0.1);
  border: 2px dashed rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  margin: 4px 0;
}

.sortable-touch-active {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
  z-index: 1000;
}

/* Light theme */
.theme-light .sortable-placeholder,
[data-theme="light"] .sortable-placeholder {
  background: rgba(212, 175, 55, 0.05);
}

/* ============================================
   F7 VIRTUAL LIST - Large Lists
   ============================================ */

.virtual-list-wrapper {
  position: relative;
  overflow: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

.virtual-list-content {
  position: relative;
}

.virtual-list-item-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  will-change: transform;
}

.virtual-list-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.virtual-list-item:last-child {
  border-bottom: none;
}

/* Light theme */
.theme-light .virtual-list-item,
[data-theme="light"] .virtual-list-item {
  border-bottom-color: #e5e5e5;
}

/* ============================================
   F7 EXPANDABLE CARD
   ============================================ */

.card-expandable {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-expandable:hover:not(.card-expanding) {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.card-expandable-trigger {
  cursor: pointer;
}

.card-expandable-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.card-expanded .card-expandable-content {
  max-height: none;
  opacity: 1;
  overflow: auto;
}

.card-expanding {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.card-expanded {
  border-radius: 0 !important;
}

.card-expandable-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 9999;
  transition: background 0.3s ease;
}

.card-expandable-backdrop-in {
  background: rgba(0, 0, 0, 0.7);
}

.card-expandable-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mh-dark-tertiary);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  transition: background 0.2s ease;
}

.card-expandable-close:hover {
  background: var(--mh-dark);
}

.card-expandable-close svg {
  width: 20px;
  height: 20px;
  stroke: var(--mh-text-primary);
}

/* Light theme */
.theme-light .card-expandable-close,
[data-theme="light"] .card-expandable-close {
  background: #f5f5f5;
}

.theme-light .card-expandable-close:hover,
[data-theme="light"] .card-expandable-close:hover {
  background: #e5e5e5;
}

/* ============================================
   F7 CONTACT LIST
   ============================================ */

.contact-list {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  overflow: hidden;
}

.contact-list-group {
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.contact-list-group:last-child {
  border-bottom: none;
}

.contact-list-group-title {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mh-gold);
  background: var(--mh-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.contact-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
  transition: background 0.15s ease;
}

.contact-list-item:last-child {
  border-bottom: none;
}

.contact-list-item:hover {
  background: var(--mh-dark-tertiary);
}

.contact-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  flex-shrink: 0;
  overflow: hidden;
}

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

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

.contact-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--mh-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-subtitle {
  font-size: 13px;
  color: var(--mh-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.contact-action {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-secondary);
  text-decoration: none;
  transition: all 0.15s ease;
}

.contact-action:hover {
  background: rgba(212, 175, 55, 0.15);
  color: var(--mh-gold);
}

.contact-action-call:hover {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.contact-action-email:hover {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.contact-action svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.contact-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--mh-text-muted);
}

.contact-list-empty svg {
  stroke: var(--mh-text-muted);
  margin-bottom: 16px;
  opacity: 0.5;
}

.contact-list-empty p {
  font-size: 14px;
  margin: 0;
}

/* Light theme */
.theme-light .contact-list,
[data-theme="light"] .contact-list {
  background: #ffffff;
}

.theme-light .contact-list-group-title,
[data-theme="light"] .contact-list-group-title {
  background: #f5f5f5;
}

.theme-light .contact-list-item:hover,
[data-theme="light"] .contact-list-item:hover {
  background: #f5f5f5;
}

.theme-light .contact-action,
[data-theme="light"] .contact-action {
  background: #f5f5f5;
}

/* ============================================
   F7 CHARTS - Area, Bar, Donut
   ============================================ */

.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--mh-text-muted);
}

.chart-empty svg {
  stroke: var(--mh-text-muted);
  margin-bottom: 16px;
  opacity: 0.5;
}

.chart-empty p {
  font-size: 14px;
  margin: 0;
}

/* Area Chart */
.area-chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-grid line {
  stroke: var(--mh-dark-tertiary);
}

.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-area {
  opacity: 1;
}

.chart-point {
  cursor: pointer;
  transition: r 0.15s ease;
}

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

/* Bar Chart */
.bar-chart {
  width: 100%;
  height: auto;
}

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

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

/* Donut Chart */
.donut-chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.donut-chart {
  overflow: visible;
}

.donut-segment {
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  transform-origin: center;
}

.donut-segment:hover {
  transform: scale(1.03);
  opacity: 0.9;
}

.donut-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.donut-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.donut-legend-label {
  color: var(--mh-text-secondary);
}

.donut-legend-value {
  color: var(--mh-text-primary);
  font-weight: 500;
  margin-left: 4px;
}

/* Chart animations */
.chart-animate {
  animation: chartFadeIn 0.5s ease-out forwards;
}

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

.chart-line.chart-animate {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: chartLineDraw 1.5s ease-out forwards;
}

@keyframes chartLineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.donut-segment.chart-animate {
  opacity: 0;
  transform: scale(0.8);
  animation: donutSegmentIn 0.4s ease-out forwards;
}

@keyframes donutSegmentIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Light theme charts */
.theme-light .chart-grid line,
[data-theme="light"] .chart-grid line {
  stroke: #e5e5e5;
}

/* Responsive charts */
@media (max-width: 768px) {
  .donut-chart-container {
    flex-direction: column;
  }

  .donut-legend {
    width: 100%;
    justify-content: center;
  }

  .donut-legend-item {
    font-size: 12px;
  }
}

/* ============================================
   F7 SEARCHBAR - Expandable Search
   ============================================ */
.searchbar {
  position: relative;
  background: var(--mh-dark-secondary);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.searchbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  height: 44px;
}

.searchbar-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.searchbar-input-wrap input {
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 8px 8px 32px;
  font-size: 16px;
  color: var(--mh-text-primary);
  outline: none;
}

.searchbar-input-wrap input::placeholder {
  color: var(--mh-text-muted);
}

.searchbar-icon {
  position: absolute;
  left: 0;
  color: var(--mh-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.searchbar-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.searchbar-clear:hover {
  background: var(--mh-text-muted);
  color: var(--mh-dark-secondary);
}

.searchbar-cancel {
  color: var(--mh-gold);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.searchbar-active .searchbar-cancel {
  opacity: 1;
  width: auto;
  margin-left: 8px;
}

.searchbar-active {
  background: var(--mh-dark-tertiary);
}

.searchbar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
}

.searchbar-backdrop-in {
  opacity: 1;
  pointer-events: auto;
}

.searchbar-hidden {
  display: none !important;
}

.searchbar-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Light theme */
.theme-light .searchbar,
[data-theme="light"] .searchbar {
  background: #f5f5f5;
}

.theme-light .searchbar-active,
[data-theme="light"] .searchbar-active {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-light .searchbar-clear,
[data-theme="light"] .searchbar-clear {
  background: #e5e5e5;
}

/* ============================================
   F7 INFINITE SCROLL
   ============================================ */
.infinite-scroll-content {
  padding: 20px;
  text-align: center;
}

.infinite-scroll-preloader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.preloader-spinner {
  width: 32px;
  height: 32px;
  animation: spin 1s linear infinite;
}

.preloader-spinner svg {
  width: 100%;
  height: 100%;
}

.preloader-spinner circle {
  stroke-dasharray: 80;
  stroke-dashoffset: 60;
  stroke: var(--mh-gold);
}

/* ============================================
   F7 FAB - Floating Action Button
   ============================================ */
.fab-container {
  position: fixed;
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.fab-right-bottom {
  right: 16px;
  bottom: 16px;
}

.fab-left-bottom {
  left: 16px;
  bottom: 16px;
}

.fab-right-top {
  right: 16px;
  top: 16px;
}

.fab-left-top {
  left: 16px;
  top: 16px;
}

.fab-center-bottom {
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
}

.fab-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
}

.fab {
  position: relative;
}

.fab-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--mh-gold);
  color: #1a1a1a;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
  text-decoration: none;
  transition: all 0.3s ease;
}

.fab-main:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
}

.fab-main:active {
  transform: scale(0.95);
}

.fab-icon {
  display: flex;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.fab-icon-close {
  position: absolute;
  display: flex;
  opacity: 0;
  transform: rotate(-90deg);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.fab-open .fab-icon {
  opacity: 0;
  transform: rotate(90deg);
}

.fab-open .fab-icon-close {
  opacity: 1;
  transform: rotate(0);
}

/* FAB colors */
.fab-gold .fab-main { background: var(--mh-gold); color: #1a1a1a; }
.fab-red .fab-main { background: #ef4444; color: white; }
.fab-green .fab-main { background: #10b981; color: white; }
.fab-blue .fab-main { background: #3b82f6; color: white; }

/* Speed dial */
.fab-speed-dial {
  position: absolute;
  bottom: 100%;
  right: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fab-open .fab-speed-dial {
  opacity: 1;
  pointer-events: auto;
}

.fab-speed-dial-button {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  transition: all 0.3s ease;
}

.fab-open .fab-speed-dial-button {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.fab-speed-dial-label {
  background: var(--mh-dark-secondary);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--mh-text-primary);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.fab-speed-dial-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--mh-dark-secondary);
  color: var(--mh-gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.fab-speed-dial-icon:hover {
  transform: scale(1.1);
}

.fab-speed-dial-icon.fab-red { background: #ef4444; color: white; }
.fab-speed-dial-icon.fab-green { background: #10b981; color: white; }
.fab-speed-dial-icon.fab-blue { background: #3b82f6; color: white; }

/* Light theme FAB */
.theme-light .fab-speed-dial-label,
[data-theme="light"] .fab-speed-dial-label {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-light .fab-speed-dial-icon,
[data-theme="light"] .fab-speed-dial-icon {
  background: white;
}

/* ============================================
   F7 PHOTO BROWSER - Image Gallery
   ============================================ */
.photo-browser {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.photo-browser-in {
  opacity: 1;
}

.photo-browser-open {
  overflow: hidden;
}

.photo-browser-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.5);
}

.photo-browser-counter {
  color: white;
  font-size: 14px;
}

.photo-browser-close {
  background: none;
  border: none;
  color: white;
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.photo-browser-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.photo-browser-slides-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.photo-browser-slides {
  display: flex;
  height: 100%;
  transition: transform 0.3s ease;
}

.photo-browser-slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.photo-browser-slide-inner {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-browser-slide img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.photo-browser-caption {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  text-align: center;
  max-width: 80%;
}

.photo-browser-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
}

.photo-browser-toolbar button {
  background: none;
  border: none;
  color: white;
  padding: 12px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.photo-browser-toolbar button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.photo-browser-toolbar button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.photo-browser-zoom.photo-browser-zoomed {
  color: var(--mh-gold);
}

/* ============================================
   F7 CALENDAR - Date Picker
   ============================================ */
.calendar {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  padding: 16px;
  user-select: none;
}

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

.calendar-current-month {
  font-size: 16px;
  font-weight: 600;
  color: var(--mh-text-primary);
}

.calendar-prev-month,
.calendar-next-month {
  background: none;
  border: none;
  color: var(--mh-text-secondary);
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.calendar-prev-month:hover,
.calendar-next-month:hover {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px;
}

.calendar-weekday {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--mh-text-muted);
  padding: 8px 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.calendar-day:hover:not(.calendar-day-disabled) {
  background: var(--mh-dark-tertiary);
}

.calendar-day-number {
  font-size: 14px;
  color: var(--mh-text-primary);
}

.calendar-day-other .calendar-day-number {
  color: var(--mh-text-muted);
}

.calendar-day-today {
  background: var(--mh-dark-tertiary);
}

.calendar-day-today .calendar-day-number {
  color: var(--mh-gold);
  font-weight: 600;
}

.calendar-day-selected {
  background: var(--mh-gold) !important;
}

.calendar-day-selected .calendar-day-number {
  color: #1a1a1a !important;
  font-weight: 600;
}

.calendar-day-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.calendar-day-events {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}

.calendar-event-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

/* Light theme calendar */
.theme-light .calendar,
[data-theme="light"] .calendar {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-light .calendar-day:hover:not(.calendar-day-disabled),
[data-theme="light"] .calendar-day:hover:not(.calendar-day-disabled) {
  background: #f5f5f5;
}

.theme-light .calendar-day-today,
[data-theme="light"] .calendar-day-today {
  background: #f0f0f0;
}

/* ============================================
   F7 ACTION SHEET
   ============================================ */
.action-sheet-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.action-sheet-container.action-sheet-in {
  opacity: 1;
}

.action-sheet-open {
  overflow: hidden;
}

.action-sheet-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.action-sheet {
  position: relative;
  background: var(--mh-dark-secondary);
  border-radius: 16px 16px 0 0;
  padding: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.action-sheet-in .action-sheet {
  transform: translateY(0);
}

.action-sheet-header {
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid var(--mh-dark-tertiary);
  margin-bottom: 8px;
}

.action-sheet-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mh-text-primary);
}

.action-sheet-subtitle {
  font-size: 12px;
  color: var(--mh-text-muted);
  margin-top: 4px;
}

.action-sheet-buttons {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.action-sheet-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background: transparent;
  border: none;
  font-size: 16px;
  color: var(--mh-text-primary);
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.action-sheet-button:hover {
  background: var(--mh-dark-tertiary);
}

.action-sheet-button-destructive {
  color: #ef4444;
}

.action-sheet-button-icon {
  display: flex;
  color: var(--mh-gold);
}

.action-sheet-cancel {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--mh-dark-tertiary);
}

.action-sheet-button-cancel {
  font-weight: 600;
}

/* Light theme action sheet */
.theme-light .action-sheet,
[data-theme="light"] .action-sheet {
  background: white;
}

.theme-light .action-sheet-header,
[data-theme="light"] .action-sheet-header {
  border-color: #e5e5e5;
}

.theme-light .action-sheet-button:hover,
[data-theme="light"] .action-sheet-button:hover {
  background: #f5f5f5;
}

.theme-light .action-sheet-cancel,
[data-theme="light"] .action-sheet-cancel {
  border-color: #e5e5e5;
}

/* ============================================
   F7 SKELETON / PRELOADER
   ============================================ */
.skeleton-container {
  pointer-events: none;
}

.skeleton-animated .skeleton-line,
.skeleton-animated .skeleton-image,
.skeleton-animated .skeleton-avatar,
.skeleton-animated .skeleton-badge,
.skeleton-animated .skeleton-chip {
  background: linear-gradient(90deg,
    var(--mh-dark-tertiary) 25%,
    var(--mh-dark-secondary) 50%,
    var(--mh-dark-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}

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

.skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: var(--mh-dark-tertiary);
}

.skeleton-line-title {
  height: 18px;
  width: 70%;
  margin-bottom: 8px;
}

.skeleton-line-text {
  width: 100%;
  margin-bottom: 6px;
}

.skeleton-line-short {
  width: 40%;
}

.skeleton-image {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  background: var(--mh-dark-tertiary);
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mh-dark-tertiary);
  flex-shrink: 0;
}

.skeleton-badge {
  width: 60px;
  height: 24px;
  border-radius: 12px;
  background: var(--mh-dark-tertiary);
}

.skeleton-chip {
  width: 80px;
  height: 28px;
  border-radius: 14px;
  background: var(--mh-dark-tertiary);
}

/* Skeleton card */
.skeleton-card {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.skeleton-card .skeleton-content {
  padding: 16px;
}

/* Skeleton list item */
.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.skeleton-list-item .skeleton-content {
  flex: 1;
}

/* Skeleton property */
.skeleton-property {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.skeleton-property .skeleton-content {
  padding: 16px;
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.skeleton-line-price {
  width: 120px;
  height: 24px;
}

.skeleton-line-address {
  width: 80%;
  margin-bottom: 12px;
}

/* Skeleton table */
.skeleton-table {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  overflow: hidden;
}

.skeleton-table-header,
.skeleton-table-row {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
}

.skeleton-table-header {
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.skeleton-table-header .skeleton-line,
.skeleton-table-row .skeleton-line {
  flex: 1;
  height: 16px;
}

/* Preloader */
.preloader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.preloader-small .preloader-spinner { width: 20px; height: 20px; }
.preloader-medium .preloader-spinner { width: 32px; height: 32px; }
.preloader-large .preloader-spinner { width: 48px; height: 48px; }

.preloader-gold { color: var(--mh-gold); }
.preloader-white { color: white; }
.preloader-gray { color: var(--mh-text-muted); }

.preloader-text {
  font-size: 14px;
  color: var(--mh-text-secondary);
}

/* Preloader overlay */
.preloader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.preloader-overlay-in {
  opacity: 1;
}

/* Light theme skeleton */
.theme-light .skeleton-animated .skeleton-line,
.theme-light .skeleton-animated .skeleton-image,
.theme-light .skeleton-animated .skeleton-avatar,
.theme-light .skeleton-animated .skeleton-badge,
.theme-light .skeleton-animated .skeleton-chip,
[data-theme="light"] .skeleton-animated .skeleton-line,
[data-theme="light"] .skeleton-animated .skeleton-image,
[data-theme="light"] .skeleton-animated .skeleton-avatar,
[data-theme="light"] .skeleton-animated .skeleton-badge,
[data-theme="light"] .skeleton-animated .skeleton-chip {
  background: linear-gradient(90deg,
    #e5e5e5 25%,
    #f5f5f5 50%,
    #e5e5e5 75%
  );
  background-size: 200% 100%;
}

.theme-light .skeleton-card,
.theme-light .skeleton-property,
.theme-light .skeleton-table,
[data-theme="light"] .skeleton-card,
[data-theme="light"] .skeleton-property,
[data-theme="light"] .skeleton-table {
  background: white;
}

.theme-light .preloader-overlay,
[data-theme="light"] .preloader-overlay {
  background: rgba(255, 255, 255, 0.8);
}

/* ============================================
   F7 BADGE - Notification Indicators
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
  color: white;
}

.badge-small {
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  padding: 0 4px;
}

.badge-large {
  min-width: 24px;
  height: 24px;
  font-size: 14px;
  padding: 0 8px;
}

/* Badge colors */
.badge-red { background: #ef4444; }
.badge-green { background: #10b981; }
.badge-blue { background: #3b82f6; }
.badge-gold { background: var(--mh-gold); color: #1a1a1a; }
.badge-gray { background: var(--mh-text-muted); }
.badge-orange { background: #f59e0b; }

/* Badge dot */
.badge-dot {
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
}

.badge-small.badge-dot {
  min-width: 6px;
  width: 6px;
  height: 6px;
}

/* Badge pulse */
.badge-pulse {
  position: relative;
}

.badge-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: inherit;
  animation: badgePulse 1.5s ease-out infinite;
}

@keyframes badgePulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Badge positioning */
.badge-top-right {
  position: absolute;
  top: -6px;
  right: -6px;
}

.badge-top-left {
  position: absolute;
  top: -6px;
  left: -6px;
}

.badge-bottom-right {
  position: absolute;
  bottom: -6px;
  right: -6px;
}

.badge-bottom-left {
  position: absolute;
  bottom: -6px;
  left: -6px;
}

/* ============================================
   F7 LIST INDEX - Alphabetic Sidebar
   ============================================ */
.list-index {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  padding: 4px;
}

.list-index-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-index-item {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--mh-gold);
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 4px;
}

.list-index-item:hover {
  background: var(--mh-dark-tertiary);
}

.list-index-active .list-index-item {
  color: var(--mh-text-muted);
}

.list-index-active .list-index-item:hover {
  color: var(--mh-gold);
}

.list-index-label {
  position: absolute;
  right: 40px;
  transform: translateY(-50%);
  background: var(--mh-gold);
  color: #1a1a1a;
  font-size: 24px;
  font-weight: 700;
  width: 56px;
  height: 56px;
  border-radius: 50% 50% 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.list-index-label-in {
  opacity: 1;
}

/* Light theme list index */
.theme-light .list-index-item:hover,
[data-theme="light"] .list-index-item:hover {
  background: #f5f5f5;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .skeleton-animated .skeleton-line,
  .skeleton-animated .skeleton-image,
  .skeleton-animated .skeleton-avatar,
  .skeleton-animated .skeleton-badge,
  .skeleton-animated .skeleton-chip,
  .badge-pulse::after {
    animation: none;
  }
}

/* ============================================
   F7 SWIPER / CAROUSEL
   ============================================ */
.swiper {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.swiper-wrapper {
  display: flex;
  transition: transform 0.3s ease;
}

.swiper-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.swiper-fade .swiper-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.swiper-fade .swiper-slide-active {
  position: relative;
  opacity: 1;
}

.swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: var(--mh-gold);
  width: 24px;
  border-radius: 4px;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.swiper-button-prev { left: 12px; }
.swiper-button-next { right: 12px; }

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: rgba(0, 0, 0, 0.7);
}

.swiper-button-prev:disabled,
.swiper-button-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ============================================
   F7 TABS
   ============================================ */
.tabs-container {
  display: flex;
  flex-direction: column;
}

.tabs-bottom {
  flex-direction: column-reverse;
}

.tabs-bar {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  padding: 4px;
}

.tabs-bar-inner {
  display: flex;
  position: relative;
}

.tab-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--mh-text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.tab-link:hover {
  color: var(--mh-text-secondary);
}

.tab-link-active {
  color: var(--mh-text-primary);
}

.tab-icon {
  display: flex;
}

.tab-badge {
  background: #ef4444;
  color: white;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.tab-link-highlight {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  background: var(--mh-dark-tertiary);
  border-radius: 8px;
  transition: all 0.3s ease;
  z-index: 0;
}

.tabs-content {
  position: relative;
  overflow: hidden;
}

.tab-content {
  display: none;
  padding: 16px 0;
  animation: tabFadeIn 0.3s ease;
}

.tab-content-active {
  display: block;
}

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

/* Tabs styles */
.tabs-segmented .tabs-bar {
  background: var(--mh-dark-tertiary);
}

.tabs-segmented .tab-link-highlight {
  background: var(--mh-gold);
}

.tabs-segmented .tab-link-active {
  color: #1a1a1a;
}

.tabs-buttons .tabs-bar {
  background: transparent;
  padding: 0;
}

.tabs-buttons .tab-link {
  background: var(--mh-dark-secondary);
  border-radius: 8px;
  margin-right: 8px;
}

.tabs-buttons .tab-link:last-child {
  margin-right: 0;
}

.tabs-buttons .tab-link-active {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.tabs-buttons .tab-link-highlight {
  display: none;
}

/* Light theme tabs */
.theme-light .tabs-bar,
[data-theme="light"] .tabs-bar {
  background: #f5f5f5;
}

.theme-light .tab-link-highlight,
[data-theme="light"] .tab-link-highlight {
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ============================================
   F7 PANEL / SIDEBAR
   ============================================ */
.panel {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 280px;
  z-index: 10000;
  pointer-events: none;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
}

.panel-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.panel-in .panel-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.panel-content {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background: var(--mh-dark-secondary);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  pointer-events: auto;
}

.panel-left .panel-content {
  transform: translateX(-100%);
}

.panel-right .panel-content {
  transform: translateX(100%);
}

.panel-in .panel-content {
  transform: translateX(0);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.panel-close {
  background: none;
  border: none;
  color: var(--mh-text-muted);
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.panel-close:hover {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.panel-inner {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Panel effects */
.panel-push.panel-left-open .page-content,
.panel-push.panel-left-open #main-content {
  transform: translateX(280px);
  transition: transform 0.3s ease;
}

.panel-push.panel-right-open .page-content,
.panel-push.panel-right-open #main-content {
  transform: translateX(-280px);
  transition: transform 0.3s ease;
}

/* Light theme panel */
.theme-light .panel-content,
[data-theme="light"] .panel-content {
  background: white;
}

.theme-light .panel-header,
[data-theme="light"] .panel-header {
  border-color: #e5e5e5;
}

/* ============================================
   F7 TOGGLE / SWITCH
   ============================================ */
.toggle-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.toggle-label-left {
  flex-direction: row-reverse;
}

.toggle-label {
  font-size: 14px;
  color: var(--mh-text-primary);
  cursor: pointer;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mh-dark-tertiary);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-icon::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.toggle input:checked + .toggle-icon {
  background: var(--mh-gold);
}

.toggle input:checked + .toggle-icon::before {
  transform: translateX(20px);
}

.toggle-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Toggle colors */
.toggle-gold input:checked + .toggle-icon { background: var(--mh-gold); }
.toggle-green input:checked + .toggle-icon { background: #10b981; }
.toggle-blue input:checked + .toggle-icon { background: #3b82f6; }
.toggle-red input:checked + .toggle-icon { background: #ef4444; }

/* Light theme toggle */
.theme-light .toggle-icon,
[data-theme="light"] .toggle-icon {
  background: #e5e5e5;
}

/* ============================================
   F7 NOTIFICATION
   ============================================ */
.notification {
  position: fixed;
  left: 16px;
  right: 16px;
  z-index: 10003;
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-100%);
  opacity: 0;
  transition: all 0.3s ease;
}

.notification-top {
  top: 16px;
}

.notification-bottom {
  bottom: 16px;
  transform: translateY(100%);
}

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

.notification-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
}

.notification-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--mh-dark-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mh-gold);
}

.notification-image {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
}

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

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

.notification-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--mh-text-primary);
  margin-bottom: 2px;
}

.notification-subtitle {
  font-size: 12px;
  color: var(--mh-gold);
  margin-bottom: 4px;
}

.notification-message {
  font-size: 13px;
  color: var(--mh-text-secondary);
  line-height: 1.4;
}

.notification-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--mh-text-muted);
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.notification-close:hover {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

/* Light theme notification */
.theme-light .notification,
[data-theme="light"] .notification {
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.theme-light .notification-icon,
[data-theme="light"] .notification-icon {
  background: #f5f5f5;
}

/* Safe area for notch devices */
@supports (padding-top: env(safe-area-inset-top)) {
  .notification-top {
    top: calc(16px + env(safe-area-inset-top));
  }

  .notification-bottom {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* ============================================
   F7 COLOR PICKER
   ============================================ */
.color-picker {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  padding: 16px;
}

.color-picker-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.color-picker-preview-color {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.color-picker-preview-value {
  font-family: monospace;
  font-size: 16px;
  font-weight: 500;
  color: var(--mh-text-primary);
  text-transform: uppercase;
}

.color-picker-palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.color-picker-color {
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

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

.color-picker-color-selected {
  box-shadow: 0 0 0 3px var(--mh-dark-primary), 0 0 0 5px var(--mh-gold);
}

.color-picker-input-wrap {
  position: relative;
}

.color-picker-input {
  width: 100%;
  background: var(--mh-dark-tertiary);
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-family: monospace;
  font-size: 14px;
  color: var(--mh-text-primary);
  text-transform: uppercase;
}

.color-picker-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--mh-gold);
}

/* Light theme color picker */
.theme-light .color-picker,
[data-theme="light"] .color-picker {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-light .color-picker-color,
[data-theme="light"] .color-picker-color {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.theme-light .color-picker-input,
[data-theme="light"] .color-picker-input {
  background: #f5f5f5;
}

/* ============================================
   F7 CARD STACK
   ============================================ */
.card-stack {
  position: relative;
  height: 400px;
}

.card-stack-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 80px);
  background: var(--mh-dark-secondary);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease;
  cursor: grab;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.card-stack-card:active {
  cursor: grabbing;
}

.card-stack-card-active {
  z-index: 10 !important;
}

.card-stack-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Swipe indicators */
.card-stack-swipe-left::after,
.card-stack-swipe-right::after,
.card-stack-swipe-up::after {
  content: '';
  position: absolute;
  top: 20px;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  border: 3px solid;
}

.card-stack-swipe-left::after {
  content: 'NOPE';
  right: 20px;
  color: #ef4444;
  border-color: #ef4444;
  transform: rotate(15deg);
}

.card-stack-swipe-right::after {
  content: 'LIKE';
  left: 20px;
  color: #10b981;
  border-color: #10b981;
  transform: rotate(-15deg);
}

.card-stack-swipe-up::after {
  content: 'SUPER';
  left: 50%;
  transform: translateX(-50%);
  color: var(--mh-gold);
  border-color: var(--mh-gold);
}

.card-stack-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 16px;
}

.card-stack-action {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-stack-action:hover {
  transform: scale(1.1);
}

.card-stack-action:active {
  transform: scale(0.95);
}

.card-stack-action-left {
  background: white;
  color: #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.card-stack-action-right {
  background: #10b981;
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.card-stack-action-up {
  background: var(--mh-gold);
  color: #1a1a1a;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.card-stack-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--mh-text-muted);
  text-align: center;
  gap: 16px;
}

/* Light theme card stack */
.theme-light .card-stack-card,
[data-theme="light"] .card-stack-card {
  background: white;
}

/* ============================================
   F7 STATS CARDS
   ============================================ */
.stats-grid {
  display: grid;
  gap: 16px;
}

.stat-card {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.stat-card-small {
  padding: 12px;
}

.stat-card-large {
  padding: 20px;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card-gold .stat-icon { background: rgba(212, 175, 55, 0.15); color: var(--mh-gold); }
.stat-card-green .stat-icon { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stat-card-blue .stat-icon { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.stat-card-red .stat-icon { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.stat-card-purple .stat-icon { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

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

.stat-label {
  font-size: 12px;
  color: var(--mh-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--mh-text-primary);
  line-height: 1.2;
}

.stat-card-small .stat-value {
  font-size: 20px;
}

.stat-card-large .stat-value {
  font-size: 32px;
}

.stat-value-number {
  font-variant-numeric: tabular-nums;
}

.stat-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 4px;
}

.stat-change-positive {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.stat-change-negative {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.stat-change-label {
  color: var(--mh-text-muted);
  margin-left: 4px;
}

/* Light theme stats */
.theme-light .stat-card,
[data-theme="light"] .stat-card {
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ============================================
   F7 FORM VALIDATION
   ============================================ */
.input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.input-success {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.input-error-message {
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.input-error-message::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center;
}

/* Input focus states */
input:focus,
select:focus,
textarea:focus {
  outline: none;
}

/* Floating labels */
.input-with-floating-label {
  position: relative;
}

.input-with-floating-label input,
.input-with-floating-label textarea {
  padding-top: 20px;
}

.input-with-floating-label label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--mh-text-muted);
  pointer-events: none;
  transition: all 0.2s ease;
}

.input-with-floating-label input:focus + label,
.input-with-floating-label input:not(:placeholder-shown) + label,
.input-with-floating-label textarea:focus + label,
.input-with-floating-label textarea:not(:placeholder-shown) + label {
  top: 8px;
  font-size: 11px;
  color: var(--mh-gold);
}

/* Required field indicator */
.input-required::after {
  content: '*';
  color: #ef4444;
  margin-left: 2px;
}

/* Form groups */
.form-group {
  margin-bottom: 16px;
}

.form-group-inline {
  display: flex;
  gap: 12px;
}

.form-group-inline > * {
  flex: 1;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--mh-text-secondary);
  margin-bottom: 6px;
}

.form-hint {
  font-size: 12px;
  color: var(--mh-text-muted);
  margin-top: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .card-stack {
    height: 350px;
  }

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

  .form-group-inline {
    flex-direction: column;
  }
}

/* ============================================
   F7 TREEVIEW
   ============================================ */
.treeview {
  font-size: 14px;
}

.treeview-item {
  user-select: none;
}

.treeview-item-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.treeview-item-content:hover {
  background: var(--mh-dark-tertiary);
}

.treeview-item-selected {
  background: rgba(212, 175, 55, 0.15) !important;
}

.treeview-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--mh-text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.treeview-toggle-expanded {
  transform: rotate(0deg);
}

.treeview-toggle-placeholder {
  width: 20px;
  flex-shrink: 0;
}

.treeview-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.treeview-checkbox input {
  display: none;
}

.treeview-checkbox-icon {
  width: 18px;
  height: 18px;
  border: 2px solid var(--mh-text-muted);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.treeview-checkbox input:checked + .treeview-checkbox-icon {
  background: var(--mh-gold);
  border-color: var(--mh-gold);
}

.treeview-checkbox input:checked + .treeview-checkbox-icon::after {
  content: '';
  width: 6px;
  height: 10px;
  border: solid #1a1a1a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.treeview-icon {
  display: flex;
  color: var(--mh-gold);
}

.treeview-label {
  flex: 1;
  color: var(--mh-text-primary);
}

.treeview-badge {
  background: var(--mh-dark-tertiary);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--mh-text-muted);
}

.treeview-children {
  margin-left: 0;
}

/* Light theme treeview */
.theme-light .treeview-item-content:hover,
[data-theme="light"] .treeview-item-content:hover {
  background: #f5f5f5;
}

.theme-light .treeview-badge,
[data-theme="light"] .treeview-badge {
  background: #f0f0f0;
}

/* ============================================
   F7 MENU
   ============================================ */
.menu {
  position: fixed;
  z-index: 10004;
  min-width: 180px;
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: scale(0.95);
  transform-origin: top left;
  transition: all 0.2s ease;
}

.menu-in {
  opacity: 1;
  transform: scale(1);
}

.menu-inner {
  padding: 6px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.menu-item:hover {
  background: var(--mh-dark-tertiary);
}

.menu-item-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.menu-item-destructive {
  color: #ef4444;
}

.menu-item-icon {
  display: flex;
  color: var(--mh-text-muted);
  width: 20px;
}

.menu-item-label {
  flex: 1;
  font-size: 14px;
  color: var(--mh-text-primary);
}

.menu-item-shortcut {
  font-size: 12px;
  color: var(--mh-text-muted);
  font-family: monospace;
}

.menu-item-badge {
  background: #ef4444;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
}

.menu-divider {
  height: 1px;
  background: var(--mh-dark-tertiary);
  margin: 6px 0;
}

/* Light theme menu */
.theme-light .menu,
[data-theme="light"] .menu {
  background: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.theme-light .menu-item:hover,
[data-theme="light"] .menu-item:hover {
  background: #f5f5f5;
}

.theme-light .menu-divider,
[data-theme="light"] .menu-divider {
  background: #e5e5e5;
}

/* ============================================
   F7 DIALOG ENHANCED
   ============================================ */
.dialog-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10005;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dialog-container.dialog-in {
  opacity: 1;
}

.dialog-no-animate {
  transition: none;
}

.dialog-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.dialog-open {
  overflow: hidden;
}

.dialog {
  position: relative;
  background: var(--mh-dark-secondary);
  border-radius: 16px;
  max-width: 320px;
  width: 100%;
  padding: 24px;
  text-align: center;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.dialog-in .dialog {
  transform: scale(1);
}

.dialog-icon {
  margin-bottom: 16px;
  color: var(--mh-gold);
}

.dialog-icon svg {
  width: 48px;
  height: 48px;
}

.dialog-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--mh-text-primary);
  margin-bottom: 8px;
}

.dialog-text {
  font-size: 14px;
  color: var(--mh-text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}

.dialog-content {
  margin-bottom: 16px;
  text-align: left;
}

.dialog-inputs {
  margin-bottom: 20px;
  text-align: left;
}

.dialog-input-wrap {
  margin-bottom: 12px;
}

.dialog-input-wrap:last-child {
  margin-bottom: 0;
}

.dialog-input-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--mh-text-muted);
  margin-bottom: 6px;
}

.dialog-input {
  width: 100%;
  background: var(--mh-dark-tertiary);
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  color: var(--mh-text-primary);
}

.dialog-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--mh-gold);
}

.dialog-textarea {
  min-height: 80px;
  resize: vertical;
}

.dialog-select {
  appearance: none;
  cursor: pointer;
}

.dialog-buttons {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.dialog-buttons-vertical {
  flex-direction: column;
}

.dialog-button {
  flex: 1;
  padding: 12px 16px;
  background: var(--mh-dark-tertiary);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  color: var(--mh-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.dialog-button:hover {
  background: var(--mh-dark-primary);
}

.dialog-button-bold {
  background: var(--mh-gold);
  color: #1a1a1a;
  font-weight: 600;
}

.dialog-button-bold:hover {
  background: #c9a430;
}

.dialog-button-destructive {
  color: #ef4444;
}

/* Light theme dialog */
.theme-light .dialog,
[data-theme="light"] .dialog {
  background: white;
}

.theme-light .dialog-input,
.theme-light .dialog-button,
[data-theme="light"] .dialog-input,
[data-theme="light"] .dialog-button {
  background: #f5f5f5;
}

.theme-light .dialog-button:hover,
[data-theme="light"] .dialog-button:hover {
  background: #e5e5e5;
}

/* ============================================
   F7 CHIP INPUT
   ============================================ */
.chip-input {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: text;
  position: relative;
}

.chip-input:focus-within {
  box-shadow: 0 0 0 2px var(--mh-gold);
}

.chip-input-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.chip-input-chip {
  background: var(--mh-dark-tertiary);
  padding: 4px 8px 4px 12px;
  gap: 4px;
}

.chip-input-chip .chip-delete {
  background: none;
  border: none;
  color: var(--mh-text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.chip-input-chip .chip-delete:hover {
  color: var(--mh-text-primary);
}

.chip-input-field {
  flex: 1;
  min-width: 100px;
  background: transparent;
  border: none;
  padding: 6px 0;
  font-size: 14px;
  color: var(--mh-text-primary);
  outline: none;
}

.chip-input-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--mh-dark-secondary);
  border-radius: 8px;
  margin-top: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  max-height: 200px;
  overflow-y: auto;
  display: none;
  z-index: 100;
}

.chip-input-suggestions-open {
  display: block;
}

.chip-input-suggestion {
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.chip-input-suggestion:hover {
  background: var(--mh-dark-tertiary);
}

/* Light theme chip input */
.theme-light .chip-input,
[data-theme="light"] .chip-input {
  background: #f5f5f5;
}

.theme-light .chip-input-chip,
[data-theme="light"] .chip-input-chip {
  background: white;
}

.theme-light .chip-input-suggestions,
[data-theme="light"] .chip-input-suggestions {
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.theme-light .chip-input-suggestion:hover,
[data-theme="light"] .chip-input-suggestion:hover {
  background: #f5f5f5;
}

/* ============================================
   F7 RATING
   ============================================ */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rating-stars {
  display: flex;
  gap: 4px;
}

.rating-star {
  cursor: pointer;
  color: var(--mh-dark-tertiary);
  transition: all 0.15s ease;
}

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

.rating-star-filled {
  color: var(--mh-gold);
}

.rating-star-half {
  position: relative;
}

.rating-star-half::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.rating-readonly .rating-star {
  cursor: default;
}

.rating-readonly .rating-star:hover {
  transform: none;
}

.rating-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--mh-text-secondary);
}

/* Rating sizes */
.rating-small .rating-star svg { width: 16px; height: 16px; }
.rating-large .rating-star svg { width: 32px; height: 32px; }

/* Rating colors */
.rating-gold .rating-star-filled { color: var(--mh-gold); }
.rating-red .rating-star-filled { color: #ef4444; }
.rating-green .rating-star-filled { color: #10b981; }

/* Light theme rating */
.theme-light .rating-star,
[data-theme="light"] .rating-star {
  color: #e5e5e5;
}

/* ============================================
   F7 PROGRESS STEPS
   ============================================ */
.progress-steps {
  display: flex;
  align-items: flex-start;
}

.progress-steps-vertical {
  flex-direction: column;
}

.progress-step {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
}

.progress-steps-vertical .progress-step {
  flex: none;
  flex-direction: row;
  padding-bottom: 32px;
}

.progress-step-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mh-dark-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--mh-text-muted);
  flex-shrink: 0;
  z-index: 1;
  transition: all 0.3s ease;
}

.progress-step-active .progress-step-indicator {
  background: var(--mh-gold);
  color: #1a1a1a;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
}

.progress-step-completed .progress-step-indicator {
  background: #10b981;
  color: white;
}

.progress-step-content {
  margin-left: 12px;
}

.progress-step-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--mh-text-primary);
}

.progress-step-active .progress-step-title {
  color: var(--mh-gold);
}

.progress-step-subtitle {
  font-size: 12px;
  color: var(--mh-text-muted);
  margin-top: 2px;
}

.progress-step-connector {
  flex: 1;
  height: 2px;
  background: var(--mh-dark-tertiary);
  margin: 0 8px;
}

.progress-step-completed .progress-step-connector {
  background: #10b981;
}

.progress-steps-vertical .progress-step-connector {
  position: absolute;
  left: 15px;
  top: 32px;
  width: 2px;
  height: calc(100% - 32px);
  margin: 0;
}

/* Clickable steps */
.progress-step {
  cursor: pointer;
}

.progress-step:hover .progress-step-indicator {
  transform: scale(1.1);
}

/* Light theme */
.theme-light .progress-step-indicator,
[data-theme="light"] .progress-step-indicator {
  background: #e5e5e5;
}

.theme-light .progress-step-connector,
[data-theme="light"] .progress-step-connector {
  background: #e5e5e5;
}

/* ============================================
   F7 BREADCRUMBS
   ============================================ */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 14px;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mh-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.breadcrumb-item:hover {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.breadcrumb-item-active {
  color: var(--mh-text-primary);
  cursor: default;
  font-weight: 500;
}

.breadcrumb-item-active:hover {
  background: transparent;
}

.breadcrumb-item-collapsed {
  color: var(--mh-gold);
}

.breadcrumb-icon {
  display: flex;
}

.breadcrumb-separator {
  color: var(--mh-text-muted);
  display: flex;
}

/* Light theme breadcrumbs */
.theme-light .breadcrumb-item:hover,
[data-theme="light"] .breadcrumb-item:hover {
  background: #f5f5f5;
}

/* ============================================
   F7 AVATAR GROUP
   ============================================ */
.avatar-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.avatar-group-item {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--mh-dark-secondary);
  margin-left: -12px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.avatar-group-item:last-child {
  margin-left: 0;
}

.avatar-group-item:hover {
  transform: translateY(-2px);
  z-index: 10 !important;
}

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

.avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.avatar-group-more {
  background: var(--mh-dark-tertiary);
}

.avatar-more-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--mh-text-primary);
}

/* Avatar group sizes */
.avatar-group-small .avatar-group-item {
  width: 32px;
  height: 32px;
  margin-left: -10px;
}

.avatar-group-large .avatar-group-item {
  width: 48px;
  height: 48px;
  margin-left: -14px;
}

/* Light theme avatar group */
.theme-light .avatar-group-item,
[data-theme="light"] .avatar-group-item {
  border-color: white;
}

.theme-light .avatar-group-more,
[data-theme="light"] .avatar-group-more {
  background: #e5e5e5;
}

/* ============================================
   F7 COUNTDOWN
   ============================================ */
.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.countdown-part {
  text-align: center;
  min-width: 60px;
}

.countdown-value {
  font-size: 36px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mh-text-primary);
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  padding: 12px 16px;
  line-height: 1;
}

.countdown-label {
  font-size: 11px;
  color: var(--mh-text-muted);
  text-transform: uppercase;
  margin-top: 8px;
}

.countdown-separator {
  font-size: 32px;
  font-weight: 700;
  color: var(--mh-text-muted);
  padding: 0 4px;
}

/* Light theme countdown */
.theme-light .countdown-value,
[data-theme="light"] .countdown-value {
  background: #f5f5f5;
}

/* ============================================
   F7 LOADING BUTTON
   ============================================ */
.loading-button-loading {
  position: relative;
  pointer-events: none;
}

.loading-button-spinner {
  display: inline-flex;
  animation: spin 1s linear infinite;
}

.loading-button-spinner svg {
  stroke-dasharray: 50;
  stroke-dashoffset: 15;
}

.loading-button-loading .loading-button-spinner + span,
.loading-button-loading span + .loading-button-spinner {
  margin-left: 8px;
}

/* Button loading states */
button.loading-button-loading,
.btn.loading-button-loading {
  opacity: 0.8;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
  .progress-steps:not(.progress-steps-vertical) {
    flex-direction: column;
  }

  .progress-steps:not(.progress-steps-vertical) .progress-step {
    flex-direction: row;
    padding-bottom: 20px;
  }

  .progress-steps:not(.progress-steps-vertical) .progress-step-connector {
    position: absolute;
    left: 15px;
    top: 32px;
    width: 2px;
    height: calc(100% - 32px);
    margin: 0;
  }

  .countdown-value {
    font-size: 28px;
    padding: 10px 12px;
  }

  .countdown-part {
    min-width: 50px;
  }
}

/* ============================================
   F7 SPOTLIGHT / TOUR
   ============================================ */
.spotlight-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10010;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.spotlight-in {
  opacity: 1;
}

.spotlight-svg {
  position: absolute;
  top: 0;
  left: 0;
}

.spotlight-hole {
  transition: all 0.3s ease;
}

.spotlight-tooltip {
  position: fixed;
  z-index: 10011;
  background: var(--mh-dark-secondary);
  border-radius: 16px;
  padding: 20px;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.spotlight-tooltip-in {
  opacity: 1;
  transform: translateY(0);
}

.spotlight-tooltip-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mh-text-primary);
  margin-bottom: 8px;
}

.spotlight-tooltip-text {
  font-size: 14px;
  color: var(--mh-text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.spotlight-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
}

.spotlight-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mh-dark-tertiary);
  transition: all 0.3s ease;
}

.spotlight-progress-dot.active {
  background: var(--mh-gold);
  width: 20px;
  border-radius: 4px;
}

.spotlight-progress-dot.completed {
  background: var(--mh-gold);
}

.spotlight-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

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

.spotlight-btn {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.spotlight-btn-skip {
  background: transparent;
  color: var(--mh-text-muted);
}

.spotlight-btn-skip:hover {
  color: var(--mh-text-primary);
}

.spotlight-btn-prev {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.spotlight-btn-prev:hover {
  background: var(--mh-dark-primary);
}

.spotlight-btn-primary {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.spotlight-btn-primary:hover {
  background: #c9a430;
}

/* Light theme spotlight */
.theme-light .spotlight-tooltip,
[data-theme="light"] .spotlight-tooltip {
  background: white;
}

/* ============================================
   F7 EMPTY STATE
   ============================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}

.empty-state-small {
  padding: 24px 16px;
}

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

.empty-state-large {
  padding: 64px 32px;
}

.empty-state-large .empty-state-icon svg {
  width: 80px;
  height: 80px;
}

.empty-state-icon {
  color: var(--mh-text-muted);
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--mh-text-primary);
  margin-bottom: 8px;
}

.empty-state-description {
  font-size: 14px;
  color: var(--mh-text-muted);
  max-width: 280px;
  line-height: 1.5;
}

.empty-state-action {
  margin-top: 20px;
  padding: 12px 24px;
  background: var(--mh-gold);
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.empty-state-action:hover {
  background: #c9a430;
  transform: translateY(-1px);
}

/* ============================================
   F7 COPY BUTTON
   ============================================ */
.copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--mh-dark-tertiary);
  border: none;
  padding: 6px;
  border-radius: 6px;
  color: var(--mh-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

*:hover > .copy-button {
  opacity: 1;
}

.copy-button:hover {
  background: var(--mh-dark-primary);
  color: var(--mh-text-primary);
}

.copy-button-success {
  color: #10b981 !important;
}

/* Light theme copy button */
.theme-light .copy-button,
[data-theme="light"] .copy-button {
  background: #f5f5f5;
}

.theme-light .copy-button:hover,
[data-theme="light"] .copy-button:hover {
  background: #e5e5e5;
}

/* ============================================
   F7 PIN INPUT
   ============================================ */
.pin-input {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.pin-input-field {
  width: 48px;
  height: 56px;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 12px;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  color: var(--mh-text-primary);
  transition: all 0.2s ease;
}

.pin-input-field:focus {
  outline: none;
  border-color: var(--mh-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.pin-input-field:not(:placeholder-shown) {
  border-color: var(--mh-gold);
}

/* Light theme pin input */
.theme-light .pin-input-field,
[data-theme="light"] .pin-input-field {
  background: white;
  border-color: #e5e5e5;
}

.theme-light .pin-input-field:focus,
[data-theme="light"] .pin-input-field:focus {
  border-color: var(--mh-gold);
}

/* ============================================
   F7 PASSWORD STRENGTH
   ============================================ */
.password-strength {
  margin-top: 12px;
}

.password-strength-bar {
  height: 4px;
  background: var(--mh-dark-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.password-strength-fill {
  height: 100%;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.password-strength-weak .password-strength-fill {
  background: #ef4444;
}

.password-strength-fair .password-strength-fill {
  background: #f59e0b;
}

.password-strength-good .password-strength-fill {
  background: #10b981;
}

.password-strength-strong .password-strength-fill {
  background: var(--mh-gold);
}

.password-strength-label {
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
}

.password-strength-weak .password-strength-label { color: #ef4444; }
.password-strength-fair .password-strength-label { color: #f59e0b; }
.password-strength-good .password-strength-label { color: #10b981; }
.password-strength-strong .password-strength-label { color: var(--mh-gold); }

.password-strength-requirements {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.password-requirement {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mh-text-muted);
  transition: color 0.2s ease;
}

.password-requirement-met {
  color: #10b981;
}

.password-requirement svg {
  flex-shrink: 0;
}

/* Light theme password strength */
.theme-light .password-strength-bar,
[data-theme="light"] .password-strength-bar {
  background: #e5e5e5;
}

/* ============================================
   F7 SCROLL SPY
   ============================================ */
.scroll-spy-active {
  color: var(--mh-gold) !important;
  font-weight: 600;
}

/* ============================================
   F7 FLIP CARD
   ============================================ */
.flip-card {
  perspective: 1000px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform var(--flip-duration, 600ms) ease;
  transform-style: preserve-3d;
}

.flip-card-horizontal.flip-card-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-vertical.flip-card-flipped .flip-card-inner {
  transform: rotateX(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}

.flip-card-back {
  background: var(--mh-dark-secondary);
}

.flip-card-horizontal .flip-card-back {
  transform: rotateY(180deg);
}

.flip-card-vertical .flip-card-back {
  transform: rotateX(180deg);
}

/* ============================================
   F7 NUMBER COUNTER
   ============================================ */
.number-counter {
  font-variant-numeric: tabular-nums;
}

/* ============================================
   F7 CONFETTI
   ============================================ */
.confetti-canvas {
  pointer-events: none;
}

/* ============================================
   MASONRY GRID (minimal - layout handled by JS)
   ============================================ */
.masonry-grid {
  position: relative;
}

.masonry-grid > * {
  position: absolute;
}

/* ============================================
   RESPONSIVE BONUS COMPONENTS
   ============================================ */
@media (max-width: 768px) {
  .spotlight-tooltip {
    max-width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px;
    width: auto;
  }

  .pin-input-field {
    width: 40px;
    height: 48px;
    font-size: 20px;
  }

  .pin-input {
    gap: 8px;
  }
}

/* ============================================
   F7 FILE UPLOAD (DRAG & DROP)
   ============================================ */
.file-upload {
  border: 2px dashed var(--mh-dark-tertiary);
  border-radius: 16px;
  padding: 40px 24px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  background: var(--mh-dark-secondary);
}

.file-upload:hover {
  border-color: var(--mh-gold);
  background: rgba(212, 175, 55, 0.05);
}

.file-upload-dragover {
  border-color: var(--mh-gold);
  background: rgba(212, 175, 55, 0.1);
  transform: scale(1.02);
}

.file-upload-icon {
  color: var(--mh-text-muted);
  margin-bottom: 16px;
}

.file-upload-dragover .file-upload-icon {
  color: var(--mh-gold);
  animation: bounce 0.5s ease infinite;
}

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

.file-upload-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mh-text-primary);
  margin-bottom: 4px;
}

.file-upload-subtitle {
  font-size: 14px;
  color: var(--mh-text-muted);
}

.file-upload-browse {
  color: var(--mh-gold);
  cursor: pointer;
  text-decoration: underline;
}

.file-upload-list {
  margin-top: 20px;
  display: grid;
  gap: 8px;
}

.file-upload-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--mh-dark-primary);
  border-radius: 10px;
}

.file-upload-item-icon {
  color: var(--mh-gold);
}

.file-upload-item-info {
  flex: 1;
  min-width: 0;
}

.file-upload-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--mh-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-upload-item-size {
  font-size: 12px;
  color: var(--mh-text-muted);
}

.file-upload-item-progress {
  height: 4px;
  background: var(--mh-dark-tertiary);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

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

.file-upload-item-remove {
  color: var(--mh-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.file-upload-item-remove:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Light theme file upload */
.theme-light .file-upload,
[data-theme="light"] .file-upload {
  background: #fafafa;
  border-color: #e5e5e5;
}

.theme-light .file-upload:hover,
[data-theme="light"] .file-upload:hover {
  background: rgba(212, 175, 55, 0.05);
}

.theme-light .file-upload-item,
[data-theme="light"] .file-upload-item {
  background: white;
}

/* ============================================
   F7 SIGNATURE PAD
   ============================================ */
.signature-pad {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signature-pad-canvas-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
}

.signature-pad-canvas {
  display: block;
  width: 100%;
  touch-action: none;
  cursor: crosshair;
}

.signature-pad-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--mh-text-muted);
  font-size: 14px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.signature-pad-has-signature .signature-pad-placeholder {
  opacity: 0;
}

.signature-pad-line {
  position: absolute;
  bottom: 40px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--mh-dark-tertiary);
}

.signature-pad-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.signature-pad-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.signature-pad-btn-clear {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.signature-pad-btn-clear:hover {
  background: var(--mh-dark-primary);
}

.signature-pad-btn-save {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.signature-pad-btn-save:hover {
  background: #c9a430;
}

/* Light theme signature pad */
.theme-light .signature-pad-canvas-container,
[data-theme="light"] .signature-pad-canvas-container {
  background: white;
  border-color: #e5e5e5;
}

/* ============================================
   F7 KANBAN BOARD
   ============================================ */
.kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 16px 0;
  -webkit-overflow-scrolling: touch;
}

.kanban-column {
  min-width: 280px;
  max-width: 320px;
  flex-shrink: 0;
  background: var(--mh-dark-secondary);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
}

.kanban-column-header {
  padding: 16px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kanban-column-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mh-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.kanban-column-count {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-muted);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

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

.kanban-column-btn {
  padding: 6px;
  background: transparent;
  border: none;
  color: var(--mh-text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.kanban-column-btn:hover {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.kanban-column-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kanban-card {
  background: var(--mh-dark-primary);
  border-radius: 10px;
  padding: 14px;
  cursor: grab;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.kanban-card:hover {
  border-color: var(--mh-dark-tertiary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card-dragging {
  opacity: 0.5;
  transform: rotate(2deg);
}

.kanban-card-drag-over {
  border-color: var(--mh-gold);
  background: rgba(212, 175, 55, 0.05);
}

.kanban-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--mh-text-primary);
  margin-bottom: 8px;
}

.kanban-card-description {
  font-size: 13px;
  color: var(--mh-text-muted);
  line-height: 1.4;
  margin-bottom: 12px;
}

.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kanban-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.kanban-card-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(212, 175, 55, 0.2);
  color: var(--mh-gold);
}

.kanban-card-assignee {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
}

.kanban-card-assignee img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kanban-column-drop-zone {
  border: 2px dashed var(--mh-gold);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  color: var(--mh-gold);
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.kanban-column-drag-over .kanban-column-drop-zone {
  opacity: 1;
}

.kanban-add-card {
  padding: 12px;
  border-top: 1px solid var(--mh-dark-tertiary);
}

.kanban-add-card-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px dashed var(--mh-dark-tertiary);
  border-radius: 8px;
  color: var(--mh-text-muted);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.kanban-add-card-btn:hover {
  border-color: var(--mh-gold);
  color: var(--mh-gold);
}

/* Light theme kanban */
.theme-light .kanban-column,
[data-theme="light"] .kanban-column {
  background: #f5f5f5;
}

.theme-light .kanban-card,
[data-theme="light"] .kanban-card {
  background: white;
}

/* ============================================
   F7 SPARKLINE
   ============================================ */
.sparkline {
  display: inline-block;
  vertical-align: middle;
}

.sparkline-svg {
  display: block;
}

.sparkline-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkline-area {
  opacity: 0.2;
}

.sparkline-bar {
  rx: 2;
}

.sparkline-dot {
  fill: var(--mh-gold);
}

.sparkline-tooltip {
  position: fixed;
  background: var(--mh-dark-secondary);
  color: var(--mh-text-primary);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

/* ============================================
   F7 COMMAND PALETTE
   ============================================ */
.command-palette-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10100;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.command-palette-overlay.active {
  opacity: 1;
}

.command-palette {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  width: 90%;
  max-width: 560px;
  background: var(--mh-dark-secondary);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  z-index: 10101;
  opacity: 0;
  transition: all 0.2s ease;
  overflow: hidden;
}

.command-palette.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.command-palette-search {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
  gap: 12px;
}

.command-palette-search-icon {
  color: var(--mh-text-muted);
  flex-shrink: 0;
}

.command-palette-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 16px;
  color: var(--mh-text-primary);
  outline: none;
}

.command-palette-input::placeholder {
  color: var(--mh-text-muted);
}

.command-palette-kbd {
  font-size: 11px;
  padding: 4px 8px;
  background: var(--mh-dark-tertiary);
  border-radius: 4px;
  color: var(--mh-text-muted);
  font-family: monospace;
}

.command-palette-results {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.command-palette-group {
  margin-bottom: 8px;
}

.command-palette-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--mh-text-muted);
  text-transform: uppercase;
  padding: 8px 12px 4px;
}

.command-palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.command-palette-item:hover,
.command-palette-item-active {
  background: var(--mh-dark-tertiary);
}

.command-palette-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--mh-dark-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mh-gold);
  flex-shrink: 0;
}

.command-palette-item-content {
  flex: 1;
  min-width: 0;
}

.command-palette-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--mh-text-primary);
}

.command-palette-item-description {
  font-size: 12px;
  color: var(--mh-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-palette-item-shortcut {
  display: flex;
  gap: 4px;
}

.command-palette-item-shortcut kbd {
  font-size: 10px;
  padding: 3px 6px;
  background: var(--mh-dark-primary);
  border-radius: 4px;
  color: var(--mh-text-muted);
  font-family: monospace;
}

.command-palette-empty {
  padding: 32px;
  text-align: center;
  color: var(--mh-text-muted);
}

.command-palette-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--mh-dark-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--mh-text-muted);
}

.command-palette-footer-hints {
  display: flex;
  gap: 16px;
}

.command-palette-footer-hint {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Light theme command palette */
.theme-light .command-palette,
[data-theme="light"] .command-palette {
  background: white;
}

/* ============================================
   F7 SCROLL TO TOP
   ============================================ */
.scroll-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--mh-gold);
  color: #1a1a1a;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);
}

.scroll-to-top:active {
  transform: translateY(0);
}

/* ============================================
   F7 READING PROGRESS
   ============================================ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 10000;
  background: transparent;
}

.reading-progress-bar {
  height: 100%;
  background: var(--mh-gold);
  width: 0;
  transition: width 0.1s ease;
}

.reading-progress-bottom {
  top: auto;
  bottom: 0;
}

/* ============================================
   F7 TYPEWRITER
   ============================================ */
.typewriter {
  display: inline;
}

.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background: var(--mh-gold);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: typewriter-blink 0.8s infinite;
}

@keyframes typewriter-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.typewriter-cursor-hidden {
  opacity: 0;
}

/* ============================================
   F7 LAZY LOAD
   ============================================ */
.lazy-load {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lazy-load-loaded {
  opacity: 1;
}

.lazy-load-placeholder {
  background: linear-gradient(
    90deg,
    var(--mh-dark-tertiary) 25%,
    var(--mh-dark-secondary) 50%,
    var(--mh-dark-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: lazy-load-shimmer 1.5s infinite;
}

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

/* Light theme lazy load */
.theme-light .lazy-load-placeholder,
[data-theme="light"] .lazy-load-placeholder {
  background: linear-gradient(
    90deg,
    #e5e5e5 25%,
    #f5f5f5 50%,
    #e5e5e5 75%
  );
  background-size: 200% 100%;
}

/* ============================================
   F7 KEYBOARD SHORTCUTS
   ============================================ */
.keyboard-shortcuts-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: var(--mh-dark-secondary);
  border-radius: 16px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 10101;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.keyboard-shortcuts-modal.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.keyboard-shortcuts-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--mh-text-primary);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.keyboard-shortcuts-close {
  background: transparent;
  border: none;
  color: var(--mh-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}

.keyboard-shortcuts-close:hover {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.keyboard-shortcuts-group {
  margin-bottom: 20px;
}

.keyboard-shortcuts-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--mh-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.keyboard-shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.keyboard-shortcut-item:last-child {
  border-bottom: none;
}

.keyboard-shortcut-label {
  font-size: 14px;
  color: var(--mh-text-primary);
}

.keyboard-shortcut-keys {
  display: flex;
  gap: 4px;
}

.keyboard-shortcut-keys kbd {
  font-size: 11px;
  padding: 4px 8px;
  background: var(--mh-dark-primary);
  border-radius: 4px;
  color: var(--mh-text-secondary);
  font-family: monospace;
  border: 1px solid var(--mh-dark-tertiary);
}

/* Light theme keyboard shortcuts */
.theme-light .keyboard-shortcuts-modal,
[data-theme="light"] .keyboard-shortcuts-modal {
  background: white;
}

.theme-light .keyboard-shortcut-keys kbd,
[data-theme="light"] .keyboard-shortcut-keys kbd {
  background: #f5f5f5;
  border-color: #e5e5e5;
}

/* ============================================
   RESPONSIVE POWER COMPONENTS
   ============================================ */
@media (max-width: 768px) {
  .kanban-board {
    padding: 12px;
  }

  .kanban-column {
    min-width: 260px;
  }

  .command-palette {
    top: 5%;
    width: 95%;
    max-height: 90vh;
  }

  .command-palette-results {
    max-height: 50vh;
  }

  .scroll-to-top {
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }

  .file-upload {
    padding: 24px 16px;
  }

  .signature-pad-canvas-container {
    max-height: 200px;
  }
}

/* ============================================
   F7 SORTABLE LIST
   ============================================ */
.sortable-ghost {
  background: var(--mh-dark-tertiary);
  border: 2px dashed var(--mh-gold);
  border-radius: 8px;
  opacity: 0.5;
}

.sortable-drag {
  opacity: 0.8;
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.sortable-item {
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sortable-item:active {
  cursor: grabbing;
}

/* ============================================
   F7 VIRTUAL LIST
   ============================================ */
.virtual-list-viewport {
  -webkit-overflow-scrolling: touch;
}

.virtual-list-item-wrapper {
  box-sizing: border-box;
}

/* ============================================
   F7 PULL TO REFRESH
   ============================================ */
.pull-refresh-indicator {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--mh-dark-secondary);
  transition: all 0.3s ease;
  opacity: 0;
}

.pull-refresh-spinner {
  color: var(--mh-gold);
  display: flex;
}

.pull-refresh-refreshing .pull-refresh-spinner {
  animation: spin 1s linear infinite;
}

.pull-refresh-text {
  font-size: 13px;
  color: var(--mh-text-muted);
}

.pull-refresh-ready .pull-refresh-text {
  color: var(--mh-gold);
}

/* ============================================
   F7 TIMELINE
   ============================================ */
.timeline {
  position: relative;
  padding: 20px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--mh-dark-tertiary);
}

.timeline-alternating::before {
  left: 50%;
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  padding-left: 60px;
  padding-bottom: 32px;
}

.timeline-alternating .timeline-item {
  width: 50%;
  padding-left: 0;
  padding-right: 40px;
}

.timeline-alternating .timeline-item:nth-child(even) {
  margin-left: 50%;
  padding-left: 40px;
  padding-right: 0;
}

.timeline-item-divider {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-alternating .timeline-item-divider {
  left: auto;
  right: -20px;
}

.timeline-alternating .timeline-item:nth-child(even) .timeline-item-divider {
  left: -20px;
  right: auto;
}

.timeline-item-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mh-dark-secondary);
  border: 3px solid var(--mh-dark-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mh-gold);
  z-index: 1;
}

.timeline-item-active .timeline-item-dot {
  background: var(--mh-gold);
  border-color: var(--mh-gold);
  color: #1a1a1a;
}

.timeline-item-date {
  font-size: 12px;
  color: var(--mh-text-muted);
  margin-bottom: 4px;
}

.timeline-item-content {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  padding: 16px;
}

.timeline-item-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mh-text-primary);
  margin-bottom: 4px;
}

.timeline-item-subtitle {
  font-size: 13px;
  color: var(--mh-gold);
  margin-bottom: 8px;
}

.timeline-item-text {
  font-size: 14px;
  color: var(--mh-text-secondary);
  line-height: 1.5;
}

/* Timeline animation */
.timeline-animated .timeline-item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.timeline-animated .timeline-item-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Light theme timeline */
.theme-light .timeline::before,
[data-theme="light"] .timeline::before {
  background: #e5e5e5;
}

.theme-light .timeline-item-content,
[data-theme="light"] .timeline-item-content {
  background: #f5f5f5;
}

/* ============================================
   F7 ACCORDION
   ============================================ */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.accordion-item {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  overflow: hidden;
}

.accordion-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.accordion-header:hover {
  background: rgba(255, 255, 255, 0.02);
}

.accordion-title {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--mh-text-primary);
}

.accordion-badge {
  font-size: 12px;
  padding: 2px 8px;
  background: var(--mh-gold);
  color: #1a1a1a;
  border-radius: 10px;
  margin-right: 12px;
}

.accordion-chevron {
  color: var(--mh-text-muted);
  transition: transform 0.3s ease;
  display: flex;
}

.accordion-item-open .accordion-chevron {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.accordion-content-inner {
  padding: 0 20px 20px;
  font-size: 14px;
  color: var(--mh-text-secondary);
  line-height: 1.6;
}

/* Light theme accordion */
.theme-light .accordion-item,
[data-theme="light"] .accordion-item {
  background: #f5f5f5;
}

/* ============================================
   F7 COLLAPSIBLE
   ============================================ */
.collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.collapsible-open .collapsible-icon {
  transform: rotate(180deg);
}

/* ============================================
   F7 TOOLTIP ENHANCED
   ============================================ */
.tooltip {
  position: absolute;
  z-index: 10200;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.15s ease;
  pointer-events: none;
}

.tooltip-visible {
  opacity: 1;
  transform: scale(1);
}

.tooltip-content {
  background: var(--mh-dark-primary);
  color: var(--mh-text-primary);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  max-width: 280px;
}

.tooltip-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--mh-dark-primary);
  transform: rotate(45deg);
}

.tooltip-top .tooltip-arrow {
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
}

.tooltip-bottom .tooltip-arrow {
  top: -4px;
  left: 50%;
  margin-left: -4px;
}

.tooltip-left .tooltip-arrow {
  right: -4px;
  top: 50%;
  margin-top: -4px;
}

.tooltip-right .tooltip-arrow {
  left: -4px;
  top: 50%;
  margin-top: -4px;
}

/* Light theme tooltip */
.theme-light .tooltip-content,
[data-theme="light"] .tooltip-content {
  background: #333;
  color: white;
}

.theme-light .tooltip-arrow,
[data-theme="light"] .tooltip-arrow {
  background: #333;
}

/* ============================================
   F7 AUDIO PLAYER
   ============================================ */
.audio-player {
  background: var(--mh-dark-secondary);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.audio-player-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 8px;
}

.audio-player-info {
  text-align: center;
}

.audio-player-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mh-text-primary);
}

.audio-player-artist {
  font-size: 13px;
  color: var(--mh-text-muted);
  margin-top: 2px;
}

.audio-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.audio-player-btn {
  background: transparent;
  border: none;
  color: var(--mh-text-primary);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.audio-player-btn:hover {
  background: var(--mh-dark-tertiary);
}

.audio-player-play {
  width: 56px;
  height: 56px;
  background: var(--mh-gold);
  color: #1a1a1a;
}

.audio-player-play:hover {
  background: #c9a430;
  transform: scale(1.05);
}

.audio-player-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.audio-player-time {
  font-size: 12px;
  color: var(--mh-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 35px;
}

.audio-player-bar {
  flex: 1;
  height: 4px;
  background: var(--mh-dark-tertiary);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.audio-player-bar-fill {
  height: 100%;
  background: var(--mh-gold);
  border-radius: 2px;
  width: 0;
  transition: width 0.1s ease;
}

.audio-player-volume {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mh-text-muted);
}

.audio-player-volume-slider {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  background: var(--mh-dark-tertiary);
  border-radius: 2px;
  outline: none;
}

.audio-player-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--mh-gold);
  border-radius: 50%;
  cursor: pointer;
}

/* Light theme audio player */
.theme-light .audio-player,
[data-theme="light"] .audio-player {
  background: #f5f5f5;
}

/* ============================================
   F7 OTP INPUT
   ============================================ */
.otp-input {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.otp-input-field {
  width: 44px;
  height: 52px;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: var(--mh-text-primary);
  transition: all 0.2s ease;
}

.otp-input-field:focus {
  outline: none;
  border-color: var(--mh-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.otp-input-field:not(:placeholder-shown) {
  border-color: var(--mh-gold);
}

/* Light theme OTP */
.theme-light .otp-input-field,
[data-theme="light"] .otp-input-field {
  background: white;
  border-color: #e5e5e5;
}

/* ============================================
   RESPONSIVE EXTENDED COMPONENTS
   ============================================ */
@media (max-width: 768px) {
  .timeline-alternating::before {
    left: 20px;
    transform: none;
  }

  .timeline-alternating .timeline-item,
  .timeline-alternating .timeline-item:nth-child(even) {
    width: 100%;
    padding-left: 60px;
    padding-right: 0;
    margin-left: 0;
  }

  .timeline-alternating .timeline-item-divider,
  .timeline-alternating .timeline-item:nth-child(even) .timeline-item-divider {
    left: 0;
    right: auto;
  }

  .audio-player-cover {
    max-width: 200px;
    margin: 0 auto 8px;
  }

  .otp-input-field {
    width: 38px;
    height: 46px;
    font-size: 18px;
  }
}

/* ============================================
   F7 RANGE SLIDER
   ============================================ */
.range-slider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.range-slider-track {
  flex: 1;
  height: 6px;
  background: var(--mh-dark-tertiary);
  border-radius: 3px;
  position: relative;
}

.range-slider-fill {
  position: absolute;
  height: 100%;
  background: var(--mh-gold);
  border-radius: 3px;
}

.range-slider-handle {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  background: var(--mh-gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.range-slider-handle:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.range-slider-handle:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.range-slider-label {
  font-size: 12px;
  color: var(--mh-text-muted);
  min-width: 30px;
}

.range-slider-values {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mh-text-primary);
}

.range-slider-value-sep {
  color: var(--mh-text-muted);
}

/* ============================================
   F7 STEPPER
   ============================================ */
.stepper {
  display: inline-flex;
  align-items: center;
  background: var(--mh-dark-secondary);
  border-radius: 10px;
  overflow: hidden;
}

.stepper-btn {
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--mh-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.stepper-btn:hover:not(:disabled) {
  background: var(--mh-dark-tertiary);
  color: var(--mh-gold);
}

.stepper-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.stepper-value-wrap {
  min-width: 50px;
  text-align: center;
  border-left: 1px solid var(--mh-dark-tertiary);
  border-right: 1px solid var(--mh-dark-tertiary);
}

.stepper-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--mh-text-primary);
}

.stepper-input {
  width: 50px;
  height: 44px;
  background: transparent;
  border: none;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--mh-text-primary);
  -moz-appearance: textfield;
}

.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Light theme stepper */
.theme-light .stepper,
[data-theme="light"] .stepper {
  background: #f5f5f5;
}

/* ============================================
   F7 SEGMENTED CONTROL
   ============================================ */
.segmented-control {
  display: inline-flex;
  background: var(--mh-dark-secondary);
  border-radius: 10px;
  padding: 4px;
  position: relative;
}

.segmented-slider {
  position: absolute;
  top: 4px;
  height: calc(100% - 8px);
  background: var(--mh-gold);
  border-radius: 8px;
  transition: transform 0.3s ease, width 0.3s ease;
  z-index: 0;
}

.segmented-btn {
  position: relative;
  z-index: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--mh-text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.segmented-btn:hover:not(.segmented-active) {
  color: var(--mh-text-primary);
}

.segmented-active {
  color: #1a1a1a;
}

/* Light theme segmented */
.theme-light .segmented-control,
[data-theme="light"] .segmented-control {
  background: #e5e5e5;
}

/* ============================================
   F7 DROPDOWN MENU
   ============================================ */
.dropdown-menu {
  position: fixed;
  z-index: 10050;
  min-width: 180px;
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 6px;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.15s ease;
}

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

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.dropdown-item:hover {
  background: var(--mh-dark-tertiary);
}

.dropdown-item-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dropdown-item-icon {
  width: 20px;
  display: flex;
  color: var(--mh-text-muted);
}

.dropdown-item-label {
  flex: 1;
  font-size: 14px;
  color: var(--mh-text-primary);
}

.dropdown-item-shortcut {
  font-size: 12px;
  color: var(--mh-text-muted);
}

.dropdown-divider {
  height: 1px;
  background: var(--mh-dark-tertiary);
  margin: 4px 0;
}

/* Light theme dropdown */
.theme-light .dropdown-menu,
[data-theme="light"] .dropdown-menu {
  background: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* ============================================
   F7 CONTEXT MENU
   ============================================ */
.context-menu {
  position: fixed;
  z-index: 10100;
  min-width: 160px;
  background: var(--mh-dark-secondary);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  padding: 4px;
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.15s ease;
}

.context-menu-visible {
  opacity: 1;
  transform: scale(1);
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.context-menu-item:hover {
  background: var(--mh-dark-tertiary);
}

.context-menu-item-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.context-menu-item-danger {
  color: #ef4444;
}

.context-menu-item-danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.context-menu-item-icon {
  width: 18px;
  display: flex;
  color: var(--mh-text-muted);
}

.context-menu-item-label {
  flex: 1;
  font-size: 13px;
  color: var(--mh-text-primary);
}

.context-menu-item-shortcut {
  font-size: 11px;
  color: var(--mh-text-muted);
}

.context-menu-divider {
  height: 1px;
  background: var(--mh-dark-tertiary);
  margin: 4px 0;
}

/* Light theme context menu */
.theme-light .context-menu,
[data-theme="light"] .context-menu {
  background: white;
}

/* ============================================
   F7 BOTTOM SHEET
   ============================================ */
.bottom-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10100;
}

.bottom-sheet-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bottom-sheet-open .bottom-sheet-backdrop {
  opacity: 1;
}

.bottom-sheet-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--mh-dark-secondary);
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.bottom-sheet-open .bottom-sheet-container {
  transform: translateY(0);
}

.bottom-sheet-handle {
  width: 36px;
  height: 5px;
  background: var(--mh-dark-tertiary);
  border-radius: 3px;
  margin: 10px auto;
  cursor: grab;
}

.bottom-sheet-header {
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.bottom-sheet-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--mh-text-primary);
  margin: 0;
}

.bottom-sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}

body.bottom-sheet-open {
  overflow: hidden;
}

/* Light theme bottom sheet */
.theme-light .bottom-sheet-container,
[data-theme="light"] .bottom-sheet-container {
  background: white;
}

/* ============================================
   F7 POPOVER
   ============================================ */
.popover {
  position: absolute;
  z-index: 10050;
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  min-width: 200px;
  max-width: 320px;
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.15s ease;
}

.popover-visible {
  opacity: 1;
  transform: scale(1);
}

.popover-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--mh-dark-secondary);
  transform: rotate(45deg);
}

.popover-top .popover-arrow {
  bottom: -6px;
  left: 50%;
  margin-left: -6px;
}

.popover-bottom .popover-arrow {
  top: -6px;
  left: 50%;
  margin-left: -6px;
}

.popover-left .popover-arrow {
  right: -6px;
  top: 50%;
  margin-top: -6px;
}

.popover-right .popover-arrow {
  left: -6px;
  top: 50%;
  margin-top: -6px;
}

.popover-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
  font-size: 15px;
  font-weight: 600;
  color: var(--mh-text-primary);
}

.popover-content {
  padding: 16px;
  font-size: 14px;
  color: var(--mh-text-secondary);
  line-height: 1.5;
}

/* Light theme popover */
.theme-light .popover,
[data-theme="light"] .popover {
  background: white;
}

.theme-light .popover-arrow,
[data-theme="light"] .popover-arrow {
  background: white;
}

/* ============================================
   F7 SNACKBAR
   ============================================ */
.snackbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 10200;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--mh-dark-primary);
  color: var(--mh-text-primary);
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: calc(100vw - 32px);
}

.snackbar-bottom {
  bottom: 24px;
}

.snackbar-top {
  top: 24px;
  bottom: auto;
  transform: translateX(-50%) translateY(-100px);
}

.snackbar-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.snackbar-message {
  font-size: 14px;
  flex: 1;
}

.snackbar-action {
  background: transparent;
  border: none;
  color: var(--mh-gold);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  margin: -4px -8px -4px 0;
  border-radius: 6px;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.snackbar-action:hover {
  background: rgba(212, 175, 55, 0.1);
}

/* Light theme snackbar */
.theme-light .snackbar,
[data-theme="light"] .snackbar {
  background: #333;
  color: white;
}

/* ============================================
   RESPONSIVE UI COMPONENTS
   ============================================ */
@media (max-width: 768px) {
  .segmented-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .dropdown-menu,
  .context-menu {
    min-width: 150px;
  }

  .popover {
    max-width: calc(100vw - 32px);
  }

  .snackbar {
    left: 16px;
    right: 16px;
    transform: translateX(0) translateY(100px);
  }

  .snackbar-visible {
    transform: translateX(0) translateY(0);
  }
}

/* ============================================
   F7 PHOTO BROWSER
   ============================================ */
.photo-browser {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10500;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.photo-browser-in {
  opacity: 1;
}

.photo-browser-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
}

.photo-browser-light .photo-browser-backdrop {
  background: rgba(255, 255, 255, 0.95);
}

.photo-browser-container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.photo-browser-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  z-index: 10;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
}

.photo-browser-counter {
  color: white;
  font-size: 14px;
}

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

.photo-browser-btn {
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.photo-browser-btn:hover {
  background: rgba(255,255,255,0.2);
}

.photo-browser-slides {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.photo-browser-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.photo-browser-slide-active {
  opacity: 1;
}

.photo-browser-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.photo-browser-slide img.photo-browser-zoomed {
  transform: scale(2);
  cursor: zoom-out;
}

.photo-browser-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.photo-browser-nav:hover {
  background: rgba(255,255,255,0.2);
}

.photo-browser-prev { left: 20px; }
.photo-browser-next { right: 20px; }

.photo-browser-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  text-align: center;
  color: white;
  font-size: 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}

body.photo-browser-open {
  overflow: hidden;
}

/* ============================================
   F7 MESSAGES (CHAT)
   ============================================ */
.messages {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.messages-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.messages-date {
  text-align: center;
  font-size: 12px;
  color: var(--mh-text-muted);
  padding: 12px 0;
}

.message {
  display: flex;
  gap: 8px;
  max-width: 80%;
}

.message-sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message-received {
  align-self: flex-start;
}

.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--mh-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.message-avatar span {
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 600;
}

.message-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.message-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--mh-gold);
  padding-left: 12px;
}

.message-bubble {
  background: var(--mh-dark-secondary);
  border-radius: 18px;
  padding: 10px 14px;
  max-width: 100%;
}

.message-sent .message-bubble {
  background: var(--mh-gold);
  color: #1a1a1a;
  border-bottom-right-radius: 4px;
}

.message-received .message-bubble {
  border-bottom-left-radius: 4px;
}

.message-first.message-received .message-bubble {
  border-top-left-radius: 18px;
}

.message-first.message-sent .message-bubble {
  border-top-right-radius: 18px;
}

.message-text {
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

.message-image {
  max-width: 200px;
  border-radius: 12px;
  margin-bottom: 4px;
}

.message-time {
  font-size: 11px;
  color: var(--mh-text-muted);
  padding: 0 12px;
}

.message-sent .message-time {
  text-align: right;
}

/* Light theme messages */
.theme-light .message-bubble,
[data-theme="light"] .message-bubble {
  background: #f0f0f0;
}

/* ============================================
   F7 MESSAGEBAR
   ============================================ */
.messagebar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: var(--mh-dark-secondary);
  border-top: 1px solid var(--mh-dark-tertiary);
}

.messagebar-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--mh-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.messagebar-btn:hover {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.messagebar-send {
  color: var(--mh-gold);
}

.messagebar-send:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.messagebar-area {
  flex: 1;
}

.messagebar-input {
  width: 100%;
  background: var(--mh-dark-primary);
  border: none;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--mh-text-primary);
  resize: none;
  max-height: 120px;
  outline: none;
}

.messagebar-input::placeholder {
  color: var(--mh-text-muted);
}

/* Light theme messagebar */
.theme-light .messagebar,
[data-theme="light"] .messagebar {
  background: #f5f5f5;
}

.theme-light .messagebar-input,
[data-theme="light"] .messagebar-input {
  background: white;
}

/* ============================================
   F7 TEXT EDITOR
   ============================================ */
.text-editor {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  overflow: hidden;
}

.text-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
  background: var(--mh-dark-primary);
}

.text-editor-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--mh-text-secondary);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
}

.text-editor-btn:hover {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.text-editor-btn-active {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.text-editor-separator {
  width: 1px;
  height: 24px;
  background: var(--mh-dark-tertiary);
  margin: 4px 8px;
}

.text-editor-content {
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mh-text-primary);
  outline: none;
  min-height: 200px;
}

.text-editor-content:empty::before {
  content: attr(data-placeholder);
  color: var(--mh-text-muted);
}

.text-editor-content a {
  color: var(--mh-gold);
}

/* Light theme text editor */
.theme-light .text-editor,
[data-theme="light"] .text-editor {
  background: #f5f5f5;
}

/* ============================================
   F7 SWIPEOUT
   ============================================ */
.swipeout-item {
  position: relative;
  overflow: hidden;
}

.swipeout-content {
  position: relative;
  z-index: 1;
  background: var(--mh-dark-secondary);
  transition: transform 0.3s ease;
}

.swipeout-actions-left,
.swipeout-actions-right {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
}

.swipeout-actions-left {
  left: 0;
}

.swipeout-actions-right {
  right: 0;
}

.swipeout-action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: var(--mh-gold);
}

.swipeout-action-delete {
  background: #ef4444;
}

.swipeout-action-archive {
  background: #3b82f6;
}

.swipeout-action-edit {
  background: #10b981;
}

/* ============================================
   F7 LOGIN SCREEN
   ============================================ */
.login-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10500;
  background: var(--mh-dark-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.login-screen-in {
  opacity: 1;
}

.login-screen-content {
  width: 100%;
  max-width: 400px;
  padding: 40px;
}

.login-screen-logo {
  display: block;
  max-width: 120px;
  height: auto;
  margin: 0 auto 24px;
}

.login-screen-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--mh-text-primary);
  text-align: center;
  margin-bottom: 32px;
}

.login-screen-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--mh-text-secondary);
  margin-bottom: 8px;
}

.login-field input {
  width: 100%;
  padding: 14px 16px;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 10px;
  font-size: 16px;
  color: var(--mh-text-primary);
  transition: border-color 0.2s ease;
}

.login-field input:focus {
  outline: none;
  border-color: var(--mh-gold);
}

.login-field-password {
  position: relative;
}

.login-field-password input {
  padding-right: 48px;
}

.login-field-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--mh-text-muted);
  cursor: pointer;
  padding: 4px;
}

.login-forgot {
  display: block;
  text-align: right;
  font-size: 14px;
  color: var(--mh-gold);
  text-decoration: none;
}

.login-submit {
  width: 100%;
  padding: 16px;
  background: var(--mh-gold);
  color: #1a1a1a;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.login-submit:hover {
  background: #c9a430;
}

.login-register {
  display: block;
  text-align: center;
  font-size: 14px;
  color: var(--mh-text-muted);
}

.login-register:hover {
  color: var(--mh-gold);
}

body.login-screen-open {
  overflow: hidden;
}

/* Light theme login */
.theme-light .login-screen,
[data-theme="light"] .login-screen {
  background: white;
}

/* ============================================
   F7 POPUP
   ============================================ */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10400;
}

/* F7 creates popup-backdrop as sibling at root level */
body > .popup-backdrop,
.popup-backdrop.backdrop-in {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10300;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
  pointer-events: auto;
}

.popup-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.popup-in .popup-backdrop {
  opacity: 1;
}

.popup-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mh-dark-primary);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.popup-in .popup-container {
  transform: translateY(0);
}

.popup-push .popup-container {
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 0;
  border-radius: 20px 20px 0 0;
}

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

.popup-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--mh-text-primary);
  margin: 0;
}

.popup-close {
  background: transparent;
  border: none;
  color: var(--mh-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}

.popup-close:hover {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.popup-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Light theme popup */
.theme-light .popup-container,
[data-theme="light"] .popup-container {
  background: white;
}

/* ============================================
   F7 CONTACTS LIST
   ============================================ */
.contacts-list {
  position: relative;
}

.contacts-content {
  height: 100%;
  overflow-y: auto;
}

.contacts-group-title {
  position: sticky;
  top: 0;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mh-gold);
  background: var(--mh-dark-primary);
  z-index: 1;
}

.contacts-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.contacts-item:hover {
  background: var(--mh-dark-secondary);
}

.contacts-item-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mh-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.contacts-item-avatar span {
  color: #1a1a1a;
  font-size: 18px;
  font-weight: 600;
}

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

.contacts-item-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--mh-text-primary);
}

.contacts-item-subtitle {
  font-size: 13px;
  color: var(--mh-text-muted);
  margin-top: 2px;
}

.contacts-index {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  z-index: 10;
}

.contacts-index a {
  font-size: 11px;
  font-weight: 600;
  color: var(--mh-gold);
  padding: 2px 4px;
  text-decoration: none;
}

/* Light theme contacts */
.theme-light .contacts-group-title,
[data-theme="light"] .contacts-group-title {
  background: #f5f5f5;
}

/* ============================================
   F7 PIE CHART
   ============================================ */
.pie-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

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

.pie-slice:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

.pie-slice-animated {
  opacity: 0;
  animation: pieSliceIn 0.5s ease forwards;
}

@keyframes pieSliceIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.pie-label {
  font-size: 12px;
  font-weight: 600;
  fill: white;
  pointer-events: none;
}

.pie-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.pie-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.pie-legend-label {
  font-size: 13px;
  color: var(--mh-text-secondary);
}

.pie-legend-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--mh-text-primary);
}

/* ============================================
   F7 LINE CHART
   ============================================ */
.line-chart {
  width: 100%;
}

.line-chart svg {
  display: block;
}

.line-chart-grid {
  stroke: var(--mh-dark-tertiary);
  stroke-width: 1;
}

.line-chart-label {
  font-size: 11px;
  fill: var(--mh-text-muted);
}

.line-chart-line {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-chart-animated {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: lineChartDraw 1.5s ease forwards;
}

@keyframes lineChartDraw {
  to { stroke-dashoffset: 0; }
}

.line-chart-area {
  opacity: 0.3;
}

.line-chart-point {
  cursor: pointer;
  transition: r 0.2s ease;
}

.line-chart-point:hover {
  r: 6;
}

/* ============================================
   RESPONSIVE CORE COMPONENTS
   ============================================ */
@media (max-width: 768px) {
  .photo-browser-nav {
    width: 40px;
    height: 40px;
  }

  .photo-browser-prev { left: 10px; }
  .photo-browser-next { right: 10px; }

  .message {
    max-width: 85%;
  }

  .login-screen-content {
    padding: 24px;
  }

  .login-screen-title {
    font-size: 24px;
  }

  .contacts-index {
    right: 2px;
  }

  .contacts-index a {
    font-size: 10px;
    padding: 1px 3px;
  }
}

/* ============================================
   F7 NAVBAR
   ============================================ */
.navbar {
  display: flex;
  flex-direction: column;
  background: var(--mh-dark-secondary);
  border-bottom: 1px solid var(--mh-dark-tertiary);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-transparent {
  background: transparent;
  border-bottom: none;
}

.navbar-inner {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  min-height: 56px;
}

.navbar-left,
.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.navbar-left {
  min-width: 60px;
}

.navbar-right {
  min-width: 60px;
  justify-content: flex-end;
}

.navbar-center {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.navbar-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--mh-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar-subtitle {
  font-size: 12px;
  color: var(--mh-text-muted);
}

.navbar-btn {
  background: transparent;
  border: none;
  color: var(--mh-gold);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.navbar-btn:hover {
  background: var(--mh-dark-tertiary);
}

.navbar-large-title {
  padding: 0 16px 16px;
}

.navbar-large-text {
  font-size: 34px;
  font-weight: 700;
  color: var(--mh-text-primary);
}

.navbar-hidden {
  transform: translateY(-100%);
}

/* Light theme navbar */
.theme-light .navbar,
[data-theme="light"] .navbar {
  background: white;
  border-color: #e5e5e5;
}

/* ============================================
   F7 TOOLBAR
   ============================================ */
.toolbar {
  background: var(--mh-dark-secondary);
  border-top: 1px solid var(--mh-dark-tertiary);
}

.toolbar-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}

.toolbar-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  min-height: 50px;
}

.toolbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  text-decoration: none;
  color: var(--mh-text-muted);
  transition: color 0.2s ease;
  position: relative;
}

.toolbar-item:hover {
  color: var(--mh-text-primary);
}

.toolbar-item-active {
  color: var(--mh-gold);
}

.toolbar-icon {
  font-size: 24px;
  line-height: 1;
}

.toolbar-labels .toolbar-icon {
  font-size: 20px;
}

.toolbar-label {
  font-size: 10px;
  margin-top: 2px;
}

.toolbar-badge {
  position: absolute;
  top: 4px;
  right: 50%;
  margin-right: -20px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

.toolbar-hidden {
  transform: translateY(100%);
}

/* Light theme toolbar */
.theme-light .toolbar,
[data-theme="light"] .toolbar {
  background: white;
  border-color: #e5e5e5;
}

/* ============================================
   F7 DATE RANGE PICKER
   ============================================ */
.date-range-picker {
  background: var(--mh-dark-secondary);
  border-radius: 16px;
  padding: 20px;
}

.date-range-inputs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.date-range-input {
  flex: 1;
  background: var(--mh-dark-primary);
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.date-range-input-active {
  border-color: var(--mh-gold);
}

.date-range-input label {
  display: block;
  font-size: 11px;
  color: var(--mh-text-muted);
  margin-bottom: 4px;
}

.date-range-input span {
  font-size: 14px;
  font-weight: 500;
  color: var(--mh-text-primary);
}

.date-range-arrow {
  color: var(--mh-text-muted);
}

.date-range-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.date-range-preset {
  padding: 6px 12px;
  background: var(--mh-dark-primary);
  border: none;
  border-radius: 16px;
  color: var(--mh-text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.date-range-preset:hover {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.date-range-calendar {
  background: var(--mh-dark-primary);
  border-radius: 12px;
  padding: 16px;
}

.date-range-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.date-range-month {
  font-size: 16px;
  font-weight: 600;
  color: var(--mh-text-primary);
}

.date-range-nav {
  width: 32px;
  height: 32px;
  background: var(--mh-dark-tertiary);
  border: none;
  border-radius: 8px;
  color: var(--mh-text-primary);
  cursor: pointer;
  font-size: 16px;
}

.date-range-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.date-range-weekday {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--mh-text-muted);
  padding: 8px 0;
}

.date-range-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.date-range-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--mh-text-primary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.date-range-day:hover:not(.date-range-day-empty):not(.date-range-day-disabled) {
  background: var(--mh-dark-tertiary);
}

.date-range-day-empty {
  cursor: default;
}

.date-range-day-disabled {
  color: var(--mh-text-muted);
  opacity: 0.3;
  cursor: not-allowed;
}

.date-range-day-start,
.date-range-day-end {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.date-range-day-range {
  background: rgba(212, 175, 55, 0.2);
}

/* Light theme date range */
.theme-light .date-range-picker,
[data-theme="light"] .date-range-picker {
  background: white;
}

/* ============================================
   F7 TIME PICKER
   ============================================ */
.time-picker {
  display: inline-flex;
  justify-content: center;
}

.time-picker-columns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-picker-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-picker-btn {
  width: 40px;
  height: 32px;
  background: var(--mh-dark-secondary);
  border: none;
  border-radius: 8px;
  color: var(--mh-text-muted);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.time-picker-btn:hover {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.time-picker-value {
  font-size: 32px;
  font-weight: 600;
  color: var(--mh-text-primary);
  padding: 8px 0;
  min-width: 50px;
  text-align: center;
}

.time-picker-separator {
  font-size: 32px;
  font-weight: 600;
  color: var(--mh-text-muted);
}

/* ============================================
   F7 PHONE INPUT
   ============================================ */
.phone-input {
  display: flex;
  align-items: stretch;
  background: var(--mh-dark-secondary);
  border-radius: 10px;
  position: relative;
}

.phone-input-country {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 12px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--mh-dark-tertiary);
  cursor: pointer;
  color: var(--mh-text-primary);
}

.phone-input-flag {
  font-size: 20px;
}

.phone-input-dial {
  font-size: 14px;
  color: var(--mh-text-secondary);
}

.phone-input-arrow {
  color: var(--mh-text-muted);
  transition: transform 0.2s ease;
}

.phone-input-open .phone-input-arrow {
  transform: rotate(180deg);
}

.phone-input-number {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  font-size: 16px;
  color: var(--mh-text-primary);
  outline: none;
}

.phone-input-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--mh-dark-secondary);
  border-radius: 10px;
  margin-top: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  max-height: 200px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 100;
}

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

.phone-input-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.phone-input-option:hover {
  background: var(--mh-dark-tertiary);
}

.phone-input-option-selected {
  background: rgba(212, 175, 55, 0.1);
}

.phone-input-name {
  flex: 1;
  font-size: 14px;
  color: var(--mh-text-primary);
}

/* Light theme phone input */
.theme-light .phone-input,
[data-theme="light"] .phone-input {
  background: #f5f5f5;
}

/* ============================================
   F7 CREDIT CARD INPUT
   ============================================ */
.credit-card-input {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.credit-card-preview {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  padding: 24px;
  color: white;
  aspect-ratio: 1.6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 340px;
}

.credit-card-preview.visa {
  background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
}

.credit-card-preview.mastercard {
  background: linear-gradient(135deg, #bf360c 0%, #e65100 100%);
}

.credit-card-chip {
  width: 40px;
  height: 30px;
  background: linear-gradient(135deg, #ffd54f 0%, #ffb300 100%);
  border-radius: 6px;
}

.credit-card-number {
  font-size: 20px;
  font-family: monospace;
  letter-spacing: 2px;
}

.credit-card-details {
  display: flex;
  justify-content: space-between;
}

.credit-card-name {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.credit-card-expiry {
  font-size: 14px;
  font-family: monospace;
}

.credit-card-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.credit-card-field label {
  display: block;
  font-size: 12px;
  color: var(--mh-text-muted);
  margin-bottom: 6px;
}

.credit-card-field input {
  width: 100%;
  padding: 12px 16px;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 10px;
  font-size: 16px;
  color: var(--mh-text-primary);
  transition: border-color 0.2s ease;
}

.credit-card-field input:focus {
  outline: none;
  border-color: var(--mh-gold);
}

.credit-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ============================================
   F7 CURRENCY INPUT
   ============================================ */
.currency-input {
  display: flex;
  align-items: center;
  background: var(--mh-dark-secondary);
  border-radius: 10px;
  padding: 0 16px;
}

.currency-symbol {
  font-size: 18px;
  font-weight: 600;
  color: var(--mh-gold);
  margin-right: 8px;
}

.currency-value {
  flex: 1;
  padding: 14px 0;
  background: transparent;
  border: none;
  font-size: 24px;
  font-weight: 600;
  color: var(--mh-text-primary);
  text-align: right;
  outline: none;
}

/* ============================================
   F7 MENTIONS INPUT
   ============================================ */
.mentions-input {
  position: relative;
}

.mentions-editor {
  min-height: 100px;
  padding: 14px 16px;
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mh-text-primary);
  outline: none;
}

.mentions-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--mh-text-muted);
}

.mentions-suggestions {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  margin-bottom: 4px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease;
  overflow: hidden;
}

.mentions-suggestions-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mentions-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mentions-suggestion:hover,
.mentions-suggestion-selected {
  background: var(--mh-dark-tertiary);
}

.mentions-suggestion-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mh-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.mentions-suggestion-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.mentions-suggestion-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--mh-text-primary);
}

.mentions-suggestion-username {
  font-size: 13px;
  color: var(--mh-text-muted);
}

/* ============================================
   F7 FLOATING LABELS
   ============================================ */
.floating-label {
  position: relative;
}

.floating-label label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--mh-text-muted);
  pointer-events: none;
  transition: all 0.2s ease;
}

.floating-label input,
.floating-label textarea {
  width: 100%;
  padding: 20px 16px 8px;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 10px;
  font-size: 14px;
  color: var(--mh-text-primary);
  transition: border-color 0.2s ease;
}

.floating-label-active label {
  top: 10px;
  transform: translateY(0);
  font-size: 11px;
  color: var(--mh-gold);
}

.floating-label-focused input,
.floating-label-focused textarea {
  border-color: var(--mh-gold);
}

/* ============================================
   F7 PASSWORD WRAPPER
   ============================================ */
.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--mh-text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
}

.password-toggle:hover {
  color: var(--mh-text-primary);
}

/* ============================================
   RESPONSIVE LAYOUT & INPUT COMPONENTS
   ============================================ */
@media (max-width: 768px) {
  .navbar-large-text {
    font-size: 28px;
  }

  .date-range-inputs {
    flex-direction: column;
  }

  .date-range-arrow {
    transform: rotate(90deg);
  }

  .credit-card-preview {
    max-width: 100%;
  }

  .credit-card-row {
    grid-template-columns: 1fr;
  }

  .time-picker-value {
    font-size: 24px;
    min-width: 40px;
  }
}

/* ============================================
   F7 VIDEO PLAYER
   ============================================ */
.video-player {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  font-family: inherit;
}

.video-player video {
  width: 100%;
  height: auto;
  display: block;
}

.video-player-poster {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-player-play-big {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}

.video-player-play-big:hover {
  transform: scale(1.1);
  background: var(--mh-gold);
}

.video-player-play-big svg {
  width: 36px;
  height: 36px;
  fill: #1a1a1a;
  margin-left: 4px;
}

.video-player-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 40px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-player:hover .video-player-controls,
.video-player.controls-visible .video-player-controls {
  opacity: 1;
}

.video-player-progress {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  cursor: pointer;
}

.video-player-progress:hover {
  height: 6px;
}

.video-player-progress-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.video-player-progress-filled {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--mh-gold);
  border-radius: 2px;
}

.video-player-progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mh-gold);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.video-player-progress:hover .video-player-progress-handle {
  opacity: 1;
}

.video-player-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.video-player-left,
.video-player-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.video-player-btn {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.video-player-btn:hover {
  opacity: 1;
}

.video-player-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.video-player-time {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
}

.video-player-volume {
  display: flex;
  align-items: center;
  gap: 8px;
}

.video-player-volume-slider {
  width: 0;
  overflow: hidden;
  transition: width 0.2s ease;
}

.video-player-volume:hover .video-player-volume-slider {
  width: 80px;
}

.video-player-volume-slider input {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  cursor: pointer;
}

.video-player-volume-slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mh-gold);
}

.video-player-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  border-radius: 0;
}

/* ============================================
   F7 VOICE RECORDER
   ============================================ */
.voice-recorder {
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.voice-recorder-visualizer {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-bottom: 20px;
}

.voice-recorder-visualizer .bar {
  width: 4px;
  height: 20px;
  background: var(--mh-gold);
  border-radius: 2px;
  transition: height 0.05s ease;
}

.voice-recorder.recording .voice-recorder-visualizer .bar {
  animation: voice-bar 0.5s ease infinite alternate;
}

@keyframes voice-bar {
  from { height: 20px; }
  to { height: 60px; }
}

.voice-recorder-time {
  font-size: 36px;
  font-weight: 600;
  color: var(--mh-text-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
}

.voice-recorder-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.voice-recorder-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}

.voice-recorder-btn:hover {
  transform: scale(1.05);
}

.voice-recorder-btn-record {
  background: #ef4444;
  color: white;
}

.voice-recorder-btn-record.recording {
  background: var(--mh-gold);
  animation: pulse-record 1.5s infinite;
}

@keyframes pulse-record {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.5); }
  50% { box-shadow: 0 0 0 12px rgba(212, 175, 55, 0); }
}

.voice-recorder-btn-stop {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.voice-recorder-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.voice-recorder-result {
  margin-top: 20px;
  padding: 16px;
  background: var(--mh-dark-tertiary);
  border-radius: 12px;
}

.voice-recorder-result audio {
  width: 100%;
  height: 40px;
}

/* ============================================
   F7 IMAGE CROPPER
   ============================================ */
.image-cropper {
  background: var(--mh-dark-secondary);
  border-radius: 16px;
  overflow: hidden;
}

.image-cropper-canvas-container {
  position: relative;
  background: #000;
  overflow: hidden;
}

.image-cropper-canvas-container canvas {
  display: block;
  max-width: 100%;
  cursor: move;
}

.image-cropper-crop-area {
  position: absolute;
  border: 2px solid var(--mh-gold);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  cursor: move;
}

.image-cropper-crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--mh-gold);
  border-radius: 2px;
}

.image-cropper-crop-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
.image-cropper-crop-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
.image-cropper-crop-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
.image-cropper-crop-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }

.image-cropper-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--mh-dark-tertiary);
  border-top: 1px solid var(--mh-dark-secondary);
}

.image-cropper-zoom {
  display: flex;
  align-items: center;
  gap: 12px;
}

.image-cropper-zoom span {
  font-size: 13px;
  color: var(--mh-text-muted);
}

.image-cropper-zoom input[type="range"] {
  width: 120px;
  height: 4px;
  -webkit-appearance: none;
  background: var(--mh-dark-secondary);
  border-radius: 2px;
}

.image-cropper-zoom input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mh-gold);
  cursor: pointer;
}

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

.image-cropper-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.image-cropper-btn-rotate {
  background: var(--mh-dark-secondary);
  color: var(--mh-text-primary);
}

.image-cropper-btn-crop {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.image-cropper-btn:hover {
  transform: translateY(-1px);
}

/* ============================================
   F7 QR CODE GENERATOR
   ============================================ */
.qr-generator {
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.qr-generator-input {
  margin-bottom: 20px;
}

.qr-generator-input input,
.qr-generator-input textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--mh-dark-tertiary);
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  color: var(--mh-text-primary);
  transition: border-color 0.2s ease;
}

.qr-generator-input input:focus,
.qr-generator-input textarea:focus {
  border-color: var(--mh-gold);
  outline: none;
}

.qr-generator-canvas {
  display: inline-block;
  padding: 20px;
  background: white;
  border-radius: 12px;
  margin-bottom: 20px;
}

.qr-generator-canvas canvas {
  display: block;
}

.qr-generator-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.qr-generator-btn {
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.qr-generator-btn-download {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.qr-generator-btn-copy {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.qr-generator-btn:hover {
  transform: translateY(-2px);
}

.qr-generator-btn svg {
  width: 18px;
  height: 18px;
}

/* ============================================
   F7 IMAGE COMPARISON (Before/After)
   ============================================ */
.image-comparison {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  user-select: none;
}

.image-comparison-before,
.image-comparison-after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.image-comparison-before img,
.image-comparison-after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-comparison-before {
  z-index: 1;
  clip-path: inset(0 50% 0 0);
}

.image-comparison-slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: var(--mh-gold);
  z-index: 2;
  cursor: ew-resize;
  transform: translateX(-50%);
}

.image-comparison-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mh-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.image-comparison-handle svg {
  width: 24px;
  height: 24px;
  fill: #1a1a1a;
}

.image-comparison-label {
  position: absolute;
  top: 16px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 4px;
  z-index: 3;
}

.image-comparison-label.before {
  left: 16px;
}

.image-comparison-label.after {
  right: 16px;
}

/* ============================================
   F7 PARALLAX
   ============================================ */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

.parallax-container {
  position: relative;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  top: -20%;
  left: 0;
  right: 0;
  height: 140%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* ============================================
   F7 SCROLL ANIMATIONS (AOS-like)
   ============================================ */
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-aos].aos-animate {
  opacity: 1;
}

/* Fade animations */
[data-aos="fade"] {
  opacity: 0;
}

[data-aos="fade-up"] {
  transform: translateY(30px);
}

[data-aos="fade-down"] {
  transform: translateY(-30px);
}

[data-aos="fade-left"] {
  transform: translateX(30px);
}

[data-aos="fade-right"] {
  transform: translateX(-30px);
}

[data-aos="fade-up"].aos-animate,
[data-aos="fade-down"].aos-animate,
[data-aos="fade-left"].aos-animate,
[data-aos="fade-right"].aos-animate {
  transform: translate(0);
}

/* Zoom animations */
[data-aos="zoom-in"] {
  transform: scale(0.8);
}

[data-aos="zoom-out"] {
  transform: scale(1.2);
}

[data-aos="zoom-in"].aos-animate,
[data-aos="zoom-out"].aos-animate {
  transform: scale(1);
}

/* Flip animations */
[data-aos="flip-left"] {
  transform: perspective(2500px) rotateY(-90deg);
}

[data-aos="flip-right"] {
  transform: perspective(2500px) rotateY(90deg);
}

[data-aos="flip-up"] {
  transform: perspective(2500px) rotateX(-90deg);
}

[data-aos="flip-down"] {
  transform: perspective(2500px) rotateX(90deg);
}

[data-aos="flip-left"].aos-animate,
[data-aos="flip-right"].aos-animate,
[data-aos="flip-up"].aos-animate,
[data-aos="flip-down"].aos-animate {
  transform: perspective(2500px) rotateY(0) rotateX(0);
}

/* Slide animations */
[data-aos="slide-up"] {
  transform: translateY(100%);
}

[data-aos="slide-down"] {
  transform: translateY(-100%);
}

[data-aos="slide-left"] {
  transform: translateX(100%);
}

[data-aos="slide-right"] {
  transform: translateX(-100%);
}

[data-aos="slide-up"].aos-animate,
[data-aos="slide-down"].aos-animate,
[data-aos="slide-left"].aos-animate,
[data-aos="slide-right"].aos-animate {
  transform: translate(0);
}

/* ============================================
   F7 STICKY ELEMENTS
   ============================================ */
.sticky-element {
  position: relative;
  z-index: 100;
}

.sticky-element.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  animation: stickySlideIn 0.3s ease;
}

@keyframes stickySlideIn {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.sticky-placeholder {
  display: none;
}

.sticky-element.is-sticky + .sticky-placeholder {
  display: block;
}

/* ============================================
   F7 RIPPLE EFFECT
   ============================================ */
[data-ripple] {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.3);
  transform: scale(0);
  animation: ripple-effect 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple-effect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Dark ripple variant */
[data-ripple="dark"] .ripple {
  background: rgba(0, 0, 0, 0.2);
}

/* Light ripple variant */
[data-ripple="light"] .ripple {
  background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   F7 NETWORK STATUS
   ============================================ */
.network-status {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.network-status.visible {
  transform: translateY(0);
}

.network-status.offline {
  background: #ef4444;
  color: white;
}

.network-status.online {
  background: #22c55e;
  color: white;
}

.network-status svg {
  width: 18px;
  height: 18px;
}

/* ============================================
   F7 IDLE TIMER WARNING
   ============================================ */
.idle-warning {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-gold);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  z-index: 10001;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.idle-warning-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
}

.idle-warning-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.idle-warning-icon svg {
  width: 32px;
  height: 32px;
  fill: var(--mh-gold);
}

.idle-warning h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--mh-text-primary);
  margin-bottom: 8px;
}

.idle-warning p {
  font-size: 14px;
  color: var(--mh-text-muted);
  margin-bottom: 24px;
}

.idle-warning-timer {
  font-size: 48px;
  font-weight: 700;
  color: var(--mh-gold);
  margin-bottom: 24px;
  font-variant-numeric: tabular-nums;
}

.idle-warning-btn {
  padding: 14px 32px;
  background: var(--mh-gold);
  color: #1a1a1a;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.idle-warning-btn:hover {
  transform: translateY(-2px);
}

/* ============================================
   RESPONSIVE MEDIA & UTILITIES
   ============================================ */
@media (max-width: 768px) {
  .video-player-controls {
    padding: 30px 12px 12px;
  }

  .video-player-btn svg {
    width: 20px;
    height: 20px;
  }

  .video-player-volume-slider {
    display: none;
  }

  .voice-recorder {
    padding: 16px;
  }

  .voice-recorder-time {
    font-size: 28px;
  }

  .image-cropper-controls {
    flex-direction: column;
    gap: 12px;
  }

  .image-cropper-zoom {
    width: 100%;
    justify-content: center;
  }

  .image-cropper-actions {
    width: 100%;
    justify-content: center;
  }

  .qr-generator-actions {
    flex-direction: column;
  }

  .qr-generator-btn {
    width: 100%;
    justify-content: center;
  }

  .image-comparison-handle {
    width: 36px;
    height: 36px;
  }

  .image-comparison-handle svg {
    width: 18px;
    height: 18px;
  }

  .idle-warning {
    padding: 24px;
  }

  .idle-warning-timer {
    font-size: 36px;
  }
}

/* ============================================
   F7 SCATTER CHART
   ============================================ */
.scatter-chart {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  padding: 10px;
}

.scatter-chart .scatter-point {
  transition: r 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

.scatter-chart .scatter-point:hover {
  opacity: 1;
}

/* ============================================
   F7 RADAR CHART
   ============================================ */
.radar-chart {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  padding: 10px;
}

/* ============================================
   F7 HEATMAP
   ============================================ */
.heatmap-chart {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  padding: 10px;
}

.heatmap-chart .heatmap-cell {
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.heatmap-chart .heatmap-cell:hover {
  opacity: 0.8;
}

/* ============================================
   F7 FUNNEL CHART
   ============================================ */
.funnel-chart {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  overflow: hidden;
}

.funnel-step {
  transition: filter 0.2s ease;
}

.funnel-step:hover {
  filter: brightness(1.1);
}

/* ============================================
   F7 CANDLESTICK CHART
   ============================================ */
.candlestick-chart {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  padding: 10px;
}

.candlestick-chart rect {
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.candlestick-chart rect:hover {
  opacity: 0.8;
}

/* ============================================
   F7 FORM WIZARD
   ============================================ */
.form-wizard {
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 16px;
  padding: 24px;
}

.form-wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.form-wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.form-wizard-step-indicator {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.form-wizard-step.pending .form-wizard-step-indicator {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-muted);
}

.form-wizard-step.active .form-wizard-step-indicator {
  background: var(--mh-gold);
  color: #1a1a1a;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
}

.form-wizard-step.completed .form-wizard-step-indicator {
  background: #22c55e;
  color: white;
}

.form-wizard-step-label {
  font-size: 12px;
  color: var(--mh-text-muted);
  text-align: center;
  max-width: 80px;
}

.form-wizard-step.active .form-wizard-step-label {
  color: var(--mh-text-primary);
  font-weight: 500;
}

.form-wizard-connector {
  width: 60px;
  height: 2px;
  background: var(--mh-dark-tertiary);
  margin: 0 8px 24px;
  transition: background 0.3s ease;
}

.form-wizard-connector.completed {
  background: #22c55e;
}

.form-wizard-content {
  margin-bottom: 24px;
}

.form-wizard-description {
  text-align: center;
  color: var(--mh-text-muted);
  margin-bottom: 24px;
  font-size: 14px;
}

.form-wizard-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mh-dark-tertiary);
}

.form-wizard-btn {
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-wizard-btn-prev {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.form-wizard-btn-prev:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-wizard-btn-next {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.form-wizard-btn-complete {
  background: #22c55e;
  color: white;
}

.form-wizard-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

/* ============================================
   F7 FILE MANAGER
   ============================================ */
.file-manager {
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 16px;
  overflow: hidden;
}

.file-manager-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--mh-dark-tertiary);
  border-bottom: 1px solid var(--mh-dark-secondary);
}

.file-manager-toolbar-left,
.file-manager-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-manager-btn {
  padding: 8px 16px;
  background: var(--mh-gold);
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.file-manager-btn:hover {
  transform: translateY(-1px);
}

.file-manager-delete-btn {
  background: #ef4444;
  color: white;
}

.file-manager-view-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--mh-dark-secondary);
  color: var(--mh-text-muted);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.file-manager-view-btn.active {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.file-manager-files {
  padding: 16px;
  min-height: 200px;
}

.file-manager-empty {
  text-align: center;
  color: var(--mh-text-muted);
  padding: 40px;
}

.file-manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}

.file-manager-grid .file-manager-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: var(--mh-dark-tertiary);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.file-manager-grid .file-manager-item:hover {
  background: rgba(212, 175, 55, 0.1);
}

.file-manager-grid .file-manager-item.selected {
  background: rgba(212, 175, 55, 0.2);
  border: 2px solid var(--mh-gold);
}

.file-manager-grid .file-manager-item-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
}

.file-manager-grid .file-manager-item-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  color: var(--mh-gold);
}

.file-manager-grid .file-manager-item-icon svg {
  width: 100%;
  height: 100%;
}

.file-manager-grid .file-manager-item-name {
  font-size: 13px;
  color: var(--mh-text-primary);
  text-align: center;
  word-break: break-word;
  max-width: 100%;
}

.file-manager-grid .file-manager-item-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.file-manager-grid .file-manager-item:hover .file-manager-item-actions {
  opacity: 1;
}

.file-manager-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-manager-list .file-manager-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--mh-dark-tertiary);
  border-radius: 8px;
  gap: 12px;
  transition: all 0.2s ease;
}

.file-manager-list .file-manager-item:hover {
  background: rgba(212, 175, 55, 0.1);
}

.file-manager-list .file-manager-item.selected {
  background: rgba(212, 175, 55, 0.2);
}

.file-manager-list .file-manager-item-icon {
  width: 32px;
  height: 32px;
  color: var(--mh-gold);
  flex-shrink: 0;
}

.file-manager-list .file-manager-item-icon svg {
  width: 100%;
  height: 100%;
}

.file-manager-list .file-manager-item-info {
  flex: 1;
  min-width: 0;
}

.file-manager-list .file-manager-item-name {
  font-size: 14px;
  color: var(--mh-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-manager-list .file-manager-item-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--mh-text-muted);
  margin-top: 4px;
}

.file-manager-action-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--mh-dark-secondary);
  color: var(--mh-text-muted);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.file-manager-action-btn:hover {
  background: var(--mh-gold);
  color: #1a1a1a;
}

/* ============================================
   F7 TREE SELECT
   ============================================ */
.tree-select {
  position: relative;
  width: 100%;
}

.tree-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.tree-select.open .tree-select-trigger {
  border-color: var(--mh-gold);
}

.tree-select-value {
  color: var(--mh-text-primary);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-select-arrow {
  color: var(--mh-text-muted);
  font-size: 10px;
  transition: transform 0.2s ease;
}

.tree-select.open .tree-select-arrow {
  transform: rotate(180deg);
}

.tree-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 10px;
  max-height: 300px;
  overflow: hidden;
  z-index: 1000;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.tree-select.open .tree-select-dropdown {
  display: block;
}

.tree-select-search {
  padding: 12px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.tree-select-search input {
  width: 100%;
  padding: 8px 12px;
  background: var(--mh-dark-tertiary);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  color: var(--mh-text-primary);
}

.tree-select-search input:focus {
  outline: none;
}

.tree-select-tree {
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
}

.tree-select-node {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.tree-select-node:hover {
  background: var(--mh-dark-tertiary);
}

.tree-select-toggle {
  width: 20px;
  font-size: 10px;
  color: var(--mh-text-muted);
  cursor: pointer;
  text-align: center;
}

.tree-select-toggle.hidden {
  visibility: hidden;
}

.tree-select-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
}

.tree-select-label input {
  accent-color: var(--mh-gold);
}

.tree-select-label span {
  font-size: 14px;
  color: var(--mh-text-primary);
}

/* ============================================
   F7 TRANSFER LIST
   ============================================ */
.transfer-list {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.transfer-list-panel {
  flex: 1;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.transfer-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--mh-dark-tertiary);
  border-bottom: 1px solid var(--mh-dark-secondary);
}

.transfer-list-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mh-text-primary);
}

.transfer-list-count {
  font-size: 12px;
  color: var(--mh-text-muted);
  background: var(--mh-dark-secondary);
  padding: 2px 8px;
  border-radius: 10px;
}

.transfer-list-search {
  padding: 12px;
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.transfer-list-search input {
  width: 100%;
  padding: 8px 12px;
  background: var(--mh-dark-tertiary);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  color: var(--mh-text-primary);
}

.transfer-list-search input:focus {
  outline: none;
}

.transfer-list-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  min-height: 200px;
  max-height: 300px;
}

.transfer-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.transfer-list-item:hover {
  background: var(--mh-dark-tertiary);
}

.transfer-list-item input {
  accent-color: var(--mh-gold);
}

.transfer-list-item span {
  font-size: 14px;
  color: var(--mh-text-primary);
}

.transfer-list-empty {
  text-align: center;
  color: var(--mh-text-muted);
  padding: 40px 16px;
  font-size: 14px;
}

.transfer-list-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.transfer-list-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.transfer-list-btn:hover:not(:disabled) {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.transfer-list-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================
   RESPONSIVE CHARTS & FORMS
   ============================================ */
@media (max-width: 768px) {
  .form-wizard-progress {
    flex-wrap: wrap;
    gap: 8px;
  }

  .form-wizard-connector {
    display: none;
  }

  .form-wizard-step-label {
    display: none;
  }

  .form-wizard-nav {
    flex-direction: column;
  }

  .form-wizard-btn {
    width: 100%;
    justify-content: center;
  }

  .file-manager-toolbar {
    flex-direction: column;
    gap: 12px;
  }

  .file-manager-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .transfer-list {
    flex-direction: column;
  }

  .transfer-list-actions {
    flex-direction: row;
    justify-content: center;
  }

  .transfer-list-btn {
    transform: rotate(90deg);
  }
}

/* ============================================
   F7 GAUGE / DIAL CHART
   ============================================ */
.gauge {
  display: inline-block;
  background: var(--mh-dark-secondary);
  border-radius: 16px;
  padding: 16px;
}

.gauge svg {
  display: block;
}

.gauge-value-arc {
  transition: d 1s ease-out;
}

.gauge-needle {
  transition: transform 1s ease-out;
  transform-origin: center;
}

/* ============================================
   F7 PROGRESS RING
   ============================================ */
.progress-ring {
  display: inline-block;
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  padding: 12px;
}

.progress-ring svg {
  display: block;
}

.progress-ring-circle {
  transform-origin: center;
}

/* ============================================
   F7 AREA CHART
   ============================================ */
.area-chart {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  padding: 10px;
}

.area-chart .area-line {
  filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3));
}

.area-chart .dots circle {
  transition: r 0.2s ease;
  cursor: pointer;
}

.area-chart .dots circle:hover {
  r: 7;
}

/* ============================================
   F7 DATA TABLE
   ============================================ */
.data-table {
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 16px;
  overflow: hidden;
}

.data-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--mh-dark-tertiary);
  border-bottom: 1px solid var(--mh-dark-secondary);
}

.data-table-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--mh-dark-secondary);
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--mh-text-muted);
}

.data-table-search input {
  background: transparent;
  border: none;
  color: var(--mh-text-primary);
  font-size: 14px;
  width: 200px;
}

.data-table-search input:focus {
  outline: none;
}

.data-table-search input::placeholder {
  color: var(--mh-text-muted);
}

.data-table-info {
  font-size: 13px;
  color: var(--mh-text-muted);
}

.data-table-wrapper {
  overflow-x: auto;
}

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

.data-table th,
.data-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.data-table th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mh-text-muted);
  background: var(--mh-dark-tertiary);
  white-space: nowrap;
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.data-table th.sortable:hover {
  color: var(--mh-text-primary);
}

.data-table th.sorted {
  color: var(--mh-gold);
}

.data-table th .sort-icon {
  margin-left: 6px;
  opacity: 0.4;
  font-size: 10px;
}

.data-table th.sorted .sort-icon {
  opacity: 1;
}

.data-table th.sorted.asc .sort-icon::after {
  content: '↑';
}

.data-table th.sorted.desc .sort-icon::after {
  content: '↓';
}

.data-table td {
  font-size: 14px;
  color: var(--mh-text-primary);
}

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

.data-table tbody tr:hover {
  background: rgba(212, 175, 55, 0.05);
}

.data-table tbody tr.selected {
  background: rgba(212, 175, 55, 0.1);
}

.data-table-checkbox {
  width: 40px;
  text-align: center !important;
}

.data-table-checkbox input {
  accent-color: var(--mh-gold);
}

.data-table-empty {
  text-align: center !important;
  color: var(--mh-text-muted);
  padding: 40px !important;
}

.data-table-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid var(--mh-dark-tertiary);
}

.data-table-page-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.data-table-page-btn:hover:not(:disabled) {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.data-table-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.data-table-page-info {
  font-size: 13px;
  color: var(--mh-text-muted);
}

/* ============================================
   F7 TAG INPUT
   ============================================ */
.tag-input {
  position: relative;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}

.tag-input:focus-within {
  border-color: var(--mh-gold);
}

.tag-input-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  min-height: 48px;
}

.tag-input-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(212, 175, 55, 0.2);
  color: var(--mh-gold);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.tag-input-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

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

.tag-input-field {
  flex: 1;
  min-width: 100px;
  background: transparent;
  border: none;
  color: var(--mh-text-primary);
  font-size: 14px;
  padding: 4px 0;
}

.tag-input-field:focus {
  outline: none;
}

.tag-input-field::placeholder {
  color: var(--mh-text-muted);
}

.tag-input-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-top: none;
  border-radius: 0 0 10px 10px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.tag-input-suggestion {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--mh-text-primary);
  cursor: pointer;
  transition: background 0.2s ease;
}

.tag-input-suggestion:hover {
  background: var(--mh-dark-tertiary);
}

/* ============================================
   F7 AUTOCOMPLETE
   ============================================ */
.autocomplete {
  position: relative;
  width: 100%;
}

.autocomplete-input-wrapper {
  position: relative;
}

.autocomplete-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 10px;
  font-size: 14px;
  color: var(--mh-text-primary);
  transition: border-color 0.2s ease;
}

.autocomplete-input:focus {
  outline: none;
  border-color: var(--mh-gold);
}

.autocomplete-input::placeholder {
  color: var(--mh-text-muted);
}

.autocomplete-loader {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid var(--mh-dark-tertiary);
  border-top-color: var(--mh-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 10px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  display: none;
}

.autocomplete.open .autocomplete-dropdown {
  display: block;
}

.autocomplete-loading {
  padding: 16px;
  text-align: center;
  color: var(--mh-text-muted);
  font-size: 14px;
}

.autocomplete-item {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--mh-text-primary);
  cursor: pointer;
  transition: background 0.2s ease;
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
  background: var(--mh-dark-tertiary);
}

.autocomplete-item.highlighted {
  color: var(--mh-gold);
}

/* ============================================
   F7 COLOR PICKER
   ============================================ */
.color-picker {
  position: relative;
  display: inline-block;
}

.color-picker-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.color-picker.open .color-picker-trigger {
  border-color: var(--mh-gold);
}

.color-picker-preview {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.color-picker-input {
  width: 80px;
  background: transparent;
  border: none;
  color: var(--mh-text-primary);
  font-size: 14px;
  font-family: monospace;
}

.color-picker-input:focus {
  outline: none;
}

.color-picker-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-dark-tertiary);
  border-radius: 12px;
  padding: 16px;
  z-index: 1000;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  display: none;
}

.color-picker.open .color-picker-dropdown {
  display: block;
}

.color-picker-saturation {
  width: 200px;
  height: 150px;
  border-radius: 8px;
  position: relative;
  cursor: crosshair;
  margin-bottom: 12px;
}

.color-picker-saturation-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, black);
  border-radius: 8px;
}

.color-picker-saturation-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 3px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.color-picker-hue {
  width: 100%;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  position: relative;
  cursor: pointer;
  margin-bottom: 12px;
}

.color-picker-hue-handle {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 20px;
  background: white;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.color-picker-presets {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.color-picker-preset {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.color-picker-preset:hover {
  transform: scale(1.1);
}

.color-picker-preset.active {
  border-color: white;
  box-shadow: 0 0 0 2px var(--mh-gold);
}

/* ============================================
   RESPONSIVE DATA & INPUTS
   ============================================ */
@media (max-width: 768px) {
  .data-table-toolbar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .data-table-search {
    width: 100%;
  }

  .data-table-search input {
    width: 100%;
  }

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

  .color-picker-dropdown {
    left: 50%;
    transform: translateX(-50%);
  }

  .color-picker-saturation {
    width: 160px;
    height: 120px;
  }

  .color-picker-presets {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   F7 INFINITE SCROLL
   ============================================ */
.infinite-scroll-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  color: var(--mh-text-muted);
  font-size: 14px;
}

.infinite-scroll-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--mh-dark-tertiary);
  border-top-color: var(--mh-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================
   F7 SKELETON LOADER
   ============================================ */
.skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-line {
  height: 16px;
  background: linear-gradient(90deg, var(--mh-dark-tertiary) 25%, var(--mh-dark-secondary) 50%, var(--mh-dark-tertiary) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--mh-dark-tertiary) 25%, var(--mh-dark-secondary) 50%, var(--mh-dark-tertiary) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-image {
  width: 100%;
  background: linear-gradient(90deg, var(--mh-dark-tertiary) 25%, var(--mh-dark-secondary) 50%, var(--mh-dark-tertiary) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
}

.skeleton-card {
  background: var(--mh-dark-secondary);
  border-radius: 12px;
  overflow: hidden;
}

.skeleton-card-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-table-row {
  display: flex;
  gap: 12px;
}

.skeleton-table-cell {
  flex: 1;
}

.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.skeleton-list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

/* ============================================
   F7 EMPTY STATE
   ============================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  color: var(--mh-text-muted);
  opacity: 0.5;
}

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

.empty-state-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--mh-text-primary);
  margin-bottom: 8px;
}

.empty-state-description {
  font-size: 14px;
  color: var(--mh-text-muted);
  max-width: 300px;
  margin-bottom: 24px;
}

.empty-state-action {
  padding: 12px 24px;
  background: var(--mh-gold);
  color: #1a1a1a;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.empty-state-action:hover {
  transform: translateY(-2px);
}

/* ============================================
   F7 BREADCRUMBS
   ============================================ */
.breadcrumbs {
  padding: 12px 0;
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs-item {
  display: flex;
  align-items: center;
}

.breadcrumbs-link {
  color: var(--mh-text-muted);
  text-decoration: none;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumbs-link:hover {
  color: var(--mh-gold);
  background: rgba(212, 175, 55, 0.1);
}

.breadcrumbs-text {
  color: var(--mh-text-primary);
  font-size: 14px;
  font-weight: 500;
  padding: 4px 8px;
}

.breadcrumbs-separator {
  color: var(--mh-text-muted);
  font-size: 12px;
  padding: 0 4px;
}

/* ============================================
   F7 RATING / STARS
   ============================================ */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rating-star {
  display: inline-flex;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.rating.readonly .rating-star {
  cursor: default;
}

.rating-star:hover:not(.readonly) {
  transform: scale(1.2);
}

.rating-star.hover svg {
  fill: rgba(212, 175, 55, 0.5);
}

.rating-value {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mh-text-primary);
}

/* ============================================
   F7 COUNTDOWN
   ============================================ */
.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--mh-dark-secondary);
  padding: 16px 20px;
  border-radius: 12px;
  min-width: 80px;
}

.countdown-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--mh-gold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.countdown-label {
  font-size: 12px;
  color: var(--mh-text-muted);
  text-transform: uppercase;
  margin-top: 8px;
}

.countdown-separator {
  font-size: 32px;
  font-weight: 700;
  color: var(--mh-text-muted);
  margin-top: -12px;
}

.countdown-compact,
.countdown-minimal {
  font-size: 32px;
  font-weight: 700;
  color: var(--mh-text-primary);
  font-variant-numeric: tabular-nums;
}

/* ============================================
   F7 STOPWATCH
   ============================================ */
.stopwatch {
  text-align: center;
  background: var(--mh-dark-secondary);
  border-radius: 16px;
  padding: 24px;
}

.stopwatch-display {
  font-size: 48px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mh-text-primary);
  margin-bottom: 24px;
  font-family: monospace;
}

.stopwatch-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.stopwatch-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stopwatch-btn-start {
  background: #22c55e;
  color: white;
}

.stopwatch-btn-stop {
  background: #ef4444;
  color: white;
}

.stopwatch-btn-lap {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.stopwatch-btn-reset {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.stopwatch-btn:hover {
  transform: translateY(-2px);
}

.stopwatch-laps {
  max-height: 200px;
  overflow-y: auto;
}

.stopwatch-laps-header {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mh-text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.stopwatch-lap {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  gap: 8px;
  padding: 12px;
  font-size: 14px;
  color: var(--mh-text-primary);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--mh-dark-tertiary);
}

.stopwatch-lap:nth-child(2) {
  color: var(--mh-gold);
  font-weight: 600;
}

/* ============================================
   F7 TOUR / WALKTHROUGH
   ============================================ */
.tour-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  pointer-events: none;
}

.tour-tooltip {
  position: fixed;
  z-index: 100001;
  background: var(--mh-dark-secondary);
  border: 2px solid var(--mh-gold);
  border-radius: 12px;
  padding: 20px;
  max-width: 360px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: tour-fade-in 0.3s ease;
}

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

.tour-tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tour-tooltip-step {
  font-size: 12px;
  color: var(--mh-text-muted);
  font-weight: 500;
}

.tour-tooltip-close {
  background: none;
  border: none;
  color: var(--mh-text-muted);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s ease;
}

.tour-tooltip-close:hover {
  color: var(--mh-text-primary);
}

.tour-tooltip-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--mh-text-primary);
  margin: 0 0 8px;
}

.tour-tooltip-description {
  font-size: 14px;
  color: var(--mh-text-muted);
  line-height: 1.5;
  margin: 0 0 20px;
}

.tour-tooltip-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tour-tooltip-skip {
  background: none;
  border: none;
  color: var(--mh-text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.tour-tooltip-skip:hover {
  color: var(--mh-text-primary);
}

.tour-tooltip-nav {
  display: flex;
  gap: 8px;
}

.tour-tooltip-prev,
.tour-tooltip-next {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tour-tooltip-prev {
  background: var(--mh-dark-tertiary);
  color: var(--mh-text-primary);
}

.tour-tooltip-next {
  background: var(--mh-gold);
  color: #1a1a1a;
}

.tour-tooltip-prev:hover,
.tour-tooltip-next:hover {
  transform: translateY(-1px);
}

/* ============================================
   RESPONSIVE UI UTILITIES
   ============================================ */
@media (max-width: 768px) {
  .countdown-unit {
    padding: 12px 14px;
    min-width: 60px;
  }

  .countdown-value {
    font-size: 24px;
  }

  .countdown-separator {
    font-size: 20px;
  }

  .stopwatch-display {
    font-size: 36px;
  }

  .stopwatch-controls {
    flex-wrap: wrap;
  }

  .tour-tooltip {
    left: 10px !important;
    right: 10px;
    max-width: none;
    transform: none !important;
  }

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

  .empty-state-title {
    font-size: 18px;
  }
}

/* ============================================
   F7 DRAGGABLE / SORTABLE
   ============================================ */
.draggable-item {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.draggable-item.dragging {
  opacity: 0.9;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
  z-index: 10000;
}

.draggable-placeholder {
  background: rgba(212, 175, 55, 0.1);
  border: 2px dashed var(--mh-gold);
  border-radius: 8px;
  transition: height 0.15s ease;
}

.draggable-handle {
  cursor: grab;
  color: var(--mh-text-muted);
  padding: 8px;
  transition: color 0.2s ease;
}

.draggable-handle:hover {
  color: var(--mh-gold);
}

.draggable-handle:active {
  cursor: grabbing;
}

/* ============================================
   F7 NOTIFICATIONS / TOASTS
   ============================================ */
.notification-container {
  position: fixed;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  pointer-events: none;
}

.notification-container.top-left {
  top: 0;
  left: 0;
}

.notification-container.top-right {
  top: 0;
  right: 0;
}

.notification-container.top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.notification-container.bottom-left {
  bottom: 0;
  left: 0;
}

.notification-container.bottom-right {
  bottom: 0;
  right: 0;
}

.notification-container.bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.notification {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--mh-dark-secondary);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
  max-width: 400px;
  border-left: 4px solid;
}

.notification-container.top-left .notification,
.notification-container.bottom-left .notification {
  transform: translateX(-100%);
}

.notification-container.top-center .notification,
.notification-container.bottom-center .notification {
  transform: translateY(-20px);
}

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

.notification-info {
  border-left-color: #3b82f6;
}

.notification-success {
  border-left-color: #22c55e;
}

.notification-warning {
  border-left-color: #f97316;
}

.notification-error {
  border-left-color: #ef4444;
}

.notification-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.notification-info .notification-icon {
  color: #3b82f6;
}

.notification-success .notification-icon {
  color: #22c55e;
}

.notification-warning .notification-icon {
  color: #f97316;
}

.notification-error .notification-icon {
  color: #ef4444;
}

.notification-icon svg {
  width: 100%;
  height: 100%;
}

.notification-message {
  flex: 1;
  font-size: 14px;
  color: var(--mh-text-primary);
  line-height: 1.4;
}

.notification-close {
  background: none;
  border: none;
  color: var(--mh-text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.notification-close:hover {
  color: var(--mh-text-primary);
}

/* ============================================
   F7 THEME VARIANTS
   ============================================ */
.theme-light {
  --mh-dark-primary: #ffffff;
  --mh-dark-secondary: #f5f5f5;
  --mh-dark-tertiary: #e5e5e5;
  --mh-text-primary: #1a1a1a;
  --mh-text-secondary: #4a4a4a;
  --mh-text-muted: #6a6a6a;
}

.theme-light .notification {
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ============================================
   RESPONSIVE FINAL UTILITIES
   ============================================ */
@media (max-width: 768px) {
  .notification-container {
    left: 0;
    right: 0;
    padding: 12px;
  }

  .notification-container.top-right,
  .notification-container.top-left,
  .notification-container.top-center {
    left: 0;
    right: 0;
    transform: none;
  }

  .notification-container.bottom-right,
  .notification-container.bottom-left,
  .notification-container.bottom-center {
    left: 0;
    right: 0;
    transform: none;
  }

  .notification {
    max-width: none;
  }
}