/* SubMap - Subscription Cost Visualizer */

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(30,30,46,0.5); border-radius: 10px; }
::-webkit-scrollbar-thumb { background-color: #4a4a6a; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background-color: #6a6a8a; }

/* Hide number spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.iconify { display: inline-block; vertical-align: middle; }

/* === TREEMAP === */
.treemap-container {
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #1a1a24;
}

.treemap-cell {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  cursor: default;
}
.treemap-cell:hover { z-index: 50; }

.treemap-cell-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.15s ease-out, box-shadow 0.2s ease;
}

/* Scanlines on tile background only */
.treemap-cell-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px);
  z-index: 0;
  border-radius: inherit;
}

/* Content sits above scanlines */
.treemap-cell-inner > * {
  position: relative;
  z-index: 1;
}

.treemap-cell:hover .treemap-cell-inner {
  box-shadow: 0 0 20px rgba(0,245,255,0.15);
  transform: scale(1.02);
}

.tile-enter {
  animation: tileGrow 0.3s ease-out forwards;
  opacity: 0;
  transform: scale(0.8);
}

@keyframes tileGrow {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* === SEARCH === */
#search-dropdown {
  background: linear-gradient(180deg, #0d0d14 0%, #0a0a10 100%);
  border: 1px solid rgba(0,245,255,0.15);
}

.search-item { cursor: pointer; }
.search-selected {
  background: rgba(0,245,255,0.15);
  border-left: 3px solid #00f5ff;
}

.search-open #sub-list-container { overflow: hidden !important; }
.search-open #sub-list-container::-webkit-scrollbar { display: none; }

/* === COMPONENTS === */
.logo-container {
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-btn { color: #6b7280; transition: color 0.15s ease; }
.delete-btn:hover { color: #ef4444; }

/* === LIGHT THEME === */
html:not(.dark) body {
  background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #fce7f3 100%);
  color: #1e293b;
}

html:not(.dark) .bg-retro-card { 
  background: rgba(255,255,255,0.9); 
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
html:not(.dark) .bg-retro-dark { background: transparent; }
html:not(.dark) .bg-retro-darker { background: #f1f5f9; }
html:not(.dark) .border-retro-border { border-color: rgba(0,0,0,0.08); }

html:not(.dark) .text-white { color: #1e293b; }
html:not(.dark) .text-gray-300 { color: #475569; }
html:not(.dark) .text-gray-400 { color: #64748b; }
html:not(.dark) .text-gray-500,
html:not(.dark) .text-gray-600 { color: #94a3b8; }

html:not(.dark) .text-neon-cyan { color: #0891b2; }
html:not(.dark) .text-neon-pink { color: #db2777; }
html:not(.dark) .text-neon-purple { color: #7c3aed; }

html:not(.dark) .bg-neon-cyan { background: #06b6d4; }
html:not(.dark) .hover\:text-neon-cyan:hover { color: #0891b2; }
html:not(.dark) .hover\:text-neon-pink:hover { color: #db2777; }
html:not(.dark) .hover\:border-neon-cyan\/50:hover { border-color: rgba(8,145,178,0.5); }
html:not(.dark) .focus\:border-neon-cyan:focus { border-color: #0891b2; }

html:not(.dark) .treemap-container { background: #e8e8f0; }

/* Light theme scanlines on tiles */
html:not(.dark) .treemap-cell-inner::before {
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px);
}

html:not(.dark) .treemap-cell-inner { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
html:not(.dark) .treemap-cell:hover .treemap-cell-inner {
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  transform: scale(1.02);
}

html:not(.dark) #theme-btn { background: white; border-color: #e2e8f0; color: #64748b; }
html:not(.dark) #theme-btn:hover { border-color: #0891b2; color: #0891b2; }

html:not(.dark) ::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); }
html:not(.dark) ::-webkit-scrollbar-thumb { background-color: #cbd5e1; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

html:not(.dark) .sub-item { background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
html:not(.dark) .logo-container { background: rgba(0,0,0,0.03); }

html:not(.dark) #search-dropdown {
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}
html:not(.dark) .search-selected { background: rgba(6,182,212,0.15); border-left-color: #06b6d4; }
html:not(.dark) .bg-black\/30 { background: rgba(0,0,0,0.05); }