/* =========================
   Wunderda UI - 2026
   No Bootstrap / No W3CSS
   ========================= */

/* ---- Design Tokens (Brand) ---- */
:root{
  /* Wunderda Branding */
  --brand: #e6002b;
  --bg-1: #d9d9d9;       /* 1. Hintergrund */
  --bg-2: #727272;       /* 2. Hintergrund */
  --text-1: #353535;     /* Fließtext */
  --text-2: #505050;     /* Überschriften */
  --action: #019f12;     /* Aktionsfarbe (nicht barrierefrei) */

  /* UI neutrals */
  --page: #f6f7f9;
  --card: #ffffff;
  --surface: #ffffff;
  --border: #d5d7db;
  --shadow: 0 10px 30px rgba(16,24,40,.08);
  --shadow-soft: 0 8px 18px rgba(16,24,40,.06);
  --input-bg: #ffffff;
  --input-text: #1a1a1a;

  /* Ein Mass fuer alle Eingabefelder. Vorher gab es vier Hoehen
     (38/40/41/46 px), drei Rahmenfarben und Radien von 4 bis 14 px --
     je nachdem, aus welchem Stylesheet das Feld kam. */
  --field-h: 42px;
  --field-radius: 12px;
  --field-pad-x: 12px;
  --sidebar-bg: #ecedf1;

  /* Radius / spacing */
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;

  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 18px;
  --s-5: 24px;
  --s-6: 30px;

  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-head: "Poppins", var(--font);

  /* Layout */
  --sidebar-w: 280px;
  --topbar-h: 64px;
}

/* ---- Dark mode ---- */
/* Greift wenn OS dark ist UND kein manueller "light"-Toggle gesetzt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]){
    --page: #0b0d12;
    --card: #111522;
    --surface: #161a2a;
    --text-1: #d9d9d9;
    --text-2: #ebebeb;
    --border: #2a2f3d;
    --shadow: 0 16px 40px rgba(0,0,0,.35);
    --shadow-soft: 0 12px 26px rgba(0,0,0,.25);
    --input-bg: #1c2033;
    --input-text: #e0e0e0;
    --sidebar-bg: #0f1220;
  }
}
/* Greift wenn JS-Toggle explizit auf "dark" gesetzt */
[data-theme="dark"]{
  --page: #0b0d12;
  --card: #111522;
  --surface: #161a2a;
  --text-1: #d9d9d9;
  --text-2: #ebebeb;
  --border: #2a2f3d;
  --shadow: 0 16px 40px rgba(0,0,0,.35);
  --shadow-soft: 0 12px 26px rgba(0,0,0,.25);
  --input-bg: #1c2033;
  --input-text: #e0e0e0;
  --sidebar-bg: #0f1220;
}

/* ---- Base / Reset ---- */
*{ box-sizing:border-box; }
html, body{ min-height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text-1);
  background: var(--page);
  line-height: 1.45;
}
a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration:none; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font:inherit; }
:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--brand) 42%, transparent);
  outline-offset: 3px;
}

h1,h2,h3,h4{
  margin:0 0 var(--s-3);
  color: var(--text-2);
  font-family: var(--font-head);
  letter-spacing: .2px;
}
p{ margin:0 0 var(--s-3); }

/* ---- App Layout ---- */
.app{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
  transition:grid-template-columns .2s ease;
}

.sidebar{
  position: sticky;
  top:0;
  height:100vh;
  height:100dvh;
  padding: var(--s-5) var(--s-4);
  border-right: 1px solid var(--border);
  background: var(--sidebar-bg);
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  z-index:80;
}

.brand{
  display:flex;
  gap: var(--s-3);
  align-items:center;
  padding-bottom: var(--s-4);
  border-bottom: 1px dashed var(--border);
  margin-bottom: var(--s-4);
  flex:0 0 auto;
}
.brand__logo{
  width: 46px; height:46px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  display:grid;
  place-items:center;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}
.brand__title{
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.05;
}
.brand__subtitle{
  font-size: 12px;
  opacity: .75;
  margin-top: 2px;
}

/* Nav */
.nav{
  display:flex;
  flex-direction:column;
  gap: 6px;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:2px 4px 12px 2px;
  scrollbar-width:thin;
}
.nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  min-height:44px;
  gap:12px;
}
.nav a:hover{
  border-color: var(--border);
  background: var(--card);
}
.nav .pill{
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  opacity: .85;
  flex:0 0 auto;
}

