/* ================================================
   Slushi-Verleih - Style.css
   Basierend auf Bulma 1.x, angepasst für helles Branding
   Sommerlich, frisch & gut lesbar
================================================== */

@import url('https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

:root {
  --brand-primary: #00bcd4;   /* helles Türkis */
  --brand-accent:  #f48fb1;   /* sanftes Pink */
  --brand-accent-2:#fff59d;   /* helles Gelb */
  --text-dark: #222;
  --text-normal: #333;
  --text-light: #555;
}

/* ===== Grundlayout ===== */
html, body {
  background-color: #fffef9 !important;
  font-family: 'Poppins', sans-serif;
  color: var(--text-normal);
  line-height: 1.6;
  height: 100%;
  margin: 0;
  padding-bottom: 60px; /* Platz für fixierten Footer */
}

/* ===== Navbar ===== */
.navbar.is-primary {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)) !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
body {
  padding-top: 3.25rem; /* Platz für fixierte Navbar */
}
.navbar-item, .navbar-link {
  color: #fff !important;
  font-weight: 600;
}
.navbar-item:hover {
  background-color: rgba(255,255,255,0.15) !important;
}

/* ===== Hero ===== */
.hero.is-primary {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)) !important;
  color: white;
}
.hero .title,
.hero .subtitle {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Einheitlich dunkle Texte für bessere Lesbarkeit */
.title,
.subtitle,
strong,
.has-text-weight-semibold,
.table th,
.label,
.tag,
h1, h2, h3, h4, h5, h6 {
  color: #000 !important; /* sattes Schwarz */
}

/* Lesbarkeit für dunkle Tags sicherstellen */
.tag.is-dark { color: #fff !important; }

.table .button.is-small .icon svg { display: block; }
.table .dropdown .dropdown-menu { min-width: 320px; } /* etwas breiterer Tooltip */
.table .dropdown .dropdown-content { border-radius: 6px; }

/* ===== Fix: Tooltip/Drowdown in Tabellen nicht abschneiden ===== */
.table-container {
  overflow: visible !important;  /* statt auto */
}
.table, .table thead, .table tbody, .table tr, .table td, .table th {
  overflow: visible;  /* alle Layer durchlässig */
}
.table td { position: relative; }

/* Dropdown (Tooltip) korrekt positionieren + über allem zeigen */
.table td .dropdown.is-hoverable .dropdown-menu {
  top: 100%;
  margin-top: 0.35rem;
  z-index: 60;              /* über Box/Tabellenzellen */
  left: auto;
  right: 0;                 /* an die rechte Zellkante ankern */
}

/* Helles Tooltip-Panel statt „schwarz“ */
.table td .dropdown-menu,
.table td .dropdown-content {
  background: #fff !important;
  border: 1px solid #ddd !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.12) !important;
  color: var(--text-dark) !important;
  border-radius: 8px !important;
}

/* Mini-Tabelle im Tooltip neutralisieren (keine dunklen Hintergründe) */
.table td .dropdown-content .table {
  background: transparent !important;
}
.table td .dropdown-content .table th,
.table td .dropdown-content .table td {
  background: #fff !important;
  border-color: #e5e5e5 !important;
  color: var(--text-dark) !important;
}

/* etwas kompakter */
.table td .dropdown-content .table.is-narrow td,
.table td .dropdown-content .table.is-narrow th {
  padding: .35rem .5rem;
}

/* Cursor-Hinweis */
.table td .dropdown-trigger .tag {
  cursor: help;
}

/* feste Breiten für schmale Controls in is-grouped */
.control.is-fixed-2 { flex: 0 0 2rem; max-width: 2rem; }
.control.is-fixed-4 { flex: 0 0 4rem; max-width: 4rem; }
.control.is-fixed-6 { flex: 0 0 6rem; max-width: 6rem; }
.control.is-fixed-8 { flex: 0 0 8rem; max-width: 8rem; }

/* ===== Buttons ===== */
.button.is-primary {
  background-color: var(--brand-accent) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 600;
}
.button.is-primary:hover {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* ===== Boxen & Karten ===== */
.box,
.card {
  background-color: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  color: var(--text-normal);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  transition: all 0.2s ease-in-out;
}

/* ===== Überschriften ===== */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-dark) !important;
  font-weight: 600;
}

/* ===== Formulare ===== */
.input,
.table tr,
.table td,
.textarea,
.select select {
  background-color: #fff !important;
  color: var(--text-dark) !important;
  border: 1px solid #999 !important;
}
.table th {
  background-color: #ddd !important;
  color: var(--text-dark) !important;
  border: 1px solid #999 !important;
}
.input::placeholder,
.textarea::placeholder {
  color: #888 !important;
}
.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 0.125em rgba(0, 188, 212, 0.25);
}
.label, .help {
  color: var(--text-dark) !important;
}

