/* =================================================================================================
   Datei: /public_crm/_inc/crm.css
   Stand: Layout Referenz + CTI/User Fixes (aufgeräumt) + State-Chips konsolidiert
   ================================================================================================= */

/* =================================================================================================
   0) ROOT / BASICS
   ================================================================================================= */

:root{
  --gap: 16px;
  --radius: 12px;
  --border: 1px solid rgba(0,0,0,.12);
  --shadow: 0 6px 18px rgba(0,0,0,.06);
  --pad: 16px;
  --maxw: 1200px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --bg-page: #f6f7f9;   /* außen */
  --bg-app:  #ffffff;  /* Rahmen */
  --bg-main: #f6f7f9;  /* Contentfläche */

  /* Inputs / Buttons / Chips (zentral, kein mehrfaches :root) */
  --crm-input-h: 36px;

  --crm-fieldchip-h: 34px;

  --crm-btn-h: 34px;
  --crm-btn-h-sm: 30px;
  --crm-btn-radius: 10px;
  --crm-btn-pad-x: 12px;

  --crm-btn-bg: #fff;
  --crm-btn-bg-hover: rgba(0,0,0,.03);

  --crm-btn-border: rgba(0,0,0,.18);
  --crm-btn-border-primary: rgba(0,0,0,.22);
  --crm-btn-border-danger: rgba(220,38,38,.35);
}

*{ box-sizing:border-box; }

html{ scrollbar-gutter: stable; }

body{
  margin:0;
  font-family: var(--font);
  background: var(--bg-page);
  color:#111;
}

body.has-overlay{
  overflow: hidden;
  height: 100vh;
}

a{ color:inherit; text-decoration:none; }

/* =================================================================================================
   1) HEADER / BARS
   ================================================================================================= */

.app-header{
  position: sticky;
  top: 0;
  z-index: 1500;
}

/* Full-width Balken */
.bar{
  width:100%;
  background: var(--bg-app);
}

/* Inhaltsspur (senkrecht zum Content ausgerichtet) */
.bar__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Topnav */
.topnav{
  border-bottom: var(--border);
}

.topnav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 0;
}

/* Links: darf wachsen & schrumpfen (wichtig für CTI) */
.topnav__left{
  display:flex;
  gap:14px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  padding-left: 10px;
}

.topnav__item{
  font-size:13px;
  font-weight:700;
  padding:4px 8px;
  border-radius:6px;
  border:1px solid transparent;
}

.topnav__item:hover{ background: rgba(0,0,0,.04); }

.topnav__item--active{
  background: rgba(162,190,229,.35);
  border-color: rgba(0,123,255,.22);
}

/* Rechts: kein Umbruch (CTI + User) */
.topnav__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
  white-space:nowrap;
  padding-right: 10px;
}

.navbtn{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.16);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  font-size:16px;
}

.navbtn--quick.is-active{
  background: rgba(30, 120, 255, .12);
  border-color: rgba(30, 120, 255, .55);
}

.navbtn:hover{
  background:rgba(0,0,0,.04);
}

.topnav__user{ font-size:11px; opacity:.7; }

.topnav__logout{
  font-size:11px;
  padding:3px 7px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.16);
  background:#fff;
}

.topnav__logout:hover{ background: rgba(0,0,0,.04); }

/* Subnav */
.subnav{
  background: var(--bg-main);
  border-bottom: var(--border);
}

.subnav__inner{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:8px 0;
  padding-left: 10px;
  padding-right: 10px;
}

.subnav__chip{
  font-size:11px;
  padding:4px 8px;
  border-radius:10px;
  border:1px solid transparent;
}

.subnav__chip:hover{ background: rgba(0,0,0,.04); }

.subnav__chip--active{
  background: rgba(162,190,229,.35);
  border-color: rgba(0,123,255,.22);
}

/* =================================================================================================
   2) USER MENU (FLYOUT)
   ================================================================================================= */

