/* Base typography and layout */
h1 {   
  color: #ffffff;              /* strong white */
  text-shadow: 0 2px 8px rgba(0,0,0,0.45); /* better contrast */
  font-size: 60px; 
}
.lead {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 400;
  text-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
body { background: #f4f4f4; }
body {
  background: url("../images/bg.JPG") center top no-repeat fixed;
  background-size: cover;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.0); /* increase alpha to make lighter */
  pointer-events: none;
  z-index: -1;
}
/* Prevent horizontal overflow when hero search / Select2 opens */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Make sure Select2 for hero search never exceeds viewport width */
#species-latin + .select2-container,
#species-latin + .select2-container--default {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Also lock the internal selection to the container */
#species-latin + .select2-container--default .select2-selection--single {
  max-width: 100% !important;
  box-sizing: border-box;
}
#demo { font-size: 40px; color: rgb(74, 74, 107); }
.bg-blue { background-color: rgb(31, 31, 56) !important; }
.card-transparent {
  background-color: rgba(255, 255, 255, 0.0);  /* fully transparent */
  border: none;  /* optional: remove border */
}
/* Buttons */
.btn-primary { background-color: rgb(74, 74, 107) !important; border-color: rgb(74, 74, 107) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: rgb(44, 44, 63) !important; border-color: rgb(44, 44, 63) !important; }
.btn-dark { background-color: rgb(117, 167, 231) !important; border-color: rgb(117, 167, 231) !important; }
.btn-dark:hover, .btn-dark:focus { background-color: rgb(110, 152, 207) !important; border-color: rgb(110, 152, 207) !important; }
.btn-warning { background-color: #fecf81ff !important; border-color: #fecf81ff !important; }
.btn-warning:hover, .btn-warning:focus { background-color: rgb(236, 188, 111) !important; border-color: rgb(236, 188, 111) !important; }
.btn-danger { background-color: rgb(236, 114, 93) !important; border-color: rgb(236, 114, 93) !important; }
.btn-danger:hover, .btn-danger:focus { background-color: rgb(202, 97, 78) !important; border-color: rgb(202, 97, 78) !important; }
.btn-outline-dark { color: rgb(74, 74, 107) !important; border-color: rgb(74, 74, 107) !important; border-width: 2px !important; font-weight: 600 !important; }
.btn-outline-dark:hover, .btn-outline-dark:focus { background-color: rgb(74, 74, 107) !important; color: #fff !important; border-color: rgb(74, 74, 107) !important; }

/* Badges */
.badge.bg-primary { background-color: rgb(74, 74, 107) !important; color: #fff !important; }
.badge.bg-secondary { background-color: #6c757d !important; color: #fff !important; }
.badge.bg-warning { background-color: #fecf81ff !important; color: #212529 !important; }
.badge.bg-success { background-color: #198754 !important; color: #fff !important; }
.badge.bg-dark { background-color: #212529 !important; color: #fff !important; }

/* Hidden/alternate columns toggling */
.hidden-column { display: none; }
.show-hidden-columns .hidden-column { display: table-cell; }
.show-hidden-columns .normal-column { display: none; }

/* Dropzone tweaks */
.dropzone .dz-success-mark, .dropzone .dz-error-mark { display: none !important; }
#csv-errors { white-space: pre-wrap; display: block; color: red; }

/* Hero Select2 as a single big bar with search icon */
#species-latin + .select2-container {
  width: 100% !important;
  height: 52px;                /* hard-lock outer height */
}

#species-latin + .select2-container--default .select2-selection--single {
  height: 52px !important;
  border-radius: 999px !important;
  border: none !important;
  padding-left: 40px;          /* space for icon */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
}

/* Focus/open states: keep exactly the same */
#species-latin + .select2-container--default.select2-container--focus .select2-selection--single,
#species-latin + .select2-container--open .select2-selection--single {
  height: 52px !important;
  border-radius: 999px !important;
  border: none !important;
  padding-left: 40px !important;
  padding-right: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  outline: none !important;
  box-sizing: border-box;
}

/* Text alignment */
#species-latin + .select2-container--default .select2-selection__rendered {
  line-height: 52px !important;
  font-size: 1.05rem;
}

/* Hide arrow */
#species-latin + .select2-container--default .select2-selection__arrow {
  display: none !important;
}

/* Search icon inside the bar */
#species-latin + .select2-container--default .select2-selection--single::before {
  content: "\f52a";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 14px;
  font-size: 1.2rem;
  color: #666;
}

/* Lock outer container box model and focus behavior for hero search */
#species-latin + .select2-container--default {
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

#species-latin + .select2-container--default.select2-container--focus {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;  /* shadow is already on selection */
}

/* Tables – layout */
#egg-table-simple-table, #egg-table-basic-table,
#egg-table-incubation-table, #egg-table-full-table { table-layout: auto !important; }