/* ===== Kalender ===== */
#calendar-root {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  justify-content: center;
  margin-top: 1rem;
}
#calendar-root .day {
  background-color: #fff;
  color: var(--text-dark);
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#calendar-root .day:hover {
  filter: brightness(0.95);
}
#calendar-root .day.is-empty {
  background: transparent !important;
  border: none !important;
}
/* Admin Detail-Layout für Requests */
.form-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.form-label-col {
  flex: 0 0 140px; /* Labelbreite hier anpassen */
  max-width: 140px;
  display: flex;
  align-items: center;
}

.form-input-col {
  flex: 1 1 0;
}

/* Nachricht einspaltig über gesamte Breite */
.form-row-single .form-input-col {
  flex: 1 1 0;
}

/* Responsive: untereinander auf kleineren Screens */
@media (max-width: 768px) {
  .form-row {
    flex-wrap: wrap;
  }
  .form-label-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .form-input-col {
    flex: 0 0 100%;
  }
}

/* Einheitliche Farben für Kalender und Legende */
.has-background-warning,
.tag.is-warning {
  background-color: hsl(48, 100%, 67%) !important; /* gleiches Gelb wie Kalender */
  color: #000 !important;
}

.has-background-danger,
.tag.is-danger {
  background-color: hsl(348, 86%, 61%) !important;
  color: #000 !important;
}

.has-background-success,
.tag.is-success {
  background-color: hsl(141, 53%, 53%) !important;
  color: #000 !important;
}

.has-background-grey-light,
.tag.is-light {
  background-color: hsl(0, 0%, 86%) !important;
  color: #000 !important;
}
/* ===== Kalender-Legende ===== */
#calendar-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
#calendar-legend .tag {
  font-size: 0.85rem;
  border-radius: 4px;
  padding: 0.3rem 0.75rem;
  color: #fff;
}

/* Kalender-Navigation: fixe Button-Positionen links/rechts, Monat zentriert */
#calendar-header {
  display: grid;
  grid-template-columns: 40px 1fr 40px; /* links Button – Mitte Label – rechts Button */
  align-items: center;
  gap: .5rem;
  position: relative;
}

#calendar-month {
  text-align: center;
  font-weight: 600;
  white-space: nowrap;       /* verhindert Umbruch bei langen Monatsnamen */
}

#prev-month,
#next-month {
  justify-self: center;      /* sitzt exakt in der 40px-Spalte */
  min-width: 40px;           /* fixe Breite -> wackelt nicht */
  padding-left: 0;
  padding-right: 0;
}

/* Optional: hübsch als kleine runde Pills */
#prev-month.button.is-small,
#next-month.button.is-small {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  line-height: 2.25rem;
  text-align: center;
  padding: 0;
}

/* ===== Footer Styling (farblich an Header angepasst) ===== */
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)) !important;
  color: #fff !important;
  text-align: center;
  padding: 0.75rem 0;
  font-size: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
  z-index: 1000;
}

.footer a {
  color: #fff !important;
  text-decoration: underline;
  font-weight: 600;
}

.footer a:hover {
  color: var(--brand-accent-2) !important;
  text-decoration: none;
}

/* ===== Links ===== */
a {
  color: var(--brand-accent);
  transition: color 0.2s;
}
a:hover {
  color: var(--brand-primary);
}