.userbox{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.userbtn{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.16);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.userbtn:hover{ background: rgba(0,0,0,.04); }

.userbtn svg{
  width: 16px;
  height: 16px;
  display: block;
}

.userfly{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  overflow: hidden;
  display: none;
  z-index: 2000;
}

.userbox.is-open .userfly{ display: block; }

.userfly__head{
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
}

.userfly__body{
  padding: 10px 12px;
  display: grid;
  gap: 10px;
}

.userfly__muted{
  font-size: 11px;
  opacity: .7;
}

.userfly__logout{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.16);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.userfly__logout:hover{ background: rgba(0,0,0,.04); }

/* =================================================================================================
   3) APP SHELL
   ================================================================================================= */

.app{
  max-width: var(--maxw);
  margin: 12px auto;
  background: var(--bg-app);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: visible;
}

.page-block{
  padding: var(--pad);
  background: transparent;
}

/* Footer */
.app-footer{
  border-top: var(--border);
  padding: 8px var(--pad);
  font-size:11px;
  opacity:.7;
}

/* =================================================================================================
   4) GRID & CARDS
   ================================================================================================= */

.grid{
  display:grid;
  gap: var(--gap);
}

.grid--start{
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px){
  .grid--start{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px){
  .grid--start{ grid-template-columns: 1fr; }
  .topnav__inner{ align-items:flex-start; }
}

.card{
  background:#fff;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card--wide{ grid-column: 1 / -1; }

.card__title{
  padding:10px 12px;
  font-weight:700;
  border-bottom: var(--border);
  background: rgba(0,0,0,.02);
}

.card__body{
  padding:12px;
  min-height:90px;
}

.grid--events{
  grid-template-columns: 1fr 1fr; /* A | C */
}

@media (max-width: 980px){
  .grid--events{ grid-template-columns: 1fr; } /* mobil untereinander */
}

/* ===================================================================
   CRM – Field Chip (z.B. KN vor Input)
   Einheitlich + Input-Höhe
=================================================================== */

.crm-fieldchip{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: var(--crm-fieldchip-h);
  padding: 0 10px;

  font-size: 13px;
  line-height: 1;
  white-space: nowrap;

  color:#333;
  background:#f1f3f5;
  border:1px solid #d0d5db;
  border-radius:8px;

  cursor: default;
  user-select:none;
}

.crm-fieldchip.is-clickable{ cursor:pointer; }

.crm-fieldchip + .input{ margin-left:8px; }

/* ===================================================================
   CRM – Buttons (global)
=================================================================== */

.crm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: var(--crm-btn-h);
  padding: 0 var(--crm-btn-pad-x);

  border-radius: var(--crm-btn-radius);
  border: 1px solid var(--crm-btn-border);
  background: var(--crm-btn-bg);

  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;
  user-select:none;
  white-space: nowrap;
}

.crm-btn:hover{ background: var(--crm-btn-bg-hover); }
.crm-btn:active{ transform: translateY(1px); }

.crm-btn--sm{
  height: var(--crm-btn-h-sm);
  padding: 0 10px;
  font-size: 12px;
}

/* Icon-only (+, ×) */
.crm-btn--icon{
  width: var(--crm-btn-h);
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.crm-btn--icon.crm-btn--sm{
  width: var(--crm-btn-h-sm);
  font-size: 15px;
}

/* Varianten */
.crm-btn--primary{ border-color: var(--crm-btn-border-primary); }
.crm-btn--danger { border-color: var(--crm-btn-border-danger); }

/* ===================================================================
   CRM – State-Farben (ein System)
   Nutzung (Overlay + Suche + Listen):
   class="crm-btn crm-btn--sm is-state-open" etc.
=================================================================== */

/* OFFEN */
.crm-btn.is-state-open{
  background:#fff;
  border-color: rgba(0,0,0,.18);
}

/* AKTIV / WORK */
.crm-btn.is-state-work{
  background: rgba(30,120,255,.10);
  border-color: rgba(30,120,255,.35);
}

/* WARTET */
.crm-btn.is-state-waiting{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.35);
}

/* AUFGABE / TASK */
.crm-btn.is-state-task{
  background: rgba(168,85,247,.12);
  border-color: rgba(168,85,247,.35);
}

/* ERLEDIGT */
.crm-btn.is-state-closed{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.35);
}

/* ARCHIV */
.crm-btn.is-state-archiv{
  background: rgba(107,114,128,.10);
  border-color: rgba(107,114,128,.25);
}

/* LÖSCHEN / HIDDEN */
.crm-btn.is-state-hidden{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.35);
}

/* optional: aktiver Chip etwas kräftiger */
.crm-btn.crm-btn--primary.is-state-waiting{ background: rgba(245,158,11,.22); }
.crm-btn.crm-btn--primary.is-state-archiv { background: rgba(107,114,128,.16); }


/* Alias: falls der State-Key nicht "waiting" heißt */
.crm-btn.is-state-wait,
.crm-btn.is-state-wartet{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.35);
}
.crm-btn.crm-btn--primary.is-state-wait,
.crm-btn.crm-btn--primary.is-state-wartet{
  background: rgba(245,158,11,.22);
}

.crm-btn.crm-btn--primary.is-state-task{
  background: rgba(168,85,247,.22);
  border-color: rgba(168,85,247,.45);
}

/* ===================================================================
   CTI – Badge Varianten (vereinheitlicht mit crm-btn)
=================================================================== */

.cti2-badge{
  cursor: default;
  pointer-events: none;
  font-weight: 600;
}

/* Kunde */
.cti2-badge--customer{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.15);
}

