/* Purpose: Maps the Portal's existing theCube and Bootstrap component classes onto
   Signal design system components, so pages that have not yet been rewritten against
   Signal markup still present correctly under the Signal shell.
   Signal tokens only; no new colour, spacing or type values are introduced here.
   Pages migrated to native Signal markup stop depending on this file. */

/* ---- theCube token aliases ------------------------------------------- *
   site.css is loaded before Signal so its bespoke page layouts survive, but its
   colour, spacing and radius tokens are re-pointed at Signal semantics here, so
   nothing on a legacy page paints with the old palette. */
:root {
  --cube-ink: var(--text-primary);
  --cube-charcoal: var(--text-primary);
  --cube-muted: var(--text-secondary);
  --cube-canvas: var(--bg-canvas);
  --cube-surface: var(--bg-surface-1);
  --cube-surface-2: var(--bg-surface-2);
  --cube-border: var(--border-default);
  --cube-border-strong: var(--border-strong);
  --cube-blue-900: var(--p-c-900);
  --cube-blue-800: var(--p-c-700);
  --cube-blue-700: var(--p-c-600);
  --cube-blue-600: var(--p-c-400);
  --cube-blue-300: var(--p-c-200);
  --cube-success: var(--bg-success);
  --cube-warning: var(--bg-warning);
  --cube-danger: var(--bg-danger);
  --cube-sidebar: var(--bg-surface-2);
  --cube-sidebar-2: var(--bg-surface-3);
  --cube-sidebar-text: var(--text-secondary);
  --cube-sidebar-muted: var(--text-tertiary);
  --cube-shadow: var(--shadow-2);
  --cube-radius: var(--radius-md);
  --cube-header-height: var(--header-h);
  --cube-sidebar-width: var(--width-sidebar);
  --bs-body-font-family: var(--font-ui);
  --bs-primary: var(--bg-brand);
  --bs-link-color: var(--text-link);
  --bs-link-hover-color: var(--text-link-hover);
}

/* ---- layout primitives ------------------------------------------------ */
.row { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.row > [class*="col-"] { flex: 1 1 240px; min-width: 0; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--space-md); }
.text-end { text-align: end; }
.text-secondary { color: var(--text-secondary); }
.text-danger { color: var(--text-danger); }
.align-middle { vertical-align: middle; }

/* ---- page furniture --------------------------------------------------- */
.page-head {
  align-items: flex-end;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
}

.page-head h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3xs);
}

.summary-copy { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; max-width: var(--measure); }

.status-panel {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-sm) var(--space-md);
}

.status-label { color: var(--text-tertiary); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.status-value { color: var(--text-primary); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.status-value.status-ok { color: var(--text-success); }

.metric-label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.metric-value { font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }

/* ---- cards ------------------------------------------------------------ */
.settings-card,
.ai-config-card,
.custom-view-card,
.ai-settings-section,
.report-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}

.settings-card > h2,
.ai-config-card > h2,
.custom-view-card-head h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-xs);
}

.custom-view-card-head { align-items: center; display: flex; gap: var(--space-sm); justify-content: space-between; margin-bottom: var(--space-sm); }
.settings-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.empty-state {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: var(--space-xl);
  text-align: center;
}

/* ---- forms ------------------------------------------------------------ */
.form-label {
  color: var(--text-secondary);
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-3xs);
}

.form-control,
.form-select,
.operation-input,
textarea.form-control {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  color: var(--field-text);
  font: inherit;
  font-size: var(--text-sm);
  min-height: var(--field-h);
  padding-inline: var(--field-px);
  width: 100%;
}

textarea.form-control { padding-block: var(--space-2xs); }

