/* PRODUCTION FIX: Timer Modal Button Layout */
/* Target by data attributes only - CSS modules transform class names */

/* Main container - use data attributes */
[data-dialogfooter="true"] > div[data-version],
[data-dialogfooter="true"] > div[data-build],
[data-dialogfooter="true"] > div[style*="display: flex"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  width: 100% !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* First child (button row) */
[data-dialogfooter="true"] > div > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

/* Buttons in the row */
[data-dialogfooter="true"] button {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* Reset button (last child) */
[data-dialogfooter="true"] > div > button:last-child {
  width: 100% !important;
  margin-top: 0.5rem !important;
  display: block !important;
}

/* Nuclear override for any inline styles */
[data-dialogfooter="true"] > div[style*="flex-direction: row"] {
  flex-direction: column !important;
}

/* Target dialog footer directly */
.dialog-footer,
[role="dialog"] footer,
div[class*="dialog"] footer {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

/* Additional specificity for production */
html body [data-dialogfooter="true"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  width: 100% !important;
  align-items: stretch !important;
}