/*
 * Wave N — Microsoft Teams chrome (mocks 33–36)
 *
 * Strongly namespaced under .teams-shell so it cannot regress the existing
 * 27 desktop mocks. Reuses tokens from showcase.css; does NOT redefine
 * brand colours, :root, body[data-showcase], .card, .mock-chrome, .shell,
 * .container, or any pre-existing class.
 *
 * Authenticity comes from LAYOUT (rail width 68px, top bar height 48px,
 * pinned-app selected state, message-thread side panel) — not from copying
 * Microsoft logos or assets. Neutral lucide-style icons throughout.
 *
 * Teams purple #5b5fc7 lives ONLY inside .teams-shell .teams-rail and
 * .teams-shell .teams-topbar — Fairgo brand colours stay inside .teams-content.
 */

/* =========================================================================
 * Outer canvas — Teams desktop window aesthetic
 * ========================================================================= */
.teams-canvas {
  background:
    linear-gradient(180deg,
      color-mix(in oklch, #5b5fc7 8%, var(--color-bg)) 0%,
      var(--color-bg) 30%);
  min-height: calc(100vh - 48px);
  padding: var(--space-5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.teams-shell {
  width: 100%;
  max-width: 1320px;
  height: 820px;
  background: var(--color-surface);
  border: 1px solid color-mix(in oklch, #5b5fc7 25%, var(--color-line));
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  display: grid;
  grid-template-columns: 68px 1fr;
  grid-template-rows: 48px 1fr;
  grid-template-areas:
    "topbar topbar"
    "rail   content";
  overflow: hidden;
  font-family: var(--font-sans); /* Segoe UI fallback baked into showcase.css */
  color: var(--color-ink);
}

/* =========================================================================
 * Top bar — title bar + search + profile (Teams app frame)
 * ========================================================================= */
.teams-topbar {
  grid-area: topbar;
  background: #5b5fc7;
  color: #fff;
  display: grid;
  grid-template-columns: 232px 1fr 232px;
  align-items: center;
  padding: 0 12px;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.teams-topbar .top-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--weight-semi) 13px / 1 var(--font-sans);
}
.teams-topbar .top-left .waffle {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
}
.teams-topbar .top-left .waffle:hover { background: rgba(255, 255, 255, .2); }
.teams-topbar .top-left .product {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--weight-semi);
}
.teams-topbar .search {
  height: 30px;
  background: rgba(255, 255, 255, .14);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: rgba(255, 255, 255, .9);
  font: var(--weight-regular) 13px / 1 var(--font-sans);
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
}
.teams-topbar .search svg { opacity: .85; }
.teams-topbar .top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.teams-topbar .top-right .icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.teams-topbar .top-right .icon-btn:hover { background: rgba(255, 255, 255, .14); }
.teams-topbar .top-right .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-brand-accent);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--weight-bold) 11px / 1 var(--font-sans);
  cursor: pointer;
}

/* =========================================================================
 * Left rail — Activity / Chat / Teams / Calendar / Apps + pinned Fairgo
 * ========================================================================= */
