/* ============================================================= */
/* APPLE LIQUID GLASS — NAYFINIX DARK MODE                       */
/* Premium iOS 26 / macOS Tahoe Liquid Glass Design System       */
/* ============================================================= */

/* ---- DESIGN TOKENS (Liquid Glass Dark - PARITY WITH LIGHT) ---- */
html.dark-mode {
  /* Glass Surfaces */
  --lg-glass: rgba(8, 15, 12, 0.55);
  --lg-glass-hover: rgba(12, 25, 20, 0.65);
  --lg-glass-active: rgba(15, 35, 25, 0.75);
  --lg-glass-heavy: rgba(5, 10, 8, 0.90);
  --lg-glass-light: rgba(255, 255, 255, 0.05);
  --lg-glass-input: rgba(255, 255, 255, 0.03);
  
  /* Borders */
  --lg-border: rgba(100, 255, 180, 0.15);
  --lg-border-subtle: rgba(100, 255, 180, 0.08);
  --lg-border-strong: rgba(100, 255, 180, 0.25);
  
  /* Shadows & Depth */
  --lg-shadow: 0 16px 64px rgba(0, 0, 0, 0.4), 0 8px 32px rgba(0, 0, 0, 0.3);
  --lg-shadow-hover: 0 24px 80px rgba(0, 0, 0, 0.5);
  --lg-shadow-elevated: 0 40px 100px rgba(0, 0, 0, 0.6);
  
  /* Effects */
  --lg-blur: blur(40px) saturate(180%) brightness(0.95);
  --lg-blur-light: blur(20px) saturate(150%) brightness(1);
  --lg-blur-heavy: blur(80px) saturate(200%) brightness(0.85);
  --lg-blur-sidebar: blur(50px) saturate(190%) brightness(0.9);
  
  /* Text Colors */
  --lg-text: #f8fafc;
  --lg-text-secondary: #cbd5e1;
  --lg-text-muted: #94a3b8;
  --lg-text-faint: #64748b;
  
  /* Accents */
  --lg-accent: #00ff88;
  --lg-accent-hover: #00e67a;
  --lg-accent-glow: 0 0 20px rgba(0, 255, 136, 0.4);
  
  /* Infrastructure */
  --lg-edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --lg-inner-glow: inset 0 0 40px rgba(0, 0, 0, 0.2);
  --lg-specular: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 100%);
  --lg-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  --lg-transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --lg-radius: 20px;
  --lg-radius-sm: 12px;
  --lg-radius-lg: 32px;
}

/* ---- PREMIUM MESH GRADIENT BACKGROUND ---- */
html.dark-mode body {
  background-color: #040d0a !important;
  background-image: 
    linear-gradient(rgba(4, 13, 10, 0.8), rgba(4, 13, 10, 0.8)),
    url("https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?auto=format&fit=crop&q=80&w=2000") !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center !important;
  color: var(--lg-text) !important;
  min-height: 100vh !important;
  margin: 0;
  padding: 0;
}

/* ---- GLOBAL TEXT COLORS & READABILITY ---- */
html.dark-mode h1, 
html.dark-mode h2, 
html.dark-mode h3, 
html.dark-mode h4, 
html.dark-mode h5, 
html.dark-mode h6,
html.dark-mode strong,
html.dark-mode b,
html.dark-mode label {
  color: var(--lg-text) !important;
  font-weight: 600 !important;
}

html.dark-mode p,
html.dark-mode li,
html.dark-mode span:not(.material-icons),
html.dark-mode div:not(.btn):not(.badge):not(.nav-item) {
  color: var(--lg-text-secondary) !important;
}

/* ---- WATER GLOW ICONS ---- */
html.dark-mode .material-icons,
html.dark-mode ion-icon,
html.dark-mode i.fas,
html.dark-mode i.fab,
html.dark-mode i.far {
  color: var(--lg-accent) !important;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.4) !important;
  transition: var(--lg-transition);
}

