/* Lock the page height and prevent body scroll */
html, body {
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Make sure the main wrapper fills viewport and uses flex */
body > .d-flex {
    height: 100vh;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

#loginPage, #registerPage {
    background-color: #001f3f; /*Navy*/
}

.btn-heat { 
    width: 8.5rem; white-space: nowrap; 
}

.company-logo {
    border: #ef7024 2px solid;
    border-radius: .5rem;
}


/* Style for mating dropdowns */
.mating-selector {
    width: 100%;
}

/* Allow text wrapping in mating cells */
.mating {
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
    word-wrap: break-word;
}

.loginblock input {
    font-weight: bold;
    font-size: 1.15rem;
    border-radius: .5rem;
    border : 2px solid #ef7024;
    text-align: center;
    margin-bottom: .5rem !important;
}

#login_button, #signup_button {
    background-color: white;
    color: #001f3f !important;
    font-weight: bold;
    border: 2px solid #ef7024;
    border-radius: 0.5rem;
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#register_button, #forgot_password_button {
    background-color: #001f3f;
    color: white;
    font-weight: bold;
    font-size: .75rem;
    border: 2px solid #ef7024;
    border-radius: 0.5rem;
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#login_button:hover, #signup_button:hover, #register_button:hover, 
#forgot_password_button:hover, .header_button:hover, 
.create_cancel_button:hover, .create_cancel_button_b:hover,
 .create_cancel_button_c:hover, .create_cancel_button_d:hover {
    background-color: #ef7024;
}

.headertitle {
    color: #ef7024;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    margin-top: 20px;
}

.footertitle {
    color: lightgrey;
    font-size: 1rem;
    text-align: center;
    margin-top: 20px;
}

.form-label-fixed {
    min-width: 120px;
    width: 300px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: #001f3f 2px solid;
    border-radius: 0.5rem;
    color: black;
}

.form-check-label, .form-label {
    color: black;
}

/* Heats table: responsive, content-based widths */
#heats-table { 
  table-layout: auto;
  width: auto;
  min-width: 100%;
}

#heats-table td.actions,
#heats-table th:last-child {
  white-space: nowrap;
}

#heats-table td .form-control.edit-input,
#heats-table td .form-control.edit-time-input {
  max-width: 100%;
  display: inline-block;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#heats-table td, #heats-table th {
  min-width: auto;
  white-space: normal;
  word-wrap: break-word;
  padding-right: 0.75rem;
}

#heats-table td.method,
#heats-table th:nth-child(3) {
  white-space: nowrap;
  width: 1%;
  padding-right: 1rem;
}

@media (max-width: 575.98px) {
  .btn-heat { width: auto; }
}

@media (min-width: 576px) {
  #heats-table { table-layout: fixed; }

  #heats-table td, #heats-table th {
    width: auto;
  }
  
  #heats-table td.actions {
    width: 1%;
    padding-left: 0.5rem;
  }

  #heats-table td .form-control.edit-input      { max-width: 12rem; }
  #heats-table td .form-control.edit-time-input { max-width: 14rem; }

  .btn-heat { width: 8.5rem; white-space: nowrap; }
}

.navbar, .logout, #loginbutton {
    cursor: pointer;
}

/* ===== Matings (AI table) ===== */
#ai-table { table-layout: fixed; }
#ai-table .col-sirename { width: 50%; }
#ai-table .col-sex { width: 20%; }
#ai-table .col-actions { width: 30%; }

#ai-table th, #ai-table td { vertical-align: middle; }
#ai-table th { font-weight: 600; }

#ai-table td, #ai-table th { white-space: nowrap; }
#ai-table .cell-name { overflow: hidden; text-overflow: ellipsis; }

#ai-table input.inp-name {
  width: 100%;
  max-width: 260px;
}
#ai-table select.inp-type {
  max-width: 180px;
}

#ai-table .cell-actions {
  display: flex;
  gap: .375rem;
  flex-wrap: nowrap;
  align-items: center;
}

@media (max-width: 992px) {
  #ai-table input.inp-name { max-width: 220px; }
  #ai-table select.inp-type { max-width: 160px; }
}