/* Let DT size scrollX tables; only force width on non-scrolling ones */
#egg-table-basic-table, #egg-table-simple-table { width: 100%; }
/* First “+” column: identical across tables */
#egg-table thead tr:first-child th:nth-child(1),
#egg-table tbody td:nth-child(1),
#egg-table-basic-table thead tr:first-child th:nth-child(1),
#egg-table-basic-table tbody td:nth-child(1),
#egg-table-simple-table thead tr:first-child th:nth-child(1),
#egg-table-simple-table tbody td:nth-child(1),
#egg-table-incubation-table thead tr:first-child th:nth-child(1),
#egg-table-incubation-table tbody td:nth-child(1),
#egg-table-full-table thead tr:first-child th:nth-child(1),
#egg-table-full-table tbody td:nth-child(1) {
  width: 24px !important; min-width: 24px !important; max-width: 24px !important;
  padding-left: 0 !important; padding-right: 0 !important; overflow: hidden;
}

/* Remove borders/padding in first column cells */
#egg-table th.no-border, #egg-table td.no-border,
#egg-table-basic-table th.no-border, #egg-table-basic-table td.no-border,
#egg-table-simple-table th.no-border, #egg-table-simple-table td.no-border,
#egg-table-incubation-table th.no-border, #egg-table-incubation-table td.no-border,
#egg-table-full-table th.no-border, #egg-table-full-table td.no-border,
#my-egg-table-basic-table th.no-border, #my-egg-table-basic-table td.no-border,
#my-egg-table-simple-table th.no-border, #my-egg-table-simple-table td.no-border,
#my-egg-table-incubation-table th.no-border, #my-egg-table-incubation-table td.no-border,
#my-egg-table-full-table th.no-border, #my-egg-table-full-table td.no-border {
  border: none !important; background: transparent !important; white-space: nowrap;
  min-width: 24px; width: 24px; max-width: 24px;
  padding-left: 0 !important; padding-right: 0 !important;
}

/* Single-line rows by default for all egg tables */
#egg-table-basic-table th, #egg-table-basic-table td,
#egg-table-simple-table th, #egg-table-simple-table td,
#egg-table-incubation-table th, #egg-table-incubation-table td,
#egg-table-full-table th, #egg-table-full-table td,
#my-egg-table-basic-table th, #my-egg-table-basic-table td,
#my-egg-table-simple-table th, #my-egg-table-simple-table td,
#my-egg-table-incubation-table th, #my-egg-table-incubation-table td,
#my-egg-table-full-table th, #my-egg-table-full-table td { white-space: nowrap !important; }

/* Expand on row click (.row-expanded set by JS) */
#egg-table-basic-table tbody tr.row-expanded td,
#egg-table-simple-table tbody tr.row-expanded td,
#egg-table-incubation-table tbody tr.row-expanded td,
#egg-table-full-table tbody tr.row-expanded td,
#my-egg-table-basic-table tbody tr.row-expanded td,
#my-egg-table-simple-table tbody tr.row-expanded td,
#my-egg-table-incubation-table tbody tr.row-expanded td,
#my-egg-table-full-table tbody tr.row-expanded td {
  white-space: normal !important; word-break: break-word;
}

/* Notes truncation wrapper - used inside td.col-notes */
.notes-truncate {
  display: block;
  max-width: calc(80px * var(--tz, 1));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-expanded .notes-truncate {
  max-width: none;
  overflow: visible;
  white-space: normal;
  word-break: break-word;
}
/* Tighter cap on phones */
@media (max-width: 576px) {
  #egg-table-basic-table td.col-notes,
  #egg-table-incubation-table td.col-notes,
  #egg-table-full-table td.col-notes {
    max-width: calc(50px * var(--tz, 1));
  }

  /* Make date columns narrower on mobile */
  #egg-table-simple-table th.col-date,  #egg-table-simple-table td.col-date,
  #egg-table-basic-table  th.col-date,  #egg-table-basic-table  td.col-date,
  #my-egg-table-simple-table th.col-date,  #my-egg-table-simple-table td.col-date,
  #my-egg-table-basic-table  th.col-date,  #my-egg-table-basic-table  td.col-date {
    min-width: calc(60px * var(--tz, 1));
    width: calc(60px * var(--tz, 1));
  }

  /* Reduce min-width for all cells on mobile */
  #egg-table-incubation-table thead th, #egg-table-incubation-table tbody td,
  #egg-table-full-table thead th, #egg-table-full-table tbody td {
    min-width: calc(60px * var(--tz, 1));
  }

  #egg-table-incubation-table thead th.col-date, #egg-table-incubation-table tbody td.col-date,
  #egg-table-full-table thead th.col-date, #egg-table-full-table tbody td.col-date {
    min-width: calc(50px * var(--tz, 1));
  }
}

/* Row pointer cursor */
#egg-table-basic-table tbody tr,
#egg-table-simple-table tbody tr,
#egg-table-incubation-table tbody tr,
#egg-table-full-table tbody tr { cursor: pointer; }

/* Hide table bottom border */
#egg-table, #egg-table-basic-table, #egg-table-simple-table, #egg-table-incubation-table, #egg-table-full-table {
  border-bottom: none !important;
}