/* M365 */
.cti2-badge--m365{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.35);
  color: #166534;
}

/* Direktwahl */
.cti2-badge--direct{
  background: rgba(30,120,255,.12);
  border-color: rgba(30,120,255,.35);
  color: #1e4ed8;
}


































/* ================================================================================================
 * Overlay Status Chips – Override (NUR Overlay)
 * Ziele:
 * - Text immer schwarz
 * - Inaktiv: weiß, Outline farbig
 * - Aktiv: dezente Füllung wie Übersicht (nicht crm-btn--primary knallig)
 * - Robust: unterstützt beide Klassenschemata
 *   A) .crm-btn--state-<state> + .is-active
 *   B) .is-state-<state>       + .crm-btn--primary
 * ============================================================================================== */

/* Basis im Overlay: text schwarz, keine aggressive Füllung */
#crm-overlay .events-detail [data-event-state].crm-btn {
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  filter: none !important;
}

/* Aktiv im Overlay: NICHT knallig, sondern nur leicht gefüllt */
#crm-overlay .events-detail [data-event-state].crm-btn.crm-btn--primary,
#crm-overlay .events-detail [data-event-state].crm-btn.is-active {
  color: #111 !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.06) inset !important;
  font-weight: 700 !important;
}

/* ---------------------------
 * OUTLINE Farben (inaktiv)
 * --------------------------- */
#crm-overlay .events-detail [data-event-state].crm-btn.is-state-open,
#crm-overlay .events-detail .crm-btn--state-open { border-color:#cfd6dd !important; }

#crm-overlay .events-detail [data-event-state].crm-btn.is-state-work,
#crm-overlay .events-detail .crm-btn--state-work { border-color:#3b82f6 !important; }

#crm-overlay .events-detail [data-event-state].crm-btn.is-state-wait,
#crm-overlay .events-detail .crm-btn--state-wait { border-color:#f59e0b !important; }

#crm-overlay .events-detail [data-event-state].crm-btn.is-state-closed,
#crm-overlay .events-detail .crm-btn--state-closed { border-color:#22c55e !important; }

#crm-overlay .events-detail [data-event-state].crm-btn.is-state-archiv,
#crm-overlay .events-detail .crm-btn--state-archiv { border-color:#9ca3af !important; }

#crm-overlay .events-detail [data-event-state].crm-btn.is-state-hidden,
#crm-overlay .events-detail [data-event-state].crm-btn.is-state-delete,
#crm-overlay .events-detail [data-event-state].crm-btn.is-state-loeschen,
#crm-overlay .events-detail .crm-btn--state-hidden { border-color:#ef4444 !important; }

/* ---------------------------
 * AKTIV: dezente Füllung je State
 * (greift für .crm-btn--primary ODER .is-active)
 * --------------------------- */
#crm-overlay .events-detail [data-event-state].crm-btn.crm-btn--primary.is-state-open,
#crm-overlay .events-detail [data-event-state].crm-btn.is-active.crm-btn--state-open {
  background: rgba(207, 214, 221, .35) !important;
}

#crm-overlay .events-detail [data-event-state].crm-btn.crm-btn--primary.is-state-work,
#crm-overlay .events-detail [data-event-state].crm-btn.is-active.crm-btn--state-work {
  background: rgba(59, 130, 246, .18) !important;
}

#crm-overlay .events-detail [data-event-state].crm-btn.crm-btn--primary.is-state-wait,
#crm-overlay .events-detail [data-event-state].crm-btn.is-active.crm-btn--state-wait {
  background: rgba(245, 158, 11, .22) !important;
}

#crm-overlay .events-detail [data-event-state].crm-btn.crm-btn--primary.is-state-closed,
#crm-overlay .events-detail [data-event-state].crm-btn.is-active.crm-btn--state-closed {
  background: rgba(34, 197, 94, .20) !important;
}

#crm-overlay .events-detail [data-event-state].crm-btn.crm-btn--primary.is-state-archiv,
#crm-overlay .events-detail [data-event-state].crm-btn.is-active.crm-btn--state-archiv {
  background: rgba(156, 163, 175, .22) !important;
}

#crm-overlay .events-detail [data-event-state].crm-btn.crm-btn--primary.is-state-hidden,
#crm-overlay .events-detail [data-event-state].crm-btn.crm-btn--primary.is-state-delete,
#crm-overlay .events-detail [data-event-state].crm-btn.crm-btn--primary.is-state-loeschen,
#crm-overlay .events-detail [data-event-state].crm-btn.is-active.crm-btn--state-hidden {
  background: rgba(239, 68, 68, .18) !important;
}


/* icons */
.crm-icon{
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:middle;
  stroke:currentColor;
  fill:none;
}
.crm-icon--sm{
  width:16px;
  height:16px;
}