.form-control:focus,
.form-select:focus,
.operation-input:focus {
  border-color: var(--field-border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.form-control::placeholder { color: var(--field-placeholder); }
.form-control:disabled, .form-select:disabled { background: var(--bg-disabled); color: var(--text-disabled); }

.form-check { align-items: center; display: inline-flex; gap: var(--space-xs); min-height: var(--touch-target); }
.form-check-input {
  accent-color: var(--bg-brand);
  height: 18px;
  margin: 0;
  width: 18px;
}
.form-check-label { color: var(--text-primary); font-size: var(--text-sm); }

/* ---- buttons ---------------------------------------------------------- */
.btn-outline-secondary,
.btn-outline-primary {
  background: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
  color: var(--btn-secondary-text);
}

.btn-outline-secondary:hover,
.btn-outline-primary:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn-success { background: var(--bg-brand); border: 1px solid var(--bg-brand); color: var(--text-on-brand); }
.btn-success:hover { background: var(--bg-brand-hover); }
.btn-danger { background: var(--btn-danger-bg); border: 1px solid var(--btn-danger-bg); color: var(--btn-danger-text); }

/* ---- tables ----------------------------------------------------------- */
.table-responsive,
.operations-table-wrap { overflow-x: auto; }
.table-sm td, .table-sm th { height: calc(var(--table-row-h) - 8px); }
.settings-table, .operations-table { width: 100%; }

/* ---- workflow tabs ---------------------------------------------------- */
.workflow-tabs {
  border-bottom: 1px solid var(--border-default);
  display: flex;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
  overflow-x: auto;
}

.workflow-tab {
  align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  height: 40px;
  margin-bottom: -1px;
  padding-inline: var(--space-sm);
  text-decoration: none;
  white-space: nowrap;
}

.workflow-tab:hover { color: var(--text-primary); }
.workflow-tab.active { border-bottom-color: var(--border-brand); color: var(--text-primary); }

/* ---- toolbars --------------------------------------------------------- */
.operations-toolbar,
.operations-view-bar {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
}

.operations-filter { align-items: flex-end; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.operations-filter-actions,
.operations-view-actions,
.operations-view-picker-control { align-items: center; display: flex; gap: var(--space-xs); }
.operation-group { border: 1px solid var(--border-default); border-radius: var(--radius-md); margin-bottom: var(--space-md); overflow: hidden; }
.operation-group-head { align-items: center; background: var(--bg-surface-2); border-bottom: 1px solid var(--border-default); display: flex; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
.operation-group-head h2 { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0; }

.pager-bar { align-items: center; display: flex; gap: var(--space-md); padding-top: var(--space-sm); }
.pager-bar > div { display: flex; gap: var(--space-xs); margin-inline-start: auto; }

/* ---- Material Symbols icon font, still used by five pages -------------- */
.ms {
  font-family: "Material Symbols Outlined", sans-serif;
  font-size: var(--icon-md);
  line-height: 1;
  vertical-align: middle;
}

/* ---- misc ------------------------------------------------------------- */
.compact { font-size: var(--text-sm); }
.subtle { color: var(--text-tertiary); }

/* ---- remaining Bootstrap utilities and page classes ------------------- *
   These appear on pages not yet rewritten against Signal markup. Layout only;
   all values come from Signal tokens. */
.operations-head, .cube-page-header { }
.cube-page-shell { display: flex; flex-direction: column; gap: var(--space-lg); }
.cube-form-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.audit-table { width: 100%; }

.d-flex { display: flex; }
.h-100 { height: 100%; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.gap-2 { gap: var(--space-xs); }
.gap-3 { gap: var(--space-sm); }
.gap-4 { gap: var(--space-md); }
.g-3 { gap: var(--space-sm); }
.mt-1 { margin-top: var(--space-3xs); }
.mt-3 { margin-top: var(--space-sm); }
.mt-4 { margin-top: var(--space-md); }
.mt-5 { margin-top: var(--space-lg); }
.mb-4 { margin-bottom: var(--space-md); }
.font-monospace { font-family: var(--font-mono); }

.h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.h6 { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.form-text { color: var(--text-tertiary); font-size: var(--text-xs); }
.form-control-sm, .form-select-sm { font-size: var(--text-xs); min-height: var(--control-h-sm); }
.card-body { padding: var(--card-padding); }
.btn-outline-success { background: var(--bg-surface-1); border: 1px solid var(--border-strong); color: var(--text-success); }
.spinner-border-sm { display: inline-block; width: var(--icon-sm); height: var(--icon-sm); border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: signal-spin 0.7s linear infinite; }
@keyframes signal-spin { to { transform: rotate(360deg); } }

/* Bootstrap tab and fade markup, styled with Signal's tab treatment. */
.nav-tabs { border-bottom: 1px solid var(--border-default); display: flex; gap: var(--space-2xs); list-style: none; margin: 0 0 var(--space-md); padding: 0; overflow-x: auto; }
.nav-tabs .nav-item { flex: 0 0 auto; }
.nav-tabs .nav-link {
  background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-secondary);
  display: inline-flex; align-items: center; height: 40px; margin-bottom: -1px; padding-inline: var(--space-sm);
  font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap;
}
.nav-tabs .nav-link:hover { color: var(--text-primary); }
.nav-tabs .nav-link.active { border-bottom-color: var(--border-brand); color: var(--text-primary); }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active, .tab-content > .tab-pane.show { display: block; }
.fade { transition: opacity var(--dur-2) var(--ease-standard); }

/* Bootstrap's .table set vertical-align: top and Signal sets middle. The settings
   table has one very tall cell per row, so centring the others left the user name
   floating in the middle of the row. Restored for the tables authored that way. */
.settings-table td,
.settings-table th,
.custom-view-table td,
.custom-view-table th { vertical-align: top; }

/* Record tables open the record when any part of a row is clicked (see operations.js).
   The pointer and hover tint signal that the whole row is a target. */
tr[data-row-href] { cursor: pointer; }
tr[data-row-href]:hover td { background: var(--bg-hover); }

/* Signal record detail: a responsive grid of label and value pairs. */
.record-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: var(--space-md) var(--space-lg);
  margin: 0;
}
.record-field { min-width: 0; }
.record-field dt {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-3xs);
}
.record-field dd {
  color: var(--text-primary);
  font-size: var(--text-sm);
  margin: 0;
  overflow-wrap: anywhere;
}
.record-field dd.is-empty { color: var(--text-tertiary); }