/* =========================================================================
   ServiceHub — Re-Design: MODALE / DIALOGE  (rein optisch, additiv)
   Bereich: alle <dialog>-Modale AUSSER dem Detail-Drawer.
   Trifft die echten App-Container:
     dialog.modal            (Login, Kunde, Projekt, Asset, Review, AI-Center …)
     dialog.modal-dialog     (Abwesenheits-Dialoge)
     dialog.dialog           (JS-Dialoge: Rechnung/Artikel/Mailbox/Vorlagen …)
   + deren Innenleben (.panel, header>h2, .modal-section, .modal-subhead,
     .modal-divider, .modal-actions, .dialog-body, .dialog-footer, Buttons,
     Felder). Warmes Design (Space Grotesk / Figtree / Space Mono), 16px-Radius,
     warmer Pop-Schatten, Scrim rgba(35,25,18,.4) + blur. Light + Dark.

   REGELN dieser Datei:
   - NUR Optik. Keine Logik/Markup. Kein display:none auf funktionale Controls.
   - Tokens lokal auf die Modal-Container gescoped → unabhängig von Ladereihenfolge.
   - Globale Basis (:root-Tokens, .btn/.badge/.data-table) wird NICHT neu definiert.
   - Werte exakt wie sh-detail-drawer.css / theme.css (warm).
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ---------------------------------------------------------------------------
   Tokens (Light) — lokal auf die Modal-Container gescoped
   --------------------------------------------------------------------------- */
dialog.modal,
dialog.modal-dialog,
dialog.dialog{
  --shm-accent:#E73D25; --shm-accent-700:#C5331E; --shm-accent-600:#D6371F;
  --shm-accent-soft:#FCEDE7; --shm-accent-line:rgba(231,61,37,.22);
  --shm-honey:#D99A2B; --shm-honey-soft:#FBF0DA;
  --shm-ok:#16A34A; --shm-ok-soft:#E9F8EF;
  --shm-warn:#C7791A; --shm-warn-soft:#FBF1E0;
  --shm-info:#2F6BD6; --shm-info-soft:#EAF1FC;
  --shm-violet:#7C5BD6; --shm-violet-soft:#F0ECFB;
  --shm-bg:#FAF6F2; --shm-surface:#FFFFFF; --shm-surf-2:#F6F1EB; --shm-surf-3:#EFE8E0;
  --shm-ink:#231C17; --shm-text:#463D35; --shm-text-2:#6B6157; --shm-muted:#9A8F84;
  --shm-border:#EEE5DC; --shm-border-2:#E3D9CE; --shm-field:#F6F1EB;
  --shm-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --shm-font-body:'Figtree',system-ui,sans-serif;
  --shm-font-mono:'Space Mono',ui-monospace,monospace;
  --shm-r-xs:7px; --shm-r-sm:9px; --shm-r-md:12px; --shm-r-lg:16px; --shm-r-pill:999px;
  --shm-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --shm-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --shm-pop:0 24px 60px rgba(60,40,25,.20),0 6px 18px rgba(120,80,50,.10);
  --shm-accent-sh:0 5px 14px rgba(231,61,37,.28);
  --shm-ring:0 0 0 3px var(--shm-accent-soft);
  --shm-tr:.16s cubic-bezier(.2,.7,.3,1);
  --shm-scrim:rgba(35,25,18,.40);
}

/* ---------------------------------------------------------------------------
   Tokens (Dark)
   --------------------------------------------------------------------------- */