.sidebar__label{
  margin:0 0 8px 4px;
  color:color-mix(in srgb, var(--text-1) 65%, transparent);
  font-family:var(--font-head);
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.sidebar__actions{
  flex:0 0 auto;
  padding-top:12px;
  border-top:1px solid var(--border);
}

.sidebar__trial{
  flex:0 0 auto;
  display:grid;
  gap:3px;
  margin:0 0 10px;
  padding:11px 12px;
  border:1px solid color-mix(in srgb, var(--brand) 24%, var(--border));
  border-radius:12px;
  background:color-mix(in srgb, var(--brand) 8%, var(--card));
  color:var(--text-2);
  font-size:12px;
  line-height:1.35;
}
.sidebar__trial strong{color:var(--brand);font-family:var(--font-head);font-size:13px}
.sidebar__trial span{opacity:.82}

.sidebar__close,
.sidebar-backdrop{
  display:none;
}

/* ---- Main ---- */
.main{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.topbar{
  position: sticky;
  top:0;
  z-index: 50;
  height: var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--page) 92%, transparent);
}

.topbar__left{
  display:flex;
  gap: var(--s-3);
  align-items:center;
  min-width: 0;
}

.topbar__nav,
.topbar__actions,
.topbar__activity{
  display:flex;
  align-items:center;
}

.topbar__nav{
  gap:6px;
  margin-left:6px;
}

.topbar__actions{ gap:10px; }
.topbar__activity{ gap:6px; }
.topbar__logout{ margin:0; }

.topbar__context{
  display:none;
  min-width:0;
  overflow:hidden;
  color:var(--text-2);
  font-family:var(--font-head);
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.topbar__icon-btn{
  width:46px;
  min-width:46px;
  height:46px;
  padding:0;
  font-size:21px;
  line-height:1;
}

.topbar__notification-btn{ position:relative; }
.topbar__sidebar-toggle{ display:inline-flex; }

@media (min-width:821px){
  .app.sidebar-collapsed{
    grid-template-columns:0 minmax(0, 1fr);
  }
  .app.sidebar-collapsed .sidebar{
    width:0;
    padding-right:0;
    padding-left:0;
    border-right:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(-100%);
  }
}

.topbar-menu{
  position:absolute;
  top:calc(100% - 4px);
  z-index:9999;
  max-height:calc(100dvh - var(--topbar-h) - 16px);
  overflow:auto;
}
.topbar-menu--notifications{
  right:76px;
  width:min(420px, calc(100vw - 24px));
}
.topbar-menu--account{
  right:18px;
  width:min(360px, calc(100vw - 24px));
}
.topbar-menu__mobile-logout{ display:none; }

.app-skip-link{
  position:fixed;
  top:10px;
  left:50%;
  z-index:30000;
  min-height:44px;
  padding:11px 16px;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  font-family:var(--font-head);
  font-weight:700;
  transform:translate(-50%, -160%);
  transition:transform .15s ease;
}
.app-skip-link:focus{ transform:translate(-50%, 0); }

/* Topbar Inhalt auf max Breite bündeln (damit es auf großen Screens nicht "auseinanderzieht") */
.topbar__inner{
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.page-title{
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.content{
  padding: var(--s-6) var(--s-5);
  max-width: 1320px;
  margin: 0 auto;
  /* `.main` ist ein Spalten-Flexcontainer. Ohne diese Breite macht das
     `margin: 0 auto` daraus eine Schrumpfbreite: der Inhaltsbereich wurde
     so breit wie sein breitestes Kind -- auf einer Seite mit wenig Inhalt
     nur wenige hundert Pixel. */
  width: 100%;
}

/* ---- Grid / Cards ---- */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4);
}
.col-12{ grid-column: span 12; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }
.col-3{ grid-column: span 3; }

@media (max-width: 1100px){
  .col-3{ grid-column: span 6; }
  .col-4{ grid-column: span 6; }
}
@media (max-width: 1180px){
  .topbar__nav,
  .topbar__activity{ display:none !important; }
  .topbar__context{ display:block; }
}

@media (max-width: 820px){
  .app{ display:block; }
  .sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(86vw, 340px);
    height:100vh;
    height:100dvh;
    padding:18px 16px max(18px, env(safe-area-inset-bottom));
    border-right:1px solid var(--border);
    box-shadow:0 24px 60px rgba(15,23,42,.24);
    transform:translateX(-105%);
    visibility:hidden;
    transition:transform .22s ease, visibility 0s linear .22s;
  }
  .sidebar.is-open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .22s ease;
  }
  .sidebar__close{
    position:absolute;
    top:12px;
    right:12px;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--card);
    color:var(--text-1);
    cursor:pointer;
    font-size:26px;
    line-height:1;
  }
  .brand{ padding-right:46px; }
  .sidebar-backdrop{
    position:fixed;
    inset:0;
    z-index:70;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:rgba(15,23,42,.42);
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease, visibility 0s linear .22s;
  }
  .sidebar.is-open + .sidebar-backdrop{
    display:block;
    opacity:1;
    visibility:visible;
    transition:opacity .22s ease;
  }
  body.has-sidebar-open{ overflow:hidden; }
  .topbar{
    top:0;
    height:calc(var(--topbar-h) + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 12px 0;
  }
  .topbar__sidebar-toggle:not([hidden]){ display:inline-flex; }
  .topbar__left{ flex:1 1 auto; min-width:0; }
  .topbar__context{ font-size:15px; }
  .topbar__actions{ gap:6px; }
  .topbar__logout{ display:none; }
  .topbar-menu{
    position:fixed;
    top:calc(var(--topbar-h) + env(safe-area-inset-top) - 2px);
    right:12px;
    width:calc(100vw - 24px);
    max-height:calc(100dvh - var(--topbar-h) - env(safe-area-inset-top) - 12px);
  }
  .topbar-menu__mobile-logout{ display:block; }
  .content{ padding:22px 16px 100px; }
}

