/* =========================================
   ERS Report Builder - Editor UI Styles
   ========================================= */

/* ── Layout: Sidebar + Canvas ─────────────── */

.rb-app {
  display: flex;
  min-height: calc(100vh - 64px); /* below portal header */
}

.rb-sidebar {
  width: 360px;
  min-width: 360px;
  background: var(--slate-50);
  border-right: 1px solid var(--slate-200);
  padding: 1.25rem;
  overflow-y: auto;
  max-height: calc(100vh - 64px);
  position: sticky;
  top: 64px;
}

.rb-canvas {
  flex: 1;
  padding: 2rem;
  background: var(--slate-100);
  overflow-y: auto;
}

/* ── Sidebar: Report Header ───────────────── */

.rb-report-header {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #808080;
}

.rb-report-header h2 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy-800);
  margin-bottom: 0.25rem;
}

.rb-report-header .rb-ticker {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--slate-500);
}

.rb-report-header .rb-date {
  font-size: 0.85rem;
  color: var(--slate-500);
  margin-top: 0.15rem;
}

/* ── Sidebar: Mode Toggle ─────────────────── */

.rb-mode-toggle {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--slate-300);
  margin-bottom: 1rem;
}

.rb-mode-btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: none;
  background: white;
  color: var(--slate-500);
  transition: var(--transition-fast);
}

.rb-mode-btn.active {
  background: var(--navy-800);
  color: white;
}

.rb-mode-btn:hover:not(.active):not(.rb-mode-disabled) {
  background: var(--slate-100);
}

.rb-mode-btn.rb-mode-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Sidebar: Risk Posture Badge ──────────── */

.rb-risk-posture {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.rb-risk-posture.favorable {
  background: #E2EFDA;
  color: #375623;
  border: 1px solid #375623;
}

.rb-risk-posture.neutral {
  background: #FFF2CC;
  color: #7F6000;
  border: 1px solid #7F6000;
}

.rb-risk-posture.unfavorable {
  background: #FCE4D6;
  color: #C00000;
  border: 1px solid #C00000;
}

.rb-risk-posture .rb-posture-label {
  flex: 1;
}

.rb-risk-posture select {
  font-size: 0.8rem;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.rb-set-all-btn {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: var(--slate-500);
  cursor: pointer;
  padding: 0.25rem 0;
  text-decoration: underline;
  margin-top: 0.25rem;
}

.rb-set-all-btn:hover {
  color: var(--navy-800);
}

/* ── RIA Firm Search ──────────────────────── */

.rb-ria-search {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #808080;
}

.rb-search-input-wrap {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
}

.rb-search-input-wrap input {
  flex: 1;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  border: 1px solid var(--slate-300);
  border-radius: 4px;
  font-family: var(--font-body);
}

.rb-search-input-wrap input:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 2px rgba(30, 58, 109, 0.15);
}

.rb-btn-sm {
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
}

.rb-search-results {
  max-height: 200px;
  overflow-y: auto;
}

.rb-search-result-item {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--slate-200);
  border-radius: 4px;
  margin-bottom: 0.25rem;
  cursor: pointer;
  transition: var(--transition-fast);
  font-size: 0.85rem;
}

.rb-search-result-item:hover {
  background: var(--teal-50);
  border-color: var(--teal-500);
}

.rb-search-result-item .rb-result-name {
  font-weight: 600;
  color: var(--navy-800);
}

.rb-search-result-item .rb-result-location {
  font-size: 0.75rem;
  color: var(--slate-500);
}

.rb-search-status {
  font-size: 0.8rem;
  color: var(--slate-500);
  padding: 0.25rem 0;
  min-height: 1.2rem;
}

.rb-search-status.loading {
  color: var(--teal-600);
  font-style: italic;
}

.rb-search-status.error {
  color: var(--red-500);
}

/* ── Sidebar: Batch Mode ─────────────────── */

.rb-batch-section {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #808080;
}

.rb-batch-section textarea {
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  border: 1px solid var(--slate-300);
  border-radius: 4px;
  resize: vertical;
  margin-top: 0.4rem;
  line-height: 1.5;
}

.rb-batch-section textarea:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 2px rgba(30, 58, 109, 0.15);
}

