html, body {
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

body {
    display: flex;
    flex-direction: column;
}

/* Main content area: grow to fill available space */
.main {
    flex: 1;
    min-height: calc(100vh - 250px); /* Adjust for larger footer */
}

/* Footer styling */
footer {
    margin-top: auto;
}

footer a:hover {
    color: #0dcaf0 !important;
    text-decoration: underline !important;
}

/* Bootstrap focus override – keep your red border */
.form-control:focus {
    border-color: #FF0000;
    box-shadow: none;
}

/* Optional: global font */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, "Noto Sans", sans-serif;
}

/* Align action buttons nicely in the backoffice table */
.actions-cell {
    white-space: nowrap;
}

.actions-cell form {
    display: inline-block;
    margin: 0;
}

.actions-cell .btn {
    min-width: 8rem;      /* make all buttons same width */
    text-align: center;     /* center the label inside the button */
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Progress bar on survey page */
#progress-wrapper {
    margin-bottom: 1.5rem;
}

#progress-label {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    text-align: center;
}

.cg-progress-bar {
    width: 100%;
    max-width: 320px;      /* fixed visual scale for the bar */
    height: 8px;
    border-radius: 999px;
    background-color: #e9ecef;
    overflow: hidden;
    margin: 0 auto;        /* center horizontally inside the column */
}

.cg-progress-bar-fill {
    height: 100%;
    width: 0;
    background-color: #0d6efd; /* primary-style accent */
    transition: width 0.3s ease;
}

/* Sortable column headers */
th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 22px !important; }
th.sortable::after { content: '\21C5'; position: absolute; right: 6px; opacity: .35; font-size: 12px; }
th.sortable.sort-asc::after { content: '\2191'; opacity: 1; color: var(--bs-primary); }
th.sortable.sort-desc::after { content: '\2193'; opacity: 1; color: var(--bs-primary); }

/* Create/edit survey form grid */
.cc-grid { display: grid; gap: .6rem 1rem; align-items: end; }
.cc-grid--3col { grid-template-columns: 165px 1fr 155px; }
.cc-grid--1col { grid-template-columns: 1fr; }
.cc-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--text-secondary, #6b7280); margin-bottom: .3rem; }
.cc-optional { font-weight: 400; font-size: .78rem; color: #999; }
.cc-required { color: #c0392b; }
.cc-code-wrap { display: flex; gap: .35rem; }
.cc-code-wrap input { flex: 1; font-family: monospace; letter-spacing: .08em; }
.btn-regen { height: 2.35rem; padding: 0 .65rem; border: 1.5px solid var(--border-color, #e2e8f0); border-radius: 6px; background: #f5f5f5; cursor: pointer; font-size: 1.1rem; line-height: 1; transition: background .15s; flex-shrink: 0; }
.btn-regen:hover { background: #e0e0e0; }

/* ============================================================
   Backoffice users page: table controls, sortable headers,
   pagination, bulk action bar, role badges, password controls.
   Ported from the canonical Drawbridge-Drama design.
   ============================================================ */

/* Show/hide + generate password control */
.pw-input-wrap { display: flex; gap: .4rem; align-items: stretch; }
.pw-input-wrap input { flex: 1 1 auto; min-width: 0; }
.pw-toggle, .pw-generate {
  flex: 0 0 auto; cursor: pointer; white-space: nowrap;
  border: 1px solid #ccc; background: #f4f5f7;
  border-radius: 6px; padding: 0 .7rem; font-size: .8rem; font-weight: 600;
  color: #555;
}
.pw-toggle:hover, .pw-generate:hover { background: #e9ebef; }
.pw-toggle.is-on { background: #e3e7ee; color: #0d6efd; }

/* Role badges */
.role-badge { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 700; }
.role-badge--admin    { background: #f0f4fb; color: #0d6efd; }
.role-badge--ADMIN    { background: #f0f4fb; color: #0d6efd; }
.role-badge--educator { background: #f0faf4; color: #198754; }
.role-badge--EDUCATOR { background: #f0faf4; color: #198754; }

/* Table controls: search + page size + sort hint */
.table-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: .9rem;
  flex-wrap: wrap;
}
.table-search {
  width: 100%;
  max-width: 360px;
}
.table-search__hint {
  font-size: .8rem;
  color: #6c757d;
}
.table-page-size-label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: #6c757d; white-space: nowrap;
}
.table-page-size {
  padding: .2rem .4rem; font-size: .85rem;
  border: 1px solid #ccc; border-radius: 4px; background: #fff;
}
.table-pagination {
  display: flex; align-items: center; gap: .75rem;
  margin: .6rem 0 .25rem; font-size: .85rem;
}
.pagination-info { color: #6c757d; }

/* Sortable column headers (new engine: th.sortable-col) */
th.sortable-col {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 1.4rem !important;
}
th.sortable-col:hover { color: #0d6efd; background: #f0f0f0; }
th.sortable-col::after {
  content: "\21C5";
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8rem;
  opacity: .35;
}
th.sortable-col.is-sorted-asc::after  { content: "\2191"; opacity: 1; color: #0d6efd; }
th.sortable-col.is-sorted-desc::after { content: "\2193"; opacity: 1; color: #0d6efd; }

/* Empty-filter message */
.table-empty-msg {
  margin-top: 1rem;
  padding: 1rem;
  color: #6c757d;
  background: #f6f6f6;
  border-radius: 6px;
  text-align: center;
}

/* Bulk action bar */
.bulk-bar {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1rem;
  background: #2a3f5f;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  z-index: 1050;
}
.bulk-bar[hidden] { display: none; }
.bulk-bar__count { font-size: .875rem; font-weight: 600; }
.bulk-bar__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.bulk-bar .btn-sm { font-size: .8rem; }
.bulk-bar .btn-danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.bulk-bar .btn-danger:hover { background: #a93226; border-color: #a93226; }
.bulk-deselect { background: none; border: none; color: rgba(255,255,255,.6); font-size: .8rem; cursor: pointer; padding: 0 .25rem; }
.bulk-deselect:hover { color: #fff; }