/**
 * AI Training Center UI modernization — Phase 9A / 9A.1 polish
 * All rules scoped under #aiTrainingView.ai-training-modern.
 * Presentation only. No !important.
 * Does NOT restyle Sales Flow Editor / RubusFlow canvas (Phase 9B).
 */

#aiTrainingView.ai-training-modern {
  --ait-gap: 12px;
  --ait-radius: 8px;
  --ait-control: 36px;
  --ait-touch: 44px;
  --ait-ink: var(--ds-color-ink, var(--ink, #24262d));
  --ait-muted: var(--ds-color-muted, var(--muted, #6b7280));
  --ait-line: var(--ds-color-line, var(--line, #e5e7eb));
  --ait-surface: #fff;
  --ait-surface-quiet: #f8f9fa;
  --ait-accent: var(--ds-color-accent, var(--accent, #0f766e));
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ait-gap);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  /* Prevent view from stretching header into viewport-sized blank gap */
  align-items: stretch;
  flex: 0 1 auto;
  min-height: 0;
  height: auto;
}

#aiTrainingView.ai-training-modern *,
#aiTrainingView.ai-training-modern *::before,
#aiTrainingView.ai-training-modern *::after {
  box-sizing: border-box;
}

/* —— Header ——
   Root cause of mobile blank gap: flex wrap + space-between/align-content
   stretch inside a tall workspace. Keep header content-sized and stack
   intro → tabs with normal gap only. */
#aiTrainingView.ai-training-modern .ai-training-header {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  min-height: 0;
  height: auto;
  flex: 0 0 auto;
}

#aiTrainingView.ai-training-modern .ai-training-header__copy {
  min-width: 0;
  flex: 0 0 auto;
  max-width: 48rem;
}

#aiTrainingView.ai-training-modern .ai-training-header__eyebrow {
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ait-muted);
  line-height: 1.3;
}

#aiTrainingView.ai-training-modern .ai-training-header__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ait-ink);
  line-height: 1.25;
}

#aiTrainingView.ai-training-modern .ai-training-header__sub {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 48rem;
  color: var(--ait-muted);
}

#aiTrainingView.ai-training-modern .ai-training-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid var(--ait-line);
  border-radius: var(--ait-radius);
  background: var(--ait-surface-quiet);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#aiTrainingView.ai-training-modern .ai-training-tabs .line-tab {
  flex: 0 0 auto;
  min-height: var(--ait-control);
  min-width: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ait-muted);
  font-size: 0.8125rem;
  font-weight: 550;
  white-space: nowrap;
  line-height: 1.2;
}

#aiTrainingView.ai-training-modern .ai-training-tabs .line-tab.active {
  background: var(--ait-surface);
  color: var(--ait-ink);
  box-shadow: 0 0 0 1px var(--ait-line);
  font-weight: 650;
}

/* —— Summary —— */
#aiTrainingView.ai-training-modern .ai-training-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  flex: 0 0 auto;
}

#aiTrainingView.ai-training-modern .ai-training-stat-tile {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ait-line);
  border-radius: var(--ait-radius);
  background: var(--ait-surface);
  min-width: 0;
  /* Override global .metric-tile min-height: 118px that wastes mobile space */
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: none;
}

#aiTrainingView.ai-training-modern .ai-training-stat-tile__value {
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--ait-ink);
  line-height: 1.2;
}

#aiTrainingView.ai-training-modern .ai-training-stat-tile__label {
  font-size: 0.75rem;
  color: var(--ait-muted);
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: normal;
}

/* —— Surfaces / panels (non-flow) —— */
#aiTrainingView.ai-training-modern .ai-training-surface {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--ait-line);
  border-radius: var(--ait-radius);
  background: var(--ait-surface);
  min-width: 0;
  max-width: 100%;
  box-shadow: none;
}

#aiTrainingView.ai-training-modern .ai-training-panel {
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
}

#aiTrainingView.ai-training-modern .ai-training-surface > .panel-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0 0 12px;
}

#aiTrainingView.ai-training-modern .ai-training-surface > .panel-heading h2,
#aiTrainingView.ai-training-modern .ai-training-surface > .panel-heading h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--ait-ink);
}

