/* ============================================================
   smattex Mission Control — Design-System-Tokens + App-Styles
   Quelle Tokens: design/handoff/_ds/.../colors_and_type.css
   Fonts self-hosted (kein Google-Import — Daten bleiben bei uns).
   ============================================================ */

@font-face {
  font-family: "Nordique Pro";
  src: url("/public/fonts/nordique-pro-semibold.woff2") format("woff2"),
       url("/public/fonts/nordique-pro-semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/public/fonts/DMSans-Variable.woff2") format("woff2"),
       url("/public/fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --color-primary:         #0070C0;
  --color-primary-dark:    #005a9e;
  --color-primary-light:   #e6f2fb;
  --color-secondary:       #65C08A;
  --color-secondary-dark:  #4fa070;
  --color-secondary-light: #eaf7f0;
  /* Neutrals */
  --color-dark:      #171D1C;
  --color-dark-80:   #3d4342;
  --color-dark-60:   #6b706f;
  --color-grey:      #D8D8D8;
  --color-grey-mid:  #BFBFBF;
  --color-grey-light:#E8E8E8;
  /* Backgrounds */
  --color-bg:       #FFFFFF;
  --color-bg-light: #F9F9F9;
  --color-bg-grey:  #F2F2F2;
  --color-white:    #FFFFFF;
  /* Semantic */
  --color-success: #65C08A;
  --color-error:   #D94F4F;
  --color-warning: #F5A623;
  --color-info:    #0070C0;
  /* Type */
  --font-display: 'Nordique Pro', 'DM Sans', sans-serif;
  --font-body:    'DM Sans', 'Open Sans', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, 'Courier New', monospace;
  /* Radius / shadow / transition */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --transition-base: all 0.2s ease;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--color-dark);
  background: var(--color-bg-light);
  display: flex;
  height: 100vh;
  overflow: hidden;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-grey); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }
input::placeholder, textarea::placeholder { color: var(--color-grey-mid); }
a { color: var(--color-primary); text-decoration: none; transition: var(--transition-base); }
a:hover { color: var(--color-primary-dark); }
code, .mono { font-family: var(--font-mono); font-size: 12.5px; }

/* ---------- sidebar ---------- */
.sidebar {
  width: 238px; flex-shrink: 0;
  background: var(--color-white);
  border-right: 1px solid var(--color-grey-light);
  display: flex; flex-direction: column;
  padding: 20px 0;
}
.sidebar .logo { padding: 0 20px 18px; }
.sidebar .logo img { height: 24px; display: block; }
.sidebar .app-title { padding: 0 20px 18px; }
.sidebar .app-title .t { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--color-dark); letter-spacing: -0.01em; }
.sidebar .app-title .s { font-size: 12px; color: var(--color-dark-60); margin-top: 1px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500; cursor: pointer;
  color: var(--color-dark-80); background: transparent;
  transition: var(--transition-base);
}
.nav-item:hover { background: var(--color-bg-grey); color: var(--color-dark); }
.nav-item.active { background: var(--color-primary-light); color: var(--color-primary-dark); }
.nav-item.active:hover { color: var(--color-primary-dark); }
.nav-item svg { flex-shrink: 0; }
.sidebar .user {
  margin: auto 8px 0; padding: 16px 8px 0;
  border-top: 1px solid var(--color-grey-light);
  display: flex; align-items: center; gap: 10px;
}
.sidebar .user .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-primary-light); color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; flex-shrink: 0;
}
.sidebar .user .name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.sidebar .user .role { font-size: 11px; color: var(--color-dark-60); line-height: 1.25; }

/* ---------- main ---------- */
main { flex: 1; overflow-y: auto; }
.content { max-width: 1180px; margin: 0 auto; padding: 30px 34px 64px; }
.page-head { margin-bottom: 22px; }
.page-head h1 { font-family: var(--font-display); font-size: 28px; font-weight: 600; margin: 0; letter-spacing: -0.01em; color: var(--color-dark); }
.page-head .sub { font-size: 14px; color: var(--color-dark-60); margin-top: 3px; }
.back {
  background: none; border: none; color: var(--color-primary);
  font-size: 13.5px; font-weight: 500; cursor: pointer; padding: 0;
  margin-bottom: 16px; font-family: var(--font-body);
  display: inline-flex; align-items: center; gap: 5px;
}

