/* styles.css - Generelle styles og Tema variabler */

/* ----- Farvetema Definitioner ----- */
:root {
    --theme-primary-100: #e0e7ff;
    --theme-primary-300: #a5b4fc;
    --theme-primary-400: #818cf8;
    --theme-primary-500: #6366f1;
    --theme-primary-600: #4f46e5;
    --theme-primary-700: #4338ca;
}
html[data-theme="teal"] {
    --theme-primary-100: #ccfbf1;
    --theme-primary-300: #5eead4;
    --theme-primary-400: #2dd4bf;
    --theme-primary-500: #14b8a6;
    --theme-primary-600: #0d9488;
    --theme-primary-700: #0f766e;
}
html[data-theme="rose"] {
    --theme-primary-100: #ffe4e6;
    --theme-primary-300: #fda4af;
    --theme-primary-400: #fb7185;
    --theme-primary-500: #f43f5e;
    --theme-primary-600: #e11d48;
    --theme-primary-700: #be123c;
}
html[data-theme="orange"] {
    --theme-primary-100: #ffedd5;
    --theme-primary-300: #fdba74;
    --theme-primary-400: #fb923c;
    --theme-primary-500: #f97316;
    --theme-primary-600: #ea580c;
    --theme-primary-700: #c2410c;
}
.logo {
	display:inline;
	height: 64px;
}

.logo-container {
    position: relative;
    display: inline-block;
}

.dev-badge {
    display: none; /* Hidden by default */
    position: absolute;
    top: -5px;
    right: -15px;
    background-color: red;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    transform: rotate(15deg);
}

/* ----- Generelle Styles ----- */
.event-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.3s ease; 
}
.event-card:not(.event-past):hover { 
    transform: translateY(-4px);
}
.modal-content { max-height: 80vh; }
.fade-in { animation: fadeIn 0.3s ease-out; }
.fade-out { animation: fadeOut 0.3s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }

.signed-up-indicator {
    position: absolute;
    top: 8px; right: 8px;
    padding: 4px 8px;
    border-radius: 9999px; 
    font-size: 0.75rem; 
    font-weight: 600;
}
.inline-text-icon {
    font-size: 1em; height: 1em; width: 1em; 
    vertical-align: middle; margin-bottom: 0.125em; 
}
.event-past {
    opacity: 0.6 !important;
    /* cursor: default; */ /* Fjernet for at tillade klik */
}
.event-past:hover { transform: none; box-shadow: inherit; }

/* Styling for tema-vælger */
.theme-option-label {
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}
.theme-option-label .checkmark-icon {
    opacity: 0;
    transition: opacity 0.2s ease;
    color: var(--theme-primary-600);
}
input[name="theme-option"]:checked + .theme-option-label {
    border-color: var(--theme-primary-500);
}
input[name="theme-option"]:checked + .theme-option-label .checkmark-icon {
    opacity: 1;
}

/* Styling for collapsible filter */
.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
#filterToggleButton .ion-icon,
#dailyFilterToggleButton .ion-icon {
  transition: transform 0.3s ease-out;
}
#filterToggleButton.open .ion-icon,
#dailyFilterToggleButton.open .ion-icon {
  transform: rotate(180deg);
}

.add-location-button {
    background-color: var(--theme-primary-600);
    color: white;
}
.add-location-button:hover {
    background-color: var(--theme-primary-700);
}
.add-location-button.adding {
    background-color: #f59e0b; /* amber-500 */
}


/* Overgange for farver ved temaswitch */
body, header, .filter-section, nav, .modal-content, .event-card,
input, select, label, button, h1, h2, h3, p, span, li, a, 
.nav-button, .daily-filter-bar, .info-modal-container .info-tab, 
.info-modal-container .notification-toggle-button,
.theme-option-label, .form-checkbox
 {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.filter-toggle-button, .filter-controls-wrapper {
    background-color: var(--bg-color-accent);
    color: var(--text-color-primary);
    border-color: var(--border-color);
}

.filter-toggle-button:hover {
    background-color: var(--bg-color-hover);
}

.filter-section {
    background-color: var(--bg-color);
}

.location-modal-image {
    width: 100%;
    height: auto;
    max-height: 300px; /* Adjust as needed */
    object-fit: cover;
    border-radius: 0.75rem 0.75rem 0 0; /* Match modal's top rounding */
    margin-bottom: 1rem; /* Space between image and text */
}