/* custom.css - Global styles for MyComm
 *
 * Purpose:
 *   - Panel sizing (sidebar/mainPanel heights)
 *   - Flex row helper for aligned input/button rows
 *   - Navbar tab font size
 */

/* Sidebar and main panel heights ------------------------------------------ */
.sidebarPanel, .mainPanel {
  height: calc(100vh - 11vh);
  overflow-y: auto;
}
@media (max-width: 768px) {
  .sidebarPanel, .mainPanel {
    height: calc(45vh);
  }
}

/* Flex row helper: makes a row act like flex and keeps BS column widths --- */
.row-flex { display: flex; align-items: center; }
.row-flex > [class*='col-'] {
  float: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
}
/* equalize form-group margins so buttons align with inputs */
.row-flex .form-group,
.row-flex .shiny-input-container {
  margin-bottom: 0;
}

/* Database action buttons: shrink to fit their label instead of stretching
 * to the full column width (the .row-flex column would otherwise stretch
 * them via align-items:stretch). Keeps the column width for alignment but
 * renders a compact, natural-width button. -------------------------------- */
.row-flex .db-btn { align-items: flex-start; }
.row-flex .db-btn .btn { width: auto; }

/* Vertically center a block (e.g. a checkbox or an input) next to taller
 * siblings like radio-button groups --------------------------------------- */
.vcenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 4.5rem; /* roughly matches label + control height of other inputs */
}

/* Navbar tab font size ---------------------------------------------------- */
.navbar .navbar-nav > li > a {
  font-size: 1.05rem !important;
}

/* Input labels: make them stand out from body text ------------------------ */
label.control-label,
.shiny-input-container > label {
  font-size: 1rem;
  font-weight: 600;
}

/* Sidebar sub-tabs: shrink padding so they fit on one line --------------- */
.sidebarPanel .nav-tabs > li > a,
.sidebarPanel .nav-tabs .nav-link {
  padding: 0.25rem 0.7rem;
}

/* Infos tab: keep links inline (some loaded CSS makes them block) ---------- */
.infos-tab a {
  display: inline !important;
}

/* Compact multi-column radio groups: choices flow down the first column (5
 * per column) then into the next, instead of one full-width row per choice --- */
.radio-grid-2col .shiny-options-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  column-gap: 1rem;
}
.radio-grid-2col .radio {
  margin-top: 0;
  margin-bottom: 0;
}

/* File inputs: keep the "Browse..." button and the filename field the same
 * height. The .row-flex centering otherwise lets the .btn-file span grow
 * taller than the .form-control text part, leaving blank space below. ------ */
.form-group.shiny-input-container .input-group {
  align-items: stretch;
}
.form-group.shiny-input-container .input-group > .input-group-btn,
.form-group.shiny-input-container .input-group > .input-group-prepend {
  display: flex;
}
.form-group.shiny-input-container .input-group .btn-file {
  display: flex;
  align-items: center;
  height: auto;
}