/* Basic table: sensible min-widths (scale with zoom) */
#egg-table-basic-table thead tr:first-child th:nth-child(4),
#egg-table-basic-table tbody td:nth-child(4) { min-width: calc(110px * var(--tz, 1)); } /* hatch date */
#egg-table-basic-table thead tr:first-child th:nth-child(5),
#egg-table-basic-table tbody td:nth-child(5) { min-width: calc(130px * var(--tz, 1)); } /* incubator */
#egg-table-basic-table thead tr:first-child th:nth-child(6),
#egg-table-basic-table tbody td:nth-child(6) { min-width: calc(180px * var(--tz, 1)); } /* notes */

/* Common column widths (ID/species/date, scale with zoom) */
#egg-table-simple-table th.col-id,    #egg-table-simple-table td.col-id,
#egg-table-basic-table  th.col-id,    #egg-table-basic-table  td.col-id,
#my-egg-table-simple-table th.col-id,    #my-egg-table-simple-table td.col-id,
#my-egg-table-basic-table  th.col-id,    #my-egg-table-basic-table  td.col-id { min-width: calc(85px * var(--tz, 1)); width: calc(85px * var(--tz, 1)); white-space: nowrap; }
#egg-table-simple-table th.col-species,#egg-table-simple-table td.col-species,
#egg-table-basic-table  th.col-species,#egg-table-basic-table  td.col-species,
#my-egg-table-simple-table th.col-species,#my-egg-table-simple-table td.col-species,
#my-egg-table-basic-table  th.col-species,#my-egg-table-basic-table  td.col-species { min-width: calc(130px * var(--tz, 1)); width: calc(130px * var(--tz, 1)); }
#egg-table-simple-table th.col-date,  #egg-table-simple-table td.col-date,
#egg-table-basic-table  th.col-date,  #egg-table-basic-table  td.col-date,
#my-egg-table-simple-table th.col-date,  #my-egg-table-simple-table td.col-date,
#my-egg-table-basic-table  th.col-date,  #my-egg-table-basic-table  td.col-date { min-width: calc(75px * var(--tz, 1)); width: calc(75px * var(--tz, 1)); white-space: nowrap; }

/* Keep scrollX headers aligned */
#egg-table-incubation-table thead th, #egg-table-incubation-table tbody td,
#egg-table-full-table thead th, #egg-table-full-table tbody td {
  white-space: nowrap; /* single-line by default, unless .row-expanded */
  min-width: calc(90px * var(--tz, 1)); /* base min-width scales with zoom */  
}

/* Date columns in incubation/full: slightly wider to fit icon pairs */
#egg-table-incubation-table thead th.col-date, #egg-table-incubation-table tbody td.col-date,
#egg-table-full-table thead th.col-date, #egg-table-full-table tbody td.col-date {
  min-width: calc(70px * var(--tz, 1));
}

/* Reduce gap between "+" and "ID" columns in incubation/full tables */
#egg-table-incubation-table thead tr:first-child th:nth-child(2),
#egg-table-incubation-table tbody td:nth-child(2),
#egg-table-full-table thead tr:first-child th:nth-child(2),
#egg-table-full-table tbody td:nth-child(2) {
  padding-left: calc(.25rem * var(--tz, 1)) !important; /* tighter left padding */
}
table.dataTable thead tr.filters-hidden {
  visibility: hidden;
}
/* Header filter controls – compact and non-stretching */
table.dataTable thead tr.filters input[type="date"]:not(.date-icon-only),
table.dataTable thead tr.filters input[type="text"],
table.dataTable thead tr.filters input[type="number"] {
  max-width: calc(9.5em * var(--tz, 1)) !important;
  min-width: calc(4em * var(--tz, 1)) !important;
  font-size: calc(12px * var(--tz, 1)) !important;
  height: calc(28px * var(--tz, 1)) !important;
  padding: calc(2px * var(--tz, 1)) calc(4px * var(--tz, 1)) !important;
}
/* Icon-only date inputs: scale with zoom */
table.dataTable thead tr.filters .d-flex input[type="date"].date-icon-only.form-control {
  flex: 0 0 auto !important;
  width: calc(2.4em * var(--tz, 1)) !important;
  min-width: calc(2.4em * var(--tz, 1)) !important;
  max-width: calc(2.4em * var(--tz, 1)) !important;
  height: calc(28px * var(--tz, 1)) !important;
  padding: 0 !important;
  text-indent: -9999px !important;
  color: white !important;
  line-height: calc(28px * var(--tz, 1)) !important;
  display: inline-block !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  accent-color: white !important;
  caret-color: white !important;
}
/* Wrapper around icon-only dates */
.date-icon-wrap {
  display: inline-block;
  flex: 0 0 auto;
  width: calc(3em * var(--tz, 1));
  min-width: calc(3em * var(--tz, 1));
  max-width: calc(3em * var(--tz, 1));
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}
.date-icon-wrap input.date-icon-only {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: calc(28px * var(--tz, 1)) !important;
  padding: 0 !important;
  text-indent: -9999px !important;
  color: transparent !important;
  line-height: calc(28px * var(--tz, 1)) !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  accent-color: white !important;
  caret-color: white !important;
  font-size: 0 !important;
}
/* Right arrow for "from" dates */
.date-icon-wrap input[id*="-from"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5a.5.5 0 0 0-.5.5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center 55% !important;
  background-size: 24px 24px !important;
}
/* Left arrow for "to" dates */
.date-icon-wrap input[id*="-to"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center 55% !important;
  background-size: 24px 24px !important;
}
/* Tab Styling */
.nav-tabs {
  border-bottom: none;
  gap: 1rem;
}

/* All Eggs tabs - wider spacing */
#eggTableTabs .nav-item {
  margin-right: 0.8rem;
}

.nav-tabs .nav-link {
  color: #666;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.5rem 0;
  margin-bottom: 0;
  font-weight: 500;
  transition: all 0.3s ease;
  background: transparent;
}

.nav-tabs .nav-link:hover {
  color: #333;
  border-bottom-color: #ddd;
}

.nav-tabs .nav-link.active {
  color: rgb(74, 74, 107);
  border-bottom-color: rgb(74, 74, 107);
  background: transparent;
}

.tab-content {
  margin-bottom: 2rem;
}

table.dataTable thead tr.filters input[type="date"].date-icon-only::-webkit-datetime-edit,
table.dataTable thead tr.filters input[type="date"].date-icon-only::-webkit-datetime-edit-fields-wrapper,
table.dataTable thead tr.filters input[type="date"].date-icon-only::-webkit-datetime-edit-text,
table.dataTable thead tr.filters input[type="date"].date-icon-only::-webkit-datetime-edit-month-field,
table.dataTable thead tr.filters input[type="date"].date-icon-only::-webkit-datetime-edit-day-field,
table.dataTable thead tr.filters input[type="date"].date-icon-only::-webkit-datetime-edit-year-field {
  display: none;
}
table.dataTable thead tr.filters input[type="date"].date-icon-only::-webkit-calendar-picker-indicator {
  opacity: 0; width: 100%; height: 100%; padding: 0; margin: 0; cursor: pointer; position: absolute; background: transparent !important;
}
.date-icon-wrap input.date-icon-only::-webkit-calendar-picker-indicator {
  opacity: 0 !important; background: transparent !important;
}
/* Firefox: keep size stable; text is already hidden via color:transparent/font-size:0 */
table.dataTable thead tr.filters input[type="date"].date-icon-only::-moz-focus-inner { border: 0; }

/* Select2 containers in filters also scale */
table.dataTable thead tr.filters .select2-container {
  max-width: calc(9.5em * var(--tz, 1)) !important;
  min-width: calc(4em * var(--tz, 1)) !important;
}
table.dataTable thead tr.filters .select2-container .select2-selection {
  min-height: calc(28px * var(--tz, 1)) !important;
  font-size: calc(12px * var(--tz, 1)) !important;
  padding: calc(2px * var(--tz, 1)) calc(4px * var(--tz, 1)) !important;
}

#egg-table th select[multiple],
#egg-table-basic-table th select[multiple],
#egg-table-simple-table th select[multiple],
#egg-table-incubation-table th select[multiple],
#egg-table-full-table th select[multiple] { min-width: 90px; max-width: 180px; font-size: 13px; }
/* Select2 in table headers – compact look */
#egg-table-simple-table thead th.col-id .select2-container,
#egg-table-simple-table thead th:nth-child(2) .select2-container,
#egg-table-basic-table  thead th.col-id .select2-container,
#egg-table-basic-table  thead th:nth-child(2) .select2-container { max-width: 120px !important; }
#egg-table-basic-table thead .select2-container .select2-selection,
#egg-table-full-table  thead .select2-container .select2-selection,
#egg-table-incubation-table thead .select2-container .select2-selection,
#egg-table-simple-table thead .select2-container .select2-selection {
  min-height: 30px; font-size: 12px; line-height: 1.2; padding: 2px 4px; max-width: 180px !important;
}
#egg-table-simple-table thead .select2-selection--multiple .select2-search__field,
#egg-table-incubation-table thead .select2-selection--multiple .select2-search__field,
#egg-table-full-table thead .select2-selection--multiple .select2-search__field { width: 100% !important; min-width: 90px !important; }
/* Keep scrollX headers aligned */
#egg-table-incubation-table, #egg-table-full-table { table-layout: fixed; }
#egg-table-incubation-table thead th, #egg-table-incubation-table tbody td,
#egg-table-full-table thead th, #egg-table-full-table tbody td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Tabs under card header */
#eggTableTabs, #incubatorTableTabs {
  flex-wrap: nowrap !important;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  white-space: nowrap; gap: .25rem; padding-bottom: 2px;
}

/* FixedColumns clones: remove inter-column gaps and align paddings */
.dtfc-fixed-left table,
.dtfc-fixed-right table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

.dtfc-fixed-left table.dataTable th,
.dtfc-fixed-left table.dataTable td,
.dtfc-fixed-right table.dataTable th,
.dtfc-fixed-right table.dataTable td {
  box-sizing: border-box !important;
}

