/* SCC Application Styles */

.input-small { width: 4em; }
.input-medium { width: 10em; }

.container {
  padding-bottom: 40px;
}

body#admin .container {
  padding-top: 20px;
}

/* Allow multi-line tab labels */
.nav-tabs .nav-link {
  white-space: normal;
  line-height: 1.3;
  text-align: center;
  padding: 10px 15px;
}

/* FA Icons */
i.green { color: Green; }

h3.light-grey { color: #556; }

.normal { font-weight: normal; }

label.required abbr { color: red; }
.nowrap { white-space: nowrap; }

.short { margin-bottom: 0; }
.center { text-align: center; }
.light { font-weight: normal; }
.help { color: #666; }

/* A borderless key/legend table, e.g. admin/users' role legend: badge in
   the first column, left-aligned description text in the second, lined up
   regardless of how wide each row's badge is. */
.role-legend { color: #999; border-collapse: collapse; }
.role-legend td { border: none; padding: 0.15rem 0; text-align: left; vertical-align: top; }
.role-legend td:first-child { padding-right: 0.75rem; white-space: nowrap; }

/* Bootstrap has no built-in outline badge variant (unlike btn-outline-*) --
   a lighter-weight look than a solid bg-* badge, matching the same color
   association (secondary/primary/danger). */
.badge-outline-secondary { background-color: transparent; border: 1px solid #6c757d; color: #6c757d; }
.badge-outline-primary   { background-color: transparent; border: 1px solid #0d6efd; color: #0d6efd; }
.badge-outline-danger    { background-color: transparent; border: 1px solid #dc3545; color: #dc3545; }
.highlight { background-color: #FCF8E2; }
.dim { color: #666; }

fieldset {
  margin-top: 40px;
}

div.alert-help {
  background-color: #F5F5F5;
  border-color: #E3E3E3;
  color: #666;
}

div.alert ol li { margin-top: 0.5em; }
div.alert ul li { margin-top: 0; }

/* Bootstrap's .alert doesn't cancel its last child's default margin-bottom,
   so a <p> (or other block element) inside leaves visible empty space below
   the text, inside the colored box. */
.alert > :last-child { margin-bottom: 0; }

.th-success {
  background-color: #dff0d8;
  color: #468847;
}

.th-warning {
  background-color: #FCF8E3;
  color: #C09853;
}

.th-info {
  background-color: #d9edf7;
  color: #3a87ad;
}

.th-help {
  background-color: #F5F5F5;
  color: #666;
}

th.default {
  background-color: #EFEFEF;
  color: #000;
}

.align-right { text-align: right; }

.adult { margin-left: 85px; }
.child { margin-left: 85px; }
.child label, .adult label { display: inline; text-align: right; margin-right: 15px; }
.child select, .adult select { margin-right: 40px; }
.child a.remove_fields, .adult a.remove_fields { margin-left: 20px; font-size: 85%; }

#errorExplanation { padding-top: 0; }
#errorExplanation h2 { font-size: 125%; margin-top: 0; padding-top: 0; line-height: normal; }

body#non-admin p.form-text { color: #808080; font-size: 90%; }
body#non-admin { background: linear-gradient(180deg, #eef4e6 0, #f7f7f7 320px); background-attachment: fixed; }
body#non-admin .container {
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  border-radius: 9px;
  background: #fff;
  margin-top: 20px;
  margin-bottom: 60px;
  padding-bottom: 57px;
  padding-top: 20px;
}

/* Content rendered via content_for(:after_container) (see
   non_admin_application.html.erb) that should sit below the white message
   box, not inside it -- override the box styling above for this one. */
body#non-admin .container.no-box {
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  margin-top: -40px; /* pulls up under the box's own 60px margin-bottom, leaving ~20px */
  margin-bottom: 20px;
  padding-top: 0;
  padding-bottom: 0;
}

#ransack-form {
  margin-bottom: 0;
}
#ransack-form input, #ransack-form select { margin-right: 10px; }
#ransack-form input.check_box { margin-right: 0; }
#ransack-form .check_box { margin-right: 10px; }
#ransack-form .btn { margin-right: 5px; margin-left: 20px; }

#driver-select-form {
  margin-bottom: 0;
}

table#toys td, table#toys th { text-align: center; }
table#toys .female { color: #666; }
table#toys .male { color: #3A87AD; }

table.stats th { background-color: #F7F7F9; }
table td.id { color: #808080; }

table thead th.centered,
table tbody td.centered { text-align: center; }

.state-row select { margin-bottom: 0; }

div.form-actions {
  padding-top: 10px;
  margin-top: 20px;
  border-top: 1px solid #efefef;
}

div.form-actions-top {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #efefef;
}

.nav-tabs {
  margin-bottom: 0.5em;
}

.form-inputs select.datetime {
  display: inline-block;
  width: auto;
}

.form-groups select.inline {
  display: inline-block;
  width: auto;
}

/* Wrapped toys table */
#wrapped_toys th, table.wrapped-toys th { text-align: center; }
#wrapped_toys th.age-range, table.wrapped-toys th.age-range { text-align: left; }
#wrapped_toys th.totals, table.wrapped-toys th.totals { background-color: LightGray; }
#wrapped_toys th.toys, table.wrapped-toys th.toys { background-color: SkyBlue; }
#wrapped_toys th.children, table.wrapped-toys th.children { background-color: Orchid; }
#wrapped_toys th.foodbank, table.wrapped-toys th.foodbank { background-color: LemonChiffon; border-left: 1px solid #808080; }
#wrapped_toys th.delivery, table.wrapped-toys th.delivery { background-color: LightGreen; border-left: 1px solid #808080; }
#wrapped_toys th.pickup, table.wrapped-toys th.pickup { background-color: Moccasin; border-left: 1px solid #808080; }
#wrapped_toys th.male, table.wrapped-toys th.male { background-color: AliceBlue; border-left: 1px solid #808080; }
#wrapped_toys th.female, table.wrapped-toys th.female { background-color: MistyRose; border-left: 1px solid #808080; }
#wrapped_toys th.needed, #wrapped_toys td.needed, table.wrapped-toys th.needed, table.wrapped-toys td.needed { border-left: 1px solid #808080; }
#wrapped_toys th.remaining, #wrapped_toys td.remaining, table.wrapped-toys th.remaining, table.wrapped-toys td.remaining { background-color: HoneyDew; }
#wrapped_toys th.toys, #wrapped_toys td.toys, table.wrapped-toys th.toys, table.wrapped-toys td.toys { background-color: LightYellow; }
#wrapped_toys td.remaining, table.wrapped-toys td.remaining { color: red; font-weight: bold; border-right: 1px solid #808080; }
#wrapped_toys tr.total td, #wrapped_toys tr.total th, table.wrapped-toys tr.total td, table.wrapped-toys tr.total th { border-top: 1px solid black; }

div.errorExplanation { color: #a94442; }

/* Mailgun failed-event comments: hide each comment's edit/delete icons
   until hovered, so the list doesn't look cluttered with them. */
.comment-item { position: relative; }
.comment-item .comment-item-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: .25rem;
  opacity: 0;
  transition: opacity .15s;
}
.comment-item:hover .comment-item-actions { opacity: 1; }

/* A little breathing room under the comment textarea before Add Comment,
   but visually still tied to it (Bootstrap's default field spacing is
   1rem, which read as too disconnected). SimpleForm's wrapper_html: {
   class: } MERGES with (doesn't replace) the wrapper's own default class
   -- so this still carries the vertical_form wrapper's "mb-3" alongside
   this one. Both are Bootstrap !important utilities, so this needs to be
   !important too, and it wins because this stylesheet loads after
   Bootstrap's. */
.comment-field-wrapper { margin-bottom: .5rem !important; }

.table-transparent {
  --bs-table-bg: transparent;
}