/*
 * FWM Social Media Pushout – Gestaltung
 * =====================================
 *
 * Die Farbwerte sind nicht erfunden, sondern aus dem Creatomate-Template
 * templates/modell-1---mit-untertiteln.json uebernommen. Es ist die einzige
 * Stelle im Projekt, an der die Gestaltung der Fuerther Miniaturwelten
 * ueberhaupt festgehalten ist:
 *
 *   #92A230  Akzentgruen   (Element "Endcard-Website")
 *   #111827  Dunkelton     (Element "Endcard-BG")
 *   Montserrat             (alle Textelemente, Schnitte 400/700/900)
 *
 * Wenn im Editor die Markenfarbe geaendert wird, gehoert sie hier nach.
 *
 * Montserrat wird noch nicht mitgeliefert: die woff2-Dateien gehoeren nach
 * app/static/fonts/ und in eine @font-face-Regel. Bis dahin greift die
 * Systemschrift aus --font-family. Bewusst kein Google-Fonts-CDN – aus
 * demselben Grund, aus dem der Server in Deutschland steht.
 *
 * Hell und Dunkel
 * ---------------
 * Drei Zustaende, nicht zwei: „hell", „dunkel" und – als Voreinstellung –
 * „wie das System". Deshalb steht die vollstaendige helle Palette auf dem
 * blanken :root, und die dunklen Werte stehen zweimal: einmal fuer die
 * Systemeinstellung und einmal fuer die ausdrueckliche Wahl. Der
 * Systemblock ist mit :not([data-theme="light"]) abgesichert, damit „ich
 * will hell" auch auf einem dunkel eingestellten System gewinnt.
 */

/* ---------------------------------------------------------------- Farben */

:root {
  color-scheme: light;

  --accent: #92a230;
  --accent-strong: #75831f;
  --accent-contrast: #ffffff;
  /* Akzent mit wenig Deckkraft, fuer Flaechen hinter aktiven Elementen. */
  --accent-wash: rgba(146, 162, 48, 0.12);

  --canvas: #f4f5f2;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --border: #dcdfd6;
  --border-strong: #b9bfae;

  --ink: #111827;
  --ink-muted: #5b6472;
  --ink-faint: #8b93a1;

  --warning: #b45309;
  --warning-bg: #fef3c7;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --success: #15803d;
  --success-bg: #dcfce7;

  --shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 2px 8px rgba(17, 24, 39, 0.05);
  --shadow-raised: 0 4px 12px rgba(17, 24, 39, 0.12);

  /*
   * Kanalfarben. Die Marken gehoeren den jeweiligen Betreibern; hier
   * kennzeichnen sie, wohin eine Karte gehen soll.
   *
   * TikTok fehlt hier mit Absicht: sein Zeichen ist schwarz auf hellem und
   * weiss auf dunklem Grund. Es benutzt --ink und wandert damit von allein
   * mit dem Thema mit.
   */
  --brand-instagram: #e4405f;
  --brand-facebook: #1877f2;
  --brand-youtube: #f00;

  --radius: 8px;
  --radius-sm: 5px;
  --gap: 16px;

  --font-family: "Montserrat", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
}

/* Systemeinstellung „dunkel" – gilt nur, solange niemand ausdruecklich hell
   gewaehlt hat. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --accent: #a8ba3c;
    --accent-strong: #8b9c2c;
    --accent-contrast: #111827;
    --accent-wash: rgba(168, 186, 60, 0.16);

    --canvas: #0d131f;
    --surface: #111827;
    --surface-raised: #1a2334;
    --border: #2a3446;
    --border-strong: #3d4a61;

    --ink: #e8eaed;
    --ink-muted: #9aa3b2;
    --ink-faint: #6b7484;

    --warning: #fbbf24;
    --warning-bg: #422006;
    --danger: #f87171;
    --danger-bg: #450a0a;
    --success: #4ade80;
    --success-bg: #052e16;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.5);

    /* Aufgehellt: die Originalfarben sind fuer weissen Grund gedacht und
       flimmern auf dunklem Grund. */
    --brand-instagram: #f2647f;
    --brand-facebook: #4a9bff;
    --brand-youtube: #ff4d4d;
  }
}

/* Ausdrueckliche Wahl „dunkel" – gewinnt auch auf einem hellen System. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --accent: #a8ba3c;
  --accent-strong: #8b9c2c;
  --accent-contrast: #111827;
  --accent-wash: rgba(168, 186, 60, 0.16);

  --canvas: #0d131f;
  --surface: #111827;
  --surface-raised: #1a2334;
  --border: #2a3446;
  --border-strong: #3d4a61;

  --ink: #e8eaed;
  --ink-muted: #9aa3b2;
  --ink-faint: #6b7484;

  --warning: #fbbf24;
  --warning-bg: #422006;
  --danger: #f87171;
  --danger-bg: #450a0a;
  --success: #4ade80;
  --success-bg: #052e16;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.5);

  --brand-instagram: #f2647f;
  --brand-facebook: #4a9bff;
  --brand-youtube: #ff4d4d;
}

/* --------------------------------------------------------------- Grundlage */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.15rem;
}

a {
  color: var(--accent-strong);
}

/* Tastaturbedienung muss sichtbar bleiben. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- Kopfzeile */

.header {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}

.header__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 13px;
  font-weight: 900;
}

.header__nav {
  display: flex;
  gap: 4px;
  margin-left: 12px;
}

.header__link {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 500;
}

.header__link:hover {
  background: var(--canvas);
  color: var(--ink);
}

.header__link[aria-current="page"] {
  background: var(--accent-wash);
  color: var(--accent-strong);
  font-weight: 700;
}

:root[data-theme="dark"] .header__link[aria-current="page"] {
  color: var(--accent);
}