@media (max-width: 576px) {
  #ai-table td, #ai-table th { white-space: normal; }
  #ai-table .cell-name { white-space: nowrap; }

  #ai-table thead th { font-size: 0.95rem; }

  #ai-table .cell-actions {
    flex-wrap: wrap;
    gap: .35rem .5rem;
  }
  #ai-table .cell-actions .btn {
    flex: 1 1 calc(50% - .5rem);
    min-width: 120px;
    padding: .35rem .6rem;
  }

  #ai-table input.inp-name {
    max-width: clamp(140px, 60vw, 220px);
  }
  #ai-table select.inp-type {
    max-width: clamp(120px, 45vw, 180px);
  }
}

/* ===== Matings (ET table) ===== */
#et-table { table-layout: fixed; }

#et-table th, #et-table td { vertical-align: middle; }
#et-table th { font-weight: 600; }

#et-table td, #et-table th { white-space: nowrap; }
#et-table .cell-dam,
#et-table .cell-sire,
#et-table .cell-lab {
  overflow: hidden;
  text-overflow: ellipsis;
}

#et-table .col-dam     { width: 16%; }
#et-table .col-sire    { width: 16%; }
#et-table .col-method  { width: 10%; }
#et-table .col-type    { width: 8%; }
#et-table .col-lab     { width: 16%; }
#et-table .col-actions { width: 34%; }

#et-table input.inp-dam,
#et-table input.inp-sire {
  width: 100%;
  max-width: 260px;
}
#et-table select.inp-method,
#et-table select.inp-sex,
#et-table select.inp-lab {
  max-width: 180px;
}

#et-table .cell-actions {
  display: flex;
  gap: .375rem;
  flex-wrap: nowrap;
  align-items: center;
}

@media (max-width: 992px) {
  #et-table input.inp-dam,
  #et-table input.inp-sire { max-width: 220px; }

  #et-table select.inp-method,
  #et-table select.inp-sex,
  #et-table select.inp-lab { max-width: 160px; }
}

@media (max-width: 576px) {
  #et-table td, #et-table th { white-space: normal; }
  #et-table .cell-dam,
  #et-table .cell-sire,
  #et-table .cell-lab { white-space: nowrap; }

  #et-table thead th { font-size: 0.95rem; }

  #et-table .cell-actions {
    flex-wrap: wrap;
    gap: .35rem .5rem;
  }
  #et-table .cell-actions .btn {
    flex: 1 1 calc(50% - .5rem);
    min-width: 120px;
    padding: .35rem .6rem;
  }

  #et-table input.inp-dam,
  #et-table input.inp-sire {
    max-width: clamp(140px, 60vw, 220px);
  }
  #et-table select.inp-method,
  #et-table select.inp-sex,
  #et-table select.inp-lab {
    max-width: clamp(120px, 45vw, 180px);
  }
}

/* ===== Layout Components ===== */
#navbar {
    background-color: #001f3f !important;
    width: 130px;
    overflow-y: auto;
    height: 100%;
    flex-shrink: 0;
    padding-bottom: 2rem;
    padding-left: .75rem;
}

/* Mobile/Tablet - Move navbar to bottom on smaller screens */
@media (max-width: 991px) {
    /* Preserve the overall structure but allow column layout */
    body > .d-flex {
        flex-direction: column !important;
    }
    
    /* Navbar becomes horizontal bar at bottom */
    #navbar {
        width: 100% !important;
        height: 70px !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.25rem 0.5rem !important;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1000;
        border-top: 2px solid #ef7024;
    }
    
    /* Make nav buttons horizontal */
    #navbar > div {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-around !important;
        height: 100%;
        gap: 0.25rem;
    }
    
    /* Adjust button size for bottom nav */
    .nav_button {
        width: 60px !important;
        height: 60px !important;
        margin: 0 !important;
        padding: 0.125rem !important;
        min-width: 60px;
        flex-shrink: 0;
    }
    
    .nav_button img {
        width: 30px !important;
        height: 30px !important;
    }
    
    .nav_caption {
        font-size: 0.6rem !important;
        margin-top: 0.125rem;
    }
    
    /* Adjust main content area to account for fixed bottom navbar */
    #pageContent {
        margin-bottom: 70px;
        height: calc(100vh - 75px) !important;
    }
    
    /* Make mainContent scrollable within the constrained pageContent */
    #mainContent {
        height: 100% !important;
        overflow-y: auto !important;
    }
}