/* ===== Ausgrauung für deaktivierte Felder ===== */
.input.is-disabled,
.input[disabled] {
  background-color: #f5f5f5 !important;
  border-color: #ddd !important;
  color: #aaa !important;
  cursor: not-allowed !important;
}

/* Tooltip-Stil */
#enddate-help {
  font-style: italic;
  font-size: 0.85rem;
  color: #999;
  margin-top: 0.25rem;
}

.navbar-item.is-active {
  background-color: rgba(255, 255, 255, 0.25) !important;
  font-weight: 700;
  border-bottom: 2px solid var(--brand-accent);
}

/* ===== Slider / Hero Banner (robust) ===== */
.slider-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  background: #fff;
  margin-bottom: 1.5rem;
  padding: 0; /* keine Innenabstände */
}

/* feste Bannerhöhe — nach Wunsch anpassen (z. B. 260–400px) */
.slider-container,
.slider,
.slide,
.slide img {
  height: 320px;
}

.slider { position: relative; width: 100%; }
.slide { position: relative; display: none; }
.slide.is-active { display: block; }

.slide img {
  width: 100%;
  object-fit: cover;      /* schneidet sauber zu */
  object-position: center;
  display: block;
  border-radius: 8px;
}

/* Slider: Textbalken unten, vollbreit, zentriert */
.slide .slide-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 80px;                 /* feste Höhe */
  padding: 0 1rem;
  display: flex;
  align-items: center;           /* vertikal zentriert */
  justify-content: center;       /* horizontal zentriert */
  text-align: center;
  gap: .5rem;                    /* Abstand zw. Titel & Untertext */

  background: rgba(255,255,255,0.68);  /* stärker durchsichtig */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  color: #222;
  border-radius: 0 0 8px 8px;    /* an Bildrundung anpassen */
  z-index: 1;
}

/* Slider: Titel über Text im Balken */
.slide .slide-text {
  display: flex;
  flex-direction: column;   /* <- übereinander statt nebeneinander */
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .25rem;              /* kleiner Abstand zwischen Titel & Text */
  height: 80px;             /* deine fixe Höhe beibehalten */
}

.slide .slide-text .title {
  margin: 0;
  line-height: 1.15;
}

.slide .slide-text p {
  margin: 0;
  line-height: 1.3;
  font-size: .95rem;
}

/* Sicherstellen, dass Bild und Container konsistent sind */
.slider-container,
.slider,
.slide,
.slide img {
  height: 320px;                 /* deine gewünschte Bannerhöhe */
}
.slide img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  display: block;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
  .slider-container,
  .slider,
  .slide,
  .slide img { height: 240px; }

  .slide .slide-text {
    height: 64px;
    padding: 0 .75rem;
  }
  .slide .slide-text .title { font-size: 1rem; }
  .slide .slide-text p      { font-size: .85rem; }
}

/* ===== Slider-Navigation (Buttons) ===== */
.slider-container .slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;                           /* über Bild & Textbalken */
  background: rgba(255,255,255,0.5);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  color: #333;
  transition: background .15s, color .15s, transform .15s;
}

.slider-container .slider-btn:hover {
  background: var(--brand-accent);
  color: #fff;
  transform: translateY(-50%) scale(1.03);
}

.slider-container .slider-btn.prev { left: 8px; }
.slider-container .slider-btn.next { right: 8px; }


/* Optional: auf kleineren Screens etwas kompakter */
@media (max-width: 768px) {
  .slide .slide-text { height: 64px; }
  .slide .slide-text .title { font-size: 1rem; }
  .slide .slide-text p { font-size: .85rem; }
}

/* ===== Dark-Mode-Schutz ===== */
@media (prefers-color-scheme: dark) {
  html, body, .box, .card, .input, .textarea, .navbar, .footer {
    background-color: #fff !important;
    color: var(--text-dark) !important;
  }
}

/* ===== Mobile Anpassungen ===== */
@media (max-width: 768px) {
  .navbar {
    padding: 0.5rem;
  }
  footer, .footer {
    font-size: 0.8rem;
    padding: 0.5rem 0;
  }
}