/* Page width and primary-action guards. Keep this layer after app.css and ai.css. */
.app.view-today .decision-panel .decision-actions .act {
  background: var(--slm-brand) !important;
  background-color: var(--slm-brand) !important;
  background-image: none !important;
  border-color: var(--slm-brand) !important;
  box-shadow: none !important;
}

.app.view-today .decision-panel .decision-actions .act:hover,
.app.view-today .decision-panel .decision-actions .act:focus-visible {
  background: var(--slm-brand-deep) !important;
  background-color: var(--slm-brand-deep) !important;
  background-image: none !important;
  border-color: var(--slm-brand-deep) !important;
}

.app.view-today .stage {
  width: min(1180px, calc(100% - 48px)) !important;
}

.app.view-today .decision-panel {
  width: 100% !important;
  max-width: none !important;
}

.app.view-clients .stage {
  width: min(1280px, calc(100% - 48px)) !important;
}

.app.view-task .stage {
  width: min(960px, calc(100% - 48px)) !important;
}

@media (max-width: 720px) {
  .app.view-today .stage,
  .app.view-clients .stage,
  .app.view-task .stage {
    width: 100% !important;
  }
}