/* ==========================================================================
   Bootstrap 5 compatibility shim  (STO-2523: bootstrap 3.4.1 -> 5.3.8)
   --------------------------------------------------------------------------
   This UI was built against Bootstrap 3. Bootstrap 5's Reboot is much more
   opinionated, and bootstrap.min.css is loaded AFTER main.css, so Bootstrap
   wins every specificity tie. This file is loaded immediately after
   bootstrap.min.css and restores the handful of behaviours the markup
   depends on. Load order must stay: main.css -> bootstrap.min.css -> this.
   ========================================================================== */

/* --------------------------------------------------------------------------
   #REBOOT
   BS3 had `a { text-decoration: none }`; BS5 underlines every link, which
   puts an underline under each "(?)" tooltip trigger and the delete icons.
   -------------------------------------------------------------------------- */
a {
  text-decoration: none;
}

/* BS3: `p { margin: 0 0 10px }`; BS5: `margin-bottom: 1rem`. The page header
   is a <p> inside a `display:flex; align-items:center` bar, so the extra 6px
   of bottom margin shifts the title up by 3px against the logos. */
p {
  margin: 0 0 10px;
}

/* BS5 adds `textarea { resize: vertical }` - shows a grab handle inside the
   company address box, which is a fixed-size control. */
textarea {
  resize: none;
}

/* BS5 replaces the body font with system-ui / 16px / line-height 1.5.
   NOTE: these are Bootstrap *3's* values, not main.css:196. main.css asks for
   Open Sans, but BS3 was loaded after main.css and has always overridden it,
   so the live form has been rendering in Helvetica/Arial all along. Keeping
   that here so the metrics are unchanged - several labels (e.g. "Does company
   have multiple office locations?") sit within a few px of the 350px .name
   column and would be at risk of wrapping in the wider Open Sans face.
   Switching to Open Sans is a deliberate design change, not part of this fix. */
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

/* BS3 styled every label; BS5 only sets display. The radio/checkbox pills
   ("Yes" / "No" / "Payroll" / "Leave") rely on this for their weight. */
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

/* main.css resets `h1..h6 { margin: 0 }`; BS3 overrode it with 20px/10px and
   the layout was spaced around that. BS5 uses 0 / .5rem, which lifts every
   section by 2px. These are BS3's values verbatim. `h2.title_small` in
   main.css is more specific and still pins its own margin-top to 0. */
h1,
h2,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h4,
h5,
h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* BS3 sized headings in px; BS5 uses rem plus a responsive calc(). Only the
   reg_admin pages use an unstyled heading (welcome.php h1, login.php h2) -
   the registration form sizes its own via `h2.title_small`. */
.h1,
h1 {
  font-size: 36px;
}

.h2,
h2 {
  font-size: 30px;
}

.h3,
h3 {
  font-size: 24px;
}

/* main.css resets `ol, ul { margin: 0; padding: 0 }`. BS3 only overrode the
   margin, so the reset held; BS5 also sets `padding-left: 2rem`, which
   indents #progressbar (the General / Payroll / Final step bar) by 32px. */
ol,
ul {
  padding-left: 0;
}

/* --------------------------------------------------------------------------
   #CARDS
   `.card-body` did not exist in BS3 (cards arrived in BS4), so .form_box
   supplied the padding. BS5's `.card-body` sets
   `padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x)`, but those
   variables are only declared on `.card` - and the .card wrapper is
   commented out in index.php. An undefined var makes the whole declaration
   invalid at computed-value time, so the padding collapsed to 0.
   -------------------------------------------------------------------------- */
.form_box {
  padding: 40px 0px;
}

/* --------------------------------------------------------------------------
   #FORMS
   `.form-check` also did not exist in BS3. BS5 gives it padding-left: 1.5em,
   which shifts the "modules you plan to use" checkboxes ~21px to the right.
   -------------------------------------------------------------------------- */
.form-check {
  display: block;
  min-height: 0;
  padding-left: 0;
  margin-bottom: 0;
}

/* BS3 form/validation classes removed in BS4+, still used by reg_admin
   login.php / register.php. */
.form-group {
  margin-bottom: 15px;
}

.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
}

.has-error .help-block,
.has-error .control-label,
.has-error.checkbox label,
.has-error.radio label {
  color: #a94442;
}

.has-error .form-control {
  border-color: #a94442;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-error .form-control:focus {
  border-color: #843534;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}

/* --------------------------------------------------------------------------
   #BUTTONS
   `.btn-default` was dropped in BS4. Without it the days/week spinner arrows
   lose their white background and grey border. Declared through BS5's button
   custom properties so hover/active/disabled states work too.
   -------------------------------------------------------------------------- */
.btn-default {
  --bs-btn-color: #333;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #ccc;
  --bs-btn-hover-color: #333;
  --bs-btn-hover-bg: #e6e6e6;
  --bs-btn-hover-border-color: #adadad;
  --bs-btn-active-color: #333;
  --bs-btn-active-bg: #d4d4d4;
  --bs-btn-active-border-color: #8c8c8c;
  --bs-btn-disabled-color: #333;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: #ccc;
}

/* --------------------------------------------------------------------------
   #INPUT GROUPS
   BS3 laid input-groups out as `display: table`; BS5 uses
   `display: flex; align-items: stretch`. Nothing here uses a BS5 input-group
   feature, but a lot of it depends on the table model:
     - .input-group-btn-vertical (the days/week spinner) is display: table-cell
     - the logo row relies on the label + "No file chosen" span sharing one
       anonymous table cell so they stay on a common baseline; under flex each
       becomes its own stretched flex item and the text jumps to the top
   Putting the table model back is smaller and safer than restyling each one.
   -------------------------------------------------------------------------- */
.input-group {
  display: table;
  border-collapse: separate;
}

/* BS5 also assumes the children of an input-group are one joined control, so
   it squares off the corners of every child that is not first/last and pulls
   them together with a negative margin. Here the children are standalone
   pills and buttons, so they keep their own 8px radius. !important is needed
   because those BS5 rules are long :not() chains with very high specificity. */
.input-group > .radio-container,
.input-group > .label--file {
  margin-left: 0 !important;
  border-radius: 8px !important;
}

/* --------------------------------------------------------------------------
   #MISC
   `.page-header` removed in BS4+, still used by reg_admin/welcome.php.
   -------------------------------------------------------------------------- */
.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}