.rb-batch-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.rb-batch-count {
  font-size: 0.75rem;
  color: var(--slate-500);
}

/* ── Canvas: Batch Progress ──────────────── */

.rb-batch-overlay {
  padding: 2rem;
  padding-top: 4.5rem; /* clear fixed header (64px) + breathing room */
  max-width: 640px;
  margin: 0 auto;
}

.rb-batch-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.rb-batch-header h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--navy-800);
  margin: 0 0 0.5rem;
}

.rb-batch-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--slate-200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.rb-batch-progress-fill {
  height: 100%;
  background: var(--teal-500);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.rb-batch-progress-text {
  font-size: 0.85rem;
  color: var(--slate-500);
  text-align: center;
}

.rb-batch-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.rb-batch-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--slate-100);
  font-size: 0.9rem;
}

.rb-batch-item:last-child {
  border-bottom: none;
}

.rb-batch-icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  font-size: 0.95rem;
}

.rb-batch-icon.pending { color: var(--slate-300); }
.rb-batch-icon.active { color: var(--teal-500); }
.rb-batch-icon.done { color: #22c55e; }
.rb-batch-icon.failed { color: var(--red-500); }
.rb-batch-icon.skipped { color: var(--slate-400); }

.rb-batch-icon.active {
  display: inline-block;
  animation: rb-spin 0.8s linear infinite;
  font-style: normal;
}

.rb-batch-name {
  flex: 1;
  color: var(--navy-800);
}

.rb-batch-cik {
  font-size: 0.7rem;
  color: var(--slate-400);
  font-family: var(--font-mono);
}

.rb-batch-status {
  font-size: 0.8rem;
  color: var(--slate-500);
  flex-shrink: 0;
}

.rb-batch-item.done .rb-batch-status { color: #22c55e; }
.rb-batch-item.failed .rb-batch-status { color: var(--red-500); }
.rb-batch-item.skipped .rb-batch-status { color: var(--slate-400); }

.rb-batch-summary {
  text-align: center;
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--slate-50);
  border-radius: 6px;
  font-size: 0.95rem;
  color: var(--navy-800);
}

/* ── Canvas: Empty State ─────────────────── */

.rb-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  color: var(--slate-400);
}

.rb-empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.rb-empty-state h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--slate-500);
  margin: 0 0 0.5rem;
}

.rb-empty-state p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--slate-400);
  margin: 0;
}

/* ── Canvas: Loading Overlay ─────────────── */

.rb-loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

.rb-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--slate-200);
  border-top-color: var(--navy-700);
  border-radius: 50%;
  animation: rb-spin 0.8s linear infinite;
  margin-bottom: 1.5rem;
}

@keyframes rb-spin {
  to { transform: rotate(360deg); }
}

.rb-loading-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy-800);
  margin-bottom: 0.25rem;
}

.rb-loading-firm {
  font-size: 1.1rem;
  color: var(--slate-600);
  margin-bottom: 1.5rem;
}

.rb-loading-stage {
  font-size: 0.95rem;
  color: var(--teal-600);
  font-style: italic;
  min-height: 1.4rem;
  transition: opacity 0.3s;
}

.rb-loading-note {
  font-size: 0.85rem;
  color: var(--slate-400);
  margin-top: 0.75rem;
}

/* ── Sidebar: Section List ────────────────── */

.rb-section-list-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-400);
  margin-bottom: 0.5rem;
}

.rb-section-list {
  list-style: none;
  margin-bottom: 1rem;
}

.rb-section-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--slate-700);
  cursor: grab;
  transition: var(--transition-fast);
  user-select: none;
}

.rb-section-item:hover {
  background: var(--slate-200);
}

.rb-section-item.active {
  background: var(--navy-100);
  color: var(--navy-800);
  font-weight: 600;
}

.rb-section-item .rb-drag-handle {
  color: var(--slate-400);
  font-size: 0.75rem;
  cursor: grab;
}

.rb-section-item .rb-section-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rb-section-item .rb-toggle-vis {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--slate-400);
  font-size: 0.9rem;
  padding: 0.1rem;
}

.rb-section-item .rb-toggle-vis:hover {
  color: var(--navy-800);
}

.rb-section-item.hidden-section {
  opacity: 0.45;
}

