/* CompanyOS Cockpit · shared controls and content components. */
@layer components {

  .card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px; min-width:0; }
  .card .n { font-size:18px; font-weight:600; }
  .card .l { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
  .cardBody .crow { flex-wrap:nowrap; min-width:0; }
  .cardBody .crow > span { min-width:0; }
  .cardBody .crow > span[style*="flex:1"] { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .badge { font-size:10px; padding:1px 6px; border-radius:10px; border:1px solid var(--line); text-transform:uppercase; letter-spacing:.03em; flex:none; }
  .kv { display:grid; grid-template-columns:130px 1fr; gap:6px 12px; margin:10px 0; }
  .kv .kk { color:var(--muted); }
  .sec { margin-top:18px; border-top:1px solid var(--line); padding-top:12px; }
  .fieldLabel { display:block; margin:0 0 4px; color:var(--muted); font-size:var(--type-label); font-weight:600; letter-spacing:.02em; }
  /* Formular-Komponenten (02.09.): .formGrid/.field wurden von der Retouren-Bewertungsmaske
     benutzt, waren aber NIE definiert — ohne display:grid war das Inline-Spaltenraster wirkungslos
     und Labels/Felder flossen als Inline-Wurst (Inhaber-Screenshot). Jetzt kanonisch nach §7.6:
     sichtbares Label ÜBER dem Feld, 44-px-Controls, Spaltenkollaps folgt der Inspectorbreite. */
  .formGrid { display:grid; gap:10px 12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  label.field { display:flex; flex-direction:column; gap:4px; min-width:0; }
  label.field > span { color:var(--muted); font-size:var(--type-label); font-weight:600; letter-spacing:.02em; }
  label.field select, label.field input { min-height:var(--control-min); background:var(--panel2); border:1px solid var(--line); color:var(--fg); border-radius:7px; padding:0 10px; font-size:13px; width:100%; }
  label.field select:focus, label.field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .detail .card { margin-top:12px; padding:0; overflow:hidden; }
  .cardHead:hover { background:var(--accent-soft); }
  .cardHeadTitle { margin:0; font-size:var(--type-card); line-height:var(--leading-heading); color:var(--fg); font-weight:700; }
  .cardTg { color:var(--muted); font-size:10px; width:10px; flex:none; }
  .cardSum { margin-left:auto; font-size:var(--type-secondary); color:var(--muted); text-align:right; overflow-wrap:anywhere; }
  .cardSum.warn { color:var(--amber); font-weight:600; }
  .cardBody { min-width:0; overflow:hidden; font-size:var(--type-body); line-height:var(--leading-body); padding:0 12px 14px; }
  .cardBody[hidden] { display:none; }
  .sec h3 { font-size:var(--type-card); line-height:var(--leading-heading); color:var(--fg); margin:0 0 8px; }
  .chip { display:inline-block; background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:3px 9px; margin:0 6px 6px 0; font-size:12px; }
  .chip b { color:var(--accent); font-weight:600; }
  .cf { font-family:ui-monospace,monospace; font-size:12px; display:grid; grid-template-columns:220px 1fr; gap:3px 10px; }
  .cf .k { color:var(--muted); }
  .banner { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin-bottom:14px; color:var(--muted); font-size:13px; }
  .banner b { color:var(--fg); }
  .crow { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:default; }
  .crow:hover { background:var(--panel); }
  .crow .tg { width:14px; color:var(--muted); cursor:pointer; font-size:11px; user-select:none; }
  .crow .cn { flex:1; }
  .crow .cnt { font-size:11px; color:var(--muted); font-family:ui-monospace,monospace; }
  .crow .ext { font-size:10px; color:var(--muted2); font-family:ui-monospace,monospace; }
  .vchip input { margin:0; accent-color:var(--accent); }
  .crow .relbtn { border:1px solid var(--line); border-radius:6px; margin-left:8px; }
  .mergebar select, .mergebar input { background:var(--bg); border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:5px 8px; font-size:12px; }
  .tfrow input, .tfrow select { flex:1; background:var(--bg); border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:6px 9px; font-size:13px; }
  .tareabox input { flex:none; width:auto; }
  .wizPanel > button, .wizPanel .wizFoot button { padding:11px 20px; font-size:14px; border-radius:9px; }
  .wizPanel > button:not(.ghost) { box-shadow:0 6px 22px color-mix(in srgb,var(--accent) 26%,transparent); }
  button.wizGo { background:var(--green); color:var(--on-accent); border:0; font-weight:700; box-shadow:0 6px 24px color-mix(in srgb,var(--green) 32%,transparent); }
  .pickChips .chip { font-size:11px; color:var(--muted); background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:2px 8px; }
  .pickChips .chip.ax { color:var(--fg); border-color:var(--slate); background:var(--info-soft); }
  .scanBox input { flex:1; background:none; border:0; outline:none; color:var(--fg); font-size:15px; font-family:ui-monospace,Menlo,monospace; letter-spacing:.02em; }
  .scanBox input::placeholder { color:var(--muted); font-family:inherit; }
  .chip.chip-accent { color:var(--accent); border-color:var(--accent); }
  .chip.chip-green { color:var(--green); border-color:color-mix(in srgb,var(--green) 55%,var(--line)); }
  .chip.chip-amber { color:var(--amber); border-color:color-mix(in srgb,var(--amber) 55%,var(--line)); }
  .chip.chip-red { color:var(--red); border-color:color-mix(in srgb,var(--red) 55%,var(--line)); }
  #saveBar[hidden] { display:none; }
  .editInp { background:var(--panel2); border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:4px 8px; font-size:13px; font-family:inherit; }
  .editInp:focus { border-color:var(--accent); outline:none; }
  textarea.editInp { width:100%; resize:vertical; line-height:1.5; box-sizing:border-box; }
  .userPopover button { width:100%; }
  .uiInfoButton { width:32px; min-width:32px; min-height:32px; height:32px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); }
  .uiInfoButton:hover { border-color:var(--accent); color:var(--fg); background:var(--accent-soft); filter:none; }
  .uiInfoButton .uiIcon { width:15px; height:15px; }
  .uiInfoAnchor { position:relative; display:inline-flex; }
  .uiInfoPopover { position:absolute; z-index:var(--z-popover); top:calc(100% + 8px); left:0; width:min(340px,calc(100vw - 32px)); padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:color-mix(in srgb,var(--panel) 94%,transparent); color:var(--muted); box-shadow:var(--shadow-popover); backdrop-filter:blur(14px) saturate(1.1); }
  .uiInfoPopover[hidden] { display:none; }
  .uiInfoPopover b { display:block; margin-bottom:3px; color:var(--fg); }
  .uiInfoPopover p { margin:0; }
  .uiInfoPopover[data-align="end"] { left:auto; right:0; }
  .uiInfoHeading { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .uiInfoHeading > h1,.uiInfoHeading > h2,.uiInfoHeading > h3 { margin-right:0; }
  button { min-height:44px; padding:0 14px; border-radius:9px; background:var(--accent); color:var(--on-accent); border:1px solid transparent; font-size:12px; font-weight:600; cursor:pointer; transition:border-color .18s ease-out,background .18s ease-out,color .18s ease-out,opacity .18s ease-out; }
  button:hover:not(:disabled) { filter:brightness(1.06); }
  button.ghost { border:1px solid var(--line); background:transparent; color:var(--muted); border-color:var(--line); font-weight:400; }
  button.ghost:hover:not(:disabled) { color:var(--fg); border-color:var(--accent); filter:none; }
  button:disabled { opacity:.45; cursor:not-allowed; }
  .badge,.os,.st { padding:3px 8px; border-radius:999px; }
  .cardHead { width:100%; display:flex; align-items:center; gap:8px; padding:10px 12px; cursor:pointer; user-select:none; background:transparent; color:inherit; border:0; border-radius:var(--r-lg); text-align:left; font-size:inherit; font-weight:inherit; min-height:48px; }
  .badge-channel { border-color:var(--slate); color:var(--slate); }
  .preview { margin-top:8px; padding:10px 12px; border:1px solid var(--green); border-radius:8px; font-size:13px; background:var(--green-soft); }
  .preview.err { border-color:var(--red); background:var(--red-soft); }
  #saveBar { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:var(--z-savebar); display:flex; align-items:center; gap:10px; min-height:62px; max-width:min(720px,92vw); padding:9px 12px 9px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); font-size:13px; box-shadow:var(--shadow-popover); }
  #toast { position:fixed; right:18px; bottom:18px; z-index:var(--z-toast); padding:10px 16px; border:1px solid var(--line); border-radius:8px; background:var(--fg); color:var(--bg); font-size:13px; box-shadow:var(--shadow-popover); opacity:0; transform:translateY(10px); transition:opacity var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard); pointer-events:none; }
  #toast.show { opacity:1; transform:none; }
  #loginOverlay { position:fixed; inset:0; z-index:var(--z-auth); display:flex; align-items:center; justify-content:center; padding:var(--space-4); background:var(--bg); }
  #loginForm { width:min(340px,100%); padding:34px 36px; border:1px solid var(--line); border-radius:var(--r-xl); background:var(--panel); box-shadow:var(--shadow-modal); }
  .loginLabel { display:block; margin-bottom:5px; color:var(--muted); font-size:var(--type-label); }
  .loginInput { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:9px; background:var(--panel2); color:var(--fg); font-size:var(--type-body); }
  .loginInputName { margin-bottom:14px; }
  .loginInputPin { margin-bottom:8px; }
  .loginError { min-height:18px; margin-bottom:10px; color:var(--red); font-size:var(--type-label); }
  .loginSubmit { width:100%; font-size:var(--type-body); }
  .conceptState { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:3px 9px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:11px; white-space:nowrap; }
  .conceptState.warn { color:var(--amber); border-color:var(--amber); background:var(--amber-soft); }
  .conceptState.ok { color:var(--approve-text); border-color:var(--green); background:var(--green-soft); }
  .conceptState.info { color:var(--slate); border-color:var(--slate); }
  .posTileProfileSelect,.posTileField input,.posTileField select { min-height:44px; width:100%; padding:0 11px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--fg); }
  .posTileProfileSelect:focus,.posTileField input:focus,.posTileField select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .job.empty { grid-column:1/-1; min-height:220px; display:grid; place-items:center; text-align:center; }
  .agentPageActions button { min-height:44px; }
  .effect { min-width:0; padding:10px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
  .effect b { display:block; margin-bottom:3px; color:var(--muted2); font-size:10px; letter-spacing:.07em; text-transform:uppercase; overflow-wrap:anywhere; }
  .effect span { display:block; font-size:12px; overflow-wrap:anywhere; }
  .readState { max-width:760px; margin:16px 0; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--muted); }
  .readState[data-kind="error"],.readState[data-kind="unavailable"] { border-color:color-mix(in srgb,var(--red) 58%,var(--line)); background:color-mix(in srgb,var(--red) 7%,var(--panel)); }
  .readState[data-kind="stale"] { border-color:color-mix(in srgb,var(--amber) 58%,var(--line)); background:color-mix(in srgb,var(--amber) 7%,var(--panel)); }
  .readState b { display:block; margin-bottom:4px; color:var(--fg); }
  .readState p { margin:0; font-size:12.5px; line-height:1.55; }
  .readState button { min-height:44px; margin-top:12px; }
  .readState.compact { flex:1 1 100%; max-width:none; margin:4px 0 8px; padding:10px 12px; }
  .attCard .readState { margin:4px 0 0; padding:10px 12px; }
  .assistantForm input { flex:1; min-width:0; height:44px; padding:0 11px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
  .assistantForm button { min-width:88px; }
  .assistantClose { margin-left:auto; }
  .ceeBtn.primary { margin-left:auto; border-color:var(--fg); background:var(--fg); color:var(--bg); }
  button.ceeStatusChip { cursor:pointer; }
  button.ceeStatusChip:hover { border-color:var(--accent); color:var(--fg); }
  .ceeModeIntro .uiInfoAnchor { margin-left:auto; }
  .ceeModeIntro .uiInfoButton { width:30px; min-width:30px; height:30px; min-height:30px; }
  .ceeDialogComposer input { width:100%; min-height:44px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--fg); padding:0 11px; font-size:12px; }
  .ceeDialogComposer input:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
  .ceeDialogComposer button { width:44px; min-width:44px; min-height:44px; padding:0; display:grid; place-items:center; }
  .ceeDialogComposer button .ceeIcon { width:17px; height:17px; }
  .ceeExpandedActions button { min-height:36px; padding:0 10px; font-size:10px; }
  .ceeHelperActions button { min-height:38px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:transparent; color:inherit; font-size:10px; cursor:pointer; }
  .ceeSignalRow button { min-height:32px; padding:0 8px; font-size:10px; }
  .ceeMicBadge button { min-height:24px; padding:0 9px; border-radius:999px; border:1px solid color-mix(in srgb,var(--on-strong) 55%,transparent);
    background:color-mix(in srgb,var(--on-strong) 14%,transparent); color:var(--on-strong); font:inherit; font-size:9.5px; cursor:pointer; }
  .ceeMicBadge button:hover { background:color-mix(in srgb,var(--on-strong) 28%,transparent); }
  @media (max-width:760px) {
    .ceeBtn.primary { margin-left:0; }
  }
  button.agentOrgAttentionItem { cursor:pointer; }
  button.agentOrgAttentionItem:hover { border-color:var(--accent); filter:none; }
  .agentOrgSearchBox input { width:100%; min-height:44px; padding:0 38px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
  .agentOrgSearchBox input:focus { border-color:var(--accent); }
  .agentOrgLayerWrap > .fieldLabel { display:block; margin-bottom:5px; }
  .agentOrgMapActions button { min-width:44px; min-height:36px; padding:0 10px; }
  .agentOrgRelationTable th button { width:100%; min-height:44px; padding:6px 9px; display:flex; align-items:center; gap:5px; border:0; border-radius:0; background:transparent; color:var(--muted); font-weight:600; text-align:left; }
  .agentOrgRelationTable th button:hover { color:var(--fg); filter:none; }
  .agentOrgDraftActions button { min-height:44px; }
  .agentOrgPromotionConsent input { width:20px; height:20px; margin:1px 0 0; accent-color:var(--accent); }
  .agentOrgCreateField input,.agentOrgCreateField textarea,.agentOrgCreateField select { width:100%; min-height:44px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--fg); }
  .agentOrgCreateField input,.agentOrgCreateField select { padding:0 11px; }
  .agentOrgCreateField textarea { min-height:112px; padding:10px 11px; resize:vertical; }
  .agentOrgCreateFoot .primary { margin-left:auto; min-height:44px; }
  .agentOrgProfileActions button { min-height:44px; }
}