#aiTrainingView.ai-training-modern #aiTrainingRunButton {
  min-height: var(--ait-control);
  min-width: 44px;
  padding: 0 14px;
  border-radius: var(--ait-radius);
}

/* —— Filters —— */
#aiTrainingView.ai-training-modern .ai-training-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 12px;
  margin: 0 0 10px;
  min-width: 0;
}

#aiTrainingView.ai-training-modern .ai-training-filters .field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--ait-muted);
}

#aiTrainingView.ai-training-modern .ai-training-filters .input-select,
#aiTrainingView.ai-training-modern .ai-training-filters .input-text {
  width: 100%;
  min-width: 0;
  min-height: var(--ait-control);
  max-width: 100%;
}

#aiTrainingView.ai-training-modern .ai-training-filters .checkbox-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-top: 22px;
  color: var(--ait-ink);
}

#aiTrainingView.ai-training-modern #aiTrainingRunStatus {
  margin: 0;
  font-size: 0.875rem;
  overflow-wrap: break-word;
  word-break: normal;
}

/* —— Tables (desktop) —— */
#aiTrainingView.ai-training-modern .ai-training-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: visible;
}

#aiTrainingView.ai-training-modern .ai-training-table-desktop {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#aiTrainingView.ai-training-modern .ai-training-suggestion-cards {
  display: none;
}

#aiTrainingView.ai-training-modern .ai-training-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: auto;
}

#aiTrainingView.ai-training-modern .ai-training-table th,
#aiTrainingView.ai-training-modern .ai-training-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ait-line);
  font-size: 0.8125rem;
  /* Avoid character-by-character breaks (whatsa/pp, S/o/r/u) */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: manual;
}

#aiTrainingView.ai-training-modern .ai-training-table th {
  color: var(--ait-muted);
  font-weight: 600;
  white-space: nowrap;
}

#aiTrainingView.ai-training-modern .ai-training-table .ai-training-cell-truncate {
  max-width: 220px;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

#aiTrainingView.ai-training-modern .ai-training-table .ai-training-cell-channel {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

#aiTrainingView.ai-training-modern .ai-training-table .ghost-button.btn-sm {
  min-height: 32px;
  min-width: 44px;
}

/* —— Suggestion cards (<=768 via media) —— */
#aiTrainingView.ai-training-modern .ai-training-suggestion-card {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ait-line);
  border-radius: var(--ait-radius);
  background: var(--ait-surface-quiet);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#aiTrainingView.ai-training-modern .ai-training-suggestion-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#aiTrainingView.ai-training-modern .ai-training-suggestion-card__type {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--ait-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#aiTrainingView.ai-training-modern .ai-training-suggestion-card__topic {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ait-ink);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
}

#aiTrainingView.ai-training-modern .ai-training-suggestion-card__meta {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
}

#aiTrainingView.ai-training-modern .ai-training-suggestion-card__question,
#aiTrainingView.ai-training-modern .ai-training-suggestion-card__answer {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ait-ink);
  overflow-wrap: break-word;
  word-break: normal;
}

#aiTrainingView.ai-training-modern .ai-training-suggestion-card__k {
  display: inline-block;
  margin-right: 4px;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ait-muted);
}

#aiTrainingView.ai-training-modern .ai-training-suggestion-card__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

#aiTrainingView.ai-training-modern .ai-training-suggestion-card__actions .ghost-button {
  min-height: var(--ait-touch);
  min-width: 44px;
}

/* —— Detail / edit —— */
#aiTrainingView.ai-training-modern .ai-training-detail {
  margin: 0;
  flex: 0 0 auto;
}

#aiTrainingView.ai-training-modern .ai-training-detail__body {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ait-ink);
  overflow-wrap: break-word;
  word-break: normal;
}

#aiTrainingView.ai-training-modern .ai-training-detail__body p {
  margin: 0 0 8px;
}

#aiTrainingView.ai-training-modern .ai-training-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

#aiTrainingView.ai-training-modern .ai-training-edit-form__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ait-line);
  border-radius: var(--ait-radius);
  background: var(--ait-surface-quiet);
  min-width: 0;
}

#aiTrainingView.ai-training-modern .ai-training-edit-form__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ait-muted);
}

#aiTrainingView.ai-training-modern .ai-training-edit-form .field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--ait-muted);
}

