/* DayFlowPro workflow Focus layout. Tokens follow workspace colors via inline styles; this file is structure + breakpoints. */

.dfp-workflow-areas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.dfp-workflow-areas__btn { touch-action: manipulation; }
.dfp-focus__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
  margin-bottom: 12px;
}
.dfp-focus__row { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.dfp-focus__stages { display: flex; flex-wrap: wrap; gap: 6px; }
.dfp-focus__stage {
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
  border-radius: 20px;
  padding: 4px 10px;
}
.dfp-focus__stage.is-current { background: rgba(59,123,191,.12); }

@media (max-width: 1199px) {
  .dfp-focus__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .dfp-focus__next { order: -1; }
  .dfp-workflow-areas { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .dfp-workflow-areas__btn { flex: 0 0 auto; }
}
@media (max-width: 479px) {
  .dfp-workflow-shell { padding-bottom: 64px; }
}
@media (max-width: 320px) {
  .dfp-workflow-shell, .dfp-focus { overflow-x: hidden; max-width: 100%; }
  .dfp-focus__stage { max-width: 100%; }
}