/*
 * TimeTracker Theme (Lumo-basiert).
 * Uebernommen aus _custom_calendar.scss des Alt-Projekts: die Kategoriefarben
 * cat-1 .. cat-9 fuer Kalendereintraege und Firmen-Kategorien.
 */

html {
  /*
   * Kategoriefarben unveraendert aus _custom_calendar.scss des Altsystems
   * uebernommen: gesaettigte Grundfarben bei 80 % Deckkraft.
   */
  --tt-cat-1: rgba(0, 153, 255, 0.8);
  --tt-cat-2: rgba(51, 204, 51, 0.8);
  --tt-cat-3: rgba(255, 255, 0, 0.8);
  --tt-cat-4: rgba(255, 153, 0, 0.8);
  --tt-cat-5: rgba(255, 64, 0, 0.8);
  --tt-cat-6: rgba(153, 77, 0, 0.8);
  --tt-cat-7: rgba(128, 0, 128, 0.8);
  --tt-cat-8: rgba(128, 128, 128, 0.8);
  --tt-cat-9: rgba(255, 0, 255, 0.8);
}

/*
 * Das Altsystem setzte Text- und Rahmenfarbe auf darken(Grundfarbe, 50%) - bei
 * allen neun Farben laeuft das rechnerisch auf Schwarz hinaus. Uebernommen wird
 * deshalb schwarze Schrift mit duennem schwarzen Rahmen.
 *
 * Abweichung: bei cat-6 (Braun) und cat-7 (Violett) ist der Untergrund so
 * dunkel, dass schwarze Schrift kaum lesbar ist - dort steht sie auf Weiss.
 */
.fc .fc-event.cat-1 { background-color: var(--tt-cat-1); }
.fc .fc-event.cat-2 { background-color: var(--tt-cat-2); }
.fc .fc-event.cat-3 { background-color: var(--tt-cat-3); }
.fc .fc-event.cat-4 { background-color: var(--tt-cat-4); }
.fc .fc-event.cat-5 { background-color: var(--tt-cat-5); }
.fc .fc-event.cat-6 { background-color: var(--tt-cat-6); }
.fc .fc-event.cat-7 { background-color: var(--tt-cat-7); }
.fc .fc-event.cat-8 { background-color: var(--tt-cat-8); }
.fc .fc-event.cat-9 { background-color: var(--tt-cat-9); }