/* ---------- cards ---------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card.pad { padding: 20px 22px; }
.card-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; }

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.kpi { padding: 18px 20px; }
.kpi .label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-dark-60); }
.kpi .value { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-top: 8px; line-height: 1; color: var(--color-dark); }
.kpi .sub { font-size: 12.5px; margin-top: 6px; color: var(--color-dark-60); }
.kpi .sub.err { color: var(--color-error); font-weight: 600; }

/* ---------- services grid ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.svc {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border: 1px solid var(--color-grey-light);
  border-radius: 10px; background: var(--color-bg-light);
}
.svc .tile {
  width: 30px; height: 30px; border-radius: 8px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; flex-shrink: 0;
}
.svc .n { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.svc .st { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--color-dark-60); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ---------- grid tables (handoff style) ---------- */
.gt-head {
  display: grid; padding: 11px 20px;
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-grey-light);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-dark-60);
}
.gt-head.bordered { border-top: 1px solid var(--color-grey-light); }
.gt-row {
  display: grid; padding: 12px 20px;
  border-bottom: 1px solid var(--color-grey-light);
  font-size: 13.5px; align-items: center;
}
.gt-row:last-child { border-bottom: none; }
/* Klickbare Tabellenzeile (Dashboard „Letzte Läufe" → Automation-Detail):
   neutralisiert die globale Link-Farbe, Hover wie .nav-item. */
a.gt-row { color: inherit; }
a.gt-row:hover { background: var(--color-bg-grey); color: inherit; }
.right { text-align: right; }
.muted { color: var(--color-dark-60); }
.dark80 { color: var(--color-dark-80); }
.gt-empty { padding: 22px 20px; font-size: 13.5px; color: var(--color-dark-60); }

