/*
 * Structural, theme-independent rules -- box model reset and layout
 * primitives shared by every view regardless of which visual skin is
 * active (see app/assets/stylesheets/themes/). Nothing here should need to
 * change when a theme is swapped; visual decisions (color, type, spacing
 * scale, borders) belong in the theme file instead.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img {
  max-width: 100%;
}

/* The `hidden` attribute must win over any element-level display rule in
   the theme (`select { display: block }` and friends) -- JavaScript relies
   on it to hide the poll wizard's steps and the combobox's backing select. */
[hidden] {
  display: none !important;
}

/* App shell -- header/sidebar/main/footer arrangement (legacy equivalent:
   admin.ctp's `header-fixed sidebar-fixed` body classes and `.app-body`
   wrapper). Purely structural: which panel goes where and how they share
   space. Colors/borders/spacing-within-a-panel belong in the theme file. */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-body {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.app-sidebar {
  flex: 0 0 auto;
}

.app-main {
  flex: 1;
  min-width: 0;
}

/* Logged-out pages (login/signup/terms) render no sidebar -- legacy's
   equivalent is a wholly separate, sidebar-less layout (default.ctp)
   rather than admin.ctp, so this just centers the reading column the same
   way that simpler layout would. */
.app-body--no-sidebar .app-main {
  margin: 0 auto;
}

/* `button_to` always wraps its <button> in a <form> (Rails always adds
   `class="button_to"` to it) -- a form is block-level by default, so any
   button_to sitting next to a link_to or another button_to (a table row's
   "Edit"/"Delete" actions, account/show's per-organisation actions, a
   lone "Add X" button above a list) drops onto its own line instead of
   sitting inline with its neighbors. This is what was actually behind
   "unstyled and stacked" throughout the app -- the buttons already had
   real styling (see themes/default.css's `button` rule), they just
   couldn't share a line with anything next to them. Structural, not a
   color/spacing-scale choice, so it lives here rather than in the theme. */
.button_to {
  display: inline-block;
  margin: 0 0.4rem 0 0;
  vertical-align: middle;
}

.button_to:last-child {
  margin-right: 0;
}

/* Drag-and-drop question reordering (sortable_controller.js). Structural,
   not a color/spacing-scale choice, so it lives here rather than in the
   theme -- same reasoning as `.button_to` above. `.sortable-ghost`/
   `.sortable-drag` are SortableJS's own default class names, added/removed
   automatically during a drag, not something this app names itself. */
.drag-handle {
  cursor: grab;
}

.sortable-ghost {
  opacity: 0.4;
}

.sortable-drag {
  cursor: grabbing;
}

/* Chart.js (controllers/chart_controller.js) draws into a <canvas> with
   `maintainAspectRatio: false`, which needs an explicitly sized parent --
   the theme's `.chart-wrapper` / `.ds-chart` rule gives it one. */

.response-distribution > span {
  display: block;
}

.report-hi5-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.report-hi5-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-subtle);
}