/* ========== Thoth demo — réplica estática del producto (debt-recovery-frontend) ========== */

.thoth-demo {
  --app-shell-header-height: 72px;
  font-family: Roboto, "Helvetica Neue", system-ui, sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.87);
  background: #f5f7fa;
  box-sizing: border-box;
}

.thoth-demo *,
.thoth-demo *::before,
.thoth-demo *::after {
  box-sizing: border-box;
}

/* --- Shell (app.component) --- */
.thoth-demo .thoth-shell {
  display: flex;
  min-height: 420px;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.thoth-demo .thoth-sidenav {
  width: 220px;
  flex-shrink: 0;
  background: #fafafa;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.thoth-demo .sidenav-brand-toolbar {
  height: var(--app-shell-header-height);
  min-height: var(--app-shell-header-height);
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #3f51b5;
  color: #fff;
}

.thoth-demo .sidenav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.thoth-demo .sidenav-brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.thoth-demo .sidenav-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
  min-width: 0;
}

.thoth-demo .sidenav-brand-name {
  font-size: 1.05rem;
  font-weight: 600;
}

.thoth-demo .sidenav-brand-tagline,
.thoth-demo .sidenav-brand-orvics {
  font-size: 0.78rem;
  opacity: 0.9;
}

.thoth-demo .sidenav-brand-orvics {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}

.thoth-demo .thoth-nav {
  padding: 8px 0;
}

.thoth-demo .menu-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.55);
}

.thoth-demo .menu-section-header .material-icons {
  font-size: 18px;
}

.thoth-demo .thoth-nav a {
  display: block;
  padding: 10px 16px;
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.3;
}

.thoth-demo .thoth-nav a.active {
  background: rgba(63, 81, 181, 0.12);
  color: #303f9f;
  font-weight: 600;
}

.thoth-demo .thoth-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.thoth-demo .app-top-toolbar {
  height: var(--app-shell-header-height);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #3f51b5;
  color: #fff;
}

/* Réplica app: marca en banner solo si el menú lateral está cerrado */
.thoth-demo .thoth-sidenav ~ .thoth-main .toolbar-brand {
  display: none;
}

.thoth-demo .toolbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.thoth-demo .toolbar-brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

.thoth-demo .toolbar-brand-product {
  font-weight: 600;
  font-size: 1rem;
}

.thoth-demo .thoth-content {
  padding: 20px;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

/* Nota contextual ORVICS (visible al cambiar pestaña / pantalla) */
.thoth-demo .thoth-demo-context {
  flex-shrink: 0;
  margin: 12px 0 0;
  padding: 12px 14px 14px;
  border-radius: 8px;
  border: 1px dashed rgba(63, 81, 181, 0.45);
  background: linear-gradient(180deg, #fffde7 0%, #fff9e6 100%);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.thoth-demo .thoth-demo-context-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5d4a16;
}

.thoth-demo .thoth-demo-context-label .material-icons {
  font-size: 16px;
  color: #b78917;
}

.thoth-demo .thoth-demo-context-note[hidden] {
  display: none;
}

.thoth-demo .thoth-demo-context-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  border-left: 3px solid #3f51b5;
}

.thoth-demo .thoth-demo-context-kicker {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #3949ab;
}

.thoth-demo .thoth-demo-context-title {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
  line-height: 1.35;
}

.thoth-demo .thoth-demo-context-note p {
  margin: 0 0 6px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.72);
}

.thoth-demo .thoth-demo-context-note p:last-child {
  margin-bottom: 0;
}

.thoth-demo .thoth-demo-complement[hidden] {
  display: none;
}

.thoth-demo .thoth-demo-complement {
  flex-shrink: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.thoth-demo .thoth-demo-complement-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 48rem;
}