/* ---- CORE GLASS SURFACES ---- */
/* Targeting major containers found in Dashboard, Settings, Feed, Jobs, etc. */
html.dark-mode .panel,
html.dark-mode .card,
html.dark-mode .settings-section,
html.dark-mode .dashboard-card,
html.dark-mode .sidebar,
html.dark-mode .topbar,
html.dark-mode .modal-content,
html.dark-mode .summary-card,
html.dark-mode .stat-card,
html.dark-mode .chart-card,
html.dark-mode .post-box,
html.dark-mode .feed-post,
html.dark-mode .job-card,
html.dark-mode .book-card,
html.dark-mode .product-card,
html.dark-mode .info-box,
html.dark-mode .calculator,
html.dark-mode .filters-section,
html.dark-mode .search-container,
html.dark-mode .list-group-item,
html.dark-mode .popup-content,
html.dark-mode .bio-profile-card {
  background: var(--lg-specular), var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: var(--lg-radius) !important;
  box-shadow: var(--lg-edge-top), var(--lg-shadow) !important;
  transition: var(--lg-transition) !important;
}

/* Surface Hover Effects */
html.dark-mode .panel:hover,
html.dark-mode .card:hover,
html.dark-mode .summary-card:hover,
html.dark-mode .job-card:hover,
html.dark-mode .feed-post:hover {
  background: var(--lg-specular), var(--lg-glass-hover) !important;
  box-shadow: var(--lg-edge-top), var(--lg-shadow-hover) !important;
  transform: translateY(-2px);
}

/* ---- SIDEBAR & NAVIGATION ---- */
html.dark-mode .sidebar {
  background: var(--lg-glass-heavy) !important;
  backdrop-filter: var(--lg-blur-sidebar) !important;
  -webkit-backdrop-filter: var(--lg-blur-sidebar) !important;
  border-right: 1px solid var(--lg-border) !important;
  border-radius: 0 !important; /* Keep sidebar sharp-edged if attached to side */
}

html.dark-mode .sidebar a,
html.dark-mode .nav-link {
  color: var(--lg-text-secondary) !important;
  text-decoration: none !important;
  padding: 12px 20px !important;
  margin-bottom: 4px !important;
  border-radius: var(--lg-radius-sm) !important;
  transition: var(--lg-transition) !important;
}

html.dark-mode .sidebar a:hover,
html.dark-mode .nav-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--lg-text) !important;
}

html.dark-mode .sidebar a.active,
html.dark-mode .nav-link.active {
  background: rgba(0, 255, 136, 0.15) !important;
  color: var(--lg-accent) !important;
  box-shadow: var(--lg-edge-top), 0 0 15px rgba(0, 255, 136, 0.1);
}

/* ---- TOPBAR ---- */
html.dark-mode .topbar {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border-bottom: 1px solid var(--lg-border) !important;
  border-radius: 0 !important;
}

/* ---- INPUTS ---- */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background: var(--lg-glass-input) !important;
  border: 1px solid var(--lg-border-subtle) !important;
  color: var(--lg-text) !important;
  padding: 12px 16px !important;
  border-radius: var(--lg-radius-sm) !important;
  backdrop-filter: blur(10px) !important;
  transition: var(--lg-transition) !important;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus {
  border-color: var(--lg-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
  outline: none !important;
}

html.dark-mode ::placeholder {
  color: var(--lg-text-faint) !important;
}

/* ---- BUTTONS ---- */
html.dark-mode .btn-primary,
html.dark-mode .submit-btn,
html.dark-mode button:not(.btn-secondary):not(.close):not(.hamburger):not(.content-nav-btn):not(.tab-btn):not(.action-btn):not(.quantity-btn):not(.remove-item-btn):not(.sidebar-subcategory-option):not(.search-btn):not(.actions button) {
  background: linear-gradient(135deg, #00ff88, #008744) !important;
  border: none !important;
  color: #ffffff !important;
  padding: 10px 20px !important; /* Refined from 12px 24px */
  border-radius: var(--lg-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: 0 8px 24px rgba(0, 255, 136, 0.3) !important;
  cursor: pointer !important;
  transition: var(--lg-transition) !important;
}

/* Compact Nav Tabs (Content Nav / Tabs) - Refined "Well Done" Look */
html.dark-mode .content-nav-btn,
html.dark-mode .tab-btn {
  padding: 8px 16px !important; /* Smaller, tighter padding */
  font-size: 13px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: auto !important; /* Avoid fixed height clunkiness */
}

/* Active State for Tabs */
html.dark-mode .content-nav-btn.active,
html.dark-mode .tab-btn.active,
html.dark-mode .content-nav-btn.active span,
html.dark-mode .tab-btn.active span {
  background: var(--lg-accent) !important;
  color: #040d0a !important;
  box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4) !important;
}


html.dark-mode .btn-primary:hover,
html.dark-mode .submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 255, 136, 0.4) !important;
  filter: brightness(1.1);
}