/* Drag-and-drop states */
.rb-section-item.rb-dragging {
  opacity: 0.4;
  background: var(--slate-200);
}

.rb-section-item.rb-drop-above {
  border-top: 2px solid var(--navy-800);
}

.rb-section-item.rb-drop-below {
  border-bottom: 2px solid var(--navy-800);
}

/* ── Add Section Panel ────────────────────── */

.rb-add-panel {
  background: white;
  border: 1px solid var(--slate-300);
  border-radius: 6px;
  margin-top: 0.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.rb-add-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-800);
}

.rb-add-panel-close {
  border: none;
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--slate-400);
  padding: 0 0.25rem;
}

.rb-add-panel-close:hover {
  color: var(--navy-800);
}

.rb-add-panel-group-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-400);
  padding: 0.5rem 0.75rem 0.25rem;
}

.rb-add-panel-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  color: var(--slate-700);
  border: none;
  background: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.rb-add-panel-item:hover {
  background: var(--teal-50);
  color: var(--teal-600);
}

.rb-add-panel-empty {
  padding: 0.75rem;
  font-size: 0.85rem;
  color: var(--slate-400);
  text-align: center;
  font-style: italic;
}

/* ── Sidebar: Action Buttons ──────────────── */

.rb-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #808080;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #808080;
}

.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition-fast);
}

.rb-btn-primary {
  background: var(--navy-800);
  color: white;
}

.rb-btn-primary:hover {
  background: var(--navy-700);
}

.rb-btn-secondary {
  background: white;
  color: var(--navy-800);
  border: 1px solid var(--slate-300);
}

.rb-btn-secondary:hover {
  background: var(--slate-100);
}

.rb-btn-add {
  background: none;
  color: var(--teal-600);
  border: 1px dashed var(--teal-500);
  font-size: 0.8rem;
}

.rb-btn-add:hover {
  background: var(--teal-50);
}

.rb-binding-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--slate-500);
  cursor: pointer;
}

.rb-binding-toggle input {
  cursor: pointer;
}

/* ── Canvas: Section Cards ────────────────── */

.rb-card {
  background: white;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
  border: 1px solid var(--slate-200);
  overflow: hidden;
}

.rb-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}

.rb-card-header .rb-drag-handle {
  color: var(--slate-400);
  cursor: grab;
  font-size: 0.8rem;
}

.rb-card-header .rb-card-title {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-800);
}

.rb-tone-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: var(--transition-fast);
}

.rb-tone-badge:hover {
  opacity: 0.8;
}

.rb-tone-badge.favorable { background: #E2EFDA; color: #375623; }
.rb-tone-badge.neutral   { background: #FFF2CC; color: #7F6000; }
.rb-tone-badge.unfavorable { background: #FCE4D6; color: #C00000; }

.rb-card-btn {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--slate-400);
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: var(--transition-fast);
}

.rb-card-btn:hover {
  background: var(--slate-200);
  color: var(--navy-800);
}

.rb-card-body {
  padding: 1.5rem;
}

/* Canvas card drag states */
.rb-card-dragging {
  opacity: 0.4;
}

.rb-card-drop-above {
  border-top: 3px solid var(--navy-800) !important;
}

.rb-card-drop-below {
  border-bottom: 3px solid var(--navy-800) !important;
}

/* ── Regeneration Panel (inline) ──────────── */

.rb-regen-panel {
  padding: 0.75rem 1rem;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-200);
  display: none;
}

.rb-regen-panel.open {
  display: block;
}

.rb-regen-panel .rb-regen-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.rb-regen-panel select {
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--slate-300);
}

.rb-regen-panel textarea {
  width: 100%;
  font-size: 0.85rem;
  font-family: var(--font-body);
  padding: 0.5rem;
  border: 1px solid var(--slate-300);
  border-radius: 4px;
  resize: vertical;
  min-height: 50px;
}

.rb-regen-panel .rb-regen-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}


/* =========================================
   Report Content Styles
   (Document Design Standards from V4 plan)
   Used inside .rb-card-body for the report
   preview and in print output.
   ========================================= */

.report-content {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  color: #000000;
  line-height: 1.15;
  text-align: justify;
}

