/* Capita Recordings Manager — "Klar"
 * Gleiche Design-Sprache wie die uebrigen Capita Web-Tools (Inter + JetBrains Mono,
 * heller SaaS-Look, Capita-Rot als Akzent), Dark/Light pro Nutzer. Keine Emojis.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
  color-scheme: light;
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#fbfcfd;
  --ink:#191d25; --ink-2:#444b59; --muted:#7e8696; --faint:#aab0bd;
  --border:#e1e4ea; --line:#eef0f3; --hover:#f4f6fb;
  --accent:#d2232a; --accent-dark:#a81b21; --accent-soft:#fbe9ea; --accent-ink:#a81b21;
  --ok:#1f9d6b; --ok-bg:#e7f6ef; --ok-ink:#0e6e49;
  --warn-bg:#fdf3e2; --warn-line:#f0d8a8; --warn-ink:#8a5b06;
  --abt-bg:#eef1f6; --proj-bg:#f7f9fc; --proj-line:#c3ccd9;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --radius:12px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(25,29,37,.04), 0 4px 16px -8px rgba(25,29,37,.10);
  --shadow-lg:0 12px 36px -12px rgba(25,29,37,.22), 0 2px 6px rgba(25,29,37,.06);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0f1421; --surface:#161d2b; --surface-2:#1a2230;
  --ink:#e8edf5; --ink-2:#aeb8c8; --muted:#828ea0; --faint:#5a6476;
  --border:#28313f; --line:#1f2733; --hover:#1c2533;
  --accent:#e2474d; --accent-dark:#c43a40; --accent-soft:#3a1d20; --accent-ink:#f08a8e;
  --ok:#3fc28a; --ok-bg:#16302440; --ok-ink:#5fd6a3;
  --warn-bg:#3a2e1640; --warn-line:#4d3c1c; --warn-ink:#e0b969;
  --abt-bg:#1e2738; --proj-bg:#19212e; --proj-line:#33404f;
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 6px 18px -10px rgba(0,0,0,.55);
  --shadow-lg:0 14px 40px -14px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px; -webkit-font-smoothing: antialiased; }

/* ---- header ---- */
header { background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; padding: 13px 26px; position: sticky; top: 0; z-index: 40; }
header h1 { font-size: 17px; margin: 0; font-weight: 800; letter-spacing: -.02em; }
header .sub { color: var(--faint); font-size: 12px; font-weight: 500; }
header .spacer, .toolbar .spacer { flex: 1; }
header .user { color: var(--muted); font-size: 13px; }

/* ---- buttons ---- */
button { font: inherit; cursor: pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 8px 14px;
  transition: background .15s, border-color .15s; }
button:hover { background: var(--bg); border-color: var(--faint); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
button.link { border: none; background: none; color: var(--accent); padding: 3px 7px; font-size: 13px; font-weight: 600; }
button.link.mut { color: var(--muted); }
button.link:hover { background: var(--bg); text-decoration: none; }
.theme-toggle { padding: 7px 9px; display: inline-flex; align-items: center; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.icon-btn { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 4px 7px;
  display: inline-flex; align-items: center; vertical-align: middle; color: var(--ink-2); }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.icon-btn svg { width: 15px; height: 15px; display: block; }
.icon-btn.save:hover { color: var(--ok); border-color: var(--ok); }

/* ---- layout ---- */
main { max-width: 1100px; margin: 0 auto; padding: 26px 26px 60px; }
nav.tabs { display: flex; gap: 4px; margin-bottom: 18px; }
nav.tabs button { border: 1px solid transparent; background: none; color: var(--ink-2);
  border-radius: 10px; padding: 9px 16px; font-weight: 600; font-size: 14px; }
nav.tabs button:hover { background: var(--bg); }
nav.tabs button.active { background: var(--ink); color: var(--surface); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 16px; }
.card h2 { font-size: 16px; margin: 0 0 4px; font-weight: 700; letter-spacing: -.01em; }
.hint { color: var(--muted); margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; }
.hint b { color: var(--ink-2); }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }

select, input[type=text], input[type=number] {
  font: inherit; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
select:hover, input:hover { border-color: var(--faint); }
select:focus-visible, input:focus-visible, button:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
nav.tabs button:focus-visible, button.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
input#manage-filter { width: 320px; max-width: 100%; }
input[type=number] { width: 66px; text-align: right; }

/* ---- grid ---- */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th { text-align: left; padding: 8px 11px; color: var(--muted); font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); }
table.grid th.num { text-align: right; }
table.grid td { padding: 7px 11px; border-bottom: 1px solid var(--line); vertical-align: middle; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.nowrap { white-space: nowrap; }

/* group header rows */
tr.grp { user-select: none; }
.treetoggle { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.treetoggle:hover { color: var(--accent); }
tr.grp-abt td { background: var(--abt-bg); font-size: 13px; padding: 9px 11px; border-top: 1px solid var(--border); }
tr.grp-abt b { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
tr.grp-proj td { background: var(--proj-bg); border-left: 3px solid var(--proj-line); }
.chev { display: inline-block; width: 14px; color: var(--muted); font-size: 10px; }

td.lvl1 { padding-left: 30px; font-weight: 600; }
td.lvl2 { padding-left: 50px; }
tr.leaf:hover td { background: var(--hover); }
tr.leaf td { border-left: 3px solid transparent; }

/* badges / chips */
.badge { display: inline-block; background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 1px 9px; font-size: 11px; margin-left: 8px; }
.badge.ok { color: var(--ok-ink); border-color: transparent; background: var(--ok-bg); }
.tag { background: var(--line); border-radius: 7px; padding: 2px 9px; font-size: 11.5px; color: var(--muted); }
.qlabel { font-size: 13px; }
.pct { color: var(--muted); margin: 0 4px 0 2px; }
.muted { color: var(--muted); font-size: 12px; }
small.meta { color: var(--muted); font-size: 11.5px; font-family: var(--mono); }

/* language badges */
.lang { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px;
  border-radius: 6px; font-size: 11px; font-weight: 700; color: #fff; margin-right: 8px; background: #64748b; }
.lang-D { background: #2f6bd6; } .lang-F { background: #1f9d6b; }
.lang-I { background: #c98a1a; } .lang-E { background: #7857c8; }

/* states */
.banner { padding: 12px 15px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13px; }
.banner.ro { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.banner.ro b { color: var(--warn-ink); }

#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-left: 4px solid var(--ok);
  box-shadow: var(--shadow-lg); padding: 12px 18px; border-radius: var(--radius); font-weight: 600; font-size: 13.5px;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 200; max-width: 90vw; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { border-left-color: var(--accent); }

.center { text-align: center; padding: 80px 20px; min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.center h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.center .muted { font-size: 14px; }
.center button.primary { margin-top: 14px; }
.hidden { display: none !important; }

/* skeleton */
.sk { display: inline-block; background: var(--line); border-radius: 6px; position: relative; overflow: hidden; vertical-align: middle; height: 12px; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--hover), transparent); animation: sk 1.3s infinite; }
@keyframes sk { 100% { transform: translateX(100%); } }

@media (max-width: 720px) {
  main { padding: 18px 14px 50px; }
  header { padding: 11px 16px; flex-wrap: wrap; }
  input#manage-filter { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }