/* ------------------------------------------------------------------
   nGeneSpreadsheet Version 0.2.11-dev
   © 2013-2025 Hyunsuk Frank Roh, MD. All rights reserved.
------------------------------------------------------------------ */

html, body {
  font-family: Arial, sans-serif;
  margin: 0; padding: 0;
  width: 100%;
  display: flex; flex-direction: column;
  box-sizing: border-box;
}

/* ===== Layout containers ===== */
.control-section {
  width: 100%; display: flex; flex-direction: column;
  padding: 10px; background: #f4f4f4;
  border-top: 1px solid #ccc; box-sizing: border-box;
}
.control-wrapper {
  min-width: 1300px; display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-start;
}

/* cards */
.control-panel, .output-block, .interactive-section {
  border: 2px solid #007ba7; border-radius: 15px; padding: 15px; box-sizing: border-box;
}
.interactive-section {
  flex: 0 0 100%; max-width: 100%;
  background: #e0f8d8;
  margin: 0 15px 15px;
}
.control-panel { flex: 0 0 50%; max-width: 50%; background: #e0f7fa; }
.output-block { flex: 0 0 48%; max-width: 48%; background: #e3f2fd; }

/* inner blocks */
.parameters-block { border: 1px solid #ccc; padding: 10px; border-radius: 10px; background: #fff; }
.log-console {
  background: #f9f9f9; padding: 15px; border-radius: 10px;
  flex-grow: 1; overflow-y: auto; min-height: 600px;
}
.dashed { border-top: 1px dashed #8c8b8b; margin: 20px 0; }

/* buttons & helper */
button {
  padding: 8px 12px; font-size: 14px; border: none; border-radius: 5px;
  cursor: pointer; background: #007ba7; color: #fff;
}
button:hover { background: #006799; }
button:active { background: #00527a; }

/* inputs */
input[type="number"] { width: 60px; }
textarea.py-input { resize: vertical; min-height: 6rem; }

/* interactive controls */
.interactive-controls {
  display: flex; flex-direction: column; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.random-create,
.download-buttons {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* interactive table / scrolling */
#interactive-table-container {
  width: 100%;
  max-height: 70vh;
  overflow: auto;
}

/* table styling */
#interactive-table { width: 100%; border-collapse: collapse; table-layout: auto; }
#interactive-table th,
#interactive-table td { border: 1px solid #999; padding: 3px 6px; min-width: 90px; }
#interactive-table td { resize: both; overflow: auto; }

/* loader dialog & title */
#loading {
  background: #fff; padding: 30px 40px; border: 2px solid #007ba7;
  border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,.25); outline: none;
}
#loading h1 {
  margin: 0; font-size: 1.1rem; line-height: 1.4; color: #007ba7; text-align: center;
}
#loading::backdrop { background: rgba(0,0,0,.45); }
.page-title { margin: 0; font-size: 1.5rem; line-height: 1.2; padding-left: 25px; }

/* footnote */
.foot {
  flex: 0 0 auto;
  width: 100%; text-align: center;
  font-size: .8rem; color: #555;
  margin: 20px 0 10px;
}

/* ---------- NEW: Routine row layout ---------- */
.routine-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.routine-row button,
.routine-row details { margin: 0; }