.teams-rail {
  grid-area: rail;
  background: #ebebf2;
  border-right: 1px solid color-mix(in oklch, #5b5fc7 18%, var(--color-line));
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.teams-rail-item {
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  text-decoration: none;
  color: #424242;
  font: var(--weight-regular) 10px / 1.1 var(--font-sans);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}
.teams-rail-item:hover { background: rgba(0, 0, 0, .04); }
.teams-rail-item.active { color: #5b5fc7; }
.teams-rail-item.active::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: #5b5fc7;
}
.teams-rail-item .icon-frame {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.teams-rail-item.fairgo .icon-frame {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--color-brand);
  color: var(--color-brand-accent);
}
.teams-rail-item.fairgo {
  font-weight: var(--weight-semi);
  color: #5b5fc7;
}
.teams-rail-divider {
  width: 32px;
  height: 1px;
  background: color-mix(in oklch, #5b5fc7 20%, transparent);
  margin: 6px 0;
}
.teams-rail-spacer { flex: 1; }

/* =========================================================================
 * Content area — Fairgo brand colours dominate inside here
 * ========================================================================= */
.teams-content {
  grid-area: content;
  background: var(--color-bg);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  min-width: 0;
}

/* App tab strip across the top of the content area (Teams pattern).
 * Houses Posts / Files / Wiki / + custom tabs — for the FairGo personal
 * tab the equivalent is Cases / Adviser / Reports / Configure. */
.teams-tabs {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 16px 0;
}
.teams-tabs .tab-context {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font: var(--weight-semi) 13px / 1 var(--font-sans);
  color: var(--color-ink);
}
.teams-tabs .tab-context .tab-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--color-brand);
  color: var(--color-brand-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.teams-tabs .tab-context .breadcrumb {
  color: var(--color-ink-muted);
  font-weight: var(--weight-regular);
}
.teams-tabs .tab-spacer { flex: 1; }
.teams-tabs .tab {
  padding: 10px 14px 9px;
  font: var(--weight-regular) 13px / 1 var(--font-sans);
  color: var(--color-ink-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
}
.teams-tabs .tab:hover { background: var(--color-surface-muted); }
.teams-tabs .tab.active {
  color: #5b5fc7;
  border-bottom-color: #5b5fc7;
  font-weight: var(--weight-semi);
}
.teams-tabs .tab-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.teams-tabs .tab-actions .ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  font: var(--weight-medium) 12px / 1 var(--font-sans);
  cursor: pointer;
}
.teams-tabs .tab-actions .ghost-btn:hover { background: var(--color-surface-muted); }

/* The actual scrollable content panel below the tab strip. */
.teams-panel {
  overflow: auto;
  padding: 20px 24px 24px;
  background: var(--color-bg);
}

/* =========================================================================
 * Page heading inside the panel
 * ========================================================================= */
.teams-page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.teams-page-header h1 {
  margin: 0;
  font: var(--weight-bold) 22px / 1.2 var(--font-sans);
  letter-spacing: -.01em;
  color: var(--color-ink);
}
.teams-page-header .crumbs {
  font: var(--weight-medium) 12px / 1 var(--font-sans);
  color: var(--color-ink-muted);
}
.teams-page-header .actions {
  display: flex;
  gap: 8px;
}
.teams-page-header .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 4px;
  font: var(--weight-semi) 13px / 1 var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  min-height: 32px;
}
.teams-page-header .btn.primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: 0;
}
.teams-page-header .btn.primary:hover { filter: brightness(1.05); }
.teams-page-header .btn.secondary {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
}
.teams-page-header .btn.secondary:hover { background: var(--color-surface-muted); }

/* =========================================================================
 * Two-pane layout (case detail) — main + side rail (Teams chat thread)
 * ========================================================================= */
.teams-twopane {
  display: grid;
  grid-template-columns: 1fr 312px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .teams-twopane { grid-template-columns: 1fr; }
}
.teams-thread {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 640px;
  overflow: auto;
}
.teams-thread .thread-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--color-line);
  font: var(--weight-semi) 13px / 1.2 var(--font-sans);
  color: var(--color-ink);
}
.teams-thread .thread-header .icon {
  color: #5b5fc7;
}
.teams-msg {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
}
.teams-msg .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in oklch, #5b5fc7 22%, var(--color-surface-muted));
  color: var(--color-brand);
  font: var(--weight-bold) 11px / 28px var(--font-sans);
  text-align: center;
}
.teams-msg .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.teams-msg .meta {
  font: var(--weight-medium) 11px / 1 var(--font-sans);
  color: var(--color-ink-muted);
}
.teams-msg .meta .name { color: var(--color-ink); font-weight: var(--weight-semi); margin-right: 6px; }
.teams-msg .text {
  font: var(--weight-regular) 13px / 1.45 var(--font-sans);
  color: var(--color-ink);
}
.teams-msg .mention {
  background: color-mix(in oklch, #5b5fc7 16%, var(--color-surface));
  color: #4a4ea5;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: var(--weight-semi);
}
.teams-thread .composer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--weight-regular) 13px / 1 var(--font-sans);
  color: var(--color-ink-muted);
}
.teams-thread .composer .field {
  flex: 1;
  border: 1px solid var(--color-line-strong);
  border-radius: 4px;
  padding: 8px 10px;
  background: var(--color-surface);
  color: var(--color-ink-muted);
  font: var(--weight-regular) 13px / 1.3 var(--font-sans);
}

/* =========================================================================
 * KPI tile (tenant-admin dashboard) — small summary card with gradient edge
 * ========================================================================= */
