/* ================================================================
   Webunox Monk - Admin-Stylesheet
   Importiert das AnaCalling-Design-System (_style.css = Quelle der
   Wahrheit fuers Aussehen: Navy #1B3A5C + Teal #0D9488, Inter,
   Tokens + Admin-App-Layer) und erweitert es um Monk-Spezifika:
   das fixe Badge-Vokabular (§5.11) und die Zwei-Bereiche-Sidebar
   (Snapper · Outreach).
   ================================================================ */

@import url('_style.css');

/* --- Badge-Vokabular (fix, §5.11) ---------------------------------
   _style.css liefert nur .badge / .badge-ok|warn|err. Monk-Views
   nutzen status_badge_class() -> diese sieben Klassen. */
.badge-success { background: var(--green-50);   color: var(--green-dark); }
.badge-info    { background: var(--primary-50);  color: var(--primary-light); }
.badge-muted   { background: var(--gray-100);    color: var(--gray-500); }
.badge-warning { background: var(--orange-50);   color: #b45309; }
.badge-danger  { background: var(--red-50);      color: #b91c1c; }
.badge-gold    { background: #FEF3C7;            color: #92400E; }
.badge-outline { background: transparent;        color: var(--gray-600); border: 1px solid var(--gray-300); }

/* --- Sidebar: zwei Bereiche (Snapper · Outreach) ------------------ */
.nav-area-label {
  display: block; padding: .9rem .75rem .35rem;
  font-size: .7rem; font-weight: 700; color: var(--gray-400);
  text-transform: uppercase; letter-spacing: .07em;
}
.sidebar nav a.is-disabled {
  color: var(--gray-300); cursor: not-allowed; pointer-events: none;
  display: flex; align-items: center; gap: .55rem;
}
.sidebar nav a .nav-soon {
  margin-left: auto; font-size: .6rem; font-weight: 700; color: var(--gray-300);
  text-transform: uppercase; letter-spacing: .04em;
}
.sidebar nav a { display: flex; align-items: center; gap: .55rem; }
.sidebar nav a svg { width: 17px; height: 17px; flex-shrink: 0; }

/* --- Login-Logo-Slot ---------------------------------------------- */
.login-box .login-brand {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: 1.5rem; font-weight: 900; color: var(--primary); margin-bottom: .25rem;
}
.login-box .login-brand .dot { color: var(--teal); }

/* --- Empty-State (Partial) ---------------------------------------- */
.empty-state {
  text-align: center; padding: 3rem 1.5rem; color: var(--gray-400);
}
/* display:block explizit, weil `margin: 0 auto` sonst nicht zentriert -
   die neue .icon-Basisregel weiter unten setzt inline-block. */
.empty-state svg { display: block; width: 40px; height: 40px; margin: 0 auto 1rem; color: var(--gray-300); }
.empty-state h3 { font-size: 1.0625rem; font-weight: 700; color: var(--gray-600); margin-bottom: .35rem; }
.empty-state p { font-size: .875rem; color: var(--gray-400); max-width: 420px; margin: 0 auto; }

/* --- Pagination (Partial) ----------------------------------------- */
.pagination { display: flex; gap: .35rem; align-items: center; margin-top: 1.25rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: .4rem .7rem; border-radius: var(--r); font-size: .85rem; font-weight: 600;
  border: 1px solid var(--gray-200); color: var(--gray-600); background: var(--white);
}
.pagination a:hover { border-color: var(--teal); color: var(--teal-dark); }
.pagination .is-current { background: var(--teal); color: #fff; border-color: var(--teal); }
.pagination .is-muted { color: var(--gray-300); }

/* --- Dashboard: Bereichs-Panels ----------------------------------- */
.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.area-card { display: flex; flex-direction: column; gap: .75rem; }
.area-card__head { display: flex; align-items: center; gap: .6rem; }
.area-card__head svg { width: 22px; height: 22px; color: var(--teal); }
.area-card__head h3 { margin: 0; }
.area-card__body { color: var(--gray-500); font-size: .9rem; line-height: 1.6; }
.service-line { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--gray-100); font-size: .875rem; }
.service-line:last-child { border-bottom: none; }

/* --- Flash-Toasts (minimal, ohne JS-Stack) ------------------------ */
.flash-stack { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }

/* --- Desktop-Sidebar einklappen ("Menü einklappen", wie app.anacalling) --- */
/* Brand linksbuendig (Logo flush mit Untertitel) + Icon-only-Variante (nur eingeklappt). */
.sidebar-brand { align-items: flex-start; text-decoration: none; }
.brand-logo--icon { display: none; }
.sidebar-collapse {
  display: flex; align-items: center; gap: .6rem; width: calc(100% - 1.5rem);
  margin: .25rem .75rem .5rem; padding: .55rem .7rem;
  background: none; border: none; border-radius: 8px;
  color: var(--gray-500); font: inherit; cursor: pointer; text-align: left;
}
.sidebar-collapse:hover { background: var(--gray-100); color: var(--gray-800); }
.sidebar-collapse__ico { flex-shrink: 0; transition: transform .15s ease; }
@media (min-width: 1024px) {
  .sidebar { transition: width .15s ease; }
  body.sidebar-collapsed .sidebar { width: 66px; }
  body.sidebar-collapsed .sidebar nav a span,
  body.sidebar-collapsed .sidebar .nav-area-label,
  body.sidebar-collapsed .sidebar .nav-soon,
  body.sidebar-collapsed .sidebar-brand small,
  body.sidebar-collapsed .sidebar-foot .profile-meta,
  body.sidebar-collapsed .sidebar-collapse .nav-label { display: none; }
  body.sidebar-collapsed .sidebar-brand { align-items: center; padding-left: .5rem; padding-right: .5rem; }
  /* Eingeklappt: volles Logo aus, nur das Telefon-Icon in Menue-Icon-Groesse (17px). */
  body.sidebar-collapsed .brand-logo--side { display: none; }
  body.sidebar-collapsed .brand-logo--icon { display: block; width: 17px; height: 17px; margin: 0; }
  body.sidebar-collapsed .sidebar nav a { justify-content: center; }
  body.sidebar-collapsed .sidebar-collapse { justify-content: center; width: auto; margin: .25rem auto .5rem; }
  body.sidebar-collapsed .sidebar-collapse__ico { transform: rotate(180deg); }
  body.sidebar-collapsed .sidebar-foot .profile-card { flex-direction: column; align-items: center; gap: .4rem; }
}

/* --- Topbar-Marke (mobil): Logo + Untertitel statt Text --- */
.topbar__brand { display: flex; flex: 1 1 auto; flex-direction: row; align-items: center; gap: .5rem; text-decoration: none; min-width: 0; overflow: hidden; }
.topbar__brand .brand-logo { max-height: 26px; width: auto; display: block; flex-shrink: 0; }
.topbar__brand small { font-size: .68rem; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-left: .5rem; border-left: 1px solid var(--gray-200); }
@media (max-width: 380px) { .topbar__brand small { display: none; } }

/* --- DEV-SERVER-Badge (orange, sticky oben mittig) — wie app.anacalling --- */
.dev-badge {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 9000;
  background: var(--orange, #F59E0B); color: #fff; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .25rem 1rem; border-radius: 0 0 var(--r, 8px) var(--r, 8px); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12));
  pointer-events: none;   /* reiner Indikator — faengt nie Klicks ab */
}

/* =====================================================================
   UI-Tools (oben rechts): Theme-Toggle (Sonne/Mond) + Sprach-Switch (DE/EN).
   Desktop: .content-topbar (rechtsbuendig oben im Content). Mobile: .topbar.
   ===================================================================== */
.content-topbar {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  margin: -0.25rem 0 1.25rem;
}
@media (max-width: 1024px) { .content-topbar { display: none; } }  /* Mobile nutzt die .topbar */
.topbar .ui-tools { margin-left: auto; }

.ui-tools { display: flex; align-items: center; gap: .5rem; }
.ui-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r);
  background: none; border: 1px solid var(--gray-200); color: var(--gray-600);
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ui-tool:hover { background: var(--gray-100); color: var(--gray-900); border-color: var(--gray-300); }
.ui-tool svg { width: 18px; height: 18px; }

.ui-lang { display: inline-flex; border: 1px solid var(--gray-200); border-radius: var(--r); overflow: hidden; }
.ui-lang__opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 .55rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  color: var(--gray-500); background: none; transition: background .15s ease, color .15s ease;
}
.ui-lang__opt + .ui-lang__opt { border-left: 1px solid var(--gray-200); }
.ui-lang__opt:hover { background: var(--gray-100); color: var(--gray-900); }
.ui-lang__opt.is-active { background: var(--teal); color: #fff; }

/* =====================================================================
   DARK MODE — greift nur bei <html data-theme="dark"> (eingeloggtes Backend).
   Graustufen-/White-Palette invertiert (Slate), plus gezielte Korrekturen.
   Light bleibt der :root-Default aus _style.css.
   ===================================================================== */
[data-theme="dark"] {
  --white:    #1b2433;
  --gray-50:  #0e1622;
  --gray-100: #243044;
  --gray-200: #334155;
  --gray-300: #41506a;
  --gray-400: #8a98ad;
  --gray-500: #a7b4c8;
  --gray-600: #c4cedd;
  --gray-700: #d8e0ea;
  --gray-800: #e8edf4;
  --gray-900: #f3f6fa;

  --primary-50:  #16263a;
  --primary-100: #1d3350;
  --teal-50:     #0e2e2c;
  --green-50:    #0f2a22;
  --orange-50:   #2e2410;
  --red-50:      #2e1717;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.45);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 4px 6px -1px rgba(0,0,0,.5), 0 2px 4px -1px rgba(0,0,0,.4);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,.55), 0 4px 6px -2px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.6);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,.7);
}
[data-theme="dark"] body { background: var(--gray-50); }
[data-theme="dark"] .sidebar nav a.active { color: var(--teal-light); }
[data-theme="dark"] .profile-role { color: var(--teal-light); }

/* Badges/Alerts: Text auf dunklen Tints aufhellen. */
[data-theme="dark"] .badge-success { color: #34d399; }
[data-theme="dark"] .badge-info    { color: #7cb0ff; }
[data-theme="dark"] .badge-warning,
[data-theme="dark"] .badge-warn,
[data-theme="dark"] .alert-warn    { color: #fbbf24; }
[data-theme="dark"] .badge-danger,
[data-theme="dark"] .badge-err,
[data-theme="dark"] .alert-error   { color: #f87171; }
[data-theme="dark"] .badge-ok      { color: #34d399; }
[data-theme="dark"] .alert         { color: #e8edf4; }

/* Tooltip-Bubble fest dunkel (nutzt sonst --gray-900 => hell). */
[data-theme="dark"] .tip__bubble { background: #0b1220; color: #f3f6fa; }

/* Select-Chevron heller, damit auf dunklem Feld sichtbar. */
[data-theme="dark"] .content select,
[data-theme="dark"] .login-box select,
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23a7b4c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}
[data-theme="dark"] .btn-ghost { background: var(--white); color: var(--gray-800); border-color: var(--gray-300); }

/* Campaign-Indicator (hartkodiert hell) im Dark anpassen. */
[data-theme="dark"] .campaign-indicator { background: var(--white); border-color: var(--gray-200); color: var(--gray-800); }

/* Logo im Dark-Mode: NUR die AnaMonk-Wortmarke gegen die Variante mit weißem
   "Ana" tauschen (das Telefon-Icon brand-logo--icon bleibt unangetastet). */
[data-theme="dark"] .brand-logo[src$="anamonk-logo.svg"] { content: url('../img/anamonk-logo-dark.svg'); }

/* --- Volle Arbeitsbreite fuer den Admin-Inhalt ---------------------
   _style.css deckelt `.content` auf 1280px (Zeile ~1067). Auf breiten
   Monitoren bleibt dadurch rechts ein grosser leerer Streifen, waehrend
   die Lead-Tabelle (Firma/Stadt/Kontakt/Quelle/Status) horizontal
   gedraengt wird - bei ueber 100k Datensaetzen genau die falsche
   Prioritaet.

   Bewusst als Override HIER statt als Aenderung in _style.css: das
   Design-System ist die aus anacalling uebernommene Quelle der Wahrheit
   fuers Aussehen und soll aktualisierbar bleiben. Gleiche Spezifitaet,
   spaeter im Cascade -> gewinnt.

   `.shell` ist flex, `.sidebar` fix 256px, `.content` hat `flex: 1` -
   ohne Deckel fuellt es den Rest. Das seitliche Padding bleibt, damit
   der Inhalt nicht am Fensterrand klebt. */
.content { max-width: none; }

/* --- Basisgroesse fuer Inline-Icons --------------------------------
   Icons::render() gibt <svg class="icon" viewBox="0 0 24 24"> aus - OHNE
   width/height. Die Groesse kam bisher ausschliesslich aus kontext-
   abhaengigen Regeln (.btn svg, .sidebar nav a svg, .empty-state svg,
   .area-card__head svg). Jedes Icon ausserhalb dieser Kontexte fiel auf
   `svg { display: block; max-width: 100% }` aus _style.css zurueck und
   wuchs auf die volle Spaltenbreite - sichtbar am external-link-Icon
   neben der Website auf der Lead-Detailseite.

   1em statt fester px: das Icon skaliert mit der Textgroesse daneben.
   Die vier Kontextregeln sind mit (0,1,1) spezifischer als .icon (0,1,0)
   und gewinnen weiterhin - Buttons und Sidebar bleiben unveraendert. */
.icon {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: -0.125em;
  flex-shrink: 0;
}

/* --- Formular-Raster (Benutzerverwaltung) --------------------------
   Mehrspaltig ab genug Platz, sonst einspaltig. auto-fit + minmax
   statt fester Spaltenzahl: passt sich der jetzt vollen Breite an. */
.form-grid {
  display: grid; gap: 1rem 1.25rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.form-grid .form-row { margin: 0; }

/* --- Support-Ansicht (Impersonation) -------------------------------
   Dauerhaft sichtbarer Streifen, solange man als anderer Benutzer
   unterwegs ist. Bewusst auffaellig und ganz oben: der gefaehrlichste
   Zustand der Anwendung darf nicht uebersehen werden - man haelt sich
   sonst fuer sich selbst und wundert sich ueber fehlende Rechte. */
.impersonation-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  padding: .55rem 1rem;
  background: #b45309; color: #fff;
  font-size: .8125rem; font-weight: 600;
}
.impersonation-bar form { margin: 0; }
.impersonation-bar .btn {
  background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.35);
  padding: .25rem .7rem; font-size: .78rem;
}
.impersonation-bar .btn:hover { background: rgba(255,255,255,.28); }

/* ================================================================
   Seiten-Tour (Info-Button in der Topbar)
   Vorbild: betterbeds-appmanager (bbs-info / bbs-tour). Zwei Ebenen:
   ein Panel mit Intro + Start-Knopf, danach das Spotlight-Overlay.
   ================================================================ */

/* --- Panel (Intro / "Anleitung folgt") --- */
.monk-info {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: rgba(15, 23, 42, .55);
}
.monk-info[hidden] { display: none; }
.monk-info-card {
  width: 100%; max-width: 520px; background: var(--white);
  border-radius: var(--r-2xl); box-shadow: var(--shadow-xl); overflow: hidden;
}
.monk-info-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-200);
  font-weight: 800; color: var(--gray-700);
}
.monk-info-close {
  border: 0; background: none; cursor: pointer; line-height: 1;
  font-size: 1.35rem; color: var(--gray-400); padding: 0 .25rem;
}
.monk-info-close:hover { color: var(--gray-700); }
.monk-info-body { padding: 1.25rem; }
.monk-info-body p { font-size: .875rem; color: var(--gray-500); line-height: 1.65; margin: 0 0 1.25rem; }
.monk-info-cta {
  display: flex; flex-direction: column; gap: .15rem; width: 100%;
  padding: .8rem 1rem; border: 0; border-radius: var(--r-lg); cursor: pointer;
  background: var(--primary); color: #fff; text-align: left;
}
.monk-info-cta:hover { filter: brightness(1.08); }
.monk-info-cta span { font-size: .78rem; opacity: .8; font-weight: 500; }
.monk-info-wip { text-align: center; color: var(--gray-400); padding: 1rem 0; }
.monk-info-wip b { display: block; color: var(--gray-600); margin-bottom: .35rem; }

/* --- Spotlight-Overlay ---
   Der Ausschnitt entsteht ueber einen riesigen box-shadow statt eines echten
   Lochs: dadurch bleibt das hervorgehobene Element sichtbar UND anklickbar,
   ohne dass die Seite umgebaut werden muss. */
.monk-tour { position: fixed; inset: 0; z-index: 210; pointer-events: none; }
.monk-tour[hidden] { display: none; }
.monk-tour-spot {
  position: fixed; border-radius: var(--r-lg);
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, .6);
  outline: 2px solid var(--teal); outline-offset: 2px;
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}

.monk-tour-callout {
  position: fixed; width: min(380px, calc(100vw - 28px));
  background: var(--white); border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl); padding: 1rem 1.1rem 1.1rem;
  pointer-events: auto;
}
/* Kein Ziel gefunden -> mittig statt fehlplatziert. */
.monk-tour-callout.center {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, .6), var(--shadow-xl);
}
.monk-tour-skip {
  position: absolute; top: .6rem; right: .75rem;
  border: 0; background: none; cursor: pointer;
  font-size: .72rem; font-weight: 600; color: var(--gray-400);
}
.monk-tour-skip:hover { color: var(--gray-700); }
.monk-tour-eyebrow {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gray-400);
}
.monk-tour-title { font-size: 1rem; font-weight: 800; color: var(--gray-700); margin-bottom: .35rem; }
.monk-tour-text { font-size: .86rem; color: var(--gray-500); line-height: 1.6; }
.monk-tour-text code {
  font-size: .8em; background: var(--gray-100); border-radius: 4px; padding: .1em .35em;
}
.monk-tour-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--gray-100);
}
.monk-tour-dots { display: flex; gap: 5px; }
.monk-tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-200); }
.monk-tour-dots i.on { background: var(--teal); }
.monk-tour-btns { display: flex; gap: .5rem; }