/* Desktop - Restore normal navbar for larger screens */
@media (min-width: 992px) {
    /* Ensure desktop layout is preserved */
    body > .d-flex {
        flex-direction: row !important;
    }
}

#pageHeader{
    background-color: #001f3f !important;
    color: white;
    font-weight: bold;
    height: 75px; /* Reduced from 110px */
    margin-top: 0px;
    padding-top: 0;
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
}

#pageheader_buttons{
    height:80px;
    background-color: #001f3f;
}

#pageheader_dropdowns_container{
    background-color: #001f3f;
    margin-top: -1px;
    margin-left: -1px;
}

.pageheader_dropdowns{
    background-color: #001f3f;
    color: white;
    border-color: #ef7024;
    border-width: 2px;
    width: 12rem;
}

.header_button{
    width: 150px;
    height: auto;
    background-color: white;
    color: black;
    border: #ef7024 2px solid;
}

.header_button_container {
    background-color: #001f3f;
    margin-top: -1px;
    margin-left: -1rem;
    margin-right: -1rem;
    color: white;
    min-height: 80px;
    padding-left: -1rem;
    padding-right: 1rem;
}

.create_cancel_button{
    width: 200px;
    height: auto;
    background-color: #001f3f;
    border: #ef7024 2px solid;
}

.create_cancel_button_b{
    width: 150px;
    height: auto;
    background-color: #001f3f;
    border: #ef7024 2px solid;
}

.create_cancel_button_c{
    width: 250px;
    height: auto;
    background-color: #001f3f;
    border: #ef7024 2px solid;
}

.create_cancel_button_d{
    width: 100px;
    height: auto;
    background-color: #001f3f;
    color: white;
    border: #ef7024 2px solid;
    border-radius: 0.5rem;
}

.nav_button {
    width: 100px;
    height: 100px;
    background-color: var(--bs-secondary);
    color: var(--bs-light);
    font-weight: bold;
    padding: .25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    border-radius: .5rem;
    margin: 2px;
    border: 2px solid #ef7024;
}

.nav_button:hover {
    opacity: .75;
}

.nav_button.active {
    background-color: #ef7024;
    border-color: #001f3f;
}

.nav_button img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
}

#pageContent {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#mainContent {
    color: black !important;
    overflow-y: auto;
    height: 100%;
    flex: 1;
    padding-bottom: 1.5rem;
}

a {
    text-decoration: none;
}

a:hover,
a:focus,
a:active {
    text-decoration: none;
}

#pageHeader,
#navbar,
#pageheader_dropdowns_container {
    background-color: #001f3f !important;
    transform: translateZ(0);
}

.listed_heats {
    color: black !important;
}

#pageheader_dropdowns_container { position: relative; z-index: 2000; }
#pageheader_dropdowns_container .dropdown-menu { z-index: 2001; }

.min-time-display, .max-time-display {
    color: #000;
    font-weight: 500;
}

/* ET Breeding Dialog Styles */
dialog#etBreedingDialog {
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    min-width: 350px;
    max-width: 90vw;
}

dialog#etBreedingDialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

dialog#etBreedingDialog form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

dialog#etBreedingDialog h3 {
    margin-bottom: 0.75rem;
    color: #212529;
    font-size: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

dialog#etBreedingDialog .form-label {
    display: inline-block;
    width: 100px;
    margin-bottom: 0;
    margin-right: 1rem;
}

dialog#etBreedingDialog .mb-3 {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem !important;
}

dialog#etBreedingDialog #embryoStage,
dialog#etBreedingDialog #embryoGrade {
    width: 100px;
}

dialog#etBreedingDialog #freshFrozen {
    width: 100px;
}

dialog#etBreedingDialog .modal-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
    text-align: right;
}

.form-check-label {
    font-weight: normal;
}

/* Breedings Table - ET View Column Widths */
#breedings-table.et-view .col-animal { width: 12%; }
#breedings-table.et-view .col-time { width: 18%; }
#breedings-table.et-view .col-mating { 
    width: 30% !important;  /* ADD THIS LINE */
    max-width: 30% !important; } /* AND THIS LINE */