/* Section headings */
.report-content h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16pt;
  font-weight: bold;
  color: #002060;
  margin: 12pt 0 6pt 0;
  line-height: 1.15;
}

.report-content h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14pt;
  font-weight: bold;
  color: #0070C0;
  margin: 12pt 0 6pt 0;
  line-height: 1.15;
}

.report-content h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
  font-weight: bold;
  color: #1F4D78;
  margin: 12pt 0 6pt 0;
  line-height: 1.15;
}

/* Body text */
.report-content p {
  margin: 0 0 6pt 0;
  line-height: 1.15;
}

/* Data tables */
.report-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10pt;
  margin: 0.75rem 0;
}

.report-content thead th {
  background: #1F3864;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 10pt;
  text-align: center;
  padding: 4px 10px;
  border: 1px solid #AAAAAA;
}

/* ERS-mode table headers */
.report-content table.ers-table thead th {
  background: #17706E;
}

/* TFM-mode table headers */
.report-content table.tfm-table thead th {
  background: #5B3EA6;
}

.report-content tbody td {
  padding: 4px 10px;
  border: 1px solid #CCCCCC;
  color: #595959;
}

.report-content tbody tr:nth-child(even) {
  background: #F2F2F2;
}

.report-content tbody td:first-child {
  text-align: left;
}

.report-content tbody td.numeric {
  text-align: right;
}

.report-content .table-caption {
  font-style: italic;
  font-size: 10pt;
  color: #595959;
  margin-top: 0.25rem;
}

/* Callout boxes */
.report-content .callout {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin: 0.75rem 0;
  font-size: 11pt;
  font-style: italic;
  border-left: 4px solid;
}

.report-content .callout.callout-default {
  background: #D5E8F4;
  border-color: #2E75B6;
  color: #1F3864;
}

.report-content .callout.callout-favorable {
  background: #E2EFDA;
  border-color: #375623;
  color: #375623;
}

.report-content .callout.callout-neutral {
  background: #FFF2CC;
  border-color: #7F6000;
  color: #7F6000;
}

.report-content .callout.callout-unfavorable {
  background: #FCE4D6;
  border-color: #C00000;
  color: #C00000;
}

.report-content .callout.callout-warning {
  background: #FFF2CC;
  border-color: #7F6000;
  color: #7F6000;
}

.report-content .callout.callout-tfm {
  background: #EDE7F6;
  border-color: #5B3EA6;
  color: #5B3EA6;
}

/* Favorable / Neutral / Unfavorable text colors */
.report-content .text-favorable   { color: #375623; }
.report-content .text-neutral     { color: #7F6000; }
.report-content .text-unfavorable { color: #C00000; }


/* =========================================
   Cover Page (in-canvas preview)
   ========================================= */

.rb-cover-page {
  text-align: center;
  padding: 3rem 2rem;
  font-family: Arial, Helvetica, sans-serif;
}

.rb-cover-logo {
  max-height: 60px;
  margin-bottom: 2rem;
}

.rb-cover-title {
  font-size: 20pt;
  font-weight: bold;
  color: #1F3864;
  margin-bottom: 0.5rem;
}

.rb-cover-subtitle {
  font-size: 14pt;
  color: #2E75B6;
  margin-bottom: 1.5rem;
}

.rb-cover-date-range {
  font-size: 11pt;
  color: #595959;
  margin-bottom: 1.5rem;
}

.rb-cover-oath {
  font-size: 12pt;
  font-style: italic;
  color: #1F3864;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.rb-cover-prepared {
  font-size: 11pt;
  color: #595959;
  margin-bottom: 0.25rem;
}

.rb-cover-address {
  font-size: 9pt;
  color: #595959;
  margin-bottom: 1.5rem;
}

.rb-cover-report-date {
  font-size: 11pt;
  color: #595959;
}

.rb-cover-mode-badge {
  display: inline-block;
  font-size: 9pt;
  font-weight: bold;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  margin-top: 1rem;
}

.rb-cover-mode-badge.ers {
  background: #1F3864;
  color: white;
}

.rb-cover-mode-badge.tfm {
  background: #5B3EA6;
  color: white;
}

.rb-cover-mode-badge.ria {
  background: #17706E;
  color: white;
}