@media (max-width: 640px){
  .col-6, .col-4, .col-3{ grid-column: span 12; }
}

@media (max-width: 390px){
  .topbar__context{ max-width:92px; font-size:14px; }
  .topbar__icon-btn{ width:44px; min-width:44px; height:44px; }
  .topbar__actions{ gap:4px; }
}

/* Card */
.card{
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.card__body{ padding: var(--s-5); }
.card__title{
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.card__text{ opacity: .9; }

/* Accent stripe */
.card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 35%, transparent));
}

/* Level badge */
.level-badge{
  position:absolute;
  top: 12px; right: 12px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  color: var(--text-2);
  font-family: var(--font-head);
}

/* Inactive (ausgegraut) */
.card.inactive{
  opacity:.50;
  filter: grayscale(85%);
}
.card.inactive .btn{ pointer-events:none; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-1);
  cursor:pointer;
  font-weight: 600;
  font-family: var(--font-head);
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
  user-select:none;
  min-height:44px;
}
.btn:hover{ box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.btn-primary{
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 88%, #000));
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  color: #fff;
}
.btn-ghost{
  background: transparent;
}
.btn-success{
  background: linear-gradient(180deg, rgba(1,159,18,1), rgba(0,129,15,1));
  border-color: rgba(1,159,18,.30);
  color:#fff;
}

/* Info bar (Local env) */
.envbar{
  background: #b00020;
  color: #fff;
  padding: 10px 14px;
  font-weight: 700;
  font-family: var(--font-head);
  text-align:center;
}

/* Small helper */
.muted{ opacity:.7; }

/* =========================
   Activity Widget (Wunderda)
   ========================= */
.activity {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
@media (max-width: 900px) {
  .activity { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .activity { grid-template-columns: 1fr; }
}

.activity-box {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.activity-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(
    180deg,
    var(--brand),
    color-mix(in srgb, var(--brand) 40%, transparent)
  );
}

.activity-title {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}

.activity-value {
  font-size: 28px;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text-2);
}

.activity-sub {
  font-size: 13px;
  opacity: .7;
}

.nav a.is-disabled{
  opacity:.45;
  filter: grayscale(85%);
  pointer-events:none;
}
.nav a .pill.danger{
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

.stack{ display:block; }
.stack > *{ margin-bottom: 18px; }
.stack > *:last-child{ margin-bottom: 0; }

.fullwidth{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.fullwidth__inner{
  padding: 0 var(--s-5);
}

/* optional: auf großen Screens trotzdem eine angenehme "Innenbreite" für Card */
.fullwidth__inner .card{
  border-radius: var(--r-lg);
}
@media (max-width: 820px){
  .fullwidth__inner{ padding: 0 var(--s-4); }
}

/* ---- Dashboard Drag & Drop ---- */
.module-card{
  cursor: grab;
  min-width:0;
}

.module-card .card{
  transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease;
  height:100%;
}

.module-card .card__body{
  display:flex;
  flex-direction:column;
  min-height:190px;
}

.module-card .card__title{
  padding-left: 34px;
  min-height: 24px;
  display: flex;
  align-items: center;
}

.module-card .card__text{
  max-width:42rem;
  line-height:1.55;
}

.module-card__meta{
  margin:0 0 8px 34px;
  color:color-mix(in srgb, var(--text-1) 64%, transparent);
  font-family:var(--font-head);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.module-card .drag-handle{
  position: absolute;
  top: 20px;
  left: 20px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(80,80,80,.82);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 15%, transparent), color-mix(in srgb, var(--brand) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(16,24,40,.08);
  pointer-events: none;
}

.module-card:hover .drag-handle{
  color: color-mix(in srgb, var(--brand) 95%, transparent);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 20%, transparent), color-mix(in srgb, var(--brand) 10%, transparent));
}

.module-card.is-dragging{
  opacity: .7;
}

.module-card.is-dragging .card{
  transform: scale(.985);
  box-shadow: 0 14px 26px rgba(16,24,40,.16);
}

.module-card.is-dragging .drag-handle{
  color: color-mix(in srgb, var(--brand) 98%, transparent);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
}

/* ---- Dashboard specific ---- */
.dashboard-cta{ margin-top:14px; }

.dashboard-logo{
  width:32px;
  height:auto;
}

.dashboard-logout-form{ margin-top:14px; }
.dashboard-logout-btn{
  width:100%;
  justify-content:center;
}

.dashboard-section{ margin-bottom:18px; }

.policy-card{ border-left:4px solid #f0ad4e; }
.policy-title{ color:#f0ad4e; }
.policy-icon{ margin-right:6px; }

.vacation-empty{ margin-top:12px; }

.vacation-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}

.vacation-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
}

.vacation-item-main{ min-width:0; }

.vacation-item-name{
  font-family:var(--font-head);
  font-weight:700;
}

.vacation-item-date{ font-size:12px; }

/* ---- Gemeinsame Huelle (inc/app_shell.php) ----
   Die Seitenueberschrift einer Modulseite. Bis August 2026 hatte jede Seite
   ihre eigene Kopfzeile mit eigener Schriftgroesse -- 16 px in der Doku-Liste,
   40 px in den Bootstrap-Listen. */
.shell-title{
  font-family: var(--font-head);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}

/* Der aktuelle Eintrag in der Navigation. */
.nav a[aria-current="page"]{
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  font-weight: 600;
}

/* ---- Eingabefelder und Tabellen: eine Definition fuer alle Herkuenfte ----
   Die Klassennamen stammen aus Bootstrap (.form-control), crm-modern.css
   (.crm-input, .crm-select), assets/kunde.css (.doc-input, .doc-select,
   .customer-search-input) und der Doku-Liste (.input). Sie bleiben, damit
   kein Formular umgeschrieben werden muss -- aber sie sehen gleich aus. */

.input,
.form-control,
.crm-input,
.crm-select,
.doc-input,
.doc-select,
.customer-search-input,
.upload-input,
.support-control,
.protocol-textarea,
select.form-control,
textarea.form-control{
  height: var(--field-h);
  min-height: var(--field-h);
  border-radius: var(--field-radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--input-text);
  padding: 0 var(--field-pad-x);
  font-family: var(--font);
  font-size: 15px;
  outline: none;
  width: 100%;
  box-shadow: none;
}

/* Auswahlfelder: ohne diesen Block zeichnet der Browser sein eigenes
   Bedienelement -- unter Windows ein grauer Verlaufsknopf mit eckigem Pfeil.
   Hoehe und Radius allein reichen also nicht: das Feld bleibt sichtbar ein
   Fremdkoerper neben Eingabefeldern und Knoepfen.

   Der Pfeil ist aus zwei Farbverlaeufen gebaut statt aus einer Grafik, damit
   er `currentColor` folgt und im dunklen Modus nicht schwarz stehenbleibt. */
select.input,
select.form-control,
select.crm-input,
.crm-select,
.doc-select{
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px top 50%, right 13px top 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Mehrere sichtbare Zeilen brauchen ihre eigene Hoehe. */
select[multiple],
select[size]:not([size="1"]){
  height: auto;
  min-height: var(--field-h);
  padding: 8px var(--field-pad-x);
  background-image: none;
}

/* Platzhalter sind Hilfstext, kein Inhalt -- in beiden Themes gedaempft,
   aber lesbar. Ohne die Regel nimmt jeder Browser seinen eigenen Grauwert. */
.input::placeholder,
.form-control::placeholder,
.crm-input::placeholder,
.doc-input::placeholder,
.customer-search-input::placeholder{
  color: color-mix(in srgb, var(--input-text) 45%, transparent);
  opacity: 1;
}

/* Gesperrte Felder sollen als gesperrt erkennbar sein, bevor jemand
   hineinklickt. */
.input:disabled,
.form-control:disabled,
.crm-input:disabled,
.crm-select:disabled,
.doc-input:disabled,
.doc-select:disabled,
.customer-search-input:disabled{
  /* background-color, nicht background: die Kurzform wuerde den Pfeil der
     Auswahlfelder mit loeschen -- ein gesperrtes Auswahlfeld saehe dann aus
     wie ein Eingabefeld. */
  background-color: color-mix(in srgb, var(--input-text) 6%, var(--input-bg));
  color: color-mix(in srgb, var(--input-text) 55%, transparent);
  cursor: not-allowed;
}

/* Ankreuzfelder und Auswahlknoepfe in der Markenfarbe -- eine Zeile statt
   nachgebauter Elemente. Folgt der Instanz, weil `--brand` aus der
   Tenant-Konfiguration kommt. */
input[type="checkbox"],
input[type="radio"]{
  accent-color: var(--brand);
  width: 17px;
  height: 17px;
  cursor: pointer;
}

/* Mehrzeiliges waechst mit dem Inhalt. */
textarea.form-control,
textarea.input,
textarea.support-control,
.protocol-textarea{
  height: auto;
  min-height: calc(var(--field-h) * 2);
  padding: 10px var(--field-pad-x);
  line-height: 1.5;
  resize: vertical;
}

/* Das Gespraechsprotokoll ist die Hauptarbeitsflaeche seiner Seite und
   braucht mehr Platz als zwei Zeilen; der Kommentarkasten darunter weniger. */
.protocol-textarea{
  min-height: 220px;
}

.protocol-small-input{
  min-height: 70px;
}

.input:focus,
.form-control:focus,
.crm-input:focus,
.crm-select:focus,
.doc-input:focus,
.doc-select:focus,
.customer-search-input:focus,
.upload-input:focus,
.support-control:focus,
.protocol-textarea:focus{
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
}

/* Tabellenkoepfe: vorher vier Stile -- markenfarben mit 4 % und mit 6 %,
   ein kuehles und ein warmes Grau, im Adminbereich gar keine Flaeche. */
thead th,
.crm-table th,
.table thead th,
/* Bootstraps .thead-light ist spezifischer als `thead th` und muss
   ausdruecklich genannt werden, sonst bleibt sein Grau stehen. */
.thead-light th,
.table .thead-light th{
  text-align: left;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--text-2);
  background: color-mix(in srgb, var(--brand) 5%, transparent);
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  white-space: nowrap;
  text-transform: none;
}

/* ---- Dashboard hierarchy and responsive shell refinements ---- */
.dashboard-cta{ margin-top:auto; padding-top:18px; }

.dashboard-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}
.dashboard-intro__eyebrow{
  margin:0 0 5px;
  color:var(--brand);
  font-family:var(--font-head);
  font-size:12px;
  font-weight:750;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.dashboard-intro h1{
  margin:0;
  font-size:clamp(28px, 3vw, 42px);
  line-height:1.08;
  letter-spacing:-.025em;
}
.dashboard-intro__lead{
  max-width:620px;
  margin:8px 0 0;
  color:color-mix(in srgb, var(--text-1) 78%, transparent);
  font-size:16px;
}
.dashboard-sort-hint{
  flex:0 0 auto;
  margin:0;
  padding:8px 11px;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb, var(--card) 82%, transparent);
  font-size:12px;
  white-space:nowrap;
}
.dashboard-section-title{
  margin:6px 0 14px;
  font-size:18px;
}

@media (max-width:820px){
  .module-card{ cursor:default; }
  .module-card .drag-handle{ display:none; }
  .module-card .card__title{ padding-left:0; }
  .module-card__meta{ margin-left:0; }
  .dashboard-intro{ display:block; margin-bottom:20px; }
  .dashboard-intro__lead{ font-size:15px; }
  .dashboard-sort-hint{ display:none; }
  .dashboard-cta .btn{ width:100%; }
  body.has-sidebar-open .ai-helper-wrap{
    visibility:hidden;
    pointer-events:none;
  }
}

@media (max-width:520px){
  .grid{ gap:14px; }
  .card__body{ padding:20px; }
  .module-card .card__body{ min-height:0; }
  .dashboard-intro h1{ font-size:30px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .sidebar,
  .sidebar-backdrop,
  .app-skip-link,
  .btn{ transition:none; }
}