#breedings-table.et-view .col-info { width: 18%; }
#breedings-table.et-view .col-actions { width: 24%; }


/* ET view specific mating cell constraints */
#breedings-table.et-view td.mating {
    max-width: 280px !important;
    white-space: normal !important;
    overflow: visible;
    word-wrap: break-word;
}

/* Force the dropdown to be smaller */
#breedings-table.et-view td.mating select.mating-selector {
    max-width: 180px !important;
    width: 180px !important;
    font-size: 1rem !important;
}

/* Breedings Table - AI View Column Widths */
#breedings-table.ai-view .col-animal { width: 15%; }
#breedings-table.ai-view .col-time { width: 20%; }
#breedings-table.ai-view .col-aiwindow { width: 25%; }
#breedings-table.ai-view .col-mating { width: 30%; }
#breedings-table.ai-view .col-actions { width: 10%; }

/* Breedings Table - Both View Column Widths */
#breedings-table.both-view .col-animal { width: 15%; }
#breedings-table.both-view .col-time { width: 20%; }
#breedings-table.both-view .col-method { width: 10%; }
#breedings-table.both-view .col-breed_time { width: 18%; }
#breedings-table.both-view .col-mating { width: 20%; }
#breedings-table.both-view .col-actions { width: 22%; }

/* ET Schedule Table - Same styling as breedings ET view */
.breeding-group table .col-animal-id { width: 12%; }
.breeding-group table .col-heat-time { width: 18%; }
.breeding-group table .col-mating { 
    width: 30% !important;
    max-width: 30% !important;
}
.breeding-group table .col-info { width: 18%; }
.breeding-group table .col-actions { width: 22%; }

/* ET Schedule - mating cell constraints */
.breeding-group table td:nth-child(3) {
    max-width: 280px !important;
    white-space: normal !important;
    overflow: visible;
    word-wrap: break-word;
}

/* ET Schedule - dropdown constraints */
.breeding-group table td:nth-child(3) select.mating-selector {
    max-width: 180px !important;
    width: 180px !important;
    font-size: 1rem !important;
}

/* AI Schedule Table - Same styling as breedings AI view */
.breeding-group table .col-animal-id { width: 15%; }
.breeding-group table .col-breeding-window { width: 25%; }
.breeding-group table .col-mating { 
    width: 30% !important;
    max-width: 30% !important;
}
.breeding-group table .col-actions { width: 30%; }

/* AI Schedule - mating cell constraints (3rd column in AI schedule) */
.breeding-group table td:nth-child(3) {
    max-width: 280px !important;
    white-space: normal !important;
    overflow: visible;
    word-wrap: break-word;
}

/* AI Schedule - dropdown constraints */
.breeding-group table td:nth-child(3) select.mating-selector {
    max-width: 180px !important;
    width: 180px !important;
    font-size: 1rem !important;
}



/* Make page header dropdowns and buttons responsive - iPhone size only */
@media (max-width: 767px) {
    /* Stack dropdowns and buttons in rows, but keep each pair side by side */
    #pageheader_dropdowns_container {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    /* Dropdowns stay side by side */
    #pageheader_dropdowns_container .d-flex.gap-2 {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
    }
    
    #pageheader_dropdowns_container .dropdown {
        flex: 1 !important;
    }
    
    .pageheader_dropdowns {
        width: 100% !important;
    }
    
    /* Buttons stay side by side and wrap */
    #pageheader_buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .header_button {
        flex: 1 !important;
        min-width: calc(50% - 0.25rem) !important;
        margin: 0 !important;
    }

     /* Remove bottom margins on dropdowns and buttons on mobile */
    #pageheader_dropdowns_container .dropdown,
    #pageheader_buttons .header_button {
        margin-bottom: 0 !important;
    }
}