.header__right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.header__user {
  color: var(--ink-muted);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------- Bausteine */

.content {
  padding: 24px 20px;
}

.panel {
  max-width: 380px;
  margin: 8vh auto 0;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.field {
  margin-bottom: 14px;
}

.field__label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-muted);
}

.field__hint {
  margin-top: 5px;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.button:hover {
  background: var(--accent-strong);
}

.button--block {
  width: 100%;
}

.button--quiet {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink-muted);
  font-weight: 500;
}

.button--quiet:hover {
  background: var(--canvas);
  color: var(--ink);
}

.button--small {
  padding: 5px 10px;
  font-size: 0.8125rem;
}

.button--danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.button--danger:hover {
  background: var(--danger);
  color: var(--surface);
}

.notice {
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.notice--danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.notice--warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.notice--success {
  background: var(--success-bg);
  color: var(--success);
}

/* ---------------------------------------------- Umschalter Hell/Dunkel */

.theme-toggle {
  display: inline-flex;
  padding: 2px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.theme-toggle__button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 24px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.theme-toggle__button:hover {
  color: var(--ink);
}

.theme-toggle__button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: var(--shadow);
}

:root[data-theme="dark"] .theme-toggle__button[aria-pressed="true"] {
  color: var(--accent);
}

/* -------------------------------------------------------------- Board */

/*
 * Fuenf Spalten nebeneinander, gleich breit. Auf schmalen Bildschirmen
 * bleiben sie nebeneinander und das Board scrollt seitlich – ein Kanban mit
 * untereinander gestapelten Spalten verliert genau das, was ihn ausmacht:
 * den Blick auf den ganzen Ablauf.
 */
.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 12px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 8px;
}

.column {
  display: flex;
  flex-direction: column;
  min-height: 120px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.column__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 6px;
}

.column__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.column__count {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--canvas);
  color: var(--ink-faint);
  font-size: 0.75rem;
  font-weight: 700;
}

.column__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Damit auch eine leere Spalte ein Ziel zum Ablegen bietet. */
  min-height: 40px;
  padding: 0 8px 8px;
}

.column__footer {
  padding: 0 8px 8px;
}

.column__add {
  width: 100%;
  padding: 7px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-faint);
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.column__add:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.column__new {
  padding: 8px;
  background: var(--surface-raised);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
}

.column__new-input {
  margin-bottom: 8px;
}

.column__new-actions {
  display: flex;
  gap: 6px;
}

/* --------------------------------------------------------------- Kachel */

.card {
  padding: 9px 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  cursor: grab;
}

.card:hover {
  border-left-color: var(--accent);
}

/* Waehrend des Ziehens: die Luecke am Zielort, und die Kachel am Mauszeiger. */
.card--ghost {
  opacity: 0.35;
}

.card--dragging {
  box-shadow: var(--shadow-raised);
}

.card__link {
  text-decoration: none;
  color: inherit;
}

.card__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.chip {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--canvas);
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Ein ueberfaelliges Zieldatum ist die eine Sache, die auf einer Kachel
   auffallen muss, ohne dass man sie oeffnet. */
.chip--overdue {
  background: var(--danger-bg);
  color: var(--danger);
}

/*
 * Kanal-Abzeichen: nur das Symbol, kein Text. Bei bis zu vier Kanaelen je
 * Karte waeren ausgeschriebene Namen zu breit, und Kuerzel wie „In" und „Ti"
 * muss man erst lesen – das Zeichen erkennt man im Vorbeischauen.
 * Der Name steht im aria-label und in der Sprechblase.
 */
.chip--channel {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: var(--canvas);
}

.channel-icon {
  display: block;
}

.channel-icon--instagram {
  color: var(--brand-instagram);
}

.channel-icon--facebook {
  color: var(--brand-facebook);
}

.channel-icon--youtube {
  color: var(--brand-youtube);
}

/* TikTok ist einfarbig schwarz bzw. weiss – die Textfarbe wandert von allein
   mit dem Thema mit. */
.channel-icon--tiktok {
  color: var(--ink);
}

/* Rueckfall, wenn ein Kanal ohne Symbol dazukommt. Sichtbar haesslich, damit
   es auffaellt – tests/test_channel_icons.py schlaegt dann ohnehin fehl. */
.channel-icon--missing {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--danger);
}

.chip--stage {
  background: var(--accent-wash);
  color: var(--accent-strong);
  font-size: 0.8125rem;
  padding: 3px 10px;
}

.card__status {
  margin: 7px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.card__status--running {
  color: var(--accent-strong);
}

.card__status--failed {
  color: var(--danger);
  font-weight: 700;
}

.card__error {
  margin: 4px 0 0;
  padding: 5px 7px;
  border-radius: 3px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.75rem;
}

.card__hints {
  margin: 7px 0 0;
  padding-left: 15px;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------- Kartendetail */

.detail {
  max-width: 1100px;
  margin: 0 auto;
}

.detail__back {
  margin: 0 0 10px;
  font-size: 0.875rem;
}

.detail__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.detail__header h1 {
  margin: 0;
}

.detail__columns {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 800px) {
  .detail__columns {
    grid-template-columns: 1fr;
  }
}

.detail__main,
.detail__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.box {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.box h2 {
  margin-top: 0;
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.detail__actions {
  display: flex;
  gap: 8px;
}

.channel-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.channel-choice__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  cursor: pointer;
}

.channel-choice__item input {
  width: auto;
  accent-color: var(--accent);
}

.notice__list {
  margin: 6px 0 0;
  padding-left: 18px;
}

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__item {
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.timeline__item:last-child {
  border-bottom: none;
}

.timeline__text {
  display: block;
}

.timeline__meta {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--ink-faint);
}