@media (min-width: 640px) {
  .thoth-demo .thoth-demo-complement-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.thoth-demo .thoth-demo-complement-card {
  padding: 12px 14px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
  .thoth-demo .thoth-sidenav {
    display: none;
  }

  .thoth-demo .thoth-sidenav ~ .thoth-main .toolbar-brand {
    display: flex;
  }
}

/* --- mat-card réplica --- */
.thoth-demo .mat-card {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
}

.thoth-demo .mat-card-content {
  padding: 16px;
}

.thoth-demo .mat-card-title {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 8px;
}

/* --- Tablas globales (styles.scss) --- */
.thoth-demo .thoth-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.thoth-demo .thoth-table thead th {
  height: 48px;
  background-color: #3f51b5 !important;
  color: #fff !important;
  padding: 0 16px;
  text-align: left;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

.thoth-demo .thoth-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 14px;
}

.thoth-demo .thoth-table tbody tr:hover {
  background: rgba(63, 81, 181, 0.04);
}

.thoth-demo .thoth-table-wrap,
.thoth-demo .queue-table-wrap,
.thoth-demo .table-wrap {
  overflow-x: auto;
}

.thoth-demo .mat-elevation-z1 {
  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
}

.thoth-demo .mat-elevation-z8 {
  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
}

.thoth-demo .numeric-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.thoth-demo a.thoth-link {
  color: #3f51b5;
  text-decoration: none;
  font-weight: 500;
}

.thoth-demo a.thoth-link:hover {
  text-decoration: underline;
}

/* --- Botones Material --- */
.thoth-demo .mat-stroked-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 15px;
  height: 36px;
  border: 1px solid rgba(63, 81, 181, 0.5);
  border-radius: 4px;
  background: transparent;
  color: #3f51b5;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.thoth-demo .mat-raised-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 36px;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14);
}

.thoth-demo .mat-raised-button.primary {
  background: #3f51b5;
  color: #fff;
}

.thoth-demo .mat-raised-button.accent {
  background: #ff4081;
  color: #fff;
}

.thoth-demo .mat-icon-button {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #ff4081;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.thoth-demo .material-icons {
  font-size: 20px;
  vertical-align: middle;
}

/* --- Form fields outline (aproximación visual) --- */
.thoth-demo .mat-form-field {
  display: inline-flex;
  flex-direction: column;
  min-width: 160px;
  margin: 4px 0;
}

.thoth-demo .mat-form-field label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 4px;
}

.thoth-demo .mat-form-field input {
  height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.38);
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
}

.thoth-demo .mat-form-field.search-field {
  min-width: 220px;
}

/* --- Expansion panel --- */
.thoth-demo .mat-expansion-panel,
.thoth-demo .score-learn-more,
.thoth-demo .agenda-priority-help-panel {
  border-radius: 8px;
  border: 1px solid rgba(63, 81, 181, 0.22);
  background: linear-gradient(135deg, rgba(63, 81, 181, 0.06) 0%, rgba(63, 81, 181, 0.02) 100%);
  margin-bottom: 1rem;
  overflow: hidden;
}

.thoth-demo .agenda-priority-help-panel {
  border-color: rgba(0, 0, 0, 0.12);
  background: #fff;
  box-shadow: none;
}

.thoth-demo .mat-expansion-panel-header {
  padding: 12px 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.thoth-demo .mat-expansion-panel-body {
  padding: 0 16px 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.78);
}

/* ========== daily-priority-cases.component.scss ========== */
.thoth-demo .queue-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.thoth-demo .queue-hint {
  margin: 0.35rem 0 0;
  color: rgba(0, 0, 0, 0.65);
  max-width: 70ch;
}

.thoth-demo .queue-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0;
}

.thoth-demo .queue-filter-search {
  flex: 1 1 320px;
}

.thoth-demo .queue-filter-date {
  width: 180px;
}

.thoth-demo .score-badge {
  display: inline-flex;
  min-width: 44px;
  justify-content: center;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(63, 81, 181, 0.1);
  color: #3949ab;
  font-weight: 700;
}

.thoth-demo .segment-pill {
  display: inline-flex;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.82rem;
}

.thoth-demo .segment-pill.segment-gold {
  background: rgba(255, 193, 7, 0.18);
  color: #8d6e00;
}

.thoth-demo .segment-pill.segment-silver {
  background: rgba(96, 125, 139, 0.15);
  color: #455a64;
}

.thoth-demo .segment-pill.segment-bronze {
  background: rgba(141, 110, 99, 0.16);
  color: #6d4c41;
}

.thoth-demo .thoth-row-highlight {
  background: rgba(63, 81, 181, 0.06);
  border-left: 3px solid #3f51b5;
}

/* ========== business-analytics-page.component.scss ========== */
.thoth-demo .head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.thoth-demo .exec-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
}

.thoth-demo .exec-month-heading {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 600;
}

.thoth-demo .muted {
  opacity: 0.8;
  font-size: 13px;
}

