/*!
 * scheduled_sending – Elastic skin overrides (Dark + Light)
 * Datei:  plugins/scheduled_sending/skins/elastic/styles.css
 * Changelog:
 *  - Definiert Variablen für Light/Dark
 *  - Kompakter, dunkler Balken (wie Screenshot)
 *  - saubere Styles für <input type="datetime-local"> und Button
 *  - Icon-Fix (Font "Icons", weight 900)
 */

/* ------------------------------------------------------------------
   Globale Variablen (Light-Defaults)
   ------------------------------------------------------------------ */
:root {
  /* Basisfarben, von den Regeln unten via var(...) genutzt */
  --body-bg: #ffffff;
  --border:  #dddddd;
  --text:    #222222;
  --muted:   #666a70;

  /* Akzentfarbe (Hover/Fokus) */
  --accent:  #4a90e2;
}

/* ------------------------------------------------------------------
   Dark-Mode-Overrides
   Roundcube setzt bei Dark Mode die Klasse .dark-mode am Root.
   ------------------------------------------------------------------ */
.dark-mode {
  /* etwas heller als der Compose-Hintergrund, damit der Balken erkennbar ist */
  --body-bg: #262b30;  /* Balken-Hintergrund */
  --border:  #3a4046;  /* Kontur */
  --text:    #e6e9ed;  /* Text im Balken */
  --muted:   #a6adb5;  /* dezentere Label-/Icon-Farbe */
  --accent:  #63aaff;  /* Fokus/Hover im Dark Mode */
}

/* ------------------------------------------------------------------
   Inline-Sendeleiste (Container)
   ------------------------------------------------------------------ */

#ss-inline-schedule.ss-row{
  margin: 6px 0;
  padding: 6px 8px;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  display: flex;
  gap: .5rem;
  align-items: center;
  background: var(--body-bg, #fff);
  color: var(--text, inherit);
  line-height: 1.25;
}

/* etwas kompakter, wenn der Platz eng wird */
@media (max-width: 900px) {
  #ss-inline-schedule.ss-row{
    flex-wrap: wrap;
    gap: .4rem .5rem;
  }
}

/* Label / Piktogramm */
#ss-inline-schedule .ss-label{
  font-weight: 600;
  color: var(--text, inherit);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* Uhr-Icon vor "Send at" / "Später senden" (falls die Liste das Icon nutzt) */
.listing.iconized tr.scheduled_sending > td.section:before {
  content: "\f017";
  font-family: Icons;   /* Elastic alias für Font Awesome */
  font-weight: 900;     /* Solid */
  display: inline-block;
  margin-right: .35rem;
  opacity: .9;
  color: var(--muted, #666);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------------
   Eingabefelder (Datetime, ggf. weitere Inputs)
   ------------------------------------------------------------------ */

#ss-inline-schedule input,
#ss-inline-schedule select {
  height: 28px;               /* kompakt wie im Screenshot */
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border, #ddd);
  background: color-mix(in srgb, var(--body-bg, #fff) 92%, #000 8%);
  color: var(--text, inherit);
  box-shadow: none;
}

/* Kalender-/Zeit-Icon im Feld (Browser-UI) sichtbar halten */
#ss-inline-schedule input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.1); /* in Dark etwas heller */
  opacity: .9;
}

/* Fokuszustand dezent, aber sichtbar */
#ss-inline-schedule input:focus,
#ss-inline-schedule select:focus {
  outline: none;
  border-color: var(--accent, #4a90e2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #4a90e2) 30%, transparent);
}

/* ------------------------------------------------------------------
   Buttons (z. B. "Send later")
   ------------------------------------------------------------------ */

#ss-inline-schedule button,
#ss-inline-schedule .button,
#ss-inline-schedule a.button {
  height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid var(--border, #ddd);
  background: transparent;
  color: var(--text, inherit);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  white-space: nowrap;
}

#ss-inline-schedule button:hover,
#ss-inline-schedule .button:hover,
#ss-inline-schedule a.button:hover {
  border-color: var(--accent, #4a90e2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #4a90e2) 25%, transparent);
}

#ss-inline-schedule button:active,
#ss-inline-schedule .button:active,
#ss-inline-schedule a.button:active {
  transform: translateY(0.5px);
}

/* Wenn der Button ein primärer Aktionsknopf sein soll (optional aktivieren)
#ss-inline-schedule .ss-primary {
  background: var(--accent, #4a90e2);
  color: #fff;
  border-color: var(--accent, #4a90e2);
}
#ss-inline-schedule .ss-primary:hover {
  filter: brightness(1.05);
}
*/

/* ------------------------------------------------------------------
   Feinschliff / Hover
   ------------------------------------------------------------------ */

#ss-inline-schedule.ss-row:hover {
  /* ganz leichter Kontrast-Boost, in Light + Dark subtil */
  filter: brightness(1.02);
}

/* Muted-Texte im Balken (z. B. Platzhalter, Hilfetexte) */
#ss-inline-schedule .ss-muted {
  color: var(--muted, #666);
}

/* Optional: Abstand zum darüberliegenden Header minimieren */
.compose-headers #ss-inline-schedule.ss-row {
  margin-top: 4px;
}