/* Mobile responsive buttons for the index.html file */
@media (max-width: 991px) {
    /* Ensure pageContent and mainContent constraints apply to iPhone as well */
    #pageContent {
        margin-bottom: 70px !important;
        height: calc(100vh - 75px) !important;
    }
    

    
    /* Make form buttons stack vertically and fill width */
    #add-heat-form .d-flex.gap-2 {
        flex-direction: column !important;
        width: 100%;
    }
    
    .create_cancel_button_b,
    .create_cancel_button_c {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure input box doesn't cause overflow */
    #add-heat-form .flex-grow-1 {
        width: 100%;
        max-width: 100%;
    }
    
    #add-heat-form input[name="animal_id"] {
        width: 100% !important;
    }
    
    /* New Group Form - Make labels consistent width and stack long labels */
    .form-label-fixed,
    .group_label {
        min-width: 100px !important;
        width: 100px !important;
        max-width: 100px !important;
        font-size: 0.9rem !important;
        padding: 0.25rem !important;
        height: auto !important;
        line-height: 1.2 !important;
    }
    
    /* Stack the long labels (target date and target start time) vertically */
    #new-group-form > div > div:nth-child(4),
    #new-group-form > div > div:nth-child(5) {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    /* Target Date Label - add top margin for spacing from Breeding Method */
    #new-group-form > div > div:nth-child(4) {
        margin-top: 0.75rem !important;
    }
    
    /* Target Date Label - no bottom margin (tight to its input) */
    #new-group-form > div > div:nth-child(4) .form-label-fixed {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        margin-bottom: 0 !important;
    }
    
    /* Target Date Input - add bottom margin for spacing to next label */
    #new-group-form > div > div:nth-child(4) .flex-grow-1 {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Target Time Label - no bottom margin (tight to its input) */
    #new-group-form > div > div:nth-child(5) .form-label-fixed {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        margin-bottom: 0 !important;
    }
    
    /* Target Time Input - no bottom margin */
    #new-group-form > div > div:nth-child(5) .flex-grow-1 {
        width: 100% !important;
    }
    
    /* Cancel button in new season row should be smaller */
    #cancel_new_season {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
    }
    
    /* New Group page header - reverse order on mobile (heading first, then buttons) */
    .header_button_container .d-flex.justify-content-between {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }
    
    .header_button_container h3 {
        text-align: center !important;
        margin-bottom: 1rem !important;
    }
    
    /* Button container: wrap buttons, center them */
    .header_button_container .d-flex.gap-2 {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    /* Make Add Group and Cancel buttons stay side by side */
    .header_button_container .create_cancel_button:not(:last-child),
    .header_button_container .header_button {
        width: 150px !important;
        max-width: 150px !important;
        flex-shrink: 0 !important;
    }
    
    /* Make "Go to New Group" button full width when it appears */
    .header_button_container .create_cancel_button:last-child:not(:first-child) {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }
    
    /* Add padding between header container and form on mobile */
    #new-group-form {
        padding-top: 0.75rem !important;
    }

    /* Add bottom padding to all table/report containers for comfortable scrolling */
    .listed_heats,
    .listed_breedings,
    .listed_pregchecks,
    .listed_reports {
        padding-bottom: 100px !important;
    }

    /* Fix ET table horizontal scrolling on iPhone */
    #et-table {
        table-layout: auto !important;
        min-width: 600px !important;
    }
    
    #et-table .col-dam,
    #et-table .col-sire {
        width: auto !important;
        min-width: 90px !important;
    }
    
    #et-table .col-method,
    #et-table .col-type {
        width: auto !important;
        min-width: 60px !important;
    }
    
    #et-table .col-lab {
        width: auto !important;
        min-width: 80px !important;
    }
    
    #et-table .col-actions {
        width: auto !important;
        min-width: 180px !important;
    }

    /* Stack breeding controls vertically on mobile with custom order */
    .breeding-controls-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Mobile order: 1) AI Controls, 2) Manage Matings, 3) Counts */
    .ai-controls-container {
        order: 1 !important;
    }
    
    .manage-matings-container {
        order: 2 !important;
    }
    
    .mating-counts-container {
        order: 3 !important;
    }
    
    .breeding-controls-row > div {
        width: 100% !important;
    }

}




/* Chevron styling to match Bootstrap dropdown-toggle */
/* Chevron for ET Mating Counts toggle button */
#toggle-mating-counts::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* Chevron for AI Controls toggle button */
#toggle-ai-controls::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

#pw_reset_message {
    color: white;
}