/* style.css - Timeplanlegger IHO (Versjon 2.5) */

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9fafb; /* Gray-50 */
}
/* Skjul scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Skjul scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* --- GRID LAYOUT --- */
.grid-header, .schedule-grid {
  display: grid;
  /* 1 kolonne for tid (80px) + 5 kolonner for dager */
  grid-template-columns: 80px repeat(5, 1fr); 
}

.schedule-grid {
  background-color: white;
  overflow-y: auto; 
}

/* Scrollbar styling */
.schedule-grid::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.schedule-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.schedule-grid::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.schedule-grid::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Tvinger fargeknappene til å ha størrelse (Color Palette) */
#colorPaletteContainer div, #colorPalette div {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* Celler */
.grid-cell {
  min-height: 80px; 
  position: relative;
  border-right: 1px solid #e5e7eb; 
  border-bottom: 1px solid #e5e7eb;
}

.grid-cell:hover {
  background-color: #f8fafc;
}

/* Drag & Drop highlight */
.grid-cell.bg-blue-50 {
  background-color: #eff6ff !important;
  border: 2px dashed #3b82f6;
}

/* Event Blocks */
.event-block {
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
  z-index: 1;
}
.event-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* --- LOGIN DESIGN (NYTT I v2.5) --- */

/* Bakgrunnsbilde med mørkt filter */
#login-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  
  /* Et lyst, varmt filter over et solfylt bibliotek */
  background-image: 
      linear-gradient(rgba(255, 248, 240, 0.4), rgba(255, 240, 230, 0.6)),
      url('https://images.unsplash.com/photo-1568667256549-094345857637?auto=format&fit=crop&q=80&w=2000&ixlib=rb-4.0.3');
  
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  
  display: flex; 
  justify-content: center; 
  align-items: center; 
  z-index: 2000;
}

/* Glassmorphism på boksen */
.login-box {
  width: 100%; 
  max-width: 400px;
  padding: 2.5rem; 
  border-radius: 1rem;
  
  /* Gjennomsiktig hvit */
  background-color: rgba(255, 255, 255, 0.85) !important; 
  /* Blur-effekt på bakgrunnen bak boksen */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* Subtil hvit kant */
  border: 1px solid rgba(255, 255, 255, 0.3);
  /* Dypere skygge */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* VIKTIG FIKS: Sørger for at hidden faktisk skjuler overlayet */
#login-overlay.hidden {
  display: none !important;
}

/* --- ANIMASJONER --- */

/* Riste-animasjon for feil passord */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.animate-shake {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* Dropdown animasjon */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down {
    animation: fadeInDown 0.2s ease-out;
}

/* Tooltip logikk (hvis du bruker boblene) */
.tooltip-trigger:hover + .tooltip { 
    display: block; 
}

/* Generelle hjelpere */
.modal {
    transition: opacity 0.2s ease-in-out;
}
/* Klasse for økter som ikke matcher søket */
.event-dimmed {
    opacity: 0.15;
    filter: grayscale(100%);
    pointer-events: none; /* Gjør at man ikke kan klikke på dem mens man søker */
}

/* Gjør matchende økter ekstra synlige */
.event-highlight {
    box-shadow: 0 0 0 2px #2563eb, 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Blå ring */
    transform: scale(1.02);
    z-index: 50;
}
.hidden {
  display: none !important;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}