/* =====================================================================
   module-shell-embeds.css — MMDB CDS-total rollout (2026-08-29)

   Semantic replacements for Tailwind/utility-class soup previously used
   directly in app code in:
     - src/components/ProcurementSidekick.tsx            (sk-  prefix)
     - src/app/app/_components/RemoteCanvasPage.tsx       (rcp- prefix)
     - src/app/app/_components/Layout/WindowManager/windows/ServiceFlowWindow.tsx (sfw- prefix)
     - src/app/app/helpdesk/HelpdeskServiceFlowBridge.tsx (hsb- prefix)

   All geometry reproduces exactly what the removed utility classes named
   (Tailwind's default scale — text-sm=14px, gap-2=8px, p-4=16px, etc.)
   No new hex colours: every color value below is var()'d from the
   existing token layer (portal-core.css :root, shell.css :root) or
   derived from an existing token via color-mix(). "gap-sm/md/lg" and
   "p-lg" were not real Tailwind scale entries (no theme.extend.spacing
   in tailwind.config.ts) — mapped onto this DS's own --ds-space-8/16/24
   3-tier scale (shell.css) for consistency with the rest of the system.
   ===================================================================== */

/* ---------------------------------------------------------------------
   ProcurementSidekick.tsx — floating advisory chat sidebar
   --------------------------------------------------------------------- */

.sk-shell {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  background: var(--paper);
  box-shadow: -4px 0 24px color-mix(in srgb, var(--ink) 20%, transparent);
  z-index: 50;
  border-left: 1px solid var(--hairline);
}

.sk-shell-open { width: 320px; }   /* was w-80 */
.sk-shell-closed { width: 48px; } /* was w-12 */

.sk-toggle {
  position: absolute;
  left: 0;
  top: 16px;
  margin-left: -16px;
  background: var(--baobab);
  color: var(--paper);
  border: none;
  border-radius: 9999px;
  padding: 8px;
  cursor: pointer;
}

.sk-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
}

.sk-panel-head {
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 8px;
  margin: 0 0 16px;
}

.sk-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sk-message {
  padding: 8px;
  border-radius: var(--ds-radius-sm, 4px);
}

.sk-message-user {
  background: var(--paper-2);
  margin-left: 32px;
}

.sk-message-assistant {
  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
  margin-right: 32px;
}

.sk-message-role {
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-mute);
  text-transform: uppercase;
}

.sk-message-text {
  font-size: 14px;
  margin: 4px 0 0;
}

.sk-composer {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
}

.sk-composer-input {
  flex: 1 1 auto;
  border: 1px solid var(--hairline);
  background: transparent;
  border-radius: var(--ds-radius-sm, 4px);
  padding: 4px 8px;
  font-size: 14px;
  color: var(--ink);
}

.sk-composer-send {
  background: var(--baobab);
  color: var(--paper);
  border: none;
  padding: 4px 12px;
  border-radius: var(--ds-radius-sm, 4px);
  font-size: 14px;
  cursor: pointer;
}

.sk-composer-send:hover { opacity: 0.9; }

/* ---------------------------------------------------------------------
   RemoteCanvasPage.tsx — module-federation remote-canvas scaffold
   --------------------------------------------------------------------- */

/* This wraps EVERY remote canvas, the live remote as well as the fallback
   view below it. It carried `grid gap-lg p-lg`, which emitted nothing because
   no stylesheet imports Tailwind, so the section has always had no padding.
   Giving it the 24px the class names implied narrowed the helpdesk, OMS
   process and Odoo pages by ~180px each -- caught by comparing the rendered
   pages against production. The rcp-* rules below only ever render in the
   fallback branch, where real styling is safe. */
.rcp-canvas {
  display: block;
}

.rcp-summary {
  display: grid;
  gap: var(--ds-space-16, 16px);
}

.rcp-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-16, 16px);
}

.rcp-summary-eyebrow {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
}

.rcp-summary-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.rcp-summary-desc {
  font-size: 14px;
  color: var(--ink-mute);
  margin: 0;
}

.rcp-summary-search {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8, 8px);
}

.rcp-summary-meta {
  display: grid;
  gap: var(--ds-space-8, 8px);
  font-size: 14px;
}

.rcp-groups {
  display: grid;
  gap: var(--ds-space-24, 24px);
}

.rcp-section {
  display: grid;
  gap: var(--ds-space-16, 16px);
}

.rcp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-16, 16px);
}

.rcp-section-title {
  font-size: 14px;
  font-weight: 500;
}

/* ---------------------------------------------------------------------
   ServiceFlowWindow.tsx — ServiceFlow avatar floating-window body
   --------------------------------------------------------------------- */

.sfw-body {
  display: grid;
  gap: var(--ds-space-8, 8px);
}

.sfw-ticket-row {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8, 8px);
}

.sfw-ticket-title {
  font-size: 14px;
  font-weight: 500;
}

/* ---------------------------------------------------------------------
   HelpdeskServiceFlowBridge.tsx — ServiceFlow launcher wrapping the
   helpdesk ticket workbench
   --------------------------------------------------------------------- */

/* These two carried `grid gap-sm` and `flex items-center justify-end gap-sm`.
   Tailwind is in this repo's postcss chain but no stylesheet imports it, so
   those utilities have never emitted a single rule -- the bridge has always
   rendered as a plain block with the launcher on the left. Reproducing the
   names' intent instead of the shipped result moved the launcher to the
   viewport edge and pushed the whole helpdesk column ~90px off centre, so
   these match what actually renders. Right-aligning the launcher inside the
   content column is a real design change and belongs in its own review. */
.hsb-bridge {
  display: block;
}

.hsb-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ds-space-8, 8px);
}