/* ---------- badges ---------- */
.badge {
  display: inline-block; padding: 3px 11px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge.success { background: var(--color-secondary-light); color: var(--color-secondary-dark); }
.badge.partial { background: #fbf0d6; color: #a9750d; }
.badge.error   { background: #fae1e1; color: var(--color-error); }
.badge.running { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge.neutral { background: #eee; color: #555; }
/* Ein Badge, das ein SCHALTER ist (Nik 15.09.2026: „schaut nicht aus wie ein klickbarer
   Button"). Ein flaches Badge liest sich als Zustandsanzeige — erst Rahmen, Zeiger und ein
   Hover, der sich bewegt, sagen „hier kann man klicken". Die Farbe kommt weiter von
   .badge.success/.partial, der Rahmen nimmt sie über currentColor auf. */
button.badge {
  border: 1px solid currentColor;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  transition: var(--transition-base);
}
button.badge:hover { filter: brightness(0.95); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
button.badge:active { transform: translateY(1px); }
button.badge:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.abadge {
  display: inline-block; padding: 2px 9px; border-radius: 5px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.abadge.green { background: var(--color-secondary-light); color: var(--color-secondary-dark); }
.abadge.blue  { background: var(--color-primary-light); color: var(--color-primary-dark); }
.abadge.grey  { background: var(--color-bg-grey); color: var(--color-dark-60); }
.abadge.amber { background: #fbf0d6; color: #a9750d; }
.abadge.red   { background: #fae1e1; color: var(--color-error); }
.chip-cat {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 5px;
  background: var(--color-bg-grey); color: var(--color-dark-80); white-space: nowrap;
}
.chip-origin { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 5px; white-space: nowrap; }
.chip-origin.human { background: var(--color-primary-light); color: var(--color-primary-dark); }
.chip-origin.auto  { background: var(--color-secondary-light); color: var(--color-secondary-dark); }

/* ---------- buttons ---------- */
.btn {
  background: var(--color-primary); color: #fff; border: none;
  border-radius: var(--radius-md); padding: 8px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--font-body); transition: var(--transition-base);
  text-decoration: none; display: inline-block;
}
.btn:hover { background: var(--color-primary-dark); color: #fff; }
.btn.lg { padding: 10px 18px; font-size: 14px; white-space: nowrap; }
.btn-ghost {
  background: none; border: 1px solid var(--color-grey); border-radius: var(--radius-md);
  padding: 7px 14px; font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: var(--font-body); color: var(--color-dark-80); transition: var(--transition-base);
}
.btn-ghost:hover { border-color: var(--color-grey-mid); }
.btn-ghost.danger { color: var(--color-error); }
/* Gesperrt muss man sehen — sonst wirkt ein toter Knopf wie ein kaputter. */
.btn:disabled, .btn-ghost:disabled { opacity: .45; cursor: default; }
.btn:disabled:hover { background: var(--color-primary); }
.btn-ghost:disabled:hover { border-color: var(--color-grey); }
.pg-btn {
  width: 30px; height: 30px; border: 1px solid var(--color-grey); border-radius: var(--radius-md);
  background: var(--color-white); color: var(--color-dark-80); font-size: 15px; cursor: pointer;
  font-family: var(--font-body); padding: 0; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.pg-btn.off { color: var(--color-grey); cursor: default; pointer-events: none; }
.mv-btn {
  width: 24px; height: 24px; border: 1px solid var(--color-grey); border-radius: 6px;
  background: var(--color-white); color: var(--color-dark-80); font-size: 13px; line-height: 1;
  cursor: pointer; font-family: var(--font-body); padding: 0;
}
.mv-btn:disabled { color: var(--color-grey); cursor: default; }
/* Papierkorb auf der Todo-Karte: unauffällig, bis man draufzeigt — löschen ist endgültig. */
.mv-btn.danger { color: var(--color-dark-60); }
.mv-btn.danger:hover { color: var(--color-white); background: var(--color-error); border-color: var(--color-error); }

/* ---------- switch ---------- */
.switch {
  width: 38px; height: 22px; border-radius: var(--radius-full);
  background: var(--color-grey); position: relative; cursor: pointer;
  flex-shrink: 0; transition: var(--transition-base); border: none; padding: 0; display: inline-block;
}
.switch.on { background: var(--color-secondary); }
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: var(--transition-base);
}
.switch.on .knob { left: 18px; }

/* ---------- inputs ---------- */
.input {
  padding: 8px 12px; border: 1px solid var(--color-grey); border-radius: var(--radius-md);
  font-size: 13px; font-family: var(--font-body); outline: none; background: var(--color-white);
  color: var(--color-dark);
}
.input:focus { border-color: var(--color-primary); }
.search-wrap { position: relative; margin-bottom: 22px; }
.search-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
.search-input {
  width: 100%; padding: 14px 16px 14px 44px; border: 1px solid var(--color-grey);
  border-radius: 10px; font-size: 15px; font-family: var(--font-body); outline: none;
  box-shadow: var(--shadow-xs); background: var(--color-white); color: var(--color-dark);
}
.search-input:focus { border-color: var(--color-primary); }
select.input { appearance: none; -webkit-appearance: none; cursor: pointer; }
.select-wrap { position: relative; display: inline-flex; }
.select-wrap .arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-dark-60); font-size: 11px; }

/* ---------- filter chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  border-radius: var(--radius-full); font-size: 12.5px; font-weight: 500; cursor: pointer;
  background: var(--color-white); color: var(--color-dark-80);
  border: 1px solid var(--color-grey); font-family: var(--font-body); transition: var(--transition-base);
}
.fchip:hover { border-color: var(--color-grey-mid); }
.fchip.on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.fchip .cnt { font-size: 11px; opacity: 0.75; }

/* ---------- expandable (details) ---------- */
details.exp > summary { list-style: none; cursor: pointer; }
details.exp > summary::-webkit-details-marker { display: none; }
details.exp .chev { color: var(--color-dark-60); transition: var(--transition-base); display: inline-block; }
details.exp[open] .chev { transform: rotate(90deg); }

/* ---------- tool catalog ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 40px; }
.tool-group .head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.tool-group .tile {
  width: 20px; height: 20px; border-radius: 5px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 10px; flex-shrink: 0;
}
.tool-group .mod { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-primary); }
.tool-group .tool { margin-bottom: 8px; }
.tool-group .tname { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--color-dark); }
.tool-group .tdesc { font-size: 12px; color: var(--color-dark-60); line-height: 1.35; }

/* ---------- kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.kcol { background: var(--color-bg-grey); border-radius: var(--radius-lg); padding: 14px; min-height: 200px; }
.kcol .head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 0 4px; }
.kcol .head .t { font-size: 13.5px; font-weight: 600; }
.kcol .head .cnt { font-size: 12px; color: var(--color-dark-60); background: var(--color-white); border-radius: var(--radius-full); padding: 1px 8px; }
.kcol .cards { display: flex; flex-direction: column; gap: 8px; }
.kcard {
  background: var(--color-white); border: 1px solid var(--color-grey-light);
  border-radius: 10px; box-shadow: var(--shadow-xs); padding: 12px 14px;
}
.kcard .t { font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.kcard .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.kcard .by { font-size: 11.5px; color: var(--color-dark-60); }

/* ---------- artifacts ---------- */
.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.art-card { overflow: hidden; cursor: pointer; transition: var(--transition-base); display: block; color: inherit; }
.art-card:hover { box-shadow: var(--shadow-md); color: inherit; }
.art-card .thumb {
  height: 96px; background: var(--color-primary-light);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--color-grey-light);
}
.art-card .body { padding: 16px 18px; }
.art-card .t { font-size: 15px; font-weight: 600; }
.art-card .src {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--color-dark-60);
  background: var(--color-bg-grey); padding: 2px 7px; border-radius: 5px;
}
.art-card .upd { font-size: 12px; color: var(--color-dark-60); margin-top: 10px; }
.art-frame { width: 100%; border: none; display: block; height: 72vh; background: var(--color-white); }

/* Artefakt-Viewer vollflächig (Nik 2026-08-18): Breite + Höhe des Fensters nutzen statt
   1180px-Spalte mit 72vh-iframe — der Bericht selbst ist die Seite, kein Kasten in Graufläche. */
.content--full { max-width: none; height: 100%; display: flex; flex-direction: column; padding: 14px 18px 16px; }
.content--full .art-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.content--full .art-view .art-frame { flex: 1; height: auto; min-height: 0; }
.art-view-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--color-grey-light);
}
.art-view-head .back { margin: 0; white-space: nowrap; }
.art-view-head h1 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0; }
.art-view-head .meta { margin-left: auto; font-size: 12.5px; color: var(--color-dark-60); white-space: nowrap; }

/* ---------- knowledge cards ---------- */
.k-list { display: flex; flex-direction: column; gap: 10px; }
.k-card { overflow: hidden; }
.k-card summary {
  padding: 16px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.k-card .t { font-size: 15px; font-weight: 600; }
.k-card .meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.k-card .meta .d { font-size: 12px; color: var(--color-dark-60); }
.k-card .k-body { padding: 0 20px 18px; border-top: 1px solid var(--color-grey-light); }
.k-card .k-body p { font-size: 14px; line-height: 1.6; color: var(--color-dark-80); margin: 16px 0; white-space: pre-wrap; }
.k-card .k-foot { display: flex; align-items: center; gap: 16px; }
.k-card mark { background: var(--color-primary-light); color: var(--color-primary-dark); border-radius: 3px; padding: 0 2px; }
.k-form { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; }
.k-form .row { display: flex; gap: 10px; flex-wrap: wrap; }
.k-form textarea { min-height: 120px; resize: vertical; }

/* ---------- misc ---------- */
.banner {
  padding: 10px 14px; border-radius: var(--radius-md); font-size: 13px; margin-bottom: 16px;
}
.banner.warn { background: #fbf0d6; color: #a9750d; border: 1px solid #f2dfae; }
.pager { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
.pager .info { font-size: 12.5px; color: var(--color-dark-60); }
.pager .nav { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--color-dark-80); }
.cfg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cfg-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border: 1px solid var(--color-grey-light); border-radius: 10px;
}
.cfg-item .t { font-size: 13.5px; font-weight: 600; }
.cfg-item .s { font-size: 12px; color: var(--color-dark-60); }
.run-items-wrap { background: var(--color-bg-light); border-bottom: 1px solid var(--color-grey-light); padding: 6px 20px 14px; }
.ri-head {
  display: grid; grid-template-columns: 1fr 150px 1.3fr; padding: 9px 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-dark-60);
}
.ri-row {
  display: grid; grid-template-columns: 1fr 150px 1.3fr; padding: 10px 12px;
  background: var(--color-white); border: 1px solid var(--color-grey-light); border-radius: var(--radius-md);
  margin-bottom: 6px; font-size: 13px; align-items: center;
}
.ri-row .item { font-family: var(--font-mono); font-size: 12.5px; }

/* ---------- Apps: Social-Media Kommentare (/ui/apps/social) ---------- */
.sc-group { margin-bottom: 22px; }
.sc-group > summary {
  cursor: pointer; padding: 10px 4px; font-size: 14px;
  border-bottom: 1px solid var(--color-grey-light); margin-bottom: 12px;
}
.sc-group > summary .muted { margin-left: 8px; font-size: 12.5px; }
.sc-card { padding: 16px 18px; margin-bottom: 12px; }
/* Ohne Entwurf = hier ist noch Arbeit; farbige Kante statt eigener Karte, damit die Liste ruhig bleibt. */
.sc-nodraft { border-left: 3px solid var(--color-warning); }
.sc-done { background: var(--color-bg-light); }
.sc-failed { border-left: 3px solid var(--color-error); }
.sc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.sc-post { font-size: 12.5px; color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.sc-post:hover { text-decoration: underline; }
.sc-posttext { font-size: 12px; margin-top: 4px; }
.sc-text { margin: 10px 0; font-size: 14px; line-height: 1.55; color: var(--color-dark); }
.sc-thread { margin: 8px 0 10px; }
.sc-thread > summary { cursor: pointer; font-size: 12.5px; color: var(--color-dark-60); }
.sc-tl {
  margin-top: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.5;
  background: var(--color-bg-light); border-radius: var(--radius-md);
}
.sc-tl-self { background: var(--color-primary-light); }
.sc-draft { width: 100%; margin-top: 8px; font-family: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.sc-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sc-limit { font-size: 12px; margin-left: auto; }
.sc-bulk {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 20px;
  background: var(--color-white); border: 1px solid var(--color-grey-light); border-radius: var(--radius-md);
}
.sc-bulk .muted { font-size: 12.5px; flex: 1; min-width: 240px; }
.sc-hint { margin: 0 0 12px; }
.sc-ideas { margin-bottom: 26px; }
.sc-idea { padding: 14px 16px; margin-bottom: 10px; }
.sc-idea-top { border-left: 3px solid var(--color-primary); }
.sc-idea-head { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.sc-idea-angle { margin: 8px 0; font-size: 13.5px; line-height: 1.55; }
.sc-idea-meta { font-size: 12.5px; line-height: 1.5; margin-top: 4px; }
.sc-gaps { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; }
.sc-manuell { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; background: var(--color-primary-light); color: var(--color-dark); }
.sc-kopiert { font-size: 12.5px; margin-top: 8px; }
.sc-kopiert:empty { display: none; }

/* ---------- Apps: Shorts-Tool (/ui/apps/shorts) ---------- */
.sh-kalkopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sh-monat { font-size: 16px; font-weight: 600; min-width: 190px; text-align: center; }
.sh-gitter {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  background: var(--color-white); border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-md); padding: 10px; margin-bottom: 22px;
}
.sh-wochentag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-dark-60); padding: 4px 6px;
}
.sh-tag {
  min-height: 86px; border: 1px solid var(--color-grey-light); border-radius: 8px;
  padding: 5px 6px; background: var(--color-white);
}
/* Tage ausserhalb des Monats und vergangene Tage treten zurueck — Toms Blick soll auf den
   planbaren Tagen liegen. */
.sh-fremd { background: var(--color-bg-light); opacity: 0.55; }
.sh-vergangen .sh-tagzahl { color: var(--color-grey); }
.sh-heute { border-color: var(--color-primary); }
/* „Ein Video pro Tag" ist die Regel — belegte Tage muessen erkennbar sein (Auftrag 5.1). */
.sh-belegt { background: var(--color-primary-light); }
.sh-tagzahl { font-size: 11.5px; color: var(--color-dark-60); margin-bottom: 3px; }
.sh-kachel {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  border-radius: 6px; padding: 5px 6px; margin-bottom: 4px;
  border-left: 3px solid var(--color-grey-mid); background: var(--color-white);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.sh-kachel:hover { box-shadow: var(--shadow-md); }
.sh-aktiv { outline: 2px solid var(--color-primary); }
.sh-entwurf { border-left-color: var(--color-warning); }
.sh-geplant { border-left-color: var(--color-primary); }
.sh-veroeffentlicht { border-left-color: var(--color-secondary); cursor: default; }
.sh-fehler { border-left-color: var(--color-error); background: #fdf3f3; }
.sh-zeit { font-size: 11px; font-weight: 600; color: var(--color-dark-60); }
.sh-titel { font-size: 12px; line-height: 1.3; margin: 1px 0 3px; }
.sh-netze { display: flex; gap: 3px; flex-wrap: wrap; }
.sh-net {
  font-size: 9px; font-weight: 700; letter-spacing: 0.02em;
  padding: 1px 4px; border-radius: 3px; background: #eee; color: #555;
}
.sh-net.pend { background: var(--color-primary-light); color: var(--color-primary-dark); }
.sh-net.pub  { background: var(--color-secondary-light); color: var(--color-secondary-dark); }
.sh-net.err  { background: #fae1e1; color: var(--color-error); }
.sh-net.draft { background: #fbf0d6; color: #a9750d; }
/* Drag & Drop: Zielhervorhebung setzt app.js */
.sh-tag.sh-ziel { outline: 2px dashed var(--color-primary); background: var(--color-primary-light); }
.sh-kachel.sh-zieht { opacity: 0.45; }

.sh-detail { padding: 18px 20px; }
.sh-detailkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sh-thema { font-size: 13px; line-height: 1.5; margin-top: 4px; max-width: 70ch; }
.sh-hinweis { margin: 12px 0 0; }
.sh-zeile { display: flex; align-items: flex-end; gap: 16px; margin: 14px 0; flex-wrap: wrap; }
.sh-kurz { max-width: 260px; }
.sh-drive { font-size: 13px; color: var(--color-primary); text-decoration: none; padding-bottom: 8px; }
.sh-drive:hover { text-decoration: underline; }
.sh-befunde { margin: 0 0 14px; }
.sh-befunde ul { margin: 6px 0 0; padding-left: 20px; }
.sh-block { border: 1px solid var(--color-grey-light); border-radius: var(--radius-md); margin-bottom: 8px; }
.sh-block > summary { cursor: pointer; padding: 10px 14px; font-size: 13.5px; }
.sh-block[open] > summary { border-bottom: 1px solid var(--color-grey-light); }
.sh-check { display: block; padding: 10px 14px 0; font-size: 13px; }
.sh-meta { padding: 4px 14px 0; font-size: 12px; }
.sh-feld { display: block; padding: 10px 14px; font-size: 12.5px; color: var(--color-dark-60); }
.sh-feld > span { display: block; margin-bottom: 4px; }
.sh-feld .input { width: 100%; font-size: 13.5px; color: var(--color-dark); }
.sh-feld textarea.input { font-family: inherit; line-height: 1.5; resize: vertical; }
.sh-zaehler { display: block; text-align: right; font-size: 11.5px; margin-top: 3px; color: var(--color-dark-60); }
.sh-zaehler.warn { color: #a9750d; }
.sh-zaehler.over { color: var(--color-error); font-weight: 600; }
.sh-aktionen { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.sh-status { white-space: nowrap; }
.sh-ergebnis { margin-bottom: 14px; }
.sh-fehlerzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
/* Retry sitzt dauerhaft am Fehler in der Detailansicht, nicht nur im Antwort-Banner. */
.sh-fehler-aktion { margin-top: 10px; }
/* Neutrale Hinweise brauchen eine Fläche: Ein .banner ohne .warn hat keine und ginge im Text unter. */
.sh-ki-hinweis, .sh-prod-meldung { background: var(--color-primary-light); color: var(--color-dark); border: 1px solid #cfe3f3; }
.sh-ki-hinweis div { margin-top: 3px; }

/* Produktion (seit 30.09.2026): drei Spalten = der Weg eines Shorts — schneiden lassen,
   fertig melden, prüfen & einplanen. */
.sh-prod { padding: 16px 18px; margin-bottom: 18px; }
.sh-prod-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sh-prod-spalte h3 { font-size: 14px; margin: 0 0 4px; }
.sh-prod-erkl { font-size: 12.5px; line-height: 1.45; margin-bottom: 10px; }
.sh-prod-zeile {
  border: 1px solid var(--color-grey-light); border-radius: var(--radius-md);
  padding: 10px 12px; margin-bottom: 8px; background: var(--color-white);
}
.sh-prod-name { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.sh-prod-name a, .sh-prod-name .sh-drive { padding: 0; font-size: 13.5px; color: var(--color-primary); text-decoration: none; }
.sh-prod-name a:hover { text-decoration: underline; }
.sh-prod-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-top: 4px; }
.sh-prod-hinweis { font-size: 12.5px; line-height: 1.45; margin-top: 6px; color: var(--color-dark-60); }
.sh-prod-warn { color: #a9750d; }
.sh-prod-fehler { color: var(--color-error); }
.sh-prod-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sh-prod-aktionen .muted { font-size: 12.5px; overflow-wrap: anywhere; }
.sh-prod-wahl { max-width: 100%; font-size: 12.5px; }
.sh-prod-leer { font-size: 12.5px; line-height: 1.45; padding: 4px 0; }
.sh-prod-meldung { margin: 0 0 12px; }
@media (max-width: 1100px) { .sh-prod-spalten { grid-template-columns: 1fr; } }

/* ---------- mobile (Nik 2026-08-18): Sidebar → sticky Topbar, Grids einspaltig ----------
   Die App war bis hier reine Desktop-Ansicht (238px-Sidebar neben dem Inhalt) — auf dem
   Handy blieben dem Inhalt ~150px (Screenshot 18.08.). Ein Breakpoint, drei Prinzipien:
   Navigation als horizontal scrollbare Topbar, alle Karten-Grids kollabieren, der
   Artefakt-Viewer nutzt die volle dynamische Viewport-Höhe (dvh wegen iOS-Adressleiste). */
@media (max-width: 820px) {
  body { flex-direction: column; height: auto; min-height: 100dvh; overflow: visible; }
  main { overflow: visible; }
  .sidebar {
    width: 100%; flex-direction: row; align-items: center; gap: 2px;
    padding: 10px 12px; border-right: none; border-bottom: 1px solid var(--color-grey-light);
    position: sticky; top: 0; z-index: 30;
  }
  .sidebar .logo { padding: 0 10px 0 2px; }
  .sidebar .logo img { height: 20px; }
  .sidebar .app-title, .sidebar .user { display: none; }
  .sidebar nav {
    flex-direction: row; gap: 2px; padding: 0; flex: 1; min-width: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .nav-item { padding: 8px 10px; white-space: nowrap; font-size: 13px; }
  .content { padding: 16px 14px 44px; }
  .page-head h1 { font-size: 22px; }
  .kpi-grid, .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tools-grid, .kanban, .art-grid, .cfg-grid { grid-template-columns: 1fr; }
  .ri-head { display: none; }
  .ri-row { grid-template-columns: 1fr; gap: 4px; }
  /* Artefakt-Viewer: body scrollt jetzt selbst → height:100% trägt nicht mehr; dvh-Anker.
     58px ≈ Topbar, weitere ~66px Kopfzeile der Karte. */
  .content--full { height: auto; min-height: calc(100dvh - 58px); padding: 8px 8px 10px; }
  .content--full .art-view { min-height: calc(100dvh - 80px); }
  .content--full .art-view .art-frame { min-height: 420px; }
  .art-view-head { padding: 10px 12px; gap: 6px 10px; }
  .art-view-head h1 { font-size: 15px; }
  .art-view-head .meta { margin-left: 0; white-space: normal; width: 100%; }
}
@media (max-width: 820px) {
  /* Grid-Tabellen (Automationen, Letzte Läufe …) stapeln: Inline-Spalten überstimmen. */
  .gt-head { display: none; }
  .gt-row { grid-template-columns: 1fr !important; gap: 6px; }
}