/* ============================================================================
   TOOLS-MODUL – Launcher für n8n-Workflows
   Eigene Datei, ans CI angelehnt. Alle Klassen mit tl- gepräfixt, damit nichts
   mit globalem style.css kollidiert. Buttons & .page-header kommen aus dem
   globalen Stylesheet (bewusst wiederverwendet). --rc = Bereichs-Akzentfarbe,
   wird je Element inline gesetzt (style="--rc:#...").
   ============================================================================ */

.tl-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--accent-primary);margin-bottom:6px}

/* ---- Suche ---- */
.tl-search{display:flex;align-items:center;gap:11px;background:var(--bg-card);
  border:1px solid var(--border-color);border-radius:var(--border-radius-sm);
  padding:13px 16px;margin-bottom:28px;transition:.16s}
.tl-search:focus-within{border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(245,190,77,.1)}
.tl-search i{width:19px;height:19px;color:var(--text-muted);flex-shrink:0}
.tl-search input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);
  font-family:inherit;font-size:.97rem}
.tl-search input::placeholder{color:var(--text-muted)}

/* ============ THEMEN-RÄUME (Übersicht) ============ */
.tl-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.tl-rooms{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tl-rooms{grid-template-columns:1fr}}

.tl-room{position:relative;display:block;cursor:pointer;text-decoration:none;color:inherit;
  border:1px solid var(--border-color);border-radius:var(--border-radius);padding:24px;overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb,var(--rc) 14%,transparent) 0%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb,var(--rc) 4%,var(--bg-card)), var(--bg-card));
  opacity:0;transform:translateY(10px);animation:tlRise .5s forwards}
.tl-room:nth-child(2){animation-delay:.05s}.tl-room:nth-child(3){animation-delay:.1s}
.tl-room:nth-child(4){animation-delay:.15s}.tl-room:nth-child(5){animation-delay:.2s}
.tl-room:nth-child(6){animation-delay:.25s}
@keyframes tlRise{to{opacity:1;transform:none}}
.tl-room:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--rc) 50%,var(--border-color));
  box-shadow:0 16px 40px -12px color-mix(in srgb,var(--rc) 45%,transparent)}

.tl-room-ghost{position:absolute;right:-22px;bottom:-30px;color:var(--rc);opacity:.07;
  pointer-events:none;transition:.3s}
.tl-room-ghost i{width:140px;height:140px;stroke-width:1.4}
.tl-room:hover .tl-room-ghost{opacity:.12;transform:scale(1.05) rotate(-4deg)}

.tl-room-ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  margin-bottom:15px;background:color-mix(in srgb,var(--rc) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--rc) 30%,transparent)}
.tl-room-ic i{width:24px;height:24px;color:var(--rc)}
.tl-room h3{font-size:1.18rem;font-weight:700;letter-spacing:-.4px;margin-bottom:4px;line-height:1.2}
.tl-room p{font-size:.85rem;color:var(--text-muted);margin-bottom:18px}
.tl-room-foot{display:flex;align-items:center;gap:9px}
.tl-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;
  font-size:.76rem;font-weight:600;background:var(--bg-tertiary);color:var(--text-secondary)}
.tl-chip i{width:13px;height:13px;color:var(--text-muted)}
.tl-chip.tl-beta{background:color-mix(in srgb,var(--accent-primary) 16%,transparent);color:var(--accent-primary)}
.tl-chip.tl-beta i{color:var(--accent-primary)}
.tl-room-enter{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.82rem;
  font-weight:700;color:var(--rc);opacity:0;transform:translateX(-6px);transition:.2s;position:relative;z-index:1}
.tl-room-enter i{width:16px;height:16px}
.tl-room:hover .tl-room-enter{opacity:1;transform:none}

/* ============ BEREICHSSEITE ============ */
.tl-crumb{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-muted);margin-bottom:18px}
.tl-crumb a{color:var(--text-secondary);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.tl-crumb a:hover{color:var(--accent-primary)}
.tl-crumb i{width:15px;height:15px}

.tl-cat-hero{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.tl-cat-hero-ic{width:58px;height:58px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--rc) 18%,transparent);border:1px solid color-mix(in srgb,var(--rc) 30%,transparent)}
.tl-cat-hero-ic i{width:28px;height:28px;color:var(--rc)}
.tl-cat-hero h1{font-size:1.8rem;font-weight:800;letter-spacing:-.6px;line-height:1.1}
.tl-cat-hero p{color:var(--text-muted);font-size:.95rem;margin-top:2px}
.tl-cat-hero .tl-spacer{flex:1}

.tl-cat-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.tl-cat-toolbar .tl-search{flex:1;margin:0}
.tl-beta-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.84rem;
  font-weight:600;color:var(--text-secondary);white-space:nowrap}
.tl-beta-toggle input{display:none}
.tl-beta-toggle .tl-sw{width:34px;height:20px;border-radius:20px;background:var(--bg-tertiary);
  border:1px solid var(--border-color);position:relative;transition:.15s}
.tl-beta-toggle .tl-sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--text-muted);transition:.15s}
.tl-beta-toggle input:checked + .tl-sw{background:var(--accent-primary);border-color:var(--accent-primary)}
.tl-beta-toggle input:checked + .tl-sw::after{left:16px;background:#1a1407}

/* ---- Tool-Karten ---- */
.tl-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.tl-tool{position:relative;display:flex;flex-direction:column;gap:11px;background:var(--bg-card);
  border:1px solid var(--border-color);border-radius:var(--border-radius);padding:19px 20px;
  text-decoration:none;color:inherit;transition:.18s;overflow:hidden;
  opacity:0;transform:translateY(8px);animation:tlRise .45s forwards}
.tl-tool:nth-child(2){animation-delay:.04s}.tl-tool:nth-child(3){animation-delay:.08s}
.tl-tool:nth-child(4){animation-delay:.12s}.tl-tool:nth-child(5){animation-delay:.16s}
.tl-tool:nth-child(6){animation-delay:.2s}
.tl-tool:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--rc) 50%,var(--border-color));
  box-shadow:0 14px 34px -14px color-mix(in srgb,var(--rc) 45%,transparent)}