.thoth-demo .exec-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.thoth-demo .exec-summary-card {
  padding: 14px 16px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.thoth-demo .exec-summary-card--warn {
  border-left: 4px solid #c62828;
}

.thoth-demo .exec-summary-label {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
  letter-spacing: 0.02em;
}

.thoth-demo .exec-summary-value {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 6px 0 4px;
  line-height: 1.2;
}

.thoth-demo .exec-summary-value--money {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.thoth-demo .exec-layout {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 300px);
  gap: 20px;
  align-items: start;
  min-width: 0;
}

.thoth-demo .exec-main {
  min-width: 0;
}

@media (max-width: 960px) {
  .thoth-demo .exec-layout {
    grid-template-columns: 1fr;
  }
}

.thoth-demo .exec-chart-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
}

.thoth-demo .exec-chart-title-spaced {
  margin-top: 22px;
}

.thoth-demo .exec-sup-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.thoth-demo .exec-sup-row {
  display: grid;
  grid-template-columns: minmax(100px, 160px) 1fr 52px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.thoth-demo .exec-sup-track {
  height: 10px;
  background: #eceff1;
  border-radius: 999px;
  overflow: hidden;
}

.thoth-demo .exec-sup-fill {
  height: 100%;
  background: #1565c0;
  border-radius: 999px;
  min-width: 2px;
}

.thoth-demo .exec-sup-pct {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.thoth-demo .pct-traffic--good { color: #2e7d32; }
.thoth-demo .pct-traffic--mid { color: #f57f17; }
.thoth-demo .pct-traffic--bad { color: #c62828; }

.thoth-demo .trend-svg {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
}

.thoth-demo .trend-grid-h { stroke: #e2e8f0; stroke-width: 1; }
.thoth-demo .trend-line-cur { stroke: #1565c0; fill: none; stroke-width: 2.5; }
.thoth-demo .trend-line-prev { stroke: #78909c; fill: none; stroke-width: 2; stroke-dasharray: 6 4; }

.thoth-demo .trend-legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  margin-top: 8px;
}

.thoth-demo .trend-legend-item::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 2px;
}

.thoth-demo .trend-leg-cur::before { background: #1565c0; }
.thoth-demo .trend-leg-prev::before { background: #78909c; }

.thoth-demo .traffic-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.thoth-demo .tl-critical { background: #ffebee; color: #b71c1c; }
.thoth-demo .tl-watch { background: #fff8e1; color: #e65100; }
.thoth-demo .tl-ok { background: #e8f5e9; color: #1b5e20; }

.thoth-demo .exec-alerts {
  padding: 12px 14px 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.thoth-demo .exec-alerts-heading {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
}

.thoth-demo .alert-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}

.thoth-demo .alert-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.72;
}

.thoth-demo .alert-value {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
}

.thoth-demo .alert-divider {
  border: 0;
  border-top: 1px solid rgba(0,0,0,.12);
  margin: 8px 0;
}

/* ========== team-performance-page.component.scss ========== */
.thoth-demo .section-title {
  margin: 18px 0 6px;
  font-weight: 600;
}

.thoth-demo .window-filter {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.thoth-demo .window-filter .presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.thoth-demo .mat-tab-group {
  margin-top: 12px;
}

.thoth-demo .mat-tab-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,.12);
  margin-bottom: 16px;
  max-width: 100%;
}

.thoth-demo .mat-tab-label {
  padding: 12px 16px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0,0,0,.6);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.thoth-demo .mat-tab-label.active {
  color: #3f51b5;
  border-bottom-color: #3f51b5;
}

.thoth-demo .pct-cell {
  font-weight: 700;
}

.thoth-demo .pct-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.thoth-demo .pct-vol {
  font-size: 0.72rem;
  opacity: 0.72;
}

/* ========== collection-schedule.component.scss ========== */
.thoth-demo .section-desc {
  margin-bottom: 1.5rem;
  color: rgba(0, 0, 0, 0.7);
}

.thoth-demo .filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
  align-items: stretch;
}

.thoth-demo .agenda-priority-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.thoth-demo .agenda-priority-high {
  background: rgba(183, 137, 23, 0.15);
  color: #5d4a16;
  border-color: rgba(183, 137, 23, 0.35);
}

.thoth-demo .agenda-priority-normal {
  background: rgba(63, 81, 181, 0.1);
  color: #3949ab;
  border-color: rgba(63, 81, 181, 0.22);
}

/* ========== escalation-rules.component.scss ========== */
.thoth-demo .table-header-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.thoth-demo .spacer {
  flex: 1 1 auto;
}

.thoth-demo .include-inactive-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.thoth-demo .simulate-button {
  margin: 0 8px;
}

/* --- Marco landing (orvics-site) --- */
.thoth-product-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);
  margin: 1.5rem 0;
  max-width: 100%;
  min-width: 0;
}

/* Demo embebido: scroll horizontal en móvil en lugar de recortar */
@media (max-width: 767px) {
  .thoth-product-frame {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
}

.thoth-product-frame-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #e8eaed;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
}

.thoth-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dadce0;
}

.thoth-dot:nth-child(1) { background: #ff5f57; }
.thoth-dot:nth-child(2) { background: #febc2e; }
.thoth-dot:nth-child(3) { background: #28c840; }

.thoth-frame-url {
  margin-left: 8px;
  font-family: ui-monospace, monospace;
}

@media (max-width: 767px) {
  .thoth-demo {
    font-size: 13px;
  }

  .thoth-demo .thoth-shell {
    overflow: visible;
    min-height: 320px;
  }

  .thoth-demo .thoth-main {
    min-width: 0;
    width: 100%;
  }

  .thoth-demo .thoth-content {
    padding: 12px;
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .thoth-demo .mat-tab-label {
    padding: 10px 12px;
    font-size: 13px;
  }

  .thoth-demo .filters-row {
    flex-direction: column;
    gap: 0.75rem;
  }

  .thoth-demo .filters-row .mat-form-field {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .thoth-demo .table-header-container {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .thoth-demo .table-header-container .spacer {
    display: none;
  }

  .thoth-demo .table-header-container .mat-raised-button,
  .thoth-demo .table-header-container .include-inactive-toggle {
    align-self: flex-start;
  }

  .thoth-demo .app-top-toolbar {
    padding: 0 8px;
    gap: 4px;
  }

  .thoth-demo .head,
  .thoth-demo .queue-head {
    flex-direction: column;
    align-items: stretch;
  }

  .thoth-demo .head .mat-stroked-button,
  .thoth-demo .queue-head .mat-stroked-button {
    align-self: flex-start;
  }

  .thoth-demo .exec-summary-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .thoth-demo .exec-summary-value {
    font-size: 1.2rem;
    word-break: break-word;
  }

  .thoth-demo .exec-summary-value--money {
    font-size: 1.1rem;
  }

  .thoth-demo .exec-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .thoth-demo .exec-sup-row {
    grid-template-columns: minmax(4.5rem, 28%) 1fr 2.75rem;
    gap: 6px;
    font-size: 12px;
  }

  .thoth-demo .exec-sup-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .thoth-demo .exec-title,
  .thoth-demo .mat-card-title,
  .thoth-demo .head-title {
    font-size: 1.15rem;
    line-height: 1.3;
  }

  .thoth-demo .exec-month-heading {
    font-size: 0.95rem;
  }

  .thoth-demo .muted {
    font-size: 12px;
    line-height: 1.45;
  }

  .thoth-demo .trend-svg {
    max-width: 100%;
    height: auto;
  }

  .thoth-demo .trend-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .thoth-demo .queue-filters {
    flex-direction: column;
    gap: 0.75rem;
  }

  .thoth-demo .queue-filter-search,
  .thoth-demo .queue-filter-date,
  .thoth-demo .mat-form-field {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .thoth-demo .queue-filter-date {
    width: 100%;
  }

  .thoth-demo .thoth-table-wrap,
  .thoth-demo .queue-table-wrap,
  .thoth-demo .table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .thoth-demo .thoth-desktop-only .table-wrap {
    margin-right: 0;
  }

  .thoth-demo .thoth-table {
    min-width: 36rem;
  }

  .thoth-demo .thoth-table thead th,
  .thoth-demo .thoth-table tbody td {
    padding: 10px 12px;
    font-size: 12px;
  }

  .thoth-demo .thoth-table thead th {
    white-space: nowrap;
  }

  .thoth-demo .mat-card-content {
    padding: 12px;
  }

  .thoth-demo .thoth-demo-context {
    margin: 10px 0 0;
    padding: 10px 12px;
  }

  .thoth-demo .thoth-demo-context-note p {
    font-size: 0.78rem;
  }

  .thoth-demo .mat-card,
  .thoth-demo .mat-card-content {
    min-width: 0;
    max-width: 100%;
  }

  .thoth-demo .table-wrap.mat-elevation-z8 {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thoth-demo * {
    animation: none !important;
    transition: none !important;
  }
}