/* Apply 24px constraint ONLY to egg tables (not maintenance tables) */
#egg-table-basic-table.dataTable thead th:first-child,
#egg-table-basic-table.dataTable tbody td:first-child,
#egg-table-simple-table.dataTable thead th:first-child,
#egg-table-simple-table.dataTable tbody td:first-child,
#egg-table-incubation-table.dataTable thead th:first-child,
#egg-table-incubation-table.dataTable tbody td:first-child,
#egg-table-full-table.dataTable thead th:first-child,
#egg-table-full-table.dataTable tbody td:first-child,
.dtfc-fixed-left #egg-table-basic-table.dataTable thead th:first-child,
.dtfc-fixed-left #egg-table-basic-table.dataTable tbody td:first-child,
.dtfc-fixed-left #egg-table-simple-table.dataTable thead th:first-child,
.dtfc-fixed-left #egg-table-simple-table.dataTable tbody td:first-child,
.dtfc-fixed-left #egg-table-incubation-table.dataTable thead th:first-child,
.dtfc-fixed-left #egg-table-incubation-table.dataTable tbody td:first-child,
.dtfc-fixed-left #egg-table-full-table.dataTable thead th:first-child,
.dtfc-fixed-left #egg-table-full-table.dataTable tbody td:first-child {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Tighten 2nd column gap ONLY in egg tables */
#egg-table-basic-table.dataTable thead th:nth-child(2),
#egg-table-basic-table.dataTable tbody td:nth-child(2),
#egg-table-simple-table.dataTable thead th:nth-child(2),
#egg-table-simple-table.dataTable tbody td:nth-child(2),
#egg-table-incubation-table.dataTable thead th:nth-child(2),
#egg-table-incubation-table.dataTable tbody td:nth-child(2),
#egg-table-full-table.dataTable thead th:nth-child(2),
#egg-table-full-table.dataTable tbody td:nth-child(2),
.dtfc-fixed-left #egg-table-basic-table.dataTable thead th:nth-child(2),
.dtfc-fixed-left #egg-table-basic-table.dataTable tbody td:nth-child(2),
.dtfc-fixed-left #egg-table-simple-table.dataTable thead th:nth-child(2),
.dtfc-fixed-left #egg-table-simple-table.dataTable tbody td:nth-child(2),
.dtfc-fixed-left #egg-table-incubation-table.dataTable thead th:nth-child(2),
.dtfc-fixed-left #egg-table-incubation-table.dataTable tbody td:nth-child(2),
.dtfc-fixed-left #egg-table-full-table.dataTable thead th:nth-child(2),
.dtfc-fixed-left #egg-table-full-table.dataTable tbody td:nth-child(2) {
  padding-left: .25rem !important; /* tighten gap next to "+" */
}


/* Prevent any extra border seam between fixed-left and scrollable body */
.dtfc-fixed-left { border-right: 0 !important; }
.dataTables_wrapper .dataTables_scroll { border-left: 0 !important; }

/* Mirror the same tightening on the original tables (already partly present) */
#egg-table-incubation-table thead tr:first-child th:nth-child(2),
#egg-table-incubation-table tbody td:nth-child(2),
#egg-table-full-table thead tr:first-child th:nth-child(2),
#egg-table-full-table tbody td:nth-child(2) {
  padding-left: calc(.25rem * var(--tz, 1)) !important;
}

/* Egg optimization tables */
#egg-transfers-table, #egg-capacity-table {
  font-size: 13px;
}
#egg-transfers-table thead th, #egg-transfers-table tbody td,
#egg-capacity-table thead th, #egg-capacity-table tbody td {
  white-space: nowrap;
  padding: 0.5rem;
}

.card { 
  overflow: hidden;                 /* hide any header rounding mismatch */
  border: none;                     /* no border */
}

#breeder-summary-section .card { max-width: 100%; }

.card-header.d-flex { flex-wrap: wrap; }
@media (max-width: 576px) {
  #eggTableTabs { order: 2; width: 100%; margin-top: .5rem; justify-content: flex-start !important; }
}

/* Card headers */
.card-header,
.card-header.bg-blue {
  background-color: rgb(74, 74, 107) !important;
  color: #fff !important;
  padding-bottom: 3px !important;
  margin: 0;  
  box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset; /* subtle inner edge */
}
.card-header.bg-blue .nav-tabs .nav-link,
.card-header .nav-tabs .nav-link { color: #fff !important; }
.card-header.bg-blue .nav-tabs .nav-link.active,
.card-header .nav-tabs .nav-link.active { color: rgb(74, 74, 107) !important; }
.card-header .nav-tabs,
.card-header.bg-blue .nav-tabs { border-bottom: none !important; }
.card-header .nav-tabs .nav-link,
.card-header.bg-blue .nav-tabs .nav-link { border: none !important; box-shadow: none !important; }

/* Card look */
.card.shadow { box-shadow: 0 2px 12px rgba(74,74,107,0.12), 0 1.5px 4px rgba(74,74,107,0.08); border-radius: 12px; }

/* DataTables custom toolbars */
.dt-topbar-second {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
}
.dt-bottombar { 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  gap: .5rem; 
  flex-wrap: wrap;  
}

.dt-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}

* Push pagination + zoom/export to the right */
.dt-bottombar .dataTables_paginate,
.dt-bottombar .dt-right {
  margin-left: auto;
}