.tl-tool:hover .tl-t-open{color:var(--rc)}
.tl-tool:hover .tl-t-open i{transform:translate(2px,-2px)}
.tl-t-top{display:flex;align-items:center;gap:12px}
.tl-t-ic{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--rc) 15%,transparent);border:1px solid color-mix(in srgb,var(--rc) 26%,transparent)}
.tl-t-ic i{width:21px;height:21px;color:var(--rc)}
.tl-t-title{font-size:1rem;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;line-height:1.25}
.tl-t-desc{font-size:.85rem;color:var(--text-muted);min-height:38px}
.tl-t-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:11px;
  border-top:1px solid var(--border-color)}
.tl-t-open{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:700;
  color:var(--text-secondary);transition:.15s}
.tl-t-open i{width:15px;height:15px;transition:.15s}
.tl-t-host{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted)}
.tl-beta-badge{font-size:.6rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:2px 7px;
  border-radius:6px;background:color-mix(in srgb,var(--accent-primary) 16%,transparent);color:var(--accent-primary);
  border:1px solid color-mix(in srgb,var(--accent-primary) 30%,transparent)}
.tl-inactive-badge{font-size:.6rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:2px 7px;
  border-radius:6px;background:var(--bg-tertiary);color:var(--text-muted);border:1px solid var(--border-color)}
.tl-tool.is-inactive{opacity:.55}

/* ---- Admin-Buttons auf Karten (nur Manager) ---- */
.tl-card-admin{position:absolute;top:10px;right:10px;display:flex;gap:6px;opacity:0;transition:.15s;z-index:2}
.tl-tool:hover .tl-card-admin{opacity:1}
.tl-card-admin button{width:30px;height:30px;border-radius:8px;border:1px solid var(--border-color);
  background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}
.tl-card-admin button:hover{background:var(--bg-hover);color:var(--text-primary)}
.tl-card-admin button.tl-del:hover{color:var(--status-danger,#e5484d);border-color:var(--status-danger,#e5484d)}
.tl-card-admin button i{width:15px;height:15px}
.tl-card-admin form{margin:0}

/* ---- Empty-State ---- */
.tl-empty{text-align:center;padding:60px 20px;color:var(--text-muted)}
.tl-empty i{width:34px;height:34px;margin-bottom:12px}
.tl-empty h3{font-size:1.05rem;font-weight:600;color:var(--text-secondary);margin-bottom:4px}
.tl-hidden{display:none}

/* ============ ADMIN-MODAL ============ */
.tl-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:flex-start;
  justify-content:center;padding:60px 20px;z-index:1000;backdrop-filter:blur(3px)}
.tl-overlay.tl-show{display:flex}
.tl-modal{width:100%;max-width:520px;background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--border-radius);box-shadow:0 24px 70px rgba(0,0,0,.55);overflow:hidden}
.tl-modal-head{display:flex;justify-content:space-between;align-items:center;padding:19px 23px;
  border-bottom:1px solid var(--border-color)}
.tl-modal-head h3{font-size:1.12rem;font-weight:700;display:flex;align-items:center;gap:9px}
.tl-modal-head h3 i{width:19px;height:19px;color:var(--accent-primary)}
.tl-x{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px}
.tl-x i{width:20px;height:20px}
.tl-modal-body{padding:21px 23px;display:flex;flex-direction:column;gap:16px;max-height:65vh;overflow:auto}
.tl-field{display:flex;flex-direction:column;gap:6px}
.tl-field label{font-size:.8rem;font-weight:600;color:var(--text-secondary)}
.tl-field .tl-hint{font-size:.72rem;color:var(--text-muted);font-weight:400}
.tl-field input,.tl-field textarea,.tl-field select{background:var(--bg-tertiary);border:1px solid var(--border-color);
  border-radius:var(--border-radius-sm);padding:10px 12px;color:var(--text-primary);font-family:inherit;
  font-size:.9rem;outline:none}
.tl-field input:focus,.tl-field textarea:focus,.tl-field select:focus{border-color:var(--accent-primary)}
.tl-field textarea{resize:vertical;min-height:58px}
.tl-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tl-toggle-row{display:flex;gap:22px;flex-wrap:wrap}
.tl-toggle{display:flex;align-items:center;gap:9px;cursor:pointer}
.tl-toggle input{display:none}
.tl-switch{width:38px;height:22px;border-radius:20px;background:var(--bg-tertiary);border:1px solid var(--border-color);
  position:relative;transition:.15s}
.tl-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--text-muted);transition:.15s}
.tl-toggle input:checked + .tl-switch{background:var(--accent-primary);border-color:var(--accent-primary)}
.tl-toggle input:checked + .tl-switch::after{left:18px;background:#1a1407}
.tl-toggle span{font-size:.88rem;font-weight:600}
.tl-icon-preview{display:flex;align-items:center;gap:10px}
.tl-icon-preview .tl-pv{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent-primary) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-primary) 22%,transparent)}
.tl-icon-preview .tl-pv i{width:20px;height:20px;color:var(--accent-primary)}
.tl-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 23px;border-top:1px solid var(--border-color);
  background:var(--bg-tertiary)}

@media(prefers-reduced-motion:reduce){.tl-room,.tl-tool{animation:none!important}}
@media(max-width:600px){.tl-row2{grid-template-columns:1fr}}