/* CompanyOS Cockpit · shell, workspaces and responsive layout patterns. */
@layer patterns {
  .split { display:grid; grid-template-columns:minmax(340px,1fr) minmax(430px,1.45fr); height:100%; }
  .drawerSplit { grid-template-columns:1fr; position:relative; overflow:hidden; }
  .drawerSplit .list { border-right:0; }
  .drawerSplit.open .drawerDim { opacity:1; pointer-events:auto; }
  .drawerSplit.open .detail { transform:translateX(0); }
  .drawerResizeHandle { position:absolute; top:0; bottom:0; right:calc(var(--drawer-width, var(--inspector)) - 22px); z-index:9; width:44px; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; cursor:ew-resize; touch-action:none; user-select:none; transition:right var(--motion-standard) var(--ease-standard),opacity var(--motion-fast) ease-out; }
  .drawerSplit.open > .drawerResizeHandle { opacity:1; pointer-events:auto; }
  .drawerResizeHandle::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:color-mix(in srgb,var(--accent) 45%,var(--line)); }
  .drawerResizeGrip { position:relative; width:30px; height:46px; display:grid; place-items:center; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); box-shadow:var(--shadow-popover); transition:border-color var(--motion-fast) ease-out,background var(--motion-fast) ease-out,color var(--motion-fast) ease-out,transform var(--motion-fast) ease-out; }
  .drawerResizeGrip .uiIcon { width:18px; height:18px; }
  .drawerResizeHandle:hover .drawerResizeGrip,.drawerResizeHandle:focus-visible .drawerResizeGrip { color:var(--fg); border-color:var(--accent); background:var(--panel-2); transform:scale(1.04); }
  .drawerResizeHandle:focus-visible { outline:none; }
  .drawerResizeHandle:focus-visible .drawerResizeGrip { box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-popover); }
  .drawerSplit.resizing .detail,.drawerSplit.resizing .drawerResizeHandle { transition:none; }
  #detBack, .drawerBack { flex:none; padding:6px 12px; font-size:12px; }
  .toolbar input, .toolbar select { background:var(--panel2); border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:7px 10px; font-size:13px; }
  .toolbar input { flex:1; }
  .row { position:relative; padding:9px 16px; border-bottom:1px solid var(--line); cursor:pointer; display:flex; gap:9px; align-items:baseline; }
  .row:hover { background:var(--panel2); }
  .row > :not(.rowOpen) { position:relative; z-index:1; pointer-events:none; }
  .row > .tgBtn { z-index:2; pointer-events:auto; }
  .row .tgBtn { width:var(--control-min); min-width:var(--control-min); min-height:var(--control-min); }
  .row.sel { background:var(--panel2); box-shadow:inset 3px 0 0 var(--accent); }
  .row .tg { width:14px; color:var(--muted); cursor:pointer; flex:none; font-size:11px; user-select:none; }
  .row .sku { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--muted); min-width:92px; flex:none; }
  .row .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .row .ax { font-size:11px; color:var(--muted); }
  .row .mf { font-size:12px; color:var(--muted); flex:none; width:96px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rowChannel { min-width:34px; flex:none; text-align:center; }
  .rowStock { min-width:40px; flex:none; color:var(--muted); font-size:12px; text-align:right; }
  .rowPrice { min-width:74px; flex:none; color:var(--muted); text-align:right; }
  .row.kid:hover { background:var(--panel); }
  .detail { overflow:auto; padding:20px var(--detail-gutter); }
  .detail .empty { color:var(--muted); padding-top:40px; text-align:center; }
  .detail h2 { margin:0 0 2px; font:800 var(--type-section)/var(--leading-heading) var(--font-display); }
  .detail .sub { color:var(--muted); font-family:ui-monospace,monospace; font-size:12px; margin-bottom:16px; }
  .detHead.withMedia { grid-template-columns:auto 56px minmax(0,1fr) minmax(10rem,auto); grid-template-areas:"back media main meta"; }
  .detHead .drawerBack,#detBack { grid-area:back; }
  .detHeadMedia { grid-area:media; }
  .detHeadMain { grid-area:main; min-width:0; }
  .detHeadMeta { grid-area:meta; min-width:0; max-width:min(320px,36cqi); display:grid; justify-items:end; align-content:center; text-align:right; }
  .detHead img, .detThumbPh { width:56px; height:56px; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:var(--panel2, var(--bg)); flex:none; }
  .detThumbPh { display:flex; align-items:center; justify-content:center; color:var(--muted); border-style:dashed; }
  .detHead h2 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .detBadges { margin-top:5px; display:flex; gap:4px; flex-wrap:wrap; }
  .detGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; align-items:start; }
  .detGrid > * { min-width:0; }
  .detPriceValue { font-size:15px; font-weight:600; }
  .detPriceInput { width:90px; text-align:right; font-size:15px; font-weight:600; }
  .detPriceIssue { max-width:28ch; color:var(--amber); font-size:var(--type-secondary); line-height:1.45; }
  .detTaxLabel { margin-top:4px; }
  .detTaxSelect { padding-inline:7px; font-size:var(--type-secondary); }
  .detStockValue { margin-top:4px; font-size:var(--type-secondary); }
  .drawerHeadMain,.drawerHeadMeta { min-width:0; }
  .kv,.cf { min-width:0; }
  @container detail-board (max-width:780px) {
    .detGrid { grid-template-columns:minmax(0,1fr); }
    .detHead.withMedia { grid-template-columns:auto 48px minmax(0,1fr); grid-template-areas:"back media main" "meta meta meta"; }
    .detHeadMeta { width:100%; max-width:none; justify-items:start; text-align:left; padding-top:10px; border-top:1px solid var(--line); }
    .detHeadMeta > * { max-width:100%; }
  }
  @container detail-board (max-width:560px) {
    .formGrid { grid-template-columns:minmax(0,1fr); }
  }
  @container detail-board (max-width:520px) {
    .detHead,.detHead.withMedia { grid-template-columns:auto minmax(0,1fr); grid-template-areas:"back main" "meta meta"; }
    .detHeadMedia { display:none; }
    .detHeadMeta { width:100%; max-width:none; justify-items:start; text-align:left; }
    .kv,.cf { grid-template-columns:minmax(0,1fr); gap:3px; }
    .cardBody .crow { flex-wrap:wrap; align-items:flex-start; }
    .cardBody .crow > span[style*="min-width"] { min-width:0!important; }
  }
  .pad { padding:18px 22px; overflow:auto; height:100%; }
  .sidebar .brand { font-weight:700; font-size:15px; padding:6px 12px 16px; line-height:1.25; }
  .sidebar .brand span { display:block; font-size:10px; color:var(--muted); font-weight:500; letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }
  .content header, .content .tabs { flex:none; }
  .kpi { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
  .kpi .n { font-size:26px; font-weight:700; }
  .kpi .l { font-size:12px; color:var(--muted); margin-top:3px; }
  .dash h3 { font-size:var(--type-card); line-height:var(--leading-heading); color:var(--fg); margin:6px 0 12px; }
  .orow { padding:10px 16px; border-bottom:1px solid var(--line); cursor:pointer; display:flex; gap:10px; align-items:center; }
  .orow:hover { background:var(--panel); }
  .orow.sel { background:var(--panel2); box-shadow:inset 3px 0 0 var(--accent); }
  .orow .ref { font-family:ui-monospace,monospace; font-size:13px; min-width:52px; flex:none; }
  .orow .cu { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .orow .cu .ln { font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Positionen mit Bild und Namen (Inhaber 11.09.). Die Zeile bleibt EINZEILIG — der Name wird
     abgeschnitten, nicht umgebrochen; sonst wächst die Liste zur Textwand, gegen die sie gebaut ist. */
  .orow .cu .ln .shipPos { display:inline-flex; align-items:center; gap:5px; max-width:46%; min-width:0; vertical-align:middle; }
  .orow .cu .ln .shipPos + .shipPos { margin-left:10px; }
  .shipPosBild { width:22px; height:22px; flex:none; border-radius:4px; object-fit:cover; background:var(--panel2); border:1px solid var(--line); }
  .shipPosBildLeer { display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted); }
  .shipPosName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; color:var(--fg); }
  /* BEFUND DES VOLLGATES auf 375 px: `.shipPos` lief aus seinem Behaelter (internalOverflow).
     Ursache: Artikelnummer und "offen" waren `flex:none`, also nicht schrumpfbar — die
     Mindestbreite des Kastens war damit groesser als die 46 %, die er haben darf. Jedes TEXT-Kind
     eines Flex-Kastens, das ueberlaufen kann, braucht `min-width:0` und eine Abschneide-Regel;
     nur das Bild bleibt fest, weil 22 px immer passen. */
  .shipPosSku { min-width:0; overflow:hidden; text-overflow:ellipsis; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; opacity:.75; }
  .shipPosOffen { min-width:0; overflow:hidden; }
  .shipPosMehr { margin-left:10px; }
  .orow .dt { font-size:11px; color:var(--muted); flex:none; }
  .orow .tot { min-width:86px; text-align:right; flex:none; font-weight:600; }
  .app { display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); grid-template-rows:60px minmax(0,1fr); height:100dvh; min-height:0; }
  .topbar { grid-column:1/-1; grid-row:1; min-width:0; padding:0 16px; border-bottom:1px solid var(--line); background:var(--surface); display:flex; align-items:center; gap:14px; flex-wrap:nowrap; }
  .topBrand { display:flex; align-items:center; gap:10px; width:calc(var(--sidebar) - 16px); flex:none; }
  .topSearch { display:flex; align-items:center; gap:9px; min-width:220px; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--muted2); cursor:pointer; text-align:left; }
  .topSearch:hover { border-color:var(--accent); color:var(--fg); }
  .topSearch .kbd { margin-left:auto; }
  .topStatus { display:flex; align-items:center; gap:7px; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--muted); font-size:12px; white-space:nowrap; }
  .topStatus[data-status="connected"] .topStatusDot { background:var(--green); }
  .topStatus[data-status="stub"] .topStatusDot { background:var(--amber); }
  .topStatus[data-status="planned"] .topStatusDot { background:var(--muted2); }
  .topStatus[data-status="stale"] .topStatusDot { background:var(--amber); }
  .topStatus[data-status="unknown"] .topStatusDot { background:var(--amber); }
  .topStatus[data-status="unavailable"] .topStatusDot { background:var(--red); }
  .topStatus[data-status="live"] .topStatusDot { background:var(--green); }
  .topStatus[data-status="sandbox"] .topStatusDot,.topStatus[data-status="manual"] .topStatusDot { background:var(--amber); }
  .sidebar { grid-column:1; grid-row:2; min-height:0; overflow-y:auto; background:var(--surface); border-right:1px solid var(--line); padding:12px 10px; display:flex; flex-direction:column; gap:2px; }
  .navGroup { display:grid; gap:2px; }
  .navGroupItems { display:grid; gap:2px; }
  .navGroup[data-collapsed="true"] .navGroupItems { display:none; }
  .navGroupToggle { width:100%; min-height:36px; margin-top:8px; padding:0 10px; display:flex; align-items:center; gap:8px; border:0; border-radius:8px; background:transparent; color:var(--accent); font-size:10px; font-weight:600; letter-spacing:.14em; text-align:left; text-transform:uppercase; }
  .navGroupToggle:hover { background:var(--panel); color:var(--fg); filter:none; }
  .navGroupToggle .navGroupChevron { width:14px; height:14px; margin-left:auto; transition:transform var(--motion-fast) var(--ease-standard); }
  .navGroupToggle[aria-expanded="false"] .navGroupChevron { transform:rotate(-90deg); }
  .navGroupToggle:focus-visible { outline-offset:-2px; }
  .nav-item { width:100%; min-height:44px; padding:9px 10px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font-size:13.5px; font-weight:400; display:flex; align-items:center; gap:10px; text-align:left; position:relative; }
  .nav-item:hover { background:var(--panel); color:var(--fg); }
  .nav-item.active { background:var(--accent-soft); color:var(--fg); font-weight:600; box-shadow:inset 2.5px 0 0 var(--accent); }
  .nav-item .ic { text-align:center; width:18px; height:18px; display:grid; place-items:center; color:var(--muted2); opacity:1; flex:none; }
  .nav-item.active .ic { color:var(--accent); }
  .nav-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-count { margin-left:auto; min-width:22px; min-height:20px; padding:0 6px; display:grid; place-items:center; border-radius:999px; background:var(--panel2); color:var(--muted); font-size:10px; }
  .nav-plan { margin-left:auto; padding:1px 5px; border:1px solid var(--accent); border-radius:999px; color:var(--accent); font-size:9px; letter-spacing:.05em; text-transform:uppercase; }
  .nav-sep { margin:14px 10px 5px; padding:0; color:var(--accent); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
  .content { grid-column:2; grid-row:2; min-width:0; min-height:0; height:auto; overflow:hidden; display:flex; flex-direction:column; position:relative; }
  .workHeader { min-height:78px; padding:16px 24px 12px; border-bottom:0; display:flex; align-items:flex-start; gap:16px; flex:none; background:transparent; }
  .workTitleLine { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .workHeader h1 { margin:0; font-family:"Cabinet Grotesk",sans-serif; font-weight:800; font-size:25px; line-height:1.1; letter-spacing:-.01em; }
  .workMeta { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  .tabs { display:flex; min-height:56px; padding:6px 24px 6px; border-bottom:1px solid var(--line); gap:6px; background:transparent; overflow-x:auto; }
  .tab { border-bottom:2px solid transparent; flex:none; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--muted); font-size:13px; font-weight:400; display:flex; align-items:center; cursor:pointer; }
  .tab:hover { border-color:var(--accent); color:var(--fg); }
  .tab.active { border-bottom-color:var(--accent); border-color:var(--accent); background:var(--accent-soft); color:var(--fg); font-weight:600; }
  #main { flex:1; min-height:0; overflow:hidden; }
  .dash { overflow:auto; height:100%; padding:16px 24px 28px; }
  .dash > .viewTitle,.dash > .viewSub { display:none; }
  .toolbar { display:flex; position:sticky; top:0; z-index:2; min-height:60px; gap:8px; padding:8px 16px; background:color-mix(in srgb,var(--bg) 92%,transparent); border-bottom:1px solid var(--line); }
  .toolbar input,.toolbar select,.editInp,.tfrow input,.tfrow select { min-height:44px; padding:0 11px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--fg); }
  .toolbar input:focus,.toolbar select:focus,.editInp:focus,.tfrow input:focus,.tfrow select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:none; }
  .row,.orow { min-height:50px; padding-top:10px; padding-bottom:10px; }
  .row.kid { padding-left:40px; background:color-mix(in srgb,var(--panel) 42%,transparent); }
  .row.sel,.orow.sel { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
  .card,.kpi,.chan,.attCard,.axcard,.usercard,.stepbox,.pickCard { background:var(--panel); border-color:var(--line); border-radius:12px; }
  .drawerSplit .detail { position:absolute; top:0; right:0; bottom:0; width:var(--drawer-width,var(--inspector)); max-width:100%; border-left:1px solid var(--line); box-shadow:var(--shadow-sheet); transform:translateX(102%); transition:width var(--motion-standard) var(--ease-standard),transform var(--motion-standard) var(--ease-standard); z-index:8; container:detail-board / inline-size; background:var(--bg); }
  .drawerDim { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity var(--motion-standard) var(--ease-standard); z-index:7; cursor:pointer; background:var(--scrim); backdrop-filter:blur(3px); }
  .detHead { position:sticky; top:-20px; z-index:6; display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"back main meta"; gap:12px; align-items:center; padding:12px 0 14px; border-bottom:1px solid var(--line); background:var(--bg); }
  .conceptGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .conceptGrid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .conceptSplit { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:14px; align-items:start; }
  .posTileWorkspace { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; align-items:start; }
  .agentOrgSplit { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); height:100%; min-height:0; overflow:hidden; }
  .agentOrgSplit > .list { grid-column:1; grid-row:1; min-width:0; min-height:0; height:100%; overflow:auto; container:agent-organization / inline-size; }
  .agentOrgWorkspace { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; min-height:520px; }
  .agentOrgPeopleLayout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:14px; margin-bottom:14px; }
  @media (min-width:1181px) {
    .agentOrgSplit.drawerSplit { display:grid; grid-template-columns:minmax(0,1fr) var(--drawer-width,390px); overflow:hidden; }
    .agentOrgSplit.drawerSplit > .list { grid-column:1; grid-row:1; min-width:0; overflow:auto; }
    .agentOrgSplit.drawerSplit .drawerDim { display:none; }
    .agentOrgSplit.drawerSplit .detail { position:relative; grid-column:2; grid-row:1; inset:auto; width:auto; max-width:none; min-width:0; height:100%; padding:0; transform:none; border-left:1px solid var(--line); background:var(--bg); box-shadow:none; z-index:1; }
    .agentOrgSplit.drawerSplit > .drawerResizeHandle { opacity:1; pointer-events:auto; }
    .agentOrgSplit.drawerSplit .agentOrgInspectorBack { display:none; }
  }
  @media (max-width:1280px) { .conceptGrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:1120px) { .conceptSplit,.posTileWorkspace { grid-template-columns:1fr; } .topStatus { display:none; } }
  @media (max-width:1060px) {
    .topBrand { width:48px; } .topBrandCopy,.nav-label,.nav-sep,.nav-plan,.nav-count,.navGroupToggle { display:none; }
    .navGroup[data-collapsed="true"] .navGroupItems { display:grid; }
    .sidebar { padding-left:8px; padding-right:8px; } .nav-item { justify-content:center; padding:10px 0; }
  }
  @media (max-width:760px) {
    .topCrumb,.topSearch span:not(.kbd) { display:none; } .topSearch { min-width:44px; width:44px; padding:0; justify-content:center; } .topSearch .kbd { display:none; }
    .workHeader { padding:14px 16px 10px; } .workHeader h1 { font-size:22px; } .workMeta { display:none; }
    .tabs,.mockPage,.dash { padding-left:16px; padding-right:16px; }
    .conceptGrid,.conceptGrid.two,.jobGrid,.effectGrid { grid-template-columns:1fr; }
    .toolbar { padding-left:12px; padding-right:12px; flex-wrap:wrap; } .toolbar > * { min-width:0; } .toolbar input { flex:1 1 180px; }
    .row,.orow { padding-left:12px; padding-right:12px; }
    .row { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:4px 8px; }
    .row .tg { grid-column:1; grid-row:1 / span 2; }
    .row > .dot { grid-column:2; grid-row:1 / span 2; }
    .row .sku { grid-column:3; grid-row:1; min-width:0; }
    .row .nm { grid-column:3; grid-row:2; white-space:normal; line-height:1.35; }
    .row > .badge:not(.badge-channel) { grid-column:4; grid-row:1 / span 2; justify-self:end; }
    .row .mf,.rowChannel,.rowPrice { display:none; }
    .rowStock { grid-column:4; grid-row:2; min-width:0; align-self:end; }
    .orow { flex-wrap:wrap; align-items:flex-start; }
    .orow .ref { min-width:0; flex:0 0 auto; }
    .orow .cu { flex:1 1 calc(100% - 76px); white-space:normal; line-height:1.35; }
    .orow .cu .ln { margin-top:3px; white-space:normal; overflow-wrap:anywhere; }
    /* Am Telefon bekommt jede Position ihre eigene Zeile: 46 % von 375 px sind rund 165 px, und
       darin waeren Bild, Menge, Name, Nummer und "offen" auf Buchstabenreste zusammengequetscht.
       Die Zeile darf hier wachsen — sie tut es in dieser Ansicht ohnehin schon. */
    .orow .cu .ln .shipPos { max-width:100%; }
    .orow .cu .ln .shipPos + .shipPos { margin-left:0; }
    /* Und der Name darf hier UMBRECHEN. Auf dem Schreibtisch wird er abgeschnitten, damit die
       Liste einzeilig bleibt; am Telefon ist Abschneiden falsch — dort ist Platz nach unten, aber
       keiner zur Seite, und ein `nowrap`-Name laeuft aus seinem Kasten heraus (im Vollgate auf
       375 px gemessen: drei Mal `shipPosName` im Ueberlauf). */
    .orow .cu .ln .shipPosName { white-space:normal; }
    .orow .dt,.orow .oflow,.orow .os,.orow .tot { min-width:0; }
    .orow .tot { margin-left:auto; }
    .drawerSplit .detail { width:100%; }
    .drawerResizeHandle { display:none; }
    .detHead { gap:8px; }
    .posTileWorkspace { grid-template-columns:1fr; }
    .agentOrgWorkspace { display:block; min-height:0; }
    .agentOrgPeopleLayout { grid-template-columns:1fr; }
  }
}