/* ---- COMPACT UTILITY BUTTONS (Action Buttons, Grid Buttons) ---- */
html.dark-mode .action-btn,
html.dark-mode .quantity-btn,
html.dark-mode .remove-item-btn,
html.dark-mode .sidebar-subcategory-option {
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: var(--lg-radius-sm) !important;
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: none !important;
}

html.dark-mode .action-btn:hover {
  background: var(--lg-glass-hover) !important;
  border-color: var(--lg-accent) !important;
}

html.dark-mode .buy-btn {
  background: linear-gradient(135deg, #00ff88, #008744) !important;
  border: none !important;
  color: #040d0a !important;
}

/* Secondary Buttons */
html.dark-mode .btn-secondary,
html.dark-mode .back-btn,
html.dark-mode .cancel-btn {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
  backdrop-filter: blur(10px) !important;
}

/* ---- SCROLLBARS ---- */
html.dark-mode ::-webkit-scrollbar {
  width: 10px !important;
}

html.dark-mode ::-webkit-scrollbar-track {
  background: transparent !important;
}

html.dark-mode ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  background-clip: content-box !important;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* ---- CLEANUP: REMOVE HARDCODED WHITE OVERRIDES ---- */
html.dark-mode [style*="background: white"],
html.dark-mode [style*="background-color: white"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background-color: #fff"],
html.dark-mode [style*="background: #ffffff"],
html.dark-mode [style*="background-color: #ffffff"] {
  background-color: var(--lg-glass) !important;
  color: var(--lg-text) !important;
}

/* Fix for opaque white central containers in legacy HTMLs */
html.dark-mode div:not(.logo):not(.badge):not(.btn) {
  background-color: transparent;
}

/* ---- AMAZON STYLE MARKETPLACE (Global Feed, Cart, Checkout) ---- */
html.dark-mode .amazon-header,
html.dark-mode .header-top,
html.dark-mode .header-nav {
  background: var(--lg-glass-heavy) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border-bottom: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-shadow) !important;
}

html.dark-mode .amazon-sidebar {
  background: var(--lg-glass-heavy) !important;
  backdrop-filter: var(--lg-blur-sidebar) !important;
  -webkit-backdrop-filter: var(--lg-blur-sidebar) !important;
  border-right: 1px solid var(--lg-border) !important;
}

html.dark-mode .sidebar-section h3 {
  color: var(--lg-accent) !important;
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.dark-mode .sidebar-link,
html.dark-mode .nav-link {
  color: var(--lg-text-secondary) !important;
}

html.dark-mode .sidebar-link:hover,
html.dark-mode .nav-link:hover {
  background: var(--lg-glass-hover) !important;
  color: var(--lg-text) !important;
}

html.dark-mode .sidebar-link.active,
html.dark-mode .nav-link.active {
  background: rgba(0, 255, 136, 0.1) !important;
  color: var(--lg-accent) !important;
  border-left: 3px solid var(--lg-accent) !important;
}

html.dark-mode .search-container {
  background: var(--lg-glass-input) !important;
  border: 1px solid var(--lg-border) !important;
}

html.dark-mode .search-category,
html.dark-mode .search-input {
  background: transparent !important;
  color: var(--lg-text) !important;
}

html.dark-mode .search-category option {
  background: #040d0a !important;
  color: var(--lg-text) !important;
}