#aiTrainingView.ai-training-modern .ai-training-edit-form .input-text,
#aiTrainingView.ai-training-modern .ai-training-edit-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  resize: vertical;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.45;
}

#aiTrainingView.ai-training-modern .ai-training-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

#aiTrainingView.ai-training-modern .ai-training-detail__actions .primary-button,
#aiTrainingView.ai-training-modern .ai-training-detail__actions .ghost-button {
  min-height: var(--ait-control);
  min-width: 44px;
}

#aiTrainingView.ai-training-modern .ai-training-similar-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

#aiTrainingView.ai-training-modern .ai-training-similar-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ait-line);
  overflow-wrap: break-word;
  word-break: normal;
}

/* —— KB (non-flow) —— */
#aiTrainingView.ai-training-modern .ai-kb-panel__intro {
  margin: 4px 0 0;
  max-width: 42rem;
  overflow-wrap: break-word;
  word-break: normal;
}

#aiTrainingView.ai-training-modern .ai-kb-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) auto;
  gap: 10px 12px;
  align-items: end;
  margin: 0 0 12px;
  min-width: 0;
}

#aiTrainingView.ai-training-modern .ai-kb-toolbar__search {
  grid-column: span 2;
  min-width: 0;
}

#aiTrainingView.ai-training-modern .ai-kb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  align-items: start;
}

#aiTrainingView.ai-training-modern .ai-kb-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-height: min(70vh, 720px);
  overflow: auto;
}

#aiTrainingView.ai-training-modern .ai-kb-card {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ait-line);
  border-radius: var(--ait-radius);
  background: var(--ait-surface-quiet);
  min-width: 0;
}

#aiTrainingView.ai-training-modern .ai-kb-card__topic,
#aiTrainingView.ai-training-modern .ai-kb-card__answer,
#aiTrainingView.ai-training-modern .ai-kb-card__question,
#aiTrainingView.ai-training-modern .ai-kb-card__keywords,
#aiTrainingView.ai-training-modern .ai-kb-card__risk {
  overflow-wrap: break-word;
  word-break: normal;
}

#aiTrainingView.ai-training-modern .ai-kb-form-panel {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ait-line);
  border-radius: var(--ait-radius);
  background: var(--ait-surface);
  min-width: 0;
  position: sticky;
  top: 8px;
  max-height: min(78vh, 860px);
  overflow: auto;
}

#aiTrainingView.ai-training-modern .ai-kb-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#aiTrainingView.ai-training-modern .ai-kb-form .field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--ait-muted);
}

#aiTrainingView.ai-training-modern .ai-kb-form .input-text,
#aiTrainingView.ai-training-modern .ai-kb-form .input-select,
#aiTrainingView.ai-training-modern .ai-kb-form .input-textarea,
#aiTrainingView.ai-training-modern .ai-kb-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  resize: vertical;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

#aiTrainingView.ai-training-modern .ai-kb-form .settings-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(to top, var(--ait-surface) 70%, transparent);
}

#aiTrainingView.ai-training-modern .ai-kb-form .primary-button,
#aiTrainingView.ai-training-modern .ai-kb-form .ghost-button,
#aiTrainingView.ai-training-modern .ai-kb-panel .settings-action-row .ghost-button,
#aiTrainingView.ai-training-modern .ai-kb-panel .settings-action-row .primary-button {
  min-height: var(--ait-control);
  min-width: 44px;
}

/* —— Detail beside lists on wide desktop —— */
@media (min-width: 1280px) {
  #aiTrainingView.ai-training-modern:has(#aiTrainingDetail:not([hidden])):not(:has([data-ai-training-panel="kb"]:not([hidden]))):not(:has([data-ai-training-panel="flow"]:not([hidden]))) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: 14px;
  }

  #aiTrainingView.ai-training-modern:has(#aiTrainingDetail:not([hidden])) .ai-training-header,
  #aiTrainingView.ai-training-modern:has(#aiTrainingDetail:not([hidden])) #aiTrainingStats {
    grid-column: 1 / -1;
  }

  #aiTrainingView.ai-training-modern:has(#aiTrainingDetail:not([hidden])) .ai-training-panel:not([hidden]) {
    grid-column: 1;
    grid-row: 3;
  }

  #aiTrainingView.ai-training-modern:has(#aiTrainingDetail:not([hidden])) #aiTrainingDetail {
    grid-column: 2;
    grid-row: 3;
    position: sticky;
    top: 12px;
    align-self: start;
    max-height: calc(100vh - 96px);
    overflow: auto;
  }

  /* Compact single-row tabs at 1280+ */
  #aiTrainingView.ai-training-modern .ai-training-tabs .line-tab {
    padding: 0 8px;
    font-size: 0.75rem;
  }
}