.teams-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) {
  .teams-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
.teams-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.teams-kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gradient-accent-soft);
}
.teams-kpi .label {
  font: var(--weight-medium) 12px / 1.2 var(--font-sans);
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.teams-kpi .value {
  font: var(--weight-bold) 28px / 1.1 var(--font-sans);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.teams-kpi .delta {
  font: var(--weight-medium) 12px / 1 var(--font-sans);
  color: var(--color-ok);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.teams-kpi .delta.warn { color: var(--color-warn); }
.teams-kpi .delta.alert { color: var(--color-alert); }

/* =========================================================================
 * Workload dial — adviser cases queue. Mirrors desktop showcase pattern.
 * ========================================================================= */
.teams-workload {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.teams-workload .dial {
  --pct: 50%;
  --dial-color: var(--color-accent);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(var(--dial-color) var(--pct), var(--color-surface-muted) 0);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.teams-workload .dial::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--color-surface);
}
.teams-workload .dial .pct {
  position: relative;
  z-index: 1;
  font: var(--weight-bold) 11px / 1 var(--font-sans);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.teams-workload .info { display: flex; flex-direction: column; gap: 2px; }
.teams-workload .info .label {
  font: var(--weight-medium) 12px / 1.2 var(--font-sans);
  color: var(--color-ink-muted);
}
.teams-workload .info .figure {
  font: var(--weight-bold) 17px / 1.1 var(--font-sans);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
 * Cases table — adviser queue rendered as a Teams-style data list
 * ========================================================================= */
.teams-table {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  overflow: hidden;
}
.teams-table-head,
.teams-table-row {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1fr 1fr 100px 32px;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
}
.teams-table-head {
  background: var(--color-surface-muted);
  font: var(--weight-semi) 12px / 1.2 var(--font-sans);
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--color-line);
}
.teams-table-row {
  border-top: 1px solid var(--color-line);
  font: var(--weight-regular) 13px / 1.3 var(--font-sans);
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
}
.teams-table-row:first-child { border-top: 0; }
.teams-table-row:hover { background: color-mix(in oklch, #5b5fc7 4%, var(--color-surface)); }
.teams-table-row .case-title {
  font-weight: var(--weight-semi);
}
.teams-table-row .case-id {
  font: var(--weight-medium) 11px / 1 var(--font-mono);
  color: var(--color-ink-muted);
  margin-top: 2px;
}
.teams-table-row .chev { color: var(--color-ink-subtle); }

/* Status chip (re-used from Teams content area). */
.teams-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font: var(--weight-bold) 10px / 1.4 var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.teams-chip.draft  { background: var(--color-warn-soft); color: var(--color-warn); }
.teams-chip.review { background: color-mix(in oklch, var(--color-accent) 14%, var(--color-surface)); color: var(--color-accent); }
.teams-chip.sent   { background: var(--color-ok-soft); color: var(--color-ok); }
.teams-chip.alert  { background: var(--color-alert-soft); color: var(--color-alert); }

/* =========================================================================
 * Sparkline tiles (tenant-admin reports) — gradient-stroked little charts
 * ========================================================================= */
.teams-spark-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .teams-spark-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .teams-spark-grid { grid-template-columns: 1fr; }
}
.teams-spark {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.teams-spark .top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.teams-spark .label {
  font: var(--weight-medium) 12px / 1 var(--font-sans);
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.teams-spark .value {
  font: var(--weight-bold) 22px / 1.1 var(--font-sans);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.teams-spark .delta {
  font: var(--weight-medium) 12px / 1 var(--font-sans);
  color: var(--color-ok);
}
.teams-spark .delta.warn { color: var(--color-warn); }
.teams-spark svg { display: block; width: 100%; height: auto; }

/* =========================================================================
 * Quick actions grid (tenant-admin dashboard) — 4 lucide tiles
 * ========================================================================= */
.teams-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .teams-quick-grid { grid-template-columns: repeat(2, 1fr); }
}
.teams-quick {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.teams-quick:hover {
  border-color: color-mix(in oklch, #5b5fc7 30%, var(--color-line));
  background: color-mix(in oklch, #5b5fc7 4%, var(--color-surface));
}
.teams-quick .icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--color-brand) 8%, var(--color-surface));
  color: var(--color-brand);
}
.teams-quick .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.teams-quick .name { font: var(--weight-semi) 13px / 1.2 var(--font-sans); }
.teams-quick .meta { font: var(--weight-regular) 12px / 1.3 var(--font-sans); color: var(--color-ink-muted); }

/* =========================================================================
 * Section heading inside the panel (small)
 * ========================================================================= */
.teams-section-title {
  font: var(--weight-bold) 13px / 1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink-muted);
  margin: 16px 0 10px;
}