/* Hub shell styles; colours come from the MudBlazor theme (Theme/XticTheme.cs, built from brand/tokens.json). */
html, body {
  font-family: "Instrument Sans", system-ui, sans-serif;
}

code, kbd, pre, .xt-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.xt-appbar {
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.xt-appbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
  text-decoration: none;
}

.xt-appbar__area {
  font: 500 0.6875rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.xt-drawer .mud-drawer-content {
  padding-top: 8px;
}

.xt-nav__group {
  padding: 18px 20px 6px;
  font: 500 0.6875rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
}

.xt-ledger-label {
  font: 500 0.75rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--mud-palette-secondary);
  outline-offset: 2px;
}

/* Deals board (H-09): one column per stage, cards as ledger entries. Scrolls sideways on narrow screens. */
.xt-board {
  overflow-x: auto;
  padding-bottom: 8px;
}

.xt-board__container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 12px;
  min-width: max-content;
}

.xt-board__column {
  display: flex;
  flex-direction: column;
  min-width: 230px;
  border: 1px solid var(--mud-palette-lines-default);
  border-top: 3px solid var(--mud-palette-primary);
  border-radius: 8px;
  background: var(--mud-palette-background-gray);
}

.xt-board__column--closed {
  border-top-color: var(--mud-palette-lines-default);
  opacity: 0.92;
}

.xt-board__head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

.xt-board__title {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.9rem;
}

.xt-board__count {
  color: var(--mud-palette-text-secondary);
}

.xt-board__meta {
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--mud-palette-text-secondary);
}

.xt-board__zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
  padding: 10px;
}

.xt-board__no-drop {
  opacity: 0.55;
}

.xt-deal {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--mud-palette-lines-default);
  border-left: 3px solid var(--mud-palette-secondary);
  border-radius: 6px;
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-primary);
  text-decoration: none;
  cursor: grab;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.xt-deal:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -8px rgb(11 18 32 / 0.45);
}

.xt-deal--overdue {
  border-left-color: var(--mud-palette-warning);
}

.xt-deal__org {
  font: 500 0.7rem/1.3 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
}

.xt-deal__title {
  font-weight: 600;
  line-height: 1.3;
}

.xt-deal__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
}

.xt-deal__probability,
.xt-deal__foot {
  color: var(--mud-palette-text-secondary);
}

.xt-deal__foot {
  font-size: 0.75rem;
}

/* Stage rail on the deal page. */
.xt-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.xt-stages__step {
  display: grid;
  gap: 2px;
  flex: 1 1 120px;
  padding: 8px 12px;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 6px;
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-secondary);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.xt-stages__step:disabled {
  cursor: default;
}

.xt-stages__step.is-reached {
  border-color: var(--mud-palette-secondary);
  color: var(--mud-palette-text-primary);
}

.xt-stages__step.is-current {
  border-color: var(--mud-palette-primary);
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
}

.xt-stages__step .xt-mono {
  font-size: 0.7rem;
  opacity: 0.8;
}

/* Horizontal bar in report tables. */
.xt-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--mud-palette-lines-default);
  overflow: hidden;
}

.xt-bar span {
  display: block;
  height: 100%;
  background: var(--mud-palette-secondary);
}

/* Support desk: tickets past their first-response target. */
.xt-row-alert td:first-child {
    box-shadow: inset 4px 0 0 var(--mud-palette-error);
}