@media (min-width: 1440px) {
  #aiTrainingView.ai-training-modern .ai-training-tabs .line-tab {
    padding: 0 10px;
    font-size: 0.8125rem;
  }
}

/* —— Responsive —— */
@media (max-width: 1280px) {
  #aiTrainingView.ai-training-modern .ai-training-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #aiTrainingView.ai-training-modern .ai-training-tabs .line-tab {
    padding: 0 8px;
    font-size: 0.75rem;
  }
}

@media (max-width: 1024px) {
  #aiTrainingView.ai-training-modern .ai-kb-layout {
    grid-template-columns: 1fr;
  }

  #aiTrainingView.ai-training-modern .ai-kb-form-panel {
    position: static;
    max-height: none;
  }

  #aiTrainingView.ai-training-modern .ai-kb-toolbar__search {
    grid-column: 1 / -1;
  }

  /* Controlled wrap — avoid cramming 8 labels into one overflowing row */
  #aiTrainingView.ai-training-modern .ai-training-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  #aiTrainingView.ai-training-modern .ai-training-table {
    min-width: 680px;
  }
}

@media (max-width: 768px) {
  #aiTrainingView.ai-training-modern {
    gap: 10px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  #aiTrainingView.ai-training-modern .ai-training-header {
    gap: 10px;
  }

  #aiTrainingView.ai-training-modern .ai-training-header__title {
    font-size: 1.2rem;
  }

  #aiTrainingView.ai-training-modern .ai-training-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #aiTrainingView.ai-training-modern .ai-training-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 4px;
  }

  #aiTrainingView.ai-training-modern .ai-training-tabs .line-tab {
    min-height: var(--ait-touch);
    font-size: 0.75rem;
    padding: 0 8px;
  }

  #aiTrainingView.ai-training-modern #aiTrainingRunButton,
  #aiTrainingView.ai-training-modern .ai-training-detail__actions .primary-button,
  #aiTrainingView.ai-training-modern .ai-training-detail__actions .ghost-button {
    min-height: var(--ait-touch);
  }

  #aiTrainingView.ai-training-modern .ai-training-filters .checkbox-label {
    padding-top: 8px;
  }

  /* Card list instead of compressed wide table */
  #aiTrainingView.ai-training-modern .ai-training-table-desktop {
    display: none;
  }

  #aiTrainingView.ai-training-modern .ai-training-suggestion-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #aiTrainingView.ai-training-modern .ai-training-table-wrap {
    overflow-x: visible;
  }
}

@media (max-width: 430px) {
  #aiTrainingView.ai-training-modern .ai-training-stats {
    /* Keep 2-up so analysis CTA stays above bottom nav on short viewports */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #aiTrainingView.ai-training-modern .ai-training-header {
    gap: 10px;
  }

  #aiTrainingView.ai-training-modern .ai-training-tabs {
    width: 100%;
  }

  #aiTrainingView.ai-training-modern .ai-training-stat-tile {
    padding: 10px 12px;
  }

  #aiTrainingView.ai-training-modern .ai-training-surface > .panel-heading #aiTrainingRunButton {
    width: 100%;
  }

  #aiTrainingView.ai-training-modern .ai-training-detail__actions {
    flex-direction: column;
  }

  #aiTrainingView.ai-training-modern .ai-training-detail__actions .primary-button,
  #aiTrainingView.ai-training-modern .ai-training-detail__actions .ghost-button {
    width: 100%;
  }

  #aiTrainingView.ai-training-modern .ai-kb-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  #aiTrainingView.ai-training-modern {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

#aiTrainingView.ai-training-modern.restricted {
  opacity: 0.55;
  pointer-events: none;
}