/* Zoom slider */
.table-zoom-controls { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 0; max-width: 100%; }
.table-zoom-controls .form-range { width: 280px; max-width: min(320px, 50vw); margin: 0; }
@media (max-width: 576px) {
  .table-zoom-controls { justify-content: flex-end; }
  .table-zoom-controls .form-range { width: 220px; max-width: 60vw; }
}

/* Navbar tweaks on xl */
@media (min-width: 1200px) {
  .navbar .offcanvas-xl .offcanvas-body {
    min-width: 0; display: flex !important; align-items: center !important; justify-content: space-between !important;
    flex-wrap: nowrap !important; gap: .25rem;
  }
  .navbar .offcanvas-xl .offcanvas-body .navbar-nav {
    flex-direction: row !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow: visible !important; gap: .25rem; min-width: 0;
  }
  .navbar .offcanvas-xl .offcanvas-body .navbar-text { flex: 0 0 auto; white-space: nowrap; }
}

/* Zoom via CSS var (affects font, paddings, width caps) */
.table-zoom-wrap { --tz: 1; }
.table-zoom-wrap .table { font-size: calc(13px * var(--tz)); }
.table-zoom-wrap .table th, .table-zoom-wrap .table td {
  padding-top: calc(.25rem * var(--tz)); padding-bottom: calc(.25rem * var(--tz));
  padding-left: calc(.5rem * var(--tz)); padding-right: calc(.5rem * var(--tz));
}

/* Table scrollbars (match card header rgb(74,74,107)) */
.table-responsive, .dataTables_wrapper .dataTables_scrollBody {
  scrollbar-color: rgb(74,74,107) rgba(74,74,107,0.15);
  scrollbar-width: thin;
}
/* WebKit (Chrome, Edge, Safari) */
.table-responsive::-webkit-scrollbar, .dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar { height: 8px; width: 8px; }
.table-responsive::-webkit-scrollbar-track, .dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-track {
  background: rgba(74,74,107,0.15); border-radius: 8px;
}
.table-responsive::-webkit-scrollbar-thumb, .dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: rgb(74,74,107); border-radius: 8px;
}
.table-responsive::-webkit-scrollbar-thumb:hover, .dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
  background: rgb(44,44,63);
}

/* Global Select2 compact look */
.select2-container--default .select2-selection--multiple { min-height: 24px; font-size: 12px; padding: 0 2px; }
.select2-container .select2-selection--multiple .select2-selection__rendered { padding: 0 2px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { font-size: 11px; margin-top: 2px; }
.select2-container { width: 100% !important; } /* avoid stretching header columns */
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  width: 100% !important;     /* fill the selection area so placeholder shows */
  min-width: 100% !important; /* keep it full width even when not focused */
}

/* Global filters card styling */
#global-filters-card {
  border: 1px solid #e0e0e0;
}
#global-filters-card .card-header {
  background-color: #f8f9fa;
  padding: 0.5rem 1rem;
}
#global-filters-card .card-body {
  background-color: #fff;
}
#clear-all-filters-btn {
  transition: transform 0.2s, color 0.2s;
}
#clear-all-filters-btn:hover {
  transform: scale(1.2);
  color: #b02a37 !important;
}
#global-filters-card .select2-container {
  max-width: none !important;
}
#global-filters-card .select2-container .select2-selection {
  min-height: 32px;
  font-size: 13px;
}

/* Clear all filters button in filter row */
.clear-all-filters-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: #dc3545;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
}
.clear-all-filters-btn:hover {
  transform: scale(1.2);
  color: #b02a37;
}

/* Plus buttons (add progress/maintenance) */
.egg-add-progress-btn, .incubator-add-maintenance-btn {
  display: none; position: absolute; left: 2px; width: 20px; height: 20px;
  background: #198754; color: #fff; border-radius: 50%;
  align-items: center; justify-content: center; z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: opacity 0.2s; border: none; padding: 0; font-size: 14px;
}

tbody tr:hover .egg-add-progress-btn, tbody tr:hover .incubator-add-maintenance-btn { display: flex; }

/* GBIF section styling */
.gbif-section {
  padding: 0;
  background: transparent;
}

.gbif-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.gbif-content .card {
  margin-bottom: 1.5rem;
}

/* Incubators table - consistent row heights */
#incubator-table-basic tbody tr {
  min-height: 48px;
  height: 48px;
}

#incubator-table-basic tbody tr td {
  padding: 0.5rem;
  vertical-align: middle;
}

#incubator-table-basic tbody tr td.no-border {
  border-bottom: none !important;
}

/* Incubator ID buttons - enforce consistent height */
#incubator-table-basic .btn-sm {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0.375rem 0.75rem !important;
  line-height: 1.3;
  white-space: nowrap;
}

/* Incubator plus button - match einfo styling */
.incubator-plus-btn {
  background: #198754 !important; color: #fff !important; border-radius: 50%; border: none !important; padding: 0;
  width: 20px; height: 20px; min-width: 20px; min-height: 20px;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); visibility: hidden; z-index: 10;
  position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  text-decoration: none !important;
}

