/* Tabler / Bootstrap 5 app overrides. Loaded LAST (after tabler-harknet, tom-select,
 * flatpickr) so it wins over any stray legacy (Bootstrap 3 / jQuery-UI era) or JS-applied
 * rule.
 *
 * input-group fix: on some pages an input-group's .form-control was being forced to full
 * width (BS3 `.input-group .form-control{float:left;width:100%}`-style rule, or a JS tweak),
 * which pushed the addon (From/To, the date clear ×, the help ?) onto a second line. Re-assert
 * the BS5/Tabler flex behavior so field + addon stay on one row.
 */
.input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .flatpickr-input {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  float: none !important;
}

/* A `.form-select` tagged `.id-type-prefix` in an input-group (e.g. student ID-type + number)
 * should be a compact prefix sized to its content, not split the field 50/50 with the input.
 * Overrides the generic .input-group > .form-select rule above (extra class = higher specificity). */
.input-group > .form-select.id-type-prefix {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Horizontal form rows (.mb-3.row > label.col-* + .col-* input): a grid column holding a
 * <select>, an .input-group (Flatpickr) or a Tom Select .ts-wrapper would NOT shrink to its
 * assigned width because flex items default to min-width:auto (can't shrink below content).
 * Those controls bulged past their column and rendered ~2x the plain text inputs. min-width:0
 * lets every column honor its col-* width so all fields line up. */
.mb-3.row > [class*="col-"] {
  min-width: 0;
}

/* Rails 2.3 text_field emits size="30" by default (DEFAULT_FIELD_OPTIONS), and Tabler's
 * `.form-control[size]{width:auto}` then sizes those inputs to ~30 characters instead of
 * filling their column — so plain text inputs rendered NARROWER than the selects / date /
 * Tom Select controls beside them, and horizontal-form fields didn't line up. Force the
 * DEFAULT size (30) text inputs that are the direct field of a form column back to full
 * column width. Scoped so it does NOT touch input-group children or intentionally-narrow
 * fields (which carry an explicit small size like 5/10/15/20). */
.mb-3.row > [class*="col-"] > .form-control[size="30"] {
  width: 100%;
}

/* Tom Select dropdown: createTomSelect() sets dropdownParent:'body' so the menu mounts on
 * <body> (escaping the input-group/card stacking context). Force a high z-index so it sits
 * above the fields below it — the theme's default (1000) gets trapped/overridden otherwise. */
.ts-dropdown {
  z-index: 1080 !important;
}

/* tom-select.bootstrap5.css is written for a Bootstrap 5 theme and paints the menu with
 * `background: var(--bs-body-bg)`. The app runs on Tabler (--tblr-* vars) and does NOT load
 * bootstrap-harknet.css, so --bs-body-bg is undefined → the background resolved to nothing and
 * the dropdown was see-through (the fields below showed through). Re-assert an opaque surface
 * using the Tabler vars, plus a visible active-option highlight (--bs-tertiary-bg was also
 * undefined). */
.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
  background-color: var(--tblr-bg-surface, var(--tblr-body-bg, #fff)) !important;
}
.ts-dropdown .optgroup-header {
  background-color: var(--tblr-bg-surface, var(--tblr-body-bg, #fff));
}
.ts-dropdown .active {
  background-color: var(--tblr-gray-100, #f3f4f6);
  color: var(--tblr-body-color, #182433);
}

/* Required-field marker: add `required` to a label's class to append a red asterisk, instead
 * of hand-writing a <span>* </span> after each label. */
label.required::after {
  content: " *";
  color: var(--tblr-danger, #d63939);
  font-weight: 600;
}

/* Help popovers (customClass:'help-popover' in initHelpPopovers). Info-tinted background;
 * overriding the popover CSS vars tints the body AND the arrow together. NOTE: Tabler compiles
 * Bootstrap with the --tblr- prefix (not --bs-), so these must be --tblr-popover-*. Swap the
 * -info- vars for -warning- to make it yellow instead. */
.popover.help-popover {
  /* solid (opaque) light-info tint — NOT --tblr-info-lt, which is a translucent rgba(...,0.1)
   * so the page shows through. */
  --tblr-popover-bg: #e8f6f8;
  --tblr-popover-border-color: var(--tblr-info, #17a2b8);
  --tblr-popover-header-bg: var(--tblr-info, #17a2b8);
  --tblr-popover-header-color: #fff;
  --tblr-popover-max-width: 320px;
}

/* Full primary-color navbar. The header carries `navbar-dark` (which sets the light
 * text/brand/toggler-icon color vars) + `navbar-primary`; this rule just paints the bar
 * solid primary instead of the default white/tint. The quick-search stays a white
 * input-group island, so its field remains legible. */
.navbar.navbar-primary {
  background-color: var(--tblr-primary, #cf1d26) !important;
  border-bottom-color: var(--tblr-primary, #cf1d26);
}

/* The quick-search submit button sits in a white input-group; keep its icon dark so it
 * doesn't inherit the navbar's light text color and vanish against the white field. */
.navbar.navbar-primary .input-group .btn {
  color: var(--tblr-body-color, #182433);
}

/* Hover state: Tabler's generic `.nav-link:hover` forces color to --tblr-body-color (dark)
 * and adds a dark tint, so on the colored bar the item turned black. Keep it white and let
 * it bold, with a subtle light highlight instead of the dark tint. */
.navbar.navbar-primary .nav-link:hover,
.navbar.navbar-primary .nav-link:focus,
.navbar.navbar-primary .nav-link.active,
.navbar.navbar-primary .nav-item.show > .nav-link {
  color: #fff;
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.12);
}

/* Enrolled Classes -> change-status form (AJAX-loaded into the status-log cell). Give it a
 * clear gap from the status-log rows above and make the form title (e.g. "New MIA") stand out. */
.class_student_status_log_form {
  padding-top: 1rem;
}
.class_student_status_log_form h4 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--tblr-primary, #206bc4);
  margin-bottom: 1rem;
}

/* Attachment gallery (nl_attachments /uploader "gallery" mode, e.g. lesson_records edit).
 * The _gallery_table partial has no styles of its own, so lay the thumbnails out as a
 * responsive wrapped grid of Tabler-style cards instead of raw stacked <img> elements. */
#uploaded_images {
  margin-top: 0.75rem;
}
.gallery_table {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.gallery_table > div[id^="gallery_image_"] {
  width: auto;
}
.gallery_table .photo-link {
  display: inline-block;
  padding: 3px;
  line-height: 0;
  background: #fff;
  border: 1px solid var(--tblr-border-color, #dee2e6);
  border-radius: var(--tblr-border-radius, 4px);
}
.gallery_table .photo-link:hover {
  border-color: var(--tblr-primary, #206bc4);
}
.gallery_table .photo-link img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 3px;
}