[data-theme="dark"] dialog.modal,
[data-theme="dark"] dialog.modal-dialog,
[data-theme="dark"] dialog.dialog{
  --shm-accent:#F2543B; --shm-accent-700:#E0432B; --shm-accent-600:#EC4A30;
  --shm-accent-soft:rgba(242,84,59,.16); --shm-accent-line:rgba(242,84,59,.30);
  --shm-honey:#E6AE4A; --shm-honey-soft:rgba(230,174,74,.16);
  --shm-ok:#3BC07A; --shm-ok-soft:rgba(59,192,122,.15);
  --shm-warn:#E5A33C; --shm-warn-soft:rgba(229,163,60,.15);
  --shm-info:#5C8FE8; --shm-info-soft:rgba(92,143,232,.16);
  --shm-violet:#9D82E6; --shm-violet-soft:rgba(157,130,230,.16);
  --shm-bg:#15120F; --shm-surface:#1E1A16; --shm-surf-2:#241F1A; --shm-surf-3:#2C2620;
  --shm-ink:#F6F1EC; --shm-text:#E2D8CE; --shm-text-2:#B3A99E; --shm-muted:#8C8175;
  --shm-border:#2E2822; --shm-border-2:#3A332B; --shm-field:#241F1A;
  --shm-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --shm-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --shm-pop:0 24px 60px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.4);
  --shm-accent-sh:0 5px 14px rgba(242,84,59,.30);
  --shm-ring:0 0 0 3px var(--shm-accent-soft);
  --shm-scrim:rgba(0,0,0,.55);
}

/* ===========================================================================
   1) Modal-Schale + Scrim
   =========================================================================== */
dialog.modal,
dialog.modal-dialog,
dialog.dialog{
  border:1px solid var(--shm-border);
  border-radius:var(--shm-r-lg);
  background:var(--shm-surface);
  color:var(--shm-text);
  box-shadow:var(--shm-pop);
  padding:0;
  font-family:var(--shm-font-body);
  overflow:hidden;
}

/* Scrim (Backdrop) — warmer, weicher Schleier mit Blur */
dialog.modal::backdrop,
dialog.modal-dialog::backdrop,
dialog.dialog::backdrop{
  background:var(--shm-scrim);
  -webkit-backdrop-filter:blur(3px) saturate(.9);
  backdrop-filter:blur(3px) saturate(.9);
}
/* Login-Overlay bleibt heller (Markup gibt eigene Backdrop-Farbe vor); nur Radius/Blur dazu */
[data-theme="dark"] dialog.modal.login-modal::backdrop{
  background:rgba(10,8,6,.85);
}

/* sanftes Auftauchen — rein dekorativ, keine Funktionsänderung */
@keyframes shm-pop-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  dialog.modal[open],
  dialog.modal-dialog[open],
  dialog.dialog[open]{ animation:shm-pop-in .18s cubic-bezier(.2,.7,.3,1) both; }
}

/* ===========================================================================
   2) Inneres Panel / Form-Wrapper
   =========================================================================== */
dialog.modal > .panel,
dialog.modal > form > .panel{
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  padding:22px 24px;
}
dialog.modal > .panel:hover,
dialog.modal > form > .panel:hover{ box-shadow:none; }

/* Padding für die JS-Dialog-Form-Schale */
dialog.dialog > form,
dialog.modal-dialog > form{ background:transparent; }

/* ===========================================================================
   3) Kopfzeile  (header>h2  /  .modal-header  /  .panel h2)
   =========================================================================== */
dialog.modal > form > header,
dialog.dialog > form > header,
dialog.modal-dialog > form > header,
dialog.modal > header,
dialog.dialog > header,
dialog.modal-dialog > header,
dialog.modal .modal-header,
dialog.dialog .modal-header{
  padding:20px 24px 14px;
  border-bottom:1px solid var(--shm-border);
  background:var(--shm-surf-2);
}
dialog.modal > form > header h1,
dialog.modal > form > header h2,
dialog.dialog > form > header h2,
dialog.modal-dialog > form > header h2,
dialog.modal > header h2,
dialog.dialog > header h2,
dialog.modal-dialog > header h2,
dialog.modal .panel > h2:first-child,
dialog.modal .modal-header h2,
dialog.dialog .modal-header h2,
dialog.modal-dialog > form > h2:first-child,
dialog.dialog > form > h2:first-child{
  font-family:var(--shm-font-head);
  font-size:18px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--shm-ink);
  margin:0;
  line-height:1.25;
}

/* Bare <h2> direkt in der Form (Abwesenheits-Dialoge u.a.) als Kopfzeile rahmen */
dialog.modal-dialog > form > h2:first-child,
dialog.dialog > form > h2:first-child{
  padding:20px 24px 14px;
  border-bottom:1px solid var(--shm-border);
  background:var(--shm-surf-2);
}