@media (max-width: 640px) {
  .monk-tour-callout { left: 14px !important; right: 14px; width: auto; }
}

/* ================================================================
   Betriebszustands-Streifen (Sandbox / Not-Aus)
   Klebt auf JEDER Seite oben. Der Hinweis stand frueher nur auf dem
   Dashboard - wer direkt auf /leads oder /campaigns arbeitet, sah ihn
   nie und konnte den Sandbox-Modus fuer echten Versand halten. Beide
   Irrtuemer sind teuer, also gehoert der Zustand dauerhaft ins Bild.
   Farbe nach Schwere: Not-Aus rot, Sandbox blaugrau (ein Zustand, kein
   Fehler - Dauerwarnungen in Alarmrot stumpfen ab).
   z-index unter der Support-Leiste (60): laeuft beides, steht der
   gefaehrlichere Zustand oben.
   ================================================================ */
.status-bar {
  position: sticky; top: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .4rem 1rem;
  font-size: .8125rem; font-weight: 600;
  line-height: 1.3;
}
.status-bar .icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.status-bar--sandbox { background: #334155; color: #f1f5f9; }
.status-bar--stop { background: #b91c1c; color: #fff; }

/* Zwei Streifen uebereinander duerfen sich nicht ueberdecken. */
.impersonation-bar + .status-bar { top: 2.35rem; }

@media (max-width: 600px) {
  .status-bar { font-size: .75rem; padding: .35rem .6rem; }
}