.incubator-plus-btn:hover,
.incubator-plus-btn:focus {
  background: #198754 !important; 
  color: #fff !important; 
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

.incubator-dropdown-wrapper {
  position: relative; width: 20px; height: 20px;
}

tbody tr:hover .incubator-plus-btn { visibility: visible; }

.egg-plus-btn {
  background: #198754 !important; color: #fff !important; border-radius: 50%; border: none !important; padding: 0;
  width: 20px; height: 20px; min-width: 20px; min-height: 20px;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); visibility: hidden; z-index: 10;
  position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  text-decoration: none !important;
}

.egg-plus-btn:hover,
.egg-plus-btn:focus {
  background: #198754 !important; 
  color: #fff !important; 
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

.egg-dropdown-wrapper {
  position: relative; width: 20px; height: 20px;
}

tbody tr:hover .egg-plus-btn { visibility: visible; }

/* Fix table cell padding for no-border column */
.gbif-section .table td.no-border {
  padding: 0.5rem 0.25rem !important;
  vertical-align: middle;
}

.egg-label-empty {
  color: rgb(158, 161, 163);
}

/* Table container alignment + momentum scroll on iOS */
.table-responsive { -webkit-overflow-scrolling: touch; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
.table { margin-left: 0 !important; margin-right: auto !important; text-align: left !important; }

/* Image overlay helper */
.photo-overlap { float: right; width: 350vw; max-width: 350px; height: auto; margin-left: 16px; margin-bottom: 8px; opacity: 0.85; }
.card-body { position: relative; }

/* Keep fixed elements on top */
.fixedHeader-floating, .dtfc-fixed-left, .dtfc-fixed-right { z-index: 1040; }
.fixedHeader-floating { box-shadow: 0 2px 6px rgba(0,0,0,.15); }

/* Consistent sizing across header/body cells */
table.dataTable thead th, table.dataTable thead td,
table.dataTable tbody th, table.dataTable tbody td { box-sizing: border-box; }

/* Let DT size scrollX tables; only force width on non-scrolling ones */
#egg-table-basic-table, #egg-table-simple-table { width: 100%; }

/* Wide (scrolling) tables: fix layout and clip overflow to keep header aligned */
#egg-table-incubation-table thead th, #egg-table-incubation-table tbody td,
#egg-table-full-table thead th, #egg-table-full-table tbody td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Arrow rotation for ALL EGGS collapsible toggle */
#all-eggs-card.show .all-eggs-toggle {
  transform: rotate(180deg);
}

/* ============================================
   GBIF-STYLE FULL-WIDTH SECTION DESIGN
   ============================================ */

/* Main content wrapper - remove padding, use full width */
.container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Full-width section styling */
.gbif-section {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 4rem 2rem;
}

/* Alternating section background colors */
.gbif-section:nth-of-type(odd) {
  background-color: #ffffff;
}

.gbif-section:nth-of-type(even) {
  background-color: #f4f4f4;
}

/* Explicit background color classes */
.gbif-section.gbif-bg-white {
  background-color: #ffffff !important;
}

.gbif-section.gbif-bg-grey {
  background-color: #f4f4f4 !important;
}

/* Section titles - large and clean */
.gbif-section h2 {
  font-size: 2rem;
  font-weight: 600;
  color: rgb(74, 74, 107);
  margin-bottom: 2rem;
  text-align: left;
}

.gbif-section h1 {
  color: rgb(74, 74, 107);
  text-shadow: none;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

/* Remove card styling for GBIF design */
.gbif-section .card {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.gbif-section .card-header {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Add gap between buttons in flex containers to prevent corner artifacts */
.gbif-section .d-flex.align-items-center {
  gap: 0.5rem;
}

.gbif-section .card-body {
  padding: 1rem !important;
  background-color: transparent !important;
  background: transparent !important;
}

.gbif-section .card-footer {
  background-color: transparent !important;
  border: none !important;
}

.gbif-section .card-header h5,
.gbif-section .card-title {
  color: rgb(74, 74, 107);
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0;
}

/* Grid layouts for content */
.gbif-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Statistics row styling */
.stat-item {
  text-align: center;
  padding: 1.5rem;
}

.stat-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: rgb(117, 167, 231);
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 600;
  color: rgb(74, 74, 107);
}

.stat-label {
  color: #666;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

/* Content wrapper with max-width for readability */
.gbif-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Remove shadows and borders from tables in GBIF sections */
.gbif-section .table {
  border: none !important;
  border-collapse: collapse !important;
  background-color: transparent !important;
}

.gbif-section .table th,
.gbif-section .table td {
  border: none !important;
}

.gbif-section .table thead {
  background-color: rgb(74, 74, 107) !important;
  color: white !important;
}

.gbif-section .table thead th {
  background-color: rgb(74, 74, 107) !important;
  color: white !important;
  border-color: rgb(74, 74, 107) !important;
}

.gbif-section .table tbody {
  background-color: transparent !important;
  background: transparent !important;
}

.gbif-section .table tbody tr {
  background-color: transparent !important;
  background: transparent !important;
}

.gbif-section .table tbody tr td {
  background-color: transparent !important;
  background: transparent !important;
}

.gbif-section .table tbody tr:hover {
  background-color: rgba(117, 167, 231, 0.1) !important;
}

.gbif-section .btn {
  border-radius: 0.375rem !important;
}

/* Full-width table sections styling (for egg tables outside gbif-section) */
.table {
  border: none !important;
  border-collapse: collapse !important;
  background-color: transparent !important;
}

.table thead {
  background-color: rgb(74, 74, 107) !important;
  color: white !important;
}

.table thead th {
  background-color: rgb(74, 74, 107) !important;
  color: white !important;
  border-color: rgb(74, 74, 107) !important;
  border: none !important;
}

.table th,
.table td {
  border: none !important;
}

.table tbody {
  background-color: transparent !important;
  background: transparent !important;
}

.table tbody tr {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
}

.table tbody tr:hover {
  background-color: rgba(117, 167, 231, 0.1) !important;
}

/* Responsive grid for mobile */
@media (max-width: 768px) {
  .responsive-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Species card styling */
#species-card-wrapper .card {
  border-radius: 0 !important;
}

#species-card-wrapper .card-header {
  border-radius: 0 !important;
}

#species-card-header {
  background-color: rgb(74, 74, 107) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .egg-table-gap-white > div,
  .egg-table-gap-grey > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .gbif-section {
    padding: 2rem 1rem;
  }

  .gbif-section h2 {
    font-size: 1.5rem;
  }

  .gbif-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-hero {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .dashboard-hero > div:last-child {
    padding: .5rem !important;
    text-align: left !important;
  }

  .dashboard-user-name {
    justify-content: flex-start !important;
  }

  .dashboard-hero img {
    width: 80px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .egg-table-gap-white,
  .egg-table-gap-grey {
    margin-top: 0 !important;
  }

  h1 {
    font-size: 2rem !important;
  }

  .lead {
    font-size: 1rem !important;
  }

  .dashboard-user-name,
  .dashboard-user-email {
    font-size: 1rem !important;
  }

  .gbif-grid[style*="repeat(3"],
  .gbif-grid[style*="repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  .gbif-grid[style*="auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* Responsive egg table gaps */
.egg-table-gap-white,
.egg-table-gap-grey {
  margin-top: -60px;
}

.progress-table-gap-grey {
  margin-top: -60px;
}

.incubator-table-gap-white {
  margin-top: -60px;
}

.org-admin-table-gap-white {
  margin-top: -60px;
}

@media (min-width: 769px) {
  .egg-table-gap-white > div,
  .egg-table-gap-grey > div {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: calc(100% - 4rem) !important;
  }

  .progress-table-gap-grey > div {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: calc(100% - 4rem) !important;
  }

  .incubator-table-gap-white > div {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: calc(100% - 4rem) !important;
  }

  .org-admin-table-gap-white > div {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: calc(100% - 4rem) !important;
  }
}

@media (max-width: 768px) {
  .progress-table-gap-grey > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .progress-table-gap-grey {
    margin-top: 0 !important;
  }

  .incubator-table-gap-white > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .incubator-table-gap-white {
    margin-top: 0 !important;
  }

  .org-admin-table-gap-white > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .org-admin-table-gap-white {
    margin-top: 0 !important;
  }
}

/* Alert styling - semi-transparent black like login section */
.alert {
  background-color: rgba(20, 20, 20, 0.85) !important;
  color: white !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1rem 1rem 1rem 2.5rem !important;
  position: relative !important;
  margin: -1rem -50vw 0 -50vw !important;
  margin-top: -1.5rem !important;
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

.alert .btn-close {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

.alert .btn-close:hover,
.alert .btn-close:focus {
  opacity: 0.8 !important;
}

.alert::before {
  position: absolute !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
}

/* Info alert */
.alert-info {
  background-color: rgba(20, 20, 20, 0.85) !important;
}

.alert-info::before {
  content: "ℹ" !important;
  color: #4a9eff !important;
}

.alert-info .alert-link {
  color: #ccc !important;
  text-decoration: underline;
}

/* Success alert */
.alert-success {
  background-color: rgba(20, 20, 20, 0.85) !important;
}

.alert-success::before {
  content: "✓" !important;
  color: #51cf66 !important;
}

.alert-success .alert-link {
  color: #ccc !important;
  text-decoration: underline;
}

/* Warning alert */
.alert-warning {
  background-color: rgba(20, 20, 20, 0.85) !important;
  color: white !important;
  border: none !important;
}

.alert-warning::before {
  content: "⚠" !important;
  color: #ffc107 !important;
}

.alert-warning .alert-link {
  color: #ccc !important;
  text-decoration: underline;
}

/* Danger/Error alert */
.alert-danger {
  background-color: rgba(20, 20, 20, 0.85) !important;
  color: white !important;
  border: none !important;
}

.alert-danger::before {
  content: "✕" !important;
  color: #ff6b6b !important;
  font-weight: 700 !important;
}

.alert-danger .alert-link {
  color: #ccc !important;
  text-decoration: underline;
}

/* Disable scrolling on number inputs */
input[type="number"] {
  -moz-appearance: textfield !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Profile picture styling for forum */
.profile-picture-thumbnail {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e9ecef;
  flex-shrink: 0;
}

.profile-picture-placeholder {
  background-color: #e9ecef;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}