/* --- DARK/LIGHT MODE THEME --- */
:root {
  --color-background: #f9fafb; /* Ljusgrå (nästan vit) */
  --color-secondary-background: #ffffff; /* Vit för kort, etc. */
  --color-text-primary: #1f2937; /* Mörk text */
  --color-text-secondary: #6b7280; /* Grå text */
  --color-border: #e5e7eb; /* Ljusgrå kantlinjer */
  --color-link: #3b82f6; /* Blå länkar */
  --color-link-hover: #2563eb;
}

html.dark {
  --color-background: #111827; /* Mörkblå/svart bakgrund */
  --color-secondary-background: #1f2937; /* Mörkgrå för kort */
  --color-text-primary: #f3f4f6; /* Ljus text */
  --color-text-secondary: #9ca3af; /* Ljusare grå text */
  --color-border: #374151; /* Mörkare grå kantlinjer */
  --color-link: #60a5fa; /* Ljusblå länkar */
  --color-link-hover: #93c5fd;
}
/* Stilar flyttade från header.php för bättre struktur */
body { font-family: 'Inter', sans-serif; background-color: var(--color-background); color: var(--color-text-primary); }
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.message { color: #166534; background-color: #dcfce7; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; text-align: center; font-weight: 500; }
.error { color: #991b1b; background-color: #fee2e2; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; text-align: center; font-weight: 500; }
.aspect-w-16 { position: relative; padding-bottom: 56.25%; }
.aspect-h-9 { }
.aspect-w-16 > *, .aspect-h-9 > * { position: absolute; height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; }
#mobile-menu { transition: opacity 0.3s ease-in-out; }
.dropdown-menu { position: absolute; background-color: var(--color-secondary-background); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); z-index: 50; width: 14rem; max-height: 400px; overflow-y: auto; margin-top: 0.5rem; right: 0; }
.search-dropdown { width: 250px; left: 0; }
.search-dropdown-item { padding: 0.75rem; display: flex; align-items: center; gap: 0.75rem; transition: background-color 0.15s ease-in-out; cursor: pointer; }
.search-dropdown-item:hover { background-color: #f9fafb; }
html.dark .search-dropdown-item:hover { background-color: #374151; }
.search-dropdown-item .item-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }
.search-dropdown-item .item-icon svg { width: 1.25rem; height: 1.25rem; }
.search-dropdown-item .item-content { flex-grow: 1; min-width: 0; }
.search-dropdown-item .item-title { font-weight: 600; color: var(--color-text-primary); }
.search-dropdown-item .item-description { color: var(--color-text-secondary); font-size: 0.875rem; }
.badge-container { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; text-shadow: 0 1px 1px rgba(0,0,0,0.2); }
.badge-icon { margin-right: 0.375rem; width: 1rem; height: 1rem; color: currentColor; fill: currentColor; }
.badge-star-gazer { background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.badge-pixel-pioneer { background: linear-gradient(135deg, #10b981, #34d399); color: #fff; border: 1px solid #059669; }
.badge-cosmic-explorer { background: linear-gradient(135deg, #3b82f6, #60a5fa); color: #fff; border: 1px solid #2563eb; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.badge-ember-knight { background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; border: 1px solid #dc2626; }
.badge-quantum-mind { background: linear-gradient(135deg, #6b7280, #9ca3af); color: #fff; border: 1px solid #4b5563; }
.unfriend-btn .default-text { display: inline; }
.unfriend-btn .hover-text { display: none; }
.unfriend-btn:hover { background-color: #dc2626; border-color: #991b1b; }
.unfriend-btn:hover .default-text { display: none; }
.unfriend-btn:hover .hover-text { display: inline; }

/* NY CSS: Tooltip för Liker-stacken */
.liker-stack {
    position: relative;
    display: flex;
    align-items: center;
}
.liker-stack .tooltip {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    z-index: 10;
}
.liker-stack:hover .tooltip {
    opacity: 1;
    visibility: visible;
}