.fc .fc-event[class*="cat-"] {
  border: 1px solid rgba(0, 0, 0, 0.75);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/*
 * FullCalendar faerbt den Eintragstext von Haus aus weiss. Die Regel muss
 * deshalb auch die inneren Elemente treffen, sonst bleibt die Schrift hell.
 */
.fc .fc-event[class*="cat-"],
.fc .fc-event[class*="cat-"] .fc-event-main,
.fc .fc-event[class*="cat-"] .fc-event-title,
.fc .fc-event[class*="cat-"] .fc-event-title-container,
.fc .fc-event[class*="cat-"] .fc-event-time {
  color: #000;
}

.fc .fc-event.cat-6,
.fc .fc-event.cat-6 .fc-event-main,
.fc .fc-event.cat-6 .fc-event-title,
.fc .fc-event.cat-6 .fc-event-title-container,
.fc .fc-event.cat-6 .fc-event-time,
.fc .fc-event.cat-7,
.fc .fc-event.cat-7 .fc-event-main,
.fc .fc-event.cat-7 .fc-event-title,
.fc .fc-event.cat-7 .fc-event-title-container,
.fc .fc-event.cat-7 .fc-event-time {
  color: #fff;
}


/*
 * Navigation: horizontal in der Navbar auf breiten Schirmen, im Drawer auf
 * schmalen. Ersetzt Responsive.makeResponsive() und den handgebauten
 * Toggle-Button aus dem alten TimeTrackerMenu.
 */
@media (min-width: 901px) {
  .tt-drawer-toggle,
  .tt-nav-drawer {
    display: none;
  }
}

@media (max-width: 900px) {
  .tt-nav-navbar {
    display: none;
  }
  .tt-nav-drawer {
    width: 100%;
  }
  /* Auf dem Telefon reichen Avatar und Titel - Name und Version kosten zu viel Platz. */
  .tt-benutzername,
  .tt-version {
    display: none;
  }
}

/*
 * Versionsnummer neben dem Titel: hochgestellt und dezent, sie soll ablesbar
 * sein, ohne den Blick zu ziehen.
 */
.tt-version {
  align-self: flex-start;
  margin-top: 0.15em;
}

/* Der Verweis auf die alte Version ist kein Teil der Anwendung - abgesetzt. */
.tt-altsystem {
  color: var(--lumo-secondary-text-color);
}

.tt-nav-navbar .tt-altsystem {
  margin-inline-start: var(--lumo-space-m);
}

.tt-nav-drawer vaadin-tab {
  justify-content: flex-start;
}

/* Kategorie-Kennzeichen in Firmenliste und Auswahlliste */
.kategorie-kennzeichen {
  display: inline-block;
  min-width: 2em;
  padding: 0 var(--lumo-space-xs);
  border-radius: var(--lumo-border-radius-s);
  text-align: center;
}
.kategorie-kennzeichen.cat-1 { background-color: var(--tt-cat-1); }
.kategorie-kennzeichen.cat-2 { background-color: var(--tt-cat-2); }
.kategorie-kennzeichen.cat-3 { background-color: var(--tt-cat-3); }
.kategorie-kennzeichen.cat-4 { background-color: var(--tt-cat-4); }
.kategorie-kennzeichen.cat-5 { background-color: var(--tt-cat-5); }
.kategorie-kennzeichen.cat-6 { background-color: var(--tt-cat-6); }
.kategorie-kennzeichen.cat-7 { background-color: var(--tt-cat-7); }
.kategorie-kennzeichen.cat-8 { background-color: var(--tt-cat-8); }
.kategorie-kennzeichen.cat-9 { background-color: var(--tt-cat-9); }

/*
 * Kalendereintraege: mehrzeilige Beschriftungen. Das Altsystem setzte dafuer
 * HTML-Captions mit <br/>; hier sind es Zeilenumbrueche im Titel.
 */
.fc .fc-event-title {
  white-space: pre-line;
  line-height: 1.2;
}
.fc .fc-event {
  border-width: 1px;
  font-size: var(--lumo-font-size-xs);
}
/*
 * Zeilenhoehe des Zeitrasters. Mit Viertelstunden-Raster gibt es viermal so
 * viele Zeilen pro Stunde wie zuvor Halbstunden-Zeilen - ohne Anpassung waere
 * der Kalender viermal so hoch.
 */
.fc .fc-timegrid-slot {
  height: 1.1em;
}
/* Nur die Stundenzeilen bekommen eine deutliche Linie */
.fc .fc-timegrid-slot-lane:not(.fc-timegrid-slot-minor) {
  border-top-color: var(--lumo-contrast-20pct);
}

/*
 * Kompakte Kalender-Kopfleiste. FullCalendar liefert von Haus aus recht grosse
 * Schaltflaechen und einen grossen Zeitraum-Titel; im Aufgabenfenster zaehlt
 * jede Zeile Hoehe fuer das Zeitraster.
 */
.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: var(--lumo-space-xs);
  padding: 0 var(--lumo-space-xs);
  min-height: 0;
}
.fc .fc-toolbar-title {
  font-size: var(--lumo-font-size-m);
  font-weight: 500;
}
.fc .fc-button {
  padding: 0.15em 0.5em;
  font-size: var(--lumo-font-size-s);
}
/* Anklickbare Tagesueberschriften als solche kenntlich machen */
.fc .fc-col-header-cell-cushion {
  cursor: pointer;
}
.fc .fc-col-header-cell-cushion:hover {
  text-decoration: underline;
}

/* Kategorie-Kennzeichen in der Firmenliste: Text ebenfalls schwarz bzw. weiss */
.kategorie-kennzeichen { color: #000; }
.kategorie-kennzeichen.cat-6,
.kategorie-kennzeichen.cat-7 { color: #fff; }

/* Kurzhilfe zur Markdown-Schreibweise: Schreibweise links, Ergebnis rechts */
.md-hilfe-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lumo-space-s);
  align-items: start;
  border-top: 1px solid var(--lumo-contrast-10pct);
  padding-top: var(--lumo-space-xs);
}
.md-hilfe-quelltext {
  margin: 0;
  white-space: pre-wrap;
  font-size: var(--lumo-font-size-xs);
  background: var(--lumo-contrast-5pct);
  border-radius: var(--lumo-border-radius-s);
  padding: var(--lumo-space-xs);
}
.md-hilfe-ergebnis {
  font-size: var(--lumo-font-size-s);
}
.md-hilfe-ergebnis > :first-child { margin-top: 0; }
.md-hilfe-ergebnis > :last-child { margin-bottom: 0; }
.md-hilfe-ergebnis h1,
.md-hilfe-ergebnis h2,
.md-hilfe-ergebnis h3 {
  font-size: var(--lumo-font-size-m);
  margin: 0.2em 0;
}
@media (max-width: 700px) {
  .md-hilfe-zeile { grid-template-columns: 1fr; }
}