/* Body bekommt nach gestyltem Header wieder Luft */
dialog.dialog > form > .dialog-body,
dialog.modal-dialog > form > .dialog-body,
dialog.modal > form > .dialog-body{
  padding:20px 24px;
}
dialog.dialog .dialog-body,
dialog.modal-dialog .dialog-body{
  color:var(--shm-text);
}

/* Überschriften 2./3. Ebene im Modal */
dialog.modal .panel h3,
dialog.dialog h3,
dialog.modal-dialog h3{
  color:var(--shm-muted);
  font-weight:600;
}

/* ===========================================================================
   4) Abschnitte / Sub-Überschrift / Divider
   =========================================================================== */
dialog.modal .modal-section,
dialog.dialog .modal-section{
  padding:18px 24px;
  border-top:1px solid var(--shm-border);
}
dialog.modal .modal-subhead,
dialog.dialog .modal-subhead,
dialog.modal-dialog .modal-subhead{
  font-family:var(--shm-font-head);
  font-size:13.5px;
  font-weight:700;
  color:var(--shm-ink);
  letter-spacing:-.005em;
}
dialog.modal .modal-divider,
dialog.dialog .modal-divider,
dialog.modal-dialog .modal-divider{
  background:var(--shm-border);
  height:1px;
  border:0;
}

/* ===========================================================================
   5) Felder im Modal  (input/select/textarea + .field-row)
   =========================================================================== */
dialog.modal input[type="text"],
dialog.modal input[type="email"],
dialog.modal input[type="password"],
dialog.modal input[type="number"],
dialog.modal input[type="date"],
dialog.modal input[type="datetime-local"],
dialog.modal input[type="time"],
dialog.modal input[type="tel"],
dialog.modal input[type="url"],
dialog.modal input[type="search"],
dialog.modal select,
dialog.modal textarea,
dialog.modal-dialog input[type="text"],
dialog.modal-dialog input[type="email"],
dialog.modal-dialog input[type="password"],
dialog.modal-dialog input[type="number"],
dialog.modal-dialog input[type="date"],
dialog.modal-dialog input[type="datetime-local"],
dialog.modal-dialog input[type="time"],
dialog.modal-dialog input[type="tel"],
dialog.modal-dialog input[type="url"],
dialog.modal-dialog select,
dialog.modal-dialog textarea,
dialog.dialog input[type="text"],
dialog.dialog input[type="email"],
dialog.dialog input[type="password"],
dialog.dialog input[type="number"],
dialog.dialog input[type="date"],
dialog.dialog input[type="datetime-local"],
dialog.dialog input[type="time"],
dialog.dialog input[type="tel"],
dialog.dialog input[type="url"],
dialog.dialog input[type="search"],
dialog.dialog select,
dialog.dialog textarea{
  background:var(--shm-surface);
  border:1px solid var(--shm-border-2);
  border-radius:var(--shm-r-sm);
  color:var(--shm-ink);
  transition:border-color var(--shm-tr),box-shadow var(--shm-tr);
}
dialog.modal input::placeholder,
dialog.modal textarea::placeholder,
dialog.modal-dialog input::placeholder,
dialog.modal-dialog textarea::placeholder,
dialog.dialog input::placeholder,
dialog.dialog textarea::placeholder{ color:var(--shm-muted); }

dialog.modal input:focus,
dialog.modal select:focus,
dialog.modal textarea:focus,
dialog.modal-dialog input:focus,
dialog.modal-dialog select:focus,
dialog.modal-dialog textarea:focus,
dialog.dialog input:focus,
dialog.dialog select:focus,
dialog.dialog textarea:focus{
  outline:none;
  border-color:var(--shm-accent);
  box-shadow:var(--shm-ring);
}

/* Feld-Label-Optik */
dialog.modal .field-label > span:first-child,
dialog.dialog .field-label > span:first-child,
dialog.modal-dialog .field-label > span:first-child,
dialog.modal label,
dialog.dialog .dialog-body label,
dialog.modal-dialog .dialog-body label{
  color:var(--shm-text-2);
  font-weight:600;
}
dialog.modal .field-label .req,
dialog.dialog .field-label .req,
dialog.modal-dialog .field-label .req{ color:var(--shm-accent); }

dialog.modal .hint,
dialog.dialog .hint,
dialog.modal-dialog .hint{ color:var(--shm-muted); }

/* ===========================================================================
   6) Buttons im Modal  (.btn-Familie, additiv überfärbt)
   =========================================================================== */
dialog.modal .btn,
dialog.dialog .btn,
dialog.modal-dialog .btn{
  border-radius:var(--shm-r-pill);
  font-weight:600;
  transition:var(--shm-tr);
}
dialog.modal .btn-primary,
dialog.dialog .btn-primary,
dialog.modal-dialog .btn-primary{
  background:var(--shm-accent);
  border-color:var(--shm-accent);
  color:#fff;
  box-shadow:var(--shm-accent-sh);
}
dialog.modal .btn-primary:hover,
dialog.dialog .btn-primary:hover,
dialog.modal-dialog .btn-primary:hover{
  background:var(--shm-accent-700);
  border-color:var(--shm-accent-700);
  transform:translateY(-1px);
}
dialog.modal .btn-ghost,
dialog.modal .btn-secondary,
dialog.dialog .btn-ghost,
dialog.dialog .btn-secondary,
dialog.modal-dialog .btn-ghost,
dialog.modal-dialog .btn-secondary{
  background:var(--shm-surface);
  border:1px solid var(--shm-border-2);
  color:var(--shm-text);
}
dialog.modal .btn-ghost:hover,
dialog.modal .btn-secondary:hover,
dialog.dialog .btn-ghost:hover,
dialog.dialog .btn-secondary:hover,
dialog.modal-dialog .btn-ghost:hover,
dialog.modal-dialog .btn-secondary:hover{
  border-color:var(--shm-accent);
  color:var(--shm-accent);
  background:var(--shm-accent-soft);
}
dialog.modal .btn-danger,
dialog.dialog .btn-danger,
dialog.modal-dialog .btn-danger{
  background:var(--shm-accent-700);
  border-color:var(--shm-accent-700);
  color:#fff;
}

/* Login-Brand-Mark in der warmen Akzentfarbe */
dialog.modal.login-modal .login-brand-mark{
  background:var(--shm-accent);
  box-shadow:var(--shm-accent-sh);
}
dialog.modal.login-modal .login-brand,
dialog.modal.login-modal .login-panel{
  border-color:var(--shm-border);
}

/* ===========================================================================
   7) Aktions-Leiste am Fuß  (.modal-actions / .dialog-footer)
   =========================================================================== */
dialog.modal .modal-actions,
dialog.dialog .modal-actions,
dialog.modal-dialog .modal-actions,
dialog.dialog > form > .dialog-footer,
dialog.dialog .dialog-footer,
dialog.modal-dialog .dialog-footer{
  margin:0;
  padding:14px 24px;
  border-top:1px solid var(--shm-border);
  background:var(--shm-surf-2);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
/* Wenn die Aktionen direkt im Panel sitzen (kein eigener Footer-Streifen),
   bleibt der schmalere Innen-Abstand erhalten. */
dialog.modal > .panel > .modal-actions,
dialog.modal > form > .panel > .modal-actions{
  margin-top:18px;
  padding:0;
  border-top:none;
  background:transparent;
}

/* ===========================================================================
   8) Review-/Spezialmodale: nur Innen-Panel angleichen (Optik)
   =========================================================================== */
dialog.modal.review-assign-modal .panel,
dialog.modal.review-create-order-modal .panel,
dialog.modal.ai-command-center-dialog .panel{
  background:transparent;
  border:none;
  box-shadow:none;
}

/* ===========================================================================
   9) Scrollbar im Modal (warm)
   =========================================================================== */
dialog.modal::-webkit-scrollbar,
dialog.modal-dialog::-webkit-scrollbar,
dialog.dialog::-webkit-scrollbar,
dialog.modal .dialog-body::-webkit-scrollbar,
dialog.dialog .dialog-body::-webkit-scrollbar{ width:9px;height:9px; }
dialog.modal::-webkit-scrollbar-thumb,
dialog.modal-dialog::-webkit-scrollbar-thumb,
dialog.dialog::-webkit-scrollbar-thumb,
dialog.modal .dialog-body::-webkit-scrollbar-thumb,
dialog.dialog .dialog-body::-webkit-scrollbar-thumb{
  background:var(--shm-border-2);
  border-radius:var(--shm-r-pill);
}