:root {
    --app-light-blue: #CFE5FF;
    --app-medium-blue: #6EA3DE;
    --app-deep-blue: #176BB5;
    --nav-background-color: #03003b;
    --primary-color: #121f4E;
    --secondary-color: #28A5EA;
    --tertiary-color: #16E2C5;

    --state-default: #7997AB;
    --state-success: #5DBE7F;
    --state-error: #F56060;
    --state-warning: #FFBA00;
    --state-inactive: #DDD;

    --primary-background: #E5E5E5;
    --secondary-background: #FFF;
    
    --primary-font: #04244d;
    --secondary-font: #526680;

    --status-green: hsl(140, 45%, 45%);
    --status-green-hover: hsl(140, 55%, 55%);

    --status-yellow: hsl(54, 100%, 55%);
    --status-yellow-hover: hsl(56, 100%, 63%);

    --status-red: hsl(0, 70%, 50%);
    --status-red-hover: hsl(0, 80%, 60%);

    --status-orange: hsl(33, 90%, 55%);
    --status-orange-hover: hsl(33, 90%, 65%);

    --status-closed: hsl(0, 20%, 65%);
    --status-closed-hover: hsl(0, 20%, 75%);

    --time-cubit: .6s;
    --time-quarter: calc(var(--time-cubit) / 4);
    --time-half: calc(var(--time-cubit) / 2);
    --time-threequater: calc(var(--time-cubit) / .75);
    --time-single: var(--time-cubit);
    --time-double: calc(var(--time-cubit) * 2);
    --time-triple: calc(var(--time-cubit) * 3);
    --vh:1vh;
    --offset:0px;
}

.height-adjustment{
  height:calc(var(--vh)*90 - var(--offset));
}

*{
  font-family: Arial;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body{
  font-family: system-ui;
  overflow: hidden;
}

.center{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 1em;
}

.center input{
  width: 80%;
  font-size: 1.5em;
  padding: .5em;
  border: 2px solid black;
  border-radius: 10px;
}

#opTable{
  z-index: 22;
}

#selectOption .mainButtons{
    width: 100%;
    border-radius: 10px;
    font-weight: 400;
    font-size: 1.25em;
    padding: 0.5em;
    height: 60px;
    margin: .5em 0em;
}

#selectOption fieldset{
  width: 100%;
  margin: 1em;
  border: 4px solid black;
  padding: 1em;
  height: 90%;
}

#active, #operations{
  font-size: 1.25em;
  font-weight:bold;
}

#active{
  margin: 0em;
}

#op-code-table thead{
background: black;
}

#op-code-table{
  width: 80%;
  margin: 1rem auto;
}

.op-code-short-description-info{
  padding: 1rem;
  flex: 0 30%;
}

.op-code-short-description-p{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -moz-line-clamp: 2;
  -ms-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
}

.smallModal .form-col, .smallModal .form-row{
  width: 90%;
}

.refresh-table{
  display: flex;
  justify-content:flex-end;
  align-items:center;
  width:100%;
}

#balance-div{
  display: none;
  justify-content: center;
  align-items: center;
  border: 2px black solid;
  width: fit-content;
  text-wrap: nowrap;
  border-radius: 10px;
  padding: .5rem 2rem;
  height: fit-content;
  pointer-events: none;
}

.operation-button-row{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#balance-div:hover{
  border: 5px white solid;
  background: lightgrey;
  color: black;
  outline: 5px black solid;
}

#currentBalance{
  font-size: 1em;
}

.balance-data{
  font-size: 1em;
  font-weight: bold;
}

#invoiceModal{
  display:none;
  z-index: 10;
}

#invoiceModal h1{
  text-decoration: underline;
}

#invoiceTable{
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin: 2rem 0rem;
  overflow-y:scroll;
  height: 75%;
}

#invoice-customer{
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  background: black;
  color: white;
  margin: 1rem auto;
  width: 50%;
  padding: 1rem;
  border-radius: 10px;
}

#invoiceTable th{
  background: black;
}

#openLaborQS, #openPartsQS, #openInventory{
  display:flex;
}

#laborQS, #partsQS{
  display:none;
  justify-content: flex-start;
  align-items: center;
}

#Labor th, #Parts th{
  background: black;
  padding:0;
}

.part-order{
  border: 0px solid white;
}

.part-order button{
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background:black;
  border: 2px white solid;
  outline: 2px black solid;
  color:white;
  font-weight: bold;
  display: flex;
  justify-content:center;
  align-items:center;
}

.part-order button i{
  font-size: 1.5em;
}

.modalQS {
    width: 400px;
    display: none;
    overflow: hidden;
    position: fixed;
    top: 153px;
    right: -9000px;
    z-index: 1005;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    flex-flow: column;
    border: 2px black solid;
    transition: right 500ms ease-in-out
}

.modalQS input{
  display: flex;
  width: 85%;
  padding: 0.5em;
  border-radius: 10px;
  margin: auto;
  margin-top: 1rem;
}

.qs-open{
  right:10px;
}

.buttonQS{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    gap: 1em;
    width: 100%;
    height: fit-content;
}

#openInventory{
  bottom:10%;
}

#partsSelectData{
  z-index: 60;
}

.buttonQS button{
    position: fixed;
    padding: 0.25em 1em;
    font-size: 1.25em;
    margin: 0em 1em 2em 0em;
    border: 2px black solid;
    right: 2%;
    bottom: 2%;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    justify-content: center;
    align-items: center;

}

#laborQS li, #partsQS li{
  border: 1px black solid;
  padding: .125em;
  margin: .5em;
  border-radius: 10px;
  list-style-type: none;
}

#laborQS, #partsQS{
  flex-flow: column;
  gap: .5em;
  padding: 1rem;
}

.list-item.highlighted {
  background-color: yellow !important;
  font-weight: bold;
}

.scroll-box{
  overflow-y:scroll;
  height: 500px;
}

.modalQS ul{
  display: flex;
  flex-flow: column;
  gap:.25em;
}

.modalQS h2{
  gap: 0em;
  text-align: center;
  text-decoration: underline;
}

#laborQS li:nth-child(even), #partsQS li:nth-child(even){
  background:lightgrey;
}


#storage-work-form{
  background-color: var(--app-deep-blue);
}

#general-work-form{
  background-color: black;
}

#workOrderType{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:1em;
}

#workOrderType button{
  width:50%;
  color:white;
  padding:.25em;
  font-size:1.25em;
  border: 4px white solid;
  outline: 4px black solid;
  border-radius: 10px;
}

#general-work-form{
  display:none;
}

#winterWorkOrderForm, #springWorkOrderForm{
display:none;
}


#messageModal{
  display:none;
  z-index: 99;
}

#customerSearchBar{
  font-size: 1.25em;
  margin: 2em;
  padding: .5em;
  border-radius: 10px;
}

.tech-select{
    padding: 0.5em;
    font-size: 1.25em;
    text-align: center;
    border-radius: 10px;
}

.tech-selector select{
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    border-radius: 10px;
    border: 2px black solid;
}

#uniqueDataTable th{
  border: 4px black solid;
  background: black; 
  font-size: 1.25em;
  padding: .25em;
}

.modal-customer{
  display: none;
  position: fixed;
  top: 0;
  z-index: 3000;
}

#customerPopUp{
  z-index:3200;
}

#popUpContent{
  height:50%;
  display: flex;
  justify-content: center;
  gap: 2em;
  align-items: center;
  overflow: hidden;
  border: 10px black solid;
  border-radius: 25px;
}

#popUpContent button{
 font-size: 2em;
    border: 10px solid white;
    outline: 5px solid black;
    background: black;
    color: white;
    border-radius: 25px;
    width: 75%;
    padding: 0.25em;
}

#winter-project-display-table th{
  background:lightblue;
  color:black;
}

#billing-display-table-button{
  display:none;
}

#billing-display-table th{
  background: red;
}

#internal-display-table th{
  background:#063802;
  color:white;
}

#messageBox{
  gap: 2em;
  font-size: 1.5em;
}

#message-header{
  text-align: center;
  text-decoration: underline;
  font-size: 3em;
  padding: 0.5em;
}

#messageInput{
  height:200px;
  border: 4px solid black;
  border-radius: 10px;
  padding: .5em;
  font-size: 1.25em;
}

#needKits{
  display:flex;
}

.whiteBox{
    width: 100%;
    height: 80vh;
    background: white;
    border: 5px black solid;
    padding: 4em;
    display: flex;
    flex-flow: column;
}

#noOpenWorkOrders{
  display:none;
}

.customCheck, .customCheckHeader, .moveOp{
  display:none;
}

.opButtonColumn{
  display:none;
  flex-flow:column;
  width:100%;
  justify-content:center;
  align-items:center;
  gap: 1em;
  height: 150px;
}

.opButtonColumn button{
  width:80%;
}

.linkButton{
  color:white;
  background:#3274bf;
  border-radius:5px;
  font-size:1.5em;
  font-weight:bold;
  padding:1.5em;
}

#addPart legend{
  font-weight:bold;
  font-size:1.75em;
  padding: 0em .5em;
}

.kit-modal{
  display:none;
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.5);
  justify-content:center;
  align-items:center;
  z-index:100;
}

#kitSelect{
    width: 30%;
    height: fit-content;
    padding: 2em;
    border-radius: 10px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    gap: 3em;
    padding-bottom: 6em;
}

#kitBox > button{
    background: lightblue;
    font-size: 2em;
    font-weight: bold;
    padding: 1em;
    border: 5px white solid;
    outline: 5px lightblue solid;
    border-radius: 10px;
}

#kitBox{
    display: flex;
    gap: 1em;
    flex-flow: column;
}

.operation-modal{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.5);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:50000;
}

#operation-popup{
  width:50%;
  height:80%;
  background-color: hsl(100,100%,100%);
  border: 4px black solid;
  border-radius: 5px;
  padding:1em;
}

.group{
  display:flex;
  flex-direction:column;
  flex-flow:flex-start;
}

    .holdOpButton{
      width:50px;
      height:50px;
      border-radius: 100%;
      background-color: #000051;
      border: 2px white;
      padding: 10px;
      color: white;
    }

    .partButton{
    background-color: #90caf9;
    border: 2px black;
    padding: 10px;
    color: black;
    padding: 0.75em;
    width: 50%;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 20px;
    border: black 4px solid;
    }
  
.table-scroll{
overflow-y: scroll;
height: 500px;
padding: 1em;
margin: 1em;
border: 2px black solid;
}

.modal-center{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100vw;
  height:100vh;
}

.modal-parts table{
  width: 100%;
}

.modal-parts{
  display:none;
  width: 100%;
  background-color: #fafafa;
  border: 4px black solid;
  border-radius:10px;
  border-radius: 2px;
  height:90%;
  position: fixed;
}

.inventory-header th{
  background: black;
  font-size: 1.5em;
  padding: .25em;
}

    #partsData,#partsOrderData{
  z-index:2000;
}

#partsOrderData{
  display:none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.search-container{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}

.search-container input{
  width:80%;
  padding:1em;
  font-size: 1.25em;
  border-radius:10px;
}

.hidden-row{
  display:none;
}

.partsModal{
  display:none;
  background:rgba(1,1,1,.5);
  width:100%;
  height:100%;
  z-index:1002;
  position:fixed;
  top:0%;
  left:0%;
  justify-content:center;
  align-items:center;
}

.partSelectModal{
  display: block;
  background: white;
  overflow-y: scroll;
  height: 100vh;
  min-width: 80%;
}

#addPart{
  display:flex;
  justify-content:center;
  align-items:center;
  width: 70%;
  height:90%;
  flex-flow: column;
}

.order-entry{
    height: 100%;
    overflow-y: scroll;
    width: 100%;
    padding: 1.5em;
}

#addPart select{
  font-size: 1.5em;
}

#emailTable{
  display: none;
}

#customerEmailModal{
  z-index: 11;
}

.email-table{
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 80%;
  gap: 2rem;
  padding: 1rem;
}

#email-message{
  width: 100%;
  border: 1px black solid;
  padding: .5rem;
  border-radius: 10px;
  flex: .5;
  font-size: 1rem;
}

#email-customer{
  padding: .5rem;
  border: 1px black solid;
  border-radius: 10px;
  width: 50%;
  font-size: 1rem;
}

.flex-group label{
  margin: 0;
}

.flex-group{
  display: flex;
  width: 100%;
  flex-flow: column;
}

#email-subject{
  padding: .5rem;
  border: 1px black solid;
  border-radius: 10px;
  width: 75%;
  font-size: 1rem;
}

.flex-expand{
  flex:1;
}

.flex-email{
  display:flex;
  width:100%;
  justify-content:center;
  align-items: center;
}

#email-send{
  background: var(--nav-background-color);
  color: white;
  padding: .5rem;
  font-size: 2rem;
  border: 4px white solid;
  outline: var(--nav-background-color) 4px solid;
  border-radius: 15px;
  width: 50%;
  text-align: center;
}

#snackbar {
  visibility: hidden;
  background-color: green;
  color: #fff;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  border-radius: 10px;
  padding: .5rem;
  position: fixed; /* Sit on top of the screen */
  z-index: 100000;
  left: 50%; /* Center the snackbar horizontally */
  transform: translateX(-50%); /* Adjust for the actual width of the snackbar */
  bottom: 30px; /* 30px from the top */
  outline: 10px solid transparent;
}


/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s, flash 1s infinite;
-webkit-animation-fill-mode: forwards;

animation: fadein 0.5s, fadeout 0.5s 2.5s, flash 1s infinite;
animation-fill-mode: forwards;

}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

/* Flashing animation for the outline */
@-webkit-keyframes flash {
  0% { outline-color: transparent; }
  50% { outline-color: #fff; }
  100% { outline-color: transparent; }
}

@keyframes flash {
  0% { outline-color: transparent; }
  50% { outline-color: #fff; }
  100% { outline-color: transparent; }
}


#operation-table, #tech-table,#work-table, #open-wo-table{
  margin-top:2em;
  width:100%;
}

#open-wo-table tr{
  background-color: white;
}

      table {
        overflow-y: scroll;
        height: 300px;
        width: auto;
        border-collapse:collapse;
      }

#processing{
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
  width:500px;
  height:200px;
  position:fixed;
  top:25%;
  left:30%;
  background:white;
  border: 15px red solid;
  border-radius:10px;
}

#needNumbers{
  display:none;
  font-weight:bold;
  justify-content:center;
  align-items:center;
  border-radius:20px;
  width:200px;
  height:75px;
  background-color:red;
  color:white;
  border:2px white solid;
  outline:2px red solid;
  margin:5px;
}

#needTechs{
  display:none;
  font-weight:bold;
  justify-content:center;
  align-items:center;
  border-radius:20px;
  width:200px;
  height:75px;
  background-color:#004c8c;
  color:white;
  border:2px white solid;
  outline:2px #004c8c solid;
  margin:5px;
}

.tableButtons{
  padding:1em 4em;
  font-size:1.5em;
  background: var(--nav-background-color);
  color: white;
  font-weight: bold;
  border: 4px white solid;
  outline: 4px var(--nav-background-color) solid;
  border-radius: 10px;
}

.flexBox{
  width:80%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:column;
  gap:20px;
}

.flexRow{
  display:flex;
  flex-flow:row;
  justify-content:center;
  align-items:center;
  gap:2rem;
}

.flexCol{
  display:flex;
  flex-flow: column;
  justify-content:center;
  align-items:center;
  width:100%;
  gap:1em;
}


    html,
    body {
      margin: 0px;
      padding: 0px;
    }

    .table{
      height:100px;
    }

    #addSelectModal{
      display:none;
      position:fixed;
      top:0%;
      left:0%;
      height:100%;
      width:100%;
      background-color:rgb(240,240,240,.8);
    }


    #addSelect{
      display:flex;
      z-index:10;
      width: 500px;
      height: 500;
      top:30%;
      left:30%;
      position:fixed;
      justify-content:space-around;
      align-items:center;
      flex-flow:column;
      background-color:white;
      border:3px black solid;
      border-radius:10px;
      padding:3em;
    }

    #addSelect > button{
      background-color:blue;
      height:100px;
      width:fit-content;
      border:3px white solid;
      outline:3px blue solid;
      border-radius:20px;
      color:white;
      font-size:1.25em;
      font-weight:bold;
      padding:20px;
      margin:2em;
    }

    #storagePrice{
      font-weight:bold;
      font-size: 1.25em;
    }

  .customerButton {
    border-radius: 10px;
    background-color: var(--app-light-blue);
    font-weight: bold;
    color: black;
    width: 150px;
    height: 50px;
  }

    .link {
      display: none;
    }

    .no-show{
      display:none;
    }

    #list {
      font-size: 4em;
    }

    #Labor,#Parts{
      width:100%;
    }

    .tabcontent {
      display: block;
      margin: 3em 0em;
      border: 4px solid black;
      padding: 1em;
      border-radius: 10px;
  }

  .in-progress-button{
    background-color: #f3f587;
    height: 100px;
    width: 50%;
    border: 3px white solid;
    outline: 3px #f3f587 solid;
    border-radius: 20px;
    color: black;
    font-size: 1.25em;
    font-weight: bold;
    padding: 20px;
    margin: 2em;
    cursor: pointer;
  }

.current-info{
  width:100%;
}

.current-info p{
  margin:0;
  font-size:1.25em;
  font-weight:bold;
}

.tab-buttons {
    cursor: pointer;
    font-size: 1.5em;
    padding: 0.25em 1.25em;
    margin: 0em 0.5em;
    border: 4px black solid;
    border-radius: 10px;
    font-weight: bold;
}

#statusTable tr:nth-child(even){
  background: #cccccc;
}

.table-button{
  border: 4px black solid;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    text-align: center;
}

.table-button > i{
  font-size: 1.75;
}



.tab-buttons.activeTab {
    background-color: #007BFF;  /* This is a blue color, but you can change it to any color you prefer */
    color: white;  /* Text color for the active tab button */
} 

.tab-button-section{
  width:75%;
}

.addOpenButtons{
  padding:.5em;
  background: #020754;
  outline: 4px solid #020754;
  color: white;
  width:100%;
  border: 4px black white;
  border-radius: 10px;
  font-size: 1.25em;
  font-weight: bold;

}

.tab-section{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 2em;
  width: 100%;
}

.section{
  width: 100%;
}

.spacer{
  display: flex;
  flex-flow: column;
}

.op-category-container{
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 1rem;
  border: 2px solid black;
  width: 75%;
  border-radius: 10px;
  padding-bottom: 2.5rem;
  overflow-y: scroll;
  min-height: 60vh;
}

.category-container{
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 1rem;
  border: 2px solid black;
  width: 90%;
  border-radius: 10px;
}

#loading-icon-op, #table-loading-icon{
  display:flex;
}

  #table-loading-icon{
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-flow: column;
    gap: 1rem !important;
  }

#table-progress-wrap {
  display: none;
  width: 100%;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

#table-progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--accent-color, #1a3a5c);
  border-radius: 2px;
  transition: width 0.15s ease-out;
}

  #labor-loading-icon{
    display:none;
  }

    #loading-icon-move{
      display:none;
    }

      .addOp, .moveOp, .showOp, .hideOp {
      width:80%;
      height:50px;
      border-radius: 10px;
      border: 2px white;
      color: white;
      font-size:1.5em;
      font-weight:bold;
    outline: 2px green solid;
    border: 2px white solid;
    }

.addOp{
  background-color: #33b249;
}

.job-complete-button{
  background-color: white;
  border: 4px #016313 solid;
  border-radius: 10px;
  font-size: 1.25em;
  font-weight: bold;
  padding: .5rem 3rem;
  margin: 2rem auto;
  cursor: pointer;
}

.fullGroup{
  display:none;
    justify-content: center;
    align-items: center;
    gap: 1em;
    flex-flow: column;
    border: 3px black solid;
    padding: 1em;
    width: 50%;
    border-radius: 10px;
}

.smallGroup{
  display:flex;
  flex-flow:column;
  justify-content:start;
  align-items:center;
  gap:.5em;
}

.moveOp{
background-color: black;
}

.showOp{
background-color: #5783db;
}

.hideOp{
background-color: #ab0000;
}


.changeWorkOrderButton{
      width:50px;
      height:50px;
      border-radius: 100%;
      background-color: blue;
      border: 2px white;
      padding: 10px;
      color: white;
}

.changeWorkOrderButton i{
  font-size:1.75em;
}


    .returnOpButton {
      width:50px;
      height:50px;
      border-radius: 100%;
      background-color: #9a0007;
      border: 2px white;
      padding: 10px;
      color: white;
    }

    .deleteOpButton {
      width:50px;
      height:50px;
      border-radius: 100%;
      background-color: red;
      border: 2px white;
      padding: 10px;
      color: white;
    }

    .saveButton {
      width:50px;
      height:50px;
      border-radius: 100%;
      background-color: green;
      border: 2px white;
      padding: 10px;
      color: white;
    }

     .removeButton {
      width:50px;
      height:50px;
      border-radius: 100%;
      background-color: red;
      border: 2px white;
      padding: 10px;
      color: white;
    }

.labor-data-button{
  background: #118200;
  color:white;
}

.labor-update-button{
  background: blue;
  color: white;
}

.labor-part-delete-div{
  grid-column: 5;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 600px) {
  .labor-part-delete-div{
    grid-column: 4;
  }
  
}

.labor-data-delete-button, .parts-data-delete-button{
  width: 20px;
  height: 100%;
  background-color: rgba(0,0,0,0);
  border-radius: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
}

    th {
      text-align: center;
    }

    input {
      border: 2px black solid;
    }

    select {
      border: 2px black solid;
    }

    label {
      margin-top: 2em;
      margin-bottom: 1em;
    }

    .button-row {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      margin: 3em 0em;
      width: 100%;
    }

    .new-customer-row {
      flex-direction: row;
      justify-content: left;
      align-items:center;
      width: 100%;
    }

    .button-exit-row, .button-exit-row-return {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background: var(--nav-background-color);
      color:white;
      width: 100%;
      border-radius: 5px 5px 0px 0px;
    }

    .button-exit-row-return {
      justify-content: flex-end;
    }

      .button-add-row {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
      height: 150px;
    }

    .scroll-top {
      position: fixed;
      bottom: 0%;
      right: 2.5%;
      width: fit-content;
      border-radius: 50%;
      text-align: center;
      margin: 2em 0em;
      padding: 1em;
      line-height: 50%;
      height: fit-content;
      border: 5px white solid;
      outline: 5px black solid;
    }

    .showRow{
    display:table-row;
  }

  .hideRow,.removeRow{
    display:none;
  }

  .omitButton, .deleteButton{
    border-radius: 100%;
    width: 45px;
    height: 45px;
  }

  .omitButton{
    background: #8cb6ff;
    border: white solid 3px;
    outline: #8cb6ff solid 3px;
    color:black;
  }

  .deleteButton{
    background-color: darkblue;
    border: solid 3px white;
    outline: solid 3px darkblue;
    color:white;
  }

    #kitTable{
      background:white;
      display:none;
      justify-content:center;
      align-items:center;
      flex-flow:column;
      overflow-y:scroll;
    }

    .scroll-top>i {
      font-size: 2em;
      font-weight: bold;
    }

    .flex thead th {
      position: sticky;
      top: 0;
    }

    #thCustomer {
      display: none;
    }

    #date {
      width: 30%;
    }

    .table {
      width: 90%;
      margin-bottom: 4em;
    }

    #display-table tr:nth-child(even),#operation-table tr:nth-child(even), #open-wo-table tr:nth-child(even) {
      background: #c8dee6;
    }

    #winter-display-table tr:nth-child(even) {
      background: #90caf9;
    }

    #spring-display-table tr:nth-child(even) {
      background: #b2fef7;
    }


 #internal-table tr:nth-child(even) {
      background: #b7feb2;
    }
    #hold-table tr:nth-child(even) {
      background: #ffcdd2;
    }

    #mooring-display-table tr:nth-child(even) {
      background: #adadad;
    }

    #search, #job-search, #schedule-search, #tech-search, #closed-search, #daily-log-search {
      font: 500 0.95rem var(--font-body, 'Public Sans', system-ui, sans-serif);
      color: var(--text-body);
      background: #fff;
      border: 1.5px solid var(--card-border);
      border-radius: var(--radius-control);
      padding: .65em 1em;
      flex: 0 70%;
    }

    #search:focus, #job-search:focus, #schedule-search:focus, #tech-search:focus, #closed-search:focus, #daily-log-search:focus {
      outline: none;
      border-color: var(--seafoam);
      box-shadow: 0 0 0 3px rgba(15,140,130,.12);
    }

@media screen and (max-width: 600px) {
  #search, #job-search, #schedule-search, #tech-search, #closed-search, #daily-log-search {
    font-size: .9rem;
  }
}

    table{
      border-collapse: collapse;
    }

    thead:where(:not(.estDoc-page thead):not(.invDoc-page thead)) {
      font-weight: bold;
      text-align: center;
      font-size: 1.25em;
    }

    td:where(:not(.estDoc-page td):not(.invDoc-page td)) {
      font-weight: bold;
      text-align: center;
      width: fit-content;
      border: 5px solid;
      font-size: 1em;
      padding: 10px;
    }

    #winterTable, #springTable, #mooringTable, #winterProjectTable, #internalTable, #billingTable{
      display:none;
    }

    #mooring-display-table th{
      background:black;
      color:white;
    }

    th:where(:not(.estDoc-page th):not(.invDoc-page th)) {
      font-weight: bold;
      text-align: center;
      width: fit-content;
      white-space: nowrap;
      border: 5px white solid;
      color: white;
    }

    #display-table th, #operation-table th, #work-table th, #open-wo-table th{
      background: var(--nav-background-color) ;
    }

     #winter-display-table th{
      background: #0d47a1;
    }

     #spring-display-table th{
      background: #00796b;
    }

  .hold-header{

      font-weight: bold;
      text-align: center;
      width: fit-content;
      white-space: nowrap;
      border: 5px white solid;
      background: #9a0007;
      color: white;
    }

  #hold{
    display:none;
  }

  #open{
    display:block;
  }
  
  .highlight-button{
    background:#ba0413 !important;
    color:black !important;
  }

    thead {
      font-weight: bold;
      width: fit-content;
      white-space: nowrap;
      color: white;
    }

    #close-btn, #calendar-close-btn{
      border-color:#535457;
    }

    #close-btn > i, #calendar-close-btn > i{
      font-size:4em;
      color:#535457;
    }

    .flex {
      flex-flow: column;
      justify-content: center;
      align-items: center;
      height: 100%;    
    }

    #job-data{
      display:none;
    }

.kitFlex {
    position: fixed;
    display: flex;
    align-items: center;
    height: 100%;
    flex-flow: column;
    top: 0;
    background: white;
    overflow-y: scroll;
    overflow-x: hidden;
    }

.kitButtons{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-flow: column;
    align-items: center;
    gap: 1em;
    margin: 2em;
}

.addToWorkOrder{
    font-size: 2em;
    color: white;
    background: var(--nav-background-color);
    padding: 0.5em;
    width: 70%;
    border: 4px solid white;
    outline: 4px solid var(--nav-background-color);
    border-radius: 20px;
}



    .keeper{
      width:fit-content;
    }


    .container{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 1em;
    }

    fieldset input{
      font-size: 1.5em;
      padding: 0.25em;
      border-radius: 10px;
      width: 100%;
      border: none;
    }

    .search-box{
      display:flex;
      width: 100%;
      justify-content: center;
      align-items: center;
    }

    #myBtn {
      display:flex;
      justify-content:center;
      align-items:center;
      height:44px;
      width: 44px;
      border-radius: 50px;
      background: var(--seafoam);
      color: #fff;
      border: none;
      outline: none;
      box-shadow: var(--shadow-card);
      padding: 0px;
      cursor: pointer;
      transition: width 250ms ease-in-out, background 150ms ease;
    }

    #myBtn img{
      filter: invert(1);
    }

    #myBtn:hover{
      width: 96px;
      background: var(--harbor-navy);
    }


    #estimateButton {
      font-size: 5em;
      border-radius: 100%;
      background: blue;
      color: white;
      border: 10px #5a9216 solid;
      margin: 0px;
      padding: 0px;
      cursor: pointer;
    }

    #myBtnsm {
      display: none;
    }

    * {
      box-sizing: border-box;
    }

    #myInput {
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 100%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }

    #myTable {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid #ddd;
      font-size: 18px;
    }

    #myTable th,
    #myTable td {
      text-align: left;
      padding: 12px;
    }

    #myTable tr {
      border-bottom: 1px solid #ddd;
    }

    #myTable tr.header,
    #myTable tr:hover {
      background-color: #f1f1f1;
    }

    .modal, .modal-clear {
      display: none;
      position: fixed;
      justify-content:center;
      align-items:center;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      background-color: rgb(0, 0, 0);
      background-color: rgba(0, 0, 0, 0.4);
    }


    .modal-content, .modal-content-login {
      background-color: #fefefe;
      width: 95%;
      overflow: hidden;
      height: 95%;
      border-radius: 10px;
      box-shadow: 0px 0px 8px 6px rgba(111,111,111,.5);
    }

    .modal-content-login{
      width: 100% !important;
      height: 100% !important;
      display:flex;
      justify-content: center;
      align-items: center;
    }

    #login-form{
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      height: 90%;
      border-radius: 20px;
      width: fit-content;
      border: 4px solid var(--nav-background-color);
      padding: 4rem;
      box-shadow: 0px 0px 30px -1px var(--nav-background-color);
    }

    #login-modal{
      display:flex;
      background:var(--app-medium-blue) !important;
    }

  .modal-content-table {
      margin-top: 50px;
      position: fixed;
      left: 0%;
      top: 0%;
      background-color: #fefefe;
      padding: 20px;
      border: 10px solid #888;
      width: 100%;
      overflow-y: scroll;
      height: 100%;
      margin: auto;
    }

    #addNewCustomer {
      z-index: 20;
    }

    #customerData {
      z-index: 16;
    }

    #description{
      width: 100%;
      height: 10rem;
      border: none;
      outline:none;
    }

    #description:focus-visible{
      outline:none;
      border:none;
    }

    .form-row {
      display: flex;
      flex-direction: row;
    }

    .form-col {
      display: flex;
      flex-direction: column;
    }

    #clear-btn-sm {
      display: none;
    }



    #delete-btn, #clear-btn {
      width: fit-content;
      border-radius: 50%;
      text-align: center;
      margin: 2em 0em;
      padding: 1em;
      line-height: 50%;
      height: fit-content;
      border: 5px white solid;
      outline: 5px black solid;
    }

    .newCustomer {
      width: fit-content;
      border-radius: 50%;
      text-align: center;
      margin: 1em 0em;
      padding: .5em;
      line-height: 50%;
      height: fit-content;
      border: 3px white solid;
      outline: 3px black solid;
      margin-left:50px;
    }

    .newCustomer>i {
      font-size: 1.5em;
      font-weight: bold;
    }

    #update-btn {
    background-color: #004ba0;
    color: white;
    font-size: 2em;
    border-radius: 10px;
    padding: 0.5em 2em;
    border: white 4px solid;
    outline: 4px solid #004ba0;
    }

    #delete-btn {
      background-color: #b71c1c;
      color: white;
    }

    #add-customer-btn {
    background-color: var(--nav-background-color);
    color: white;
    font-size: 3em;
    margin: 0.5em;
    padding: 0.25em 2em;
    border: none;
    border-radius: 10px;
    }

    #clear-btn {
      background-color: black;
      color: white;
    }


    .buttons>i {
      font-size: 3em;
      font-weight: bold;
    }

    .button-spring-exit-row{
      display:flex;
      justify-content:right;
    }

    .buttonExitRow{
      width:100%;
       display:flex;
      justify-content:flex-end;
    }



    .buttonExit {
      border: 0px;
      background-color: #ff867c;
      color: white;
      width: fit-content;
      border-radius: 50%;
      text-align: center;
      padding: 1em;
      line-height: 50%;
      height: fit-content;
    }

    label {
      font-weight: bold;
      color: #002f6c;
      font-size: 1.25em;
    }

    #update-btn:hover,
    #add-customer-btn:hover {
      background-color: white;
      color: black;
      outline: 10px green solid;
    }

    #clear-btn:hover,
    #delete-btn:hover {
      background-color: white;
      color: black;
      outline: 10px red solid;
    }

    .buttonExit:hover {
      background-color: black;
      color: white;
    }

    .mainButtons{
      width:250px;
      border-radius:20px;
      font-weight: 400;
      font-size:1.25em;
      padding:.5em;
      height:150px;

    }

    .main-button-container{
      display:flex;
      flex-flow:column;
      justify-content:center;
      align-items:center;
      gap:.25em;
      height: 90%;
      padding: 1rem;
    }

    .red{
      background: #7f0000;
      color:white;
    }

    .light-gray{
      background:#78909c;
      color:black;
      border: 4px white solid;
      outline: 4px #78909c solid;
    }

    .dark-gray{
      background:#4b636e;
      color:black;
      border: 4px white solid;
      outline: 4px #4b636e solid;
    }

  
    .exitButton, .returnButton{
      margin: .5em;
      border: 0px;
      background-color: white;
      color: var(--nav-background-color);
      width: 40px;
      border-radius: 50%;
      text-align: center;
      padding: .25em;
      line-height: 50%;
      height: 40px;
      font-weight: bold;
    }

    .part-spacers{
      width: fit-content;
      display: flex;
      gap: .25rem;
    }

    select {
      height: 40px;
      width: 200px;
      border-radius: 5px;
      border: 2px solid black;
    }


    .button-group {
      display: flex;
      justify-content: space-around;
    }

    .table td, .table th,.table thead th {
      vertical-align:middle;
      padding: .5em;
      font-size: 1em;
    }

    button > i{
      vertical-align:middle;
    }

.toastJS {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index:9999999;
  max-width: 400px;
  padding: 6px;
  background: #cccccc;
  color: #333333;
  font-family: sans-serif;
  text-align: center;
  border: 1px solid #aaaaaa;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, top 0.2s, visibility 0.2s;
}

.toastJS--visible {
  top: 20px;
  opacity: 1;
  visibility: visible;
}

.toastJS--success {
  background: #00c02b;
  border-color: #009d23;
  color: #ffffff;
}

.toastJS--error {
  background: #d50000;
  border-color: #ba0000;
  color: #ffffff;
}

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    z-index: 10;
    opacity: 100%;
    width: 40px;
    height: 40px;
    pointer-events: initial;
}

.stretch{
  width:100%;
}

    #kitTable th, #myTable th, #tech-table th{
      background:black;
    }

  #kitTable td{
    padding:5px;
  }

#needKits{
    background: #b71c1c;
    font-size: 1.25em;
    padding: 0.75em;
    border: 4px white solid;
    outline: 4px #b71c1c solid;
    border-radius: 100px;
    margin: 10px;
    color: white;
    font-weight: bold;
}

#needKits:hover{
  background:green;
  outline:5px green solid;
  transition: background 1s outline 1.5s;
}

.bigModal{
  display:none;
  z-index:14;
    position: fixed;
    justify-content:center;
    align-items:center;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    background-color: rgb(240,240,240,.8);
}

.smallModal{
    width: 60vw;
    display: flex;
    align-items: center;
    flex-flow: column;
    background: white;
    height: 80vh;
    gap: 1em;
    border-radius: 10px;
}

#opCodeForm > .button-exit-row{
  border-radius: 10px 10px 0px 0px;
}

.jobForm{
  padding: 2rem;
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: .5rem;
  overflow-y:scroll;
}

.smallModal input, .smallModal select{
  font-size: 1.25em;
}

.minimized{
  display:none;
}

#opCodeTable{
  display:none;
}

#opCodeSelect{
  display: flex;
  flex-flow: column;
}

#op-table-div{
  display: flex;
  flex-flow: column;
  flex-grow: 1;
}

.searchHide{
  display:none;
}

.hidden{
  display:none !important;
  visibility: hidden;
}

.none{
  display:none;
}

.exit-box{
  position:relative;
}

    .minimizeButton{
      justify-content:center;
      align-items:center;
      margin:1em;
      border: 0px;
      background-color: blue;
      color: white;
      width: fit-content;
      border-radius: 50%;
      text-align: center;
      padding: 1em;
      line-height: 50%;
      height: fit-content;
    }

#activeJobs{
  width:100%;
  display:flex;
  justify-content:left;
  align-items:center;
  gap:.25em;
  margin: 1em 0em;
  flex-wrap: wrap;
}

#haul, #launch{
  width: 25%;
}

#activeJobs p{
  width: 100%;
  border-radius: 10px;
}

#activeJobs .wo-job-row p{
  width: auto;
}

#activeJobs fieldset{
  min-width: 0;
  padding: 0.5em 1.25em;
  margin: 0.25em 0em;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  width: 100%;
  background: var(--app-bg);
}

#activeJobs legend {
  font: 700 11px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--harbor-navy);
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
}

fieldset {
  border-radius: 10px;
}

legend{
  font-size: 1em;
  font-weight: bold;
  margin: .5rem;
  padding: .25rem;
}

legend select, legend input{
  font-size: 1.25em;
  font-weight: normal;
}

#Update .form-col, #Add .form-col{
  gap: .75em;
}

#Update select{
  font-size: 1.5em;
  width: 35%;
}

textarea{
  font-size: 1em;
  font-family: Arial;
  padding: .5rem;
}

#generalWorkOrderForm, #winterWorkOrderForm, #springWorkOrderForm{
  flex-flow: column;
  gap: 1em;
  margin: 1em 0em
}

#activeJobs legend{
  width: fit-content;
  padding: 0em 0.5em;
}


.delete-job-pointer:hover{
  color:red;
}


.job-button{
  display:flex;
  justify-content:space-between;
  width:125px;
  align-items:center;
  padding:1em;
  font-weight:bold;
  background:black;
  color:white;
  border:3px white solid;
  outline: 3px black solid;
  border-radius:10px;
  margin:.25em;
}

.form-area{
  width:90%;
}

.form-area textarea{
  height:250px;
  width:90%;
}

.add-job-button{
  background: var(--nav-background-color);
  color:white;
  outline: 3px var(--nav-background-color) solid;
}

.delete-job-button{
  background: #990606;
  color:white;
  outline: 3px #990606 solid;
}

#selectOpCode{
  font-size: 1.25em;
    background: lightsteelblue;
    font-weight: bold;
    padding: 0.25em;
    border-radius: 10px;
}

#selectOpCode > i{
  font-size: 2em;
}

#codeSearch{
  padding: 9px 13px;
  margin: 1em;
  font: 500 14px var(--font-body);
  width: 95%;
  border-radius: var(--radius-control);
  border: 1.5px solid var(--card-border-alt);
  color: var(--text-body);
}

#codeSearch:focus {
  border-color: var(--seafoam);
  box-shadow: 0 0 0 3px rgba(15,140,130,.15);
  outline: none;
}

.lowerButton{
  padding:1.15em;
  font-size: 1.25em;
  margin:2em;
  font-weight: bold;
  border-radius: 10px;
  border:3px white solid;
}

#clear-part-btn, #add-btn{
  width: 60%;
  margin:1em;
  padding:.5em;
  font-size: 1.25em;
  font-weight: bold;
  border-radius: 10px;
}

#clear-part-btn{
  background: #94000a;
  border:4px solid white;
  outline:4px solid #94000a;
  color:white;
}

#add-btn{
  background: var(--nav-background-color);
  border:4px solid white;
  outline:4px solid var(--nav-background-color);
  color:white;
}

.send-button{
  background: black;
  border:4px solid white;
  outline:4px solid black;
  font-size:1.25em;
  font-weight:bold;
  color:white;
  width: 50%;
  border-radius: 10px;
  padding: .5em;
}

.cancel-send-button{
  background: #a10010;
  border:4px solid white;
  outline:4px solid #a10010;
  font-size:1.25em;
  font-weight:bold;
  color:white;
  width: 50%;
  border-radius: 10px;
  padding: .5em;
}

.op-header:before {
  content: "";
  display: block;
  margin-top: 10px; /* Adjust the space as needed */
}

.add-op-button, .customer-record-button, #balance-amount, .close-work-order-button{
  border: 1.5px solid var(--card-border);
  background: #fff;
  color: var(--harbor-navy);
  padding: .55em 1.3em;
  font: 600 0.85rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  border-radius: var(--radius-control);
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.add-op-button:hover, .customer-record-button:hover {
  border-color: var(--seafoam);
  background: rgba(15,140,130,.06);
}

.add-op-button {
  border-style: dashed;
  color: var(--text-faint);
}

.close-work-order-button{
  background-color: var(--red);
  border-color: var(--red);
  color: #fff;
}

.close-work-order-button:hover {
  background-color: var(--red-text);
  border-color: var(--red-text);
}

.view-change-buttons{
  width: 100px;
  font: 600 0.85rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  padding: .55em 1.3em;
  min-width: fit-content;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.view-change-buttons:hover {
  border-color: var(--seafoam);
  background: rgba(15,140,130,.08);
}

@media screen and (max-width:600px) {

  .view-change-buttons{
    flex:1;
  }

  .view-change-buttons-mobile{
    flex: 1;
    display: flex;
    width: 100%;
  }
  
}

.filter-button-section{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1em;
}

.date-filter{
  display: flex;
  flex-flow: column;
  gap: .5rem;
}

.date-filter input{
  padding: .35em .5em;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  font: 500 0.85rem var(--font-body, 'Public Sans', system-ui, sans-serif);
}

.date-filter label {
  font: 600 0.82rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
}

.date-filter > div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}

@media screen and (max-width:600px) {
  .filter-button-section{
    gap: 0.5em;
  }
  
}

.job-item.complete-job, .table-item.complete-job{
  display:none;
}

.job-item.closed-job, .table-item.closed-job{
  display:none;
}

.workOrderButton{
  padding: 1em;
  margin: 0;
  background: white;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

.flex-col{
  display:flex;
  flex-flow: column;
  width: 100%;
  justify-content:center;
  align-items:center;
}

.work-order-info{
    width:100%;
    display:flex;
    justify-content:flex-start;
}

#work-order-view{
  display:flex;
  flex-flow:column;
}

.loading {
  padding:1em;
  margin:.5em;
  display: none;
      justify-content: center;
    align-items: center;
}

.loading-row, .loading-dot {
  display: flex;
  width: 90%;
  height: 80px;
  border-radius: 10px;
  box-shadow: 0px 2px 7px 0px;
  background-color: white;
  animation: loading 0.8s ease-in-out infinite;
}

@keyframes loading {
  0% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}

.loading-dot {
  width: 20px;
  height: 20px;
  margin: 30px auto;
  border-radius: 50%;
  background-color: black;
}

#general-loading-icon{
  justify-content: center;
}

svg {
  width: 50px;
}

.half-circle1{
stroke: var(--nav-background-color);
}

.half-circle2{
stroke: var(--app-medium-blue);
}

.hourglass1{
stroke: var(--nav-background-color);
}

.hourglass2{
stroke: var(--app-medium-blue);
}

.half-circle1, .half-circle2 {
  stroke-dasharray: 314.1592653589793;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  stroke-dashoffset: 264;
  -webkit-animation: rotateCircle 2.2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite both, delayedSnake 2.2s ease-in-out infinite;
          animation: rotateCircle 2.2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite both, delayedSnake 2.2s ease-in-out infinite;
}
.hourglass1, .hourglass2 {
  stroke-dasharray: 210;
  -webkit-animation: snake 3s linear infinite both;
          animation: snake 3s linear infinite both;
}
@-webkit-keyframes rotateCircle {
  0% {
    transform: rotate(-105deg);
  }
  5% {
    transform: rotate(-105deg);
  }
  95% {
    transform: rotate(105deg);
  }
  100% {
    transform: rotate(105deg);
  }
}
@keyframes rotateCircle {
  0% {
    transform: rotate(-105deg);
  }
  5% {
    transform: rotate(-105deg);
  }
  95% {
    transform: rotate(105deg);
  }
  100% {
    transform: rotate(105deg);
  }
}
@-webkit-keyframes delayedSnake {
  0% {
    stroke-dashoffset: 260;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -260;
  }
}
@keyframes delayedSnake {
  0% {
    stroke-dashoffset: 260;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -260;
  }
}
@-webkit-keyframes snake {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 420;
  }
}
@keyframes snake {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 420;
  }
}


#pop-out-box > input[type="date"]{
    color: white;
    background-color: dimgrey;
    padding: 1em;
    border-radius: 10px;
    font-size: 1.15em;
}

#pop-out-box > input[type="date"]::-webkit-calendar-picker-indicator {
  font-family: "Material Icons";
  content: "\E8DF";
  font-size: 24px;
  margin-left: 5px;
  cursor: pointer;
  color: #0074D9;
  filter: brightness(0) invert(1); /* set the icon to white */
}

#pop-out-box > input[type="date"]::-moz-calendar-picker-indicator {
  font-family: "Material Icons";
  content: "\E8DF";
  font-size: 24px;
  margin-left: 5px;
  cursor: pointer;
  color:white;
}

#pop-out-box > input[type="date"]::-ms-calendar-picker-indicator {
  font-family: "Material Icons";
  content: "\E8DF";
  font-size: 24px;
  margin-left: 5px;
  cursor: pointer;
  color:white;
}

.button-box{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-flow: column;
  position: absolute;
  top: 40px;
  left: 85px;
  height: 500px;
  background: white;
  z-index: 40;
  border: 4px black solid;
  padding: 0.5em;
  border-radius: 40px;
  overflow: hidden;
}

.invert-color {
  filter: invert(1);
}

.exit-box{
    width: 175px;
    position: absolute;
    top: -27px;
    height: 75px;
    background: black;
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-weight: bold;
    background:#00b9de;
}

.tideButton, .closeButton, .functionButton{
  width: 3rem;
  height: 3rem;
  display: flex;
  border-radius: 100%;
  border: var(--nav-background-color) 5px solid;
  outline: white 5px solid;
  justify-content: center;
  align-items: center;
}

.tideButton > i, .functionButton > i{
  font-size:1.5rem;
  font-weight:bold;
}

.tideButton > img, .functionButton > img{
  pointer-events: none;
}

.selected-tide-button{
  border: 3px white solid;
  outline: var(--nav-background-color) 5px solid;
  background: var(--nav-background-color);
}

.selected-tide-button > img{
  filter: invert(1);
}

#myBtn > i{
  font-size: 2em;
  font-weight: bold;
}

.tideButton i{
  color: var(--nav-background-color);
}

.flex-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-flow: row;
  gap: 1.75em;
}

  .tide{
  display:flex;
  flex-flow:column;
  justify-content:center;
  align-items:center;
  gap:1em;
}

.tide-section{
  display:flex;
  flex-flow:column;
  align-items:center;
}

.tide-date-button{
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.tide-date-container{
  display: flex;
  gap: .5rem;
  justify-content: center;
  align-items: center;
}

.tide-section label{
  font-size:1.75em;
  text-decoration:underline;
  padding:0;
  margin:0;
  color:white;
}

.tide-section text{
  font-size:1.5em;
  color:white;
}

.pop-out-exit-row{
  display:flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding-inline: .5rem;
}

#entryModal{
      display:none;
      position:fixed;
      justify-content:center;
      align-items:center;
      top:0%;
      left:0%;
      height:100%;
      width:100%;
      background-color:rgb(240,240,240,.8);
    }


.shrinkBox,.wrapBox{
    height: 100vh;
    width: 58%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    padding: 3em;
    background: white;
    border-radius: 10px;
}



.shrinkBox label{
  padding:0px;
  font-size:1.5em;
}

.shrinkDiv{
  display:flex;
  flex-flow:row;
  justify-content:space-around;
  align-items:center;
  text-align:center;
  align-content:center;
  gap:2em;
}

  .shrinkButton{
    background: orange;
    padding: 1em;
    border-radius: 10px;
    border: none;
    color: white;
  }

  #shrinkPartCheck{
    background: white;
    display: flex;
    margin: 2em;
    font-size: 1.5em;
    width: 300px;
    height: 80px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 5px red solid;
}

#shrinkParts{
  display:none;
}

#shrinkPartsUsed thead{
  background:black;
}

#shrinkPartsUsed tbody{
  background:white;
}

.partContainer > .shrinkDiv{
  justify-content:flex-start;
}

#shrink-table{
  border-collapse:collapse;
  border: 5px solid white;
}

#shrink-table th{
text-align: center;
}

.shrinkPartsBox{
      background: white;
    border-radius: 10px;
    height: 80vh;
    width: 60vw;
    display: flex;
    flex-direction: column;
    padding: 1em;
    overflow-y: scroll;
}

.shrinkPartsBox span{
  font-size:.5em;
}

.shrinkPartsBox input{
width:20%;
}

.shrinkPartsBox label{
  display:flex;
  align-items:center;
  gap:1em;
}

    .shrinkPartsButton,.partsButton{
    width: 100%;
    font-size: 1.5em;
    padding: 0.5em;
    border-radius: 50px;
    font-weight: bold;
    color: white;
    border:3px white solid;
    outline:3px green solid;
    margin:1em 0em;
  }

  .shrinkPartsButton{
background:green;
    border:3px white solid;
    outline:3px green solid;
  }

  .shrinkPartsBox h2{
  text-decoration:underline;
  font-weight:bold;
}

.shrinkDiv span{
  margin-right:30px;
}

.shrinkBox input[type="checkbox"]{
  width:30px;
  height:30px;
}


  .modalContainer{
    display:none;
    position:fixed;
    top:0;
    left:0;
    justify-content:center;
    align-items:center;
    background: rgba(0,0,0,0.3);
    width: 100vw;
    height: 100vh;
    z-index:30;
  }

  .calc-body{
  position:fixed;
  top:0%;
  left:0%;
  margin:auto;
  display:none;
  width:100vw;
  height:100vh;
  justify-content:center;
  align-items:center;
  z-index:999;
  background-color: rgba(1,1,1,.5);
}

#partSelectModal{
  z-index: 1205;
}  

      .modal1 {
      display: none;
      justify-content:center;
      align-items:center;
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }

@media print{
  .noPrint{
    display:none !important;
  }
}

.printButton{
  padding: 1.5em;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
}

/* Modal CSS with -mooring */
.modal-mooring {
  display: none;
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-flex{
  display:flex;
  flex-flow:column;
}

.modal-content-mooring {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
    display: flex;
    flex-direction: column;
    border: 4px black solid;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
}

#mooringButtons-mooring{
  display:flex;
  flex-flow: column;
  gap: 1em
}

#mooringButtons-mooring button{
  padding: 0.5em 1.25em;
    border-radius: 10px;
    font-size: 1.5em;
    font-weight: bold;
    background: navy;
    color: white;
    border: 4px solid white;
    outline: 4px solid navy;
}

.close-mooring {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.page-body{
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
}

#open-work{
  display:none;
}

#daily-log-div{
  display:none;
}

.close-mooring:hover,
.close-mooring:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

button {
  margin: 5px;
}

/* ============================================================
   ESTIMATE DOCUMENT — branded, printable, two-page (8.5x11 = 816x1056
   CSS px, prints 1:1). See design_handoff_estimates_mooring_pesticide.
   Screen: shown as a centered overlay preview. Print: @media print
   strips the app chrome and lets the two .estDoc-page divs paginate.
   ============================================================ */

.estimateContainer {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(12,44,73,.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 0 80px;
}
.estimateContainer.hidden { display: none; }

.estimatePDF {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.estDoc-toolbar {
  display: flex;
  gap: 10px;
}
.estDoc-toolbar button {
  padding: 10px 18px;
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  border-radius: var(--radius-control);
  cursor: pointer;
  border: none;
}
#estDocPrintButton { color: #fff; background: var(--signal-blue); }
#estDocCloseButton { color: var(--harbor-navy); background: #fff; border: 1.5px solid var(--card-border) !important; }
#invDocPrintButton { color: #fff; background: var(--signal-blue); }
#invDocCloseButton { color: var(--harbor-navy); background: #fff; border: 1.5px solid var(--card-border) !important; }

.invoice-print-row-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--card-border);
  background: #fff;
  cursor: pointer;
}
.invoice-print-row-button:hover { background: #F4F7FA; }
.invoice-print-row-button img { opacity: .7; }

.estDoc-page,
.invDoc-page {
  width: 816px;
  min-height: 1056px;
  background: #fff;
  box-shadow: var(--shadow-frame);
  padding: 44px 48px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
}

/* Isolate the printed estimate/invoice from the app's global table styles */
.estDoc-page thead,
.invDoc-page thead {
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
}
.estDoc-page th,
.estDoc-page td,
.invDoc-page th,
.invDoc-page td {
  border: none;
  background: none;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  text-align: left;
  white-space: normal;
  width: auto;
  padding: 0;
}
/* Re-assert right alignment for numeric cells & headers
   (the reset above outranks bare .estDoc-num) */
.estDoc-page th.estDoc-num,
.estDoc-page td.estDoc-num,
.invDoc-page th.estDoc-num,
.invDoc-page td.estDoc-num { text-align: right; }

.estDoc-hide-vendor .estDoc-parts-table th:nth-child(3),
.estDoc-hide-vendor .estDoc-parts-table td:nth-child(3) { display: none; }

.estDoc-letterhead {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--harbor-navy);
}
.estDoc-logo { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.estDoc-title-block { margin-left: auto; text-align: right; }
.estDoc-title { font: 800 20px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); letter-spacing: .02em; }
.estDoc-number { font: 600 12px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--signal-blue); margin-top: 2px; }

.estDoc-meta-row {
  display: flex;
  gap: 24px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--card-border);
}
.estDoc-meta-col { flex: 1; }
.estDoc-meta-col-wide { flex: 1.2; }
.estDoc-meta-label { font: 700 9px var(--font-body, 'Public Sans', system-ui, sans-serif); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint-alt); }
.estDoc-meta-name { font: 700 13px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-body); margin-top: 4px; }
.estDoc-meta-sub { font: 400 11px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-muted); line-height: 1.5; }
.estDoc-meta-dates { display: flex; gap: 10px; text-align: right; }
.estDoc-meta-dates-labels div { font: 400 11px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-muted); line-height: 1.7; }
.estDoc-meta-dates-values div { font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-body); line-height: 1.7; }

.estDoc-ops-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 11.5px; }
.estDoc-ops-table th {
  text-align: left;
  font: 700 9px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
  padding: 0 0 7px;
  border-bottom: 1px solid var(--card-border);
}
.estDoc-ops-table td {
  padding: 9px 0;
  border-bottom: 1px solid #EDF1F5;
  vertical-align: top;
}
.estDoc-num { text-align: right; }
.estDoc-op-name { font-weight: 700; color: var(--text-body); }
.estDoc-op-desc { font-weight: 400; color: var(--text-muted); font-size: 10.5px; margin-top: 2px; }
.estDoc-ops-table td.estDoc-num { font-family: var(--font-mono, 'Spline Sans Mono', monospace); font-weight: 600; white-space: nowrap; }

.estDoc-parts-rollup { font: 500 11px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); font-style: italic; margin-top: 8px; }

.estDoc-totals-stack { align-self: flex-end; width: 260px; margin-top: 18px; }
.estDoc-totals-row {
  display: flex;
  justify-content: space-between;
  font: 500 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  padding: 5px 0;
}
.estDoc-totals-row span:last-child { font-family: var(--font-mono, 'Spline Sans Mono', monospace); font-weight: 600; color: var(--text-body); }
.estDoc-totals-total { border-top: 1.5px solid var(--harbor-navy); margin-top: 4px; padding-top: 8px; font-weight: 700; color: var(--harbor-navy); }
.estDoc-totals-total span:last-child { color: var(--harbor-navy); font-size: 14px; }
.estDoc-totals-deposit span { color: #0E7C73 !important; font-weight: 700 !important; }

.estDoc-terms-block { margin-top: auto; padding-top: 24px; }
.estDoc-terms-label { font: 700 9px var(--font-body, 'Public Sans', system-ui, sans-serif); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint-alt); margin-bottom: 5px; }
.estDoc-terms-text { font: 400 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-muted); line-height: 1.6; white-space: pre-line; }
.estDoc-signature-row { display: flex; gap: 40px; margin-top: 34px; }
.estDoc-signature-line, .estDoc-date-line {
  border-top: 1px solid var(--text-faint-alt);
  padding-top: 5px;
  font: 400 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint-alt);
}
.estDoc-signature-line { flex: 2; }
.estDoc-date-line { flex: 1; }

.estDoc-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--card-border);
  font: 400 9.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint-alt);
}

.estDoc-page-break { page-break-before: always; }

.estDoc-letterhead-compact { padding-bottom: 12px; }
.estDoc-logo-sm { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.estDoc-page2-title { font: 800 15px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); }
.estDoc-page2-sub { font: 500 11px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--signal-blue); margin-top: 2px; }

.estDoc-parts-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 11.5px; }
.estDoc-parts-table th {
  text-align: left;
  font: 700 9px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
  padding: 0 8px 7px 0;
  border-bottom: 1px solid var(--card-border);
}
.estDoc-parts-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid #EDF1F5; }
.estDoc-parts-table td.estDoc-num { text-align: right; font-family: var(--font-mono, 'Spline Sans Mono', monospace); font-weight: 600; white-space: nowrap; }
.estDoc-parts-table td:first-child { font-family: var(--font-mono, 'Spline Sans Mono', monospace); font-weight: 600; color: var(--signal-blue); }
.estDoc-parts-table td:first-child.manual { color: var(--amber-text); }

.estDoc-parts-subtotal-row {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  font: 700 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  padding: 10px 0;
}
.estDoc-parts-subtotal-row span:last-child { font-family: var(--font-mono, 'Spline Sans Mono', monospace); }

.estDoc-page2-hint { font: 400 10px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); line-height: 1.5; margin-top: 10px; }

/* ============================================================
   INVOICE DOCUMENT — shares .estDoc-page geometry/type rules;
   only the elements that differ from the estimate get their own
   .invDoc- classes. See INVOICE-document-handoff.md.
   ============================================================ */
.invDoc-title-row { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
.invDoc-past-due-pill {
  font: 700 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #8A4B0F;
  background: #FCEEDC;
  border: 1px solid #EDD3AE;
  border-radius: var(--radius-pill, 999px);
  padding: 3px 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.invDoc-past-due-pill.hidden { display: none; }

.invDoc-estimate-ref {
  font: 500 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--signal-blue);
  margin-top: -6px;
  margin-bottom: 10px;
}
.invDoc-estimate-ref.hidden { display: none; }

.invDoc-line-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 11.5px; }
.invDoc-line-table th {
  text-align: left;
  font: 700 9px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
  padding: 0 0 7px;
  border-bottom: 1.5px solid var(--harbor-navy);
}
.invDoc-line-table td { padding: 9px 0; border-bottom: 1px solid #EDF1F5; vertical-align: top; }
.invDoc-line-table td.estDoc-num { font-family: var(--font-mono, 'Spline Sans Mono', monospace); font-weight: 600; white-space: nowrap; }
.invDoc-line-name { font: 600 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-body); }
.invDoc-line-sub { font: 400 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); margin-top: 2px; }

.invDoc-deposit-row.hidden { display: none; }
.invDoc-balance-due-row {
  display: flex;
  justify-content: space-between;
  border-top: 1.5px solid var(--harbor-navy);
  margin-top: 4px;
  padding-top: 8px;
  font: 800 12.5px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
}
.invDoc-balance-due-row span:last-child { font: 800 13.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); }
.invDoc-payment-due-by { font: 500 11px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-muted); margin-top: 8px; text-align: right; }
.invDoc-terms-block { margin-top: 22px; }

@media print {
  body * { visibility: hidden; }
  .estimateContainer, .estimateContainer * { visibility: visible; }
  .estimateContainer {
    position: absolute;
    inset: auto;
    top: 0; left: 0;
    background: none;
    padding: 0;
    display: block !important;
    overflow: visible;
  }
  .estimateContainer .no-print { display: none !important; }
  .estimatePDF { gap: 0; }
  .estDoc-page,
  .invDoc-page {
    box-shadow: none;
    width: auto;
    min-height: 100vh;
  }
  @page { size: letter; margin: 0; }
}

/* Container for the Select Table button and the modal */
#selectTableContainer {
  position: relative; /* This enables absolute positioning for children */
}

/* Modal Styling */
.modalTable {
  display: none; /* Hidden by default */
  position: absolute; /* Position relative to selectTableContainer */
  left: 100%; /* Position to the right of the Select Table button */
  top: 0;
  z-index: 1; /* Sit on top */
  /* Add additional styling as needed */
}

.selectButton{
  border-radius: 10px;
  font-weight: bold;
  width:100%;
  padding: .75em;
  margin: .25em;
  background: black;
  color:white;
  font-size: 1.25em;
}

.selectedButton{
  background:green !important;
}

.filter-button.selected{
  background:blue;
  color:white;
  border:2px white solid;
  outline: 2px blue solid;
}

.buttonBox{
  margin: 0em 2em;
  width: 300px;
  background: white;
  padding: 1em;
  border: black 4px solid;
  border-radius: 10px;
  position: absolute;
  top: -100px;
}

#hold, #estimates{
  display:none;
}

#tableName{
  font-weight:bold;
  font-size: 2em;
}

nav {
  background: var(--nav-background-color);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 5;
}

.navbar-brand {
  color: white;
  font-weight: bold;
  font-size: 4em;
  font-family: 'Quicksand',sans-serif;
}

.topnav a:hover {
  background-color: #c8e6c9;
  color: black;
  transform: scale(1); /* Use transform to scale instead of changing width/height */
}

.navButton {
background-color: #006DD8;
flex-grow: 1; /* Allows button to grow and fill the container */
height: fit-content;
color: white;
box-sizing: border-box;
padding: 0 1em;
box-shadow: 0px 9px 16px -6px rgba(0, 0, 0, 0.75);
}

.topnav a {
color: white;
display: flex;
justify-content: center;
align-items: center;
padding: 0.5em;
width: auto;
height: auto;
position: relative;
right: 0%;
user-select: none;
cursor: pointer;
background-color: #3274bf;
}

.navButton, .topnav a {
  min-width: 0;
  margin:0;
  width:100%;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: .25rem;
  box-sizing: border-box;
  background: var(--nav-background-color);
}

#myLinks {
  display: none;
  flex-wrap: wrap;
  justify-content: center; /* Center items horizontally */
  gap: 1em; /* Space between buttons */
  padding: 1em;
  background: white;
  position: absolute; /* Adjust if necessary */
  z-index: 10;
  width: 100%; /* Set to full width */
  box-sizing: border-box; /* Include padding and border in the width */
}

.linkButton {
  flex: 1 1 auto; /* Allow buttons to grow and shrink */
  min-width: 150px; /* Minimum width for each button */
  text-align: center; /* Center text inside buttons */
  padding: 0.5em 1em; /* Padding for the buttons */
  border-radius: 5px; /* Rounded corners */
  /* Add more styling as needed */
}

/* @keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

.box:hover {
  --border-size: 3px;
  --border-angle: 0turn;

  background-image: conic-gradient(
      from var(--border-angle),
      #213,
      #112 50%,
      #213
    ),
    conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
  background-size: calc(100% - (var(--border-size) * 2))
      calc(100% - (var(--border-size) * 2)),
    cover;
  background-position: center center;
  background-repeat: no-repeat;

  animation: bg-spin 3s linear infinite;

}

.box {
  animation-play-state: paused;
} */

.box {
  --c: #120075; /* the border color */
  --b: 10px;    /* the border thickness */
  --g: 5px;     /* the gap on hover */
  
  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0  / 200% var(--_i, var(--b))  no-repeat,
    conic-gradient(            at bottom var(--b) left  var(--b), var(--_g))
     0   var(--_i, 200%) / var(--_i, var(--b)) 200%  no-repeat;
  transition: .1s, background-position .1s .1s;
  cursor: pointer;
  border-radius: 10px;
}

.box:hover {
  --_i: 100%;
  transition: .1s, background-size .1s .1s;
}



@keyframes slideDown {
  from { height: 0; opacity: 0; }
  to { height: auto; opacity: 1; }
}

#myLinks.open {
  animation: slideDown 0.3s ease-in-out forwards;
}

@media screen and (max-width: 600px) {
  .linkButton {
    min-width: 100px; /* Smaller buttons on mobile devices */
  }
  /* Adjustments for dropdown menu if implemented */
}


/* Style the dropdown button */
.dropbtn {
  background-color: #3274bf;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    padding: 1em;
    font-size: 1.5em;
}

/* Container for dropdown links */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    text-decoration: none;
    display: block;
    font-size: 1.5em;
    width: 300px;
    margin: 0.25em;
    padding: 0.5em;
    color: white;
    font-weight: bold;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #2160a0;
}

@keyframes flashColor {
  0%, 100% { background-color: initial; }
  50% { background-color: #a1a1a1;}
}

.flash-animation {
  animation: flashColor 2s infinite; 
}

#part-order-table{
  display:none;
}

#part-order-table th{
  background:black;
}

.part-modal-content{
  display:flex;
  flex-flow: column;
  justify-content:center;
  width: 95%;
  height: 95%;
  background:white;
}

.part-table{
  width:100%;
  height: 100%;
}

#updatingOrder{
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
  width:500px;
  height:200px;
  position:fixed;
  top:25%;
  left:30%;
  background:white;
  border: 15px red solid;
  border-radius:10px;
}

.flex-small{
  display:flex;
  flex-flow:column;
  gap:.5em;
}

#addPart fieldset{
  border: 2px solid black; 
  margin:1em 0em;
}

.check-container{
  display: flex;
  width: 50%;
  justify-content: space-around;
  align-items: center;
  flex-flow: column;
}

#addPart input, #opCodeForm input{
  font-size: 1.15em;
  border: none;
  border-radius: 10px;
  width: 100%;
}

#addPart label{
  margin:0;
  color:white;
}

#addPart input[type=checkbox]{
  padding:0;
  width:40px;
}

.checkbox-area{
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 2px black solid;
  margin: 1em;
  padding: 1em;
  border-radius: 20px;
  background: linear-gradient(to right, black 70%, white 30%);
  color:white;
}

.checkbox-area input[type=checkbox]{
  color:black;
}

#partButton{
    width: 40%;
    font-size: 1.25em;
    border-radius: 10px;
    border: 2px white solid;
    outline: 2px black solid;
    background: black;
    color: white;
    padding: 0.25em;
}

.topnav {
    position: sticky;
    top: 60px;
    z-index: 9;
    background-color: #3274bf; 
}

#selectOption #entryButton{
    height: 100px;
    background: #105200;
    color: white;
    font-size: 2em;
    font-weight: bold;
    border: 4px white solid;
    outline: 4px #105200 solid;
}

#addPart input, #addPart select, #opCodeForm select, #opCodeForm input{
  border:none;
  width:100%;
}

.part-table tr {
  max-height: 100px;
  overflow: hidden;
}

.part-table td, .part-table th {
  vertical-align: middle; /* Ensures content in cells is centered vertically */
}

.part-table {
  max-height: 500px; /* Adjust this value as needed */
  overflow-y: auto; /* Enables vertical scrolling */
  display: block; /* Change the table's display property */
}

.part-table tbody, .part-table thead {
  display: table; /* Ensures tbody and thead behave like table */
  width: 100%; /* Occupies full width of the table */
  table-layout: fixed; /* Optional: improves rendering of the table */
}

.calc-row{
  display:flex;
  flex-flow:column;
  justify-content:flex-start;
  width:90%;
}


.calc-body{
  position:fixed;
  top:0%;
  left:0%;
  margin:auto;
  display:flex;
  width:100vw;
  height:100vh;
  justify-content:center;
  align-items:center;
  z-index:999;
  background-color: rgba(1,1,1,.5);
}

#calcBody{
  display:none;
}

.calc h1{
  color:white;
}

.calc{
  margin:20px 0px;
  padding:2em;
  background-color:#000051;
  border:4px #90caf9 solid;
  display:flex;
  flex-flow:column;
  justify-content:center;
  align-items:center;
  gap:1em;
  color:#90caf9;
  width:40%;
  height:100%;
}

.calc input{
  border:#000051 4px solid;
  padding:.5em;
  font-size:1.2em;
  font-weight:bold;
  border-radius:10px;
  outline:#90caf9 4px solid;
  width:100%;
  text-align:center;
}

.button-container{
  width: 100px;
  margin:0;

}

.calcEnter{
  font-size:2em;
  border:#000051 4px solid;
  border-radius:10px;
  background-color:#005b9f;
  color:white;
  font-weight:bold;
  width:100%;
  margin:0px 20px;
  padding:10px;
}

.calcExit{
  width:50px;
  height:50px;
  border-radius:50px;
  border:none;
  background-color:red;
  color:white;
}

.small-legend{
  font-size: 1.25em;
  color:red;
}

.small-legend p{
  padding:0;
}

#operations-table {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    /* Rows carry their own border-bottom divider (buildOpTableRow's compact
       grid rows) — a large flex gap on top of that reads as a stack of
       separated cards again, which is exactly what this redesign removed. */
    gap: 0;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: #fff;
    overflow-x: auto;
}

.tech-select select{
    font-size: 1rem;
    width: max-content;
    padding: 0.25rem 0.5rem;
    text-align: center;
    border: 2px black solid;
    font-weight: bold;
}

#operations-table tr{
  background:white;
}

#operations-table tr:nth-child(even){
  background:#b9c3c9;
}

.operation-div{
  border:none !important;
  background:white;
  padding: 1em 0em !important;
  transition: padding 500ms ease-in-out;
}

 .operation-div th{
  background:navy !important;
 }

 thead, .operations-thead{
  border:5.5px solid black; 
}

.haul-item{
  display:none;
}

.job-item, .daily-item{
  display: flex;
  justify-content: flex-start;
  margin-block: 1rem;
  border-radius: var(--radius-card);
  align-items: flex-start;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--card-border);
  background: #fff;
  color: var(--text-body);
  flex-flow: row;
  overflow: hidden;
  transition: box-shadow 150ms ease;
}

.job-item:hover, .daily-item:hover {
  box-shadow: 0 10px 26px rgba(16,42,67,.12);
}

.job-div-main{
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
}

@media screen and (max-width: 600px){

  .job-div-main{
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 5px;
  }
  
}

.job-item, .daily-item{
  margin: 10px;
}

#jobList .job-item, #schedule-list .job-item, #closedJobList .job-item {
  justify-content: space-between;
  align-items: center;
}

#jobList .tech-select, #schedule-list .tech-select, #closedJobList .tech-select {
  display: flex;
  padding: .5rem 0rem;
}


#jobList .customer-boat-info, #schedule-list .customer-boat-info, #closedJobList .customer-boat-info {
  padding: .25rem;
    flex: 0 20%;
}

#jobList .category-work-order-info, #schedule-list .category-work-order-info, #closedJobList .category-work-order-info {
  padding: .25rem;
    flex: 0 20%;
}

#jobList .date-info, #schedule-list .date-info, #closedJobList .date-info {
  padding: .25rem;
    flex: 0 20%;
}

#jobList .status-priority-info, #schedule-list .status-priority-info, #closedJobList .status-priority-info {
  padding: .25rem;
    flex: 0 20%;
}

#jobList .notes-info, #schedule-list .notes-info, #closedJobList .notes-info {
  padding: .25rem;
    flex: 0 20%;
}

#jobList .description-info, #schedule-list .description-info, #closedJobList .description-info {
  flex: 0 20%;
}

@media screen and (max-width: 600px){

  #jobList .description-info, #schedule-list .description-info, #closedJobList .description-info {
    flex: 0 80%;
    margin:0;
  }

  #jobList .tech-select p::before, #schedule-list .tech-select p::before, #closedJobList .tech-select p::before {
    content: "Tech: ";
  }

  #jobList select, #schedule-list select, #closedJobList select {
    height: fit-content;
    padding:.15rem;
  }

}


#jobList .date-info, #schedule-list .date-info, #closedJobList .date-info {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

#jobList .scheduled-date-info, #schedule-list .scheduled-date-info, #closedJobList .scheduled-date-info {
  display:flex;
  gap:.25rem;
}

@media screen and (max-width: 600px){
  #jobList .scheduled-date-info, #schedule-list .scheduled-date-info, #closedJobList .scheduled-date-info {
    display: flex;
    align-items: center;
    font-size:.75rem;
  }

  #jobList .notes-info, #schedule-list .notes-info, #closedJobList .notes-info {
    padding: .25rem;
  }

  #jobList .tech-select, #schedule-list .tech-select, #closedJobList .tech-select {
    font-size: .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  
}

#jobList .scheduled-date-info input[type="date"], #schedule-list .scheduled-date-info input[type="date"], #closedJobList .scheduled-date-info input[type="date"] {
  border:none;
  width: 50%;
  font-size: 1rem;
  border-bottom: 1px solid black;
}

#jobList .category-info, #schedule-list .category-info, #closedJobList .category-info {
  font-weight: bold;
}

#jobList .notes-info, #schedule-list .notes-info, #closedJobList .notes-info {
  flex: 0;
  padding: 1rem
}

#schedule-list{
  width: 100%;
}

.info-div-tech{
  padding: 10px;
}

.job-item:hover{
  max-height:fit-content;
}

.mobile-operation-view{
  display:flex;
  justify-content: space-between;
  padding: .5rem;
}

.mobile-op-info{
  font-weight:bold;
  font-size: .85rem;
}

.mobile-customer-boat-info{
  font-size: .85rem;
  margin: .25rem 0rem;
}

.double-modal-small{
  flex: 1;
  margin: 1rem;
  box-sizing: border-box;
  overflow: auto;
}

.double-modal-large{
  background: white;
  flex: 1 1 80%;
  margin: 1rem;
  overflow: hidden;
}

.customer-boat-info, .description-info, .status-hours-info {
  margin-right: 20px;
}

.customer-boat-info{
  margin: .5rem 0rem;
  padding: .25rem;
}

/* Ensure that the description doesn't get too wide */
.description-info {
  max-width: 100%;
  margin: auto;
}

.job-section{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

#job-view, #schedule-view{
  width:100%;
  display:none;
}

#schedule-view{
  justify-content: flex-start;
  align-items: center;
  flex-flow:column;

}

#workList h1{
  display:flex;
  justify-content:center;
  padding-top: 1rem;
}

#jobList, #schedule-list, #closedJobList{
  overflow-y: auto;
  height: calc(100vh - 230px);
  padding: 1em;
}

#workList{
  display:none;
   padding: 1em;
   overflow-y: scroll;
   height: calc(100vh - 320px);
   flex: 1 30%;
}

.tab-container {
  display: flex;
  justify-content:center;
}

.tab-container button{
    margin:0px;
    width: 100%;
}

.op-row-div{
  flex: 0 0 30%;
  padding: .25rem;
}

.active-tab {
  background-color: var(--nav-background-color);
  color: white;
  border-bottom: none;
  border-right: 2px solid black;
  border: 2px solid black;
  font-weight: bold;
  position: relative;
}

.box-left{
box-shadow: 8px 4px 10px rgba(0,0,0,0.7);
border-radius: 10px 10px 0px 0px;
}

.box-right{
  box-shadow: -8px 4px 10px rgba(0,0,0,0.7);
  border-radius: 10px 10px 0px 0px;
}

#jobList fieldset, #workList fieldset, #schedule-list fieldset, #closedJobList fieldset{
  border-radius: 10px;
  border: 2px solid var(--nav-background-color);
  margin-bottom: 3em;
  min-height: 70px;
}

#tech-list{
  width: 100%;
  overflow-y:auto;
}

.modal-content-map {
  background-color: #fefefe;
  padding: 20px;
  border: 10px solid #888;
  width:100%;
  height: 100%;
  overflow: auto; /* Allows scrolling within the modal content if needed */
}

.mapArea {
  display: flex;
  justify-content: space-around;
  align-items: stretch; /* This will make them take up equal height */
  height: 100%; /* Use available height */
}

.map {
  flex: 1; /* Allows each map to grow as needed, adjust as necessary */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px; /* Optional, for some spacing */
}

.remove-job-button{
  width:40px;
  height: 40px;
  border:2px white solid;
  outline: 2px red solid;
  background: red;
  color:white;
  border-radius: 100%;
}

.move-job-button{
   width:40px;
  height: 40px;
  border:2px white solid;
  outline: 2px var(--nav-background-color) solid;
  background: var(--nav-background-color);
  color:white;
  border-radius: 100%;
}

.map-button{
  background: var(--nav-background-color);
  color: white;
  border: 2px solid white;
  outline: 2px solid var(--nav-background-color);
  font-size: 1.25em;
  border-radius: 10px;
  padding: 0.5em 1em;
  width: 100%;
  font-weight: bold;
}

.add-button-placeholder{
  display: none;
}

.filterRow{
  display:none;
  justify-content: space-around;
  align-items: center;
  gap: .5em;
  margin: 1em;
  flex-wrap: wrap;
}

.filterRow > button{
  font-size: 1em;
  border: 2px solid white;
  outline: 2px solid black;
  font-weight: bold;
  border-radius: 10px;
  padding: .5em;
  background: var(--nav-background-color);
  color: white;
  width: 200px;
}

.tech-field{
  display:none;
  justify-content: space-evenly;
  align-items: center;
  margin: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}

.tech-div{
  padding: 0.25em 0.5em;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  border: 2px black solid;
  border-radius: 5px;
  min-width: 80px;
}

#login-form input{
  font-size: 1.25em;
  padding: 0.5em;
  border: 1px solid black;
  border-radius: 5px;
}

#login-form label{
  font-size: 2em;
  font-weight: bold;
}

#login-form button{
  font-size: 2em;
  font-weight: bold;
  padding: 0.5em 1em;
  color: white;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5em;
  border-radius: 10px;
  border: 4px black solid;
}

#log-in-button{
  background: var(--app-deep-blue);
}

.table-collection{
  display: flex;
  flex-flow: row;
  gap:1em;
  justify-content: space-around;
  align-items: center;
}

#log-in-google{
  background: white;
  color: black !important;
  font-size: 1em !important;
}

.show-mobile{
  display: none;
}

.mobile-button-container{
  flex-flow: column;
}

.icon-red {
  filter: brightness(0) saturate(100%) invert(13%) sepia(95%) saturate(7477%) hue-rotate(356deg) brightness(99%) contrast(101%);
}

.icon-brand{
  filter: invert(9%) sepia(86%) saturate(7443%) hue-rotate(269deg) brightness(33%) contrast(138%);
}

.icon-white{
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

@media screen and (max-width: 600px) {
 
  .navbar {
    padding: 10px;
    display: flex;
    justify-content: space-between;
  }

  #currentUserName{
    display: none;
  }

  #current-page{
    font-size:2rem;
  }

  #email-customer, #email-subject{
    width: 100% !important;
  }

  .menu-button{
    display: block !important;
  }

  .table-responsive {
    overflow-x: auto;
  }

    #myBtn {
      display: none;
    }

    .navbar-brand{
      display:none;
    }
    
    .tech-select select{
      padding: 0rem;
      font-size: .75rem;
    }
   
    .add-button-placeholder {
      display: block;
    }

    .entry-header h3{
      font-size: 1rem;
    }

    .add-op-button{
      width: 70%;
      padding: .5em;
      font-size: 1em;
      flex:1;
    }

    .table{
      height: auto;
    }

    .table td{
      padding: 0;
      font-size: .75em;
  }

  .hide-mobile{
    display:none !important;
  }

  .show-mobile{
    display: flex;
  }

  .table th, thead th, table th, .table thead th{
        padding: 5px;
        font-size: 12px;
  }

  .tableButtons {
    padding: 10px 20px;
    font-size: 20px;
  }

  .buttonBox {
    margin: 0em 0em;
    width: 300px;
    background: white;
    padding: 1em;
    border: black 4px solid;
    border-radius: 10px;
    position: relative;
    top: 77px;
    left: -235px;

  }  

  .op-data-row{
    font-size: .75rem !important;
    font-weight: bold !important;
    gap: 0em !important;
    border-radius:10px;
  }

  .menu-button{
    margin: 0;
  }

}


#weeks-container thead{
  background: black;
}

#weeks-container td{
  padding:0;
}

.weeks{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

.main-data{
  padding: 2px;
  height: 80px;
}

.event-item{
  padding: 1em 0em;
  white-space: break-spaces;
}

#searchFieldTechs{
  display:none;
}

#opener{
  width: 80px;
  height: 80px;
}

#no-role{
  display:none;
}

.flex-button{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin: 3em;
}

.boat-popup{
  display: none;
  width: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 255, 255);
  z-index: 1000;
  height: 50%;
  justify-content: flex-start;
  flex-flow: column;
  border: 10px solid black;
  border-radius: 20px;
}

.boat-popup ul{
  list-style: none;
  padding: 1em;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.boat-popup li{
  line-height: 1.5;
  cursor: pointer;
  font-size: 2em;
  padding: 0em 0em;
  border-radius: 10px;
  text-align: center;
  color: white;
  background: black;
  border: 2px white solid;
  outline: 2px black solid;
  margin: 0.5em 0em;
  width: 100%;
}

#customer-search{
  width: 100%;
  padding: .5em;
  font-size: 1em;
  border-radius: 10px;
  margin: 1em 0em;
}

.page-select{
  height: 100%;
  display: none;
  align-items: center;
  flex-flow: column;
  padding: 1rem .5rem;
  border-right: 4px solid var(--nav-background-color);
  gap: 1rem;
  min-width: fit-content;
}

@media screen and (max-width: 600px) {
  .page-select{
    overflow-y: auto;
    overflow-x:hidden;
  }
  
}

.page-buttons, .function-buttons{
  display: flex;
  flex-flow: column;
}

.tech-header{
  text-align: center;
  position: sticky;
  color: var(--nav-background-color);
  top: 0;
  align-items: center;
  font-weight: 100;
  margin: 0px;
  border-radius: 10px 10px 0px 0px;
}

.date-header{
  font-weight: 100;
  margin: 0px 4px;
}

.schedule-description{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -moz-line-clamp: 1;
  -ms-line-clamp: 1;
  line-clamp: 1;
  white-space: normal;
}

.schedule-customer{
  color: gray;
}

.schedule-date-info{
  border: none;
  background: inherit;
  border-bottom: 1px solid;
}

@media screen and (max-width: 600px) {

  .schedule-date-info{
    width: 55% !important;
    font-size: .85rem !important;
  }
  
}

.day-column, .event-container {
  pointer-events: auto;
}

.customer-description{
  display:flex;
  flex-flow: column;
  gap:.25rem;
}

.tech-stats .tech-header{
  flex: 0 15%;
}

.main-page{
  display: flex;
  flex-flow: column;
  height: 100vh;
  overflow: hidden;
}

#currentUserName{
  font-size: 1.25rem;
  color:white;
  font-weight: bold;
  margin: 1rem;
}

#user-data{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 1 1 20%;
}

.spacer-box{
  flex: 1 1 25%;
}

.current-page-div{
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-section{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid var(--card-border);
  gap: 1rem;
  padding: .9rem 1.2rem;
  margin: 0;
}

@media screen and (max-width: 600px) {

.search-section{
  flex-flow: column;
}

}

#search-spacer{
  width: 80px;
  height: 80px;
}

.wo-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #fff;
  border-bottom: 1px solid var(--card-border);
  padding: 10px 24px 12px;
}

.wo-filter-chip {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.wo-filter-chip:hover {
  border-color: var(--seafoam);
}

.wo-filter-chip.active {
  background: var(--seafoam);
  border-color: var(--seafoam);
  color: #fff;
}

@media screen and (max-width: 600px) {
  .wo-quick-filters {
    padding: 8px 12px 10px;
  }
}

/* Which top-level view (Work Order/Operations/etc.) is showing — same pill rhythm as
   .wo-quick-filters right below it, but active = navy instead of seafoam so the two stacked
   rows (view, then status filter) read as a pair without looking like the same control. */
.wo-view-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: #fff;
  border-bottom: 1px solid var(--card-border);
  padding: 10px 24px;
}

.wo-view-tab {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.wo-view-tab:hover {
  border-color: var(--harbor-navy);
}

.wo-view-tab.active {
  background: var(--harbor-navy);
  border-color: var(--harbor-navy);
  color: #fff;
}

.wo-view-tab-ghost {
  margin-left: auto;
  font: 600 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted, #62748A);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 120ms ease;
}

.wo-view-tab-ghost:hover {
  text-decoration-color: currentColor;
}

@media screen and (max-width: 600px) {
  .wo-view-tabs {
    padding: 8px 12px;
  }
}

.operation-container-row{
  width: 85%;
  padding: 1.25rem;
  border-radius: var(--radius-frame);
  border: 1px solid var(--card-border);
  background: #fff;
  box-shadow: var(--shadow-frame);
}

.operation-container{
  display: flex;
  align-items: flex-start;
  flex-flow: row;
  gap: 20px;
  width: 100%;
}

.op-ops-column {
  flex: 1;
  min-width: 0;
}

/* Collapsed by default — just the toggle chip, sized to its own content so
   the operations column gets the rest of the row's width. Expanding reveals
   a fixed-width card instead of flexing/stretching to match the table's
   height (the old always-open flex:1 column did both, at the operations
   table's expense). */
.op-sidebar-column {
  flex: 0 0 auto;
  min-width: 0;
}

.op-sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #D8E0E8;
  border-radius: 9px; /* a button, not a status pill */
  font: 600 12.5px var(--font-body);
  color: var(--harbor-navy);
  cursor: pointer;
  white-space: nowrap;
}

.op-sidebar-toggle:hover {
  border-color: var(--seafoam);
  background: #F4FAF9;
}

/* Open: the toggle becomes the panel's header. */
.op-sidebar-column.op-sidebar-open .op-sidebar-toggle {
  width: 100%;
  background: var(--harbor-navy);
  border-color: var(--harbor-navy);
  color: #fff;
  border-radius: 9px 9px 0 0;
}

.op-sidebar-toggle-icon {
  display: inline-block;
  font-size: 9px;
  margin-left: auto;
  transition: transform .15s ease;
}

.op-sidebar-column.op-sidebar-open .op-sidebar-toggle-icon {
  transform: rotate(90deg);
}

.op-sidebar-content {
  display: none;
  width: 300px;
  max-width: 100%;
  margin-top: 0; /* joins the header, no gap */
  background: #fff;
  border: 1px solid var(--card-border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 18px 18px 20px;
}

.op-sidebar-column.op-sidebar-open .op-sidebar-content {
  display: block;
}

@media screen and (max-width: 900px) {
  .operation-container {
    flex-flow: column;
  }
}

.op-sidebar-section-label {
  font: 700 10px var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.op-sidebar-name {
  font: 700 15px var(--font-display);
  color: var(--harbor-navy);
}

.op-sidebar-phone {
  font: 500 12.5px var(--font-mono);
  color: var(--seafoam);
  margin: 3px 0 12px;
}
.op-sidebar-phone:hover { text-decoration: underline; }

.op-sidebar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}

.op-sidebar-field-label {
  font: 500 11px var(--font-body);
  color: var(--text-faint);
}

.op-sidebar-field-value {
  font: 600 13px var(--font-body);
  color: var(--text-body);
  margin-top: 2px;
  line-height: 1.35;
}

.op-sidebar-divider {
  height: 1px;
  background: var(--card-border);
  margin: 16px 0;
}

.op-sidebar-dates {
  display: flex;
  gap: 20px;
}

.op-sidebar-date-value {
  font: 700 14px var(--font-mono);
  color: var(--harbor-navy);
}

.op-sidebar-tech .op-sidebar-field-value {
  margin-top: 2px;
}

/* Assigned-tech avatar chips, in place of the old comma-joined name string. */
.op-sidebar-tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.op-sidebar-tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F7F9FB;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 3px 9px 3px 3px;
  font: 600 12px var(--font-body);
  color: var(--harbor-navy);
}
.op-sidebar-tech-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font: 700 9px var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.op-data-row, .op-table-data-row{
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: .75rem;
  box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
  padding: .25rem
}

.op-table-data-row{
  gap:0rem;
  justify-content: space-between;
  padding: .5rem;
  border-radius: 5px;
}

/* ============================================================ */
/* Redesign: Work Order detail (the inline operations panel that
   expands below a clicked row in the main Work Orders table).
   Status now drives a left accent bar + pill instead of a full
   inline background-color swap — see statusToneSlug() in app.js. */
/* ============================================================ */

.op-table-data-row {
  position: relative;
  background: #fff;
  border: 1px solid var(--card-border);
  box-shadow: none;
  padding-left: 1rem;
}

.op-table-data-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 5px 0 0 5px;
}

.op-table-data-row.op-tone-blue::before  { background: var(--signal-blue); }
.op-table-data-row.op-tone-green::before { background: var(--green); }
.op-table-data-row.op-tone-navy::before  { background: var(--pill-hauled-fg); }
.op-table-data-row.op-tone-red::before   { background: var(--red); }
.op-table-data-row.op-tone-slate::before { background: #8A98A6; }

.op-current-status {
  display: inline-block;
  font: 600 11.5px var(--font-body);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  margin: 0;
}

.op-current-status.op-tone-blue  { background: var(--pill-in-progress-bg); color: var(--pill-in-progress-fg); }
.op-current-status.op-tone-green { background: var(--pill-ready-to-bill-bg); color: var(--pill-ready-to-bill-fg); }
.op-current-status.op-tone-navy  { background: var(--pill-hauled-bg); color: var(--pill-hauled-fg); }
.op-current-status.op-tone-red   { background: var(--pill-on-hold-bg); color: var(--pill-on-hold-fg); }
.op-current-status.op-tone-slate { background: var(--pill-scheduled-bg); color: var(--pill-scheduled-fg); }

.op-progress-header {
  padding: 14px 16px 16px;
}

.op-progress-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.op-progress-title {
  font: 700 16px var(--font-display);
  color: var(--harbor-navy);
}

.op-progress-detail {
  font: 500 13px var(--font-body);
  color: var(--text-muted);
}

.op-progress-bar {
  height: 7px;
  background: var(--card-border);
  border-radius: 99px;
  overflow: hidden;
}

.op-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--seafoam), var(--mist));
  border-radius: 99px;
}

.add-op-button, .customer-record-button, #balance-amount, .close-work-order-button, #edit-work-order-button {
  border: 1px solid var(--card-border-alt) !important;
  background: #fff !important;
  color: var(--harbor-navy) !important;
  padding: 9px 16px !important;
  font: 600 13px var(--font-body) !important;
  border-radius: var(--radius-control) !important;
  height: auto !important;
}

.add-op-button {
  background: var(--seafoam) !important;
  border: none !important;
  color: #fff !important;
}

.close-work-order-button {
  background: var(--red) !important;
  border: none !important;
  color: #fff !important;
}

.operation-button-row {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
  flex-wrap: wrap;
}

#table-content{
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  overflow-y: scroll;
  height: calc(100vh - 200px);
  width: 100%;
  gap: 1.25rem;
  padding: 1rem 0rem;
  transition: padding 250ms ease-in-out; /* Adjust time and easing function as needed */
}

@media screen and (max-width: 600px) {
  #table-content{
    height: calc(100vh - 230px);
  }
  
}

.table-item{
  display:flex;
  width: 90%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background-color: white;
  border: 1px solid var(--card-border);
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.table-item:not(.orphaned-operation):hover {
  box-shadow: 0 10px 26px rgba(16,42,67,.12);
}

.table-item.orphaned-operation {
  border: 2px solid #e53e3e;
  background-color: #fff5f5;
  cursor: default;
}

.orphaned-operation-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  width: 100%;
}

.orphaned-warning {
  font-weight: 700;
  color: #e53e3e;
  font-size: 0.85rem;
}

.orphaned-detail {
  font-size: 0.82rem;
  color: #555;
}

.orphaned-delete-btn {
  margin-top: 6px;
  align-self: flex-start;
  padding: 4px 12px;
  background-color: #e53e3e;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
}

.orphaned-delete-btn:hover {
  background-color: #c53030;
}

.work-order-description{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-clamp: 2;
  -moz-line-clamp: 2;
  -ms-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  font: 500 13px var(--font-body);
  color: var(--text-body);
}

.status-info, .status-daily{
  border-radius: var(--radius-card) 0px 0px var(--radius-card);
  align-self: stretch;
  flex: 0 0 4%;
  max-width: 25px;
}

/* Work-order list rows: status drives this strip's color via a tone class
   on .table-item (set by woStatusToneSlug() in app.js) instead of an inline
   JS-set background-color. */
.table-item.wo-tone-blue  .status-info { background: var(--signal-blue); }
.table-item.wo-tone-green .status-info { background: var(--green); }
.table-item.wo-tone-slate .status-info { background: #8A98A6; }
.table-item.wo-tone-amber .status-info { background: var(--amber); }
.table-item.wo-tone-teal  .status-info { background: var(--seafoam); }

.status-info-p {
  display: inline-block;
  font: 600 12px var(--font-body);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.status-info-p.wo-tone-blue  { background: var(--pill-in-progress-bg); color: var(--pill-in-progress-fg); }
.status-info-p.wo-tone-green { background: var(--pill-ready-to-bill-bg); color: var(--pill-ready-to-bill-fg); }
.status-info-p.wo-tone-slate { background: var(--pill-scheduled-bg); color: var(--pill-scheduled-fg); }
.status-info-p.wo-tone-amber { background: var(--pill-awaiting-parts-bg); color: var(--pill-awaiting-parts-fg); }
.status-info-p.wo-tone-teal  { background: rgba(15,140,130,.1); color: var(--seafoam); }

.priority-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px var(--font-body);
  color: var(--text-muted);
}

.priority-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8A98A6;
}

.priority-tag.priority-high::before { background: var(--red); }
.priority-tag.priority-high { color: var(--red-text); }

.job-notes-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  background: var(--app-bg);
  cursor: pointer;
}

.job-notes-button:hover {
  border-color: var(--seafoam);
  background: rgba(15,140,130,.08);
}

.job-notes-button img {
  width: 18px;
  height: 18px;
  opacity: .65;
}

.main-body{
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  height: 100vh;
  overflow: hidden;
}

.page-data{
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}

.info-div{
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: .5rem 0rem;
  gap: 1rem;
  width: 100%;
  min-height: 80px;
}

#dashboard, #haulLaunch, #scheduler, #maps, #spring, #hauling, #customers, #mooringDatabase, #rentalDatabase,
#mooringOps, #mooringPlanning, #mooringHaul, #mooringLaunch, #mooringEstimator, #inventoryDatabase, #receivingDatabase,
#schedule, #fuel-reading, #fuel-dashboard, #settings, #launchDispatch, #swingCheck, #mooringFitCheck, #impactForecast{
  flex: 1;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.page-frame{
  flex: 1;
  height: 100%;
}

.bold-font{
  font: 700 10.5px var(--font-body);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
}

.work-order-start-date, .operation-count {
  font: 600 13px var(--font-mono);
  color: var(--text-body);
}

.date-info{
  flex: 0 0 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .5rem;
}

.op-date-info{
  flex: 0 0 15%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: .25rem;
  padding: .5rem;
}

.op-request-date-info, .op-scheduled-date-info{
  display: flex;
  gap: .25rem;
  justify-content: center;
  align-items: center;
}

#op-code-body{
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(-300px + 100vh);
  gap: 1rem;
  margin-top: 2rem;
  overflow-y: auto;
}

.op-code-row{
  display: flex;
  align-items: center;
  width: 90%;
  border-radius: var(--radius-control);
  box-shadow: none;
  border: 1px solid var(--card-border);
  background-color: white;
  gap: 1rem;
  padding: 11px 14px;
  transition: background 120ms ease;
}

.op-code-row:hover {
  background: rgba(15,140,130,.05);
  border-color: rgba(15,140,130,.4);
  cursor: pointer;
}

.op-code-row.customer-specific-op {
  background: rgba(224,147,15,.08);
  border-color: rgba(224,147,15,.35);
}

.op-code-row .form-data:first-child {
  font: 600 11.5px var(--font-mono);
  color: var(--signal-blue);
  width: 70px;
  flex-shrink: 0;
}

.op-code-row .form-data:last-child {
  flex: 1;
  font: 600 13.5px var(--font-body);
  color: var(--text-body);
}

.op-code-row .op-code-hours {
  font: 600 12px var(--font-mono);
  color: var(--text-faint);
}


.confirmation-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.popup-content button {
  margin: 0 10px;
  padding: 5px 10px;
}

.customer-name-jobs{
  font: 700 14px var(--font-body);
  color: var(--text-body);
}

.boat-name-jobs{
  font: 500 12px var(--font-body);
  color: var(--text-faint);
}

.menu-button{
  display: none;
  width: 3rem;
  background: var(--nav-background-color);
  border: none;
  margin: .75rem;
}

svg.menu circle.solid {
  stroke: var(--state-inactive);
}
svg.menu circle.animation {
  transition: stroke-dashoffset 400ms linear 0ms, stroke-dasharray 400ms linear 0ms;
  stroke: white;
  stroke-dasharray: 1,200;
  stroke-dashoffset: 2;
}
svg.toggle.menu circle.animation {
  stroke-dasharray: 200,0;
  stroke-dashoffset: 0;
}
svg.menu line {
  stroke: white;
  transform-origin: 50% 50%;
}
svg.menu line.top,
svg.menu line.mid,
svg.menu line.bot {
  stroke-width: 4px;
  opacity: 1;
  transition: opacity 0ms linear 200ms, transform 200ms linear 200ms, stroke 200ms linear 0ms, stroke-width 200ms linear 200ms;
}
svg.menu line.top {
  transform: translateY(10px);
}
svg.menu line.bot {
  transform: translateY(-10px);
}
svg.menu:hover line.top {
  transform: translateY(12px);
}
svg.menu:hover line.bot {
  transform: translateY(-12px);
}

svg.toggle.menu line {
  stroke: white;
}
svg.toggle.menu line.top,
svg.toggle.menu line.mid,
svg.toggle.menu line.bot {
  transform: translateY(0);
  opacity: 0;
  stroke-width: 6px;
  transition: opacity 0s linear 200ms, transform 200ms linear 0s, stroke 200ms linear 0ms, stroke-width 200ms linear 0ms;
}
svg.menu line.left,
svg.menu line.right {
  opacity: 0;
  transition: opacity 0ms linear 200ms, transform 200ms linear 0s, stroke 200ms linear 0ms;
}
svg.toggle.menu line.left,
svg.toggle.menu line.right {
  opacity: 1;
  transition: opacity 0ms linear 200ms, transform 200ms linear 200ms, stroke 200ms linear 0ms;
}
svg.toggle.menu line.left {
  transform: rotateZ(45deg);
}
svg.toggle.menu line.right {
  transform: rotateZ(-45deg);
}

[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  font-size: 1rem;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent;
  z-index: 1001;
}
[tooltip]::after {
  content: attr(tooltip);
  font-family: Helvetica, sans-serif;
  text-align: center;
  margin: 0em .25em;
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: .75rem;
  border-radius: 10px;
  box-shadow: 0 1em 2em 0.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000;
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

.modal-inside{
  padding: 10px;
  overflow-y: scroll;
  height: 91%;
}

#addModal .modal-inside{
  overflow:auto;
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

.no-tooltip[tooltip]::before,
.no-tooltip[tooltip]::after {
  display: none !important;
}

.exitButtonSpacer{
  visibility: hidden;
}

#statusTable .modal-content{
    width: 95%;
    overflow-y: hidden;
    height: 95%;
    border-radius: 10px;
}

/* B3 search-first op picker — an inline panel anchored beside the creation
   screen rather than a third stacked modal. #opCodeTable/#job stay as
   top-level siblings of #Add in the DOM (no move — too many existing
   references), but lose their own dark backdrop and right-align so they
   visually read as panels sliding in over the Add modal, which already has
   one backdrop showing through. */
.op-picker-modal, #job.bigModal {
  background: transparent;
  justify-content: flex-end;
  align-items: stretch;
  padding: 40px 40px 40px 0;
  pointer-events: none;
}

.op-picker-modal .op-picker-panel {
  pointer-events: auto;
  width: var(--wo-picker-panel-width, 900px);
  max-width: 92vw;
  height: 100%;
  max-height: 720px;
  margin: 0;
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-popover);
  border: 1px solid var(--card-border-alt);
  display: flex;
  flex-direction: column;
}

#opCodeForm.smallModal {
  pointer-events: auto;
  width: 560px;
  max-width: 92vw;
  height: 100%;
  margin: 0;
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-popover);
  border: 1px solid var(--card-border-alt);
  display: flex;
  flex-direction: column;
}

#opCodeTable .button-exit-row {
  border-bottom: 1px solid var(--card-border);
  padding: 18px 22px;
}

#opCodeTable #entryTitle {
  font: 700 19px var(--font-display);
  color: #fff;
  margin: 0;
}

#opCodeTable .exitButtonSpacer {
  visibility: hidden;
}

.op-picker-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 0;
}

.op-picker-search-row .search-input {
  flex: 1;
  background: var(--app-bg);
  border: 1.5px solid #D9E6E4;
  border-radius: 11px;
  padding: 12px 15px;
  font: 600 0.95rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
}

.op-picker-search-row .search-input:focus {
  outline: none;
  border-color: var(--seafoam);
}

.op-picker-result-count {
  flex-shrink: 0;
  font: 500 11.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-faint);
}

#opCodeSelect {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.op-picker-body-row {
  display: flex;
  flex: 1;
  min-height: 0;
}

.op-type-chips {
  width: 204px;
  flex-shrink: 0;
  border-right: 1px solid #EDF1F5;
  padding: 14px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.op-type-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #5A6B7B;
  background: transparent;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.op-type-chip-count {
  margin-left: auto;
  font: 600 11.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: #9AA8B5;
}

.op-type-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--seafoam);
  flex-shrink: 0;
}

.op-type-chip:hover {
  background: #F8FAFC;
}

.op-type-chip.active {
  background: rgba(15,140,130,.1);
  color: #0C2C49;
}

.op-type-chip.active .op-type-chip-count {
  color: #0E7C73;
}

.op-picker-body-row #op-table-div {
  display: block;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 16px 18px;
  height: auto;
}

.op-picker-body-row #op-code-body {
  display: block;
  width: 100%;
  height: auto;
  align-items: stretch;
}

.op-picker-body-row .op-type-container {
  width: 100%;
  align-items: stretch;
  justify-content: flex-start;
  margin-bottom: 18px;
}

.op-picker-body-row .op-type-container > h4 {
  text-align: left;
  background: transparent;
  padding: 0 0 9px;
  font: 700 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #9AA8B5;
}

.op-picker-body-row .op-matched-container > h4.op-matched-title {
  color: #0E7C73;
}

.op-type-container.op-type-chip-hidden {
  display: none;
}

.op-code-row.op-type-chip-hidden {
  display: none;
}

.op-matched-title {
  font: 700 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0E7C73;
  margin: 4px 0 8px !important;
}

.op-code-row.customer-specific-op {
  background: rgba(15,140,130,.05);
  border-color: rgba(15,140,130,.4);
}

.op-code-row.customer-specific-op .form-data:first-child {
  color: #0E7C73;
}

.op-code-reason {
  flex-shrink: 0;
  font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #0E7C73;
  background: rgba(15,140,130,.12);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Add Operation modal (append-to-existing-WO) — reuses .op-picker-body-row/
   .op-type-chips/.op-type-chip/.op-code-row/.op-code-reason/.op-code-hours
   (all class-scoped above, so they apply here for free) plus its own ids for
   the two render targets processOpCodes()/buildOpTypeChips() need
   (.op-picker-body-row #op-table-div/#op-code-body above are ID-scoped to
   the legacy picker, so this modal gets its own equivalents rather than
   editing those selectors). */
#add-op-modal .add-op-panel {
  width: 1040px;
  max-width: 95vw;
  height: 680px;
  max-height: 90vh;
  background: #fff;
  border-radius: var(--radius-frame, 18px);
  box-shadow: var(--shadow-popover, 0 30px 70px rgba(10,33,53,.4));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.add-op-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #EDF1F5;
  flex-shrink: 0;
}

.add-op-header-text { flex: 1; min-width: 0; }

.add-op-header-title {
  font: 700 16px var(--font-display, 'Archivo', sans-serif);
  color: #0C2C49;
}

.add-op-header-wo {
  font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--signal-blue);
  margin-left: 8px;
}

.add-op-header-context {
  margin-top: 3px;
  font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
}

.add-op-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.add-op-left {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid #EDF1F5;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.add-op-left-title {
  font: 700 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9AA8B5;
  padding: 0 4px 10px;
  flex-shrink: 0;
}

.add-op-running-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.add-op-running-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  background: #fff;
}

.add-op-running-row.add-op-running-row--new {
  border-color: rgba(15,140,130,.4);
  background: rgba(15,140,130,.05);
}

.add-op-running-opcode {
  font: 600 11px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-faint);
  flex-shrink: 0;
}

.add-op-running-desc {
  flex: 1;
  min-width: 0;
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-op-running-empty {
  font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  padding: 4px;
}

.add-op-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* processOpCodes()/buildOpTypeChips() render targets — mirrors
   .op-picker-body-row #op-table-div / #op-code-body above, since those are
   ID-scoped to the legacy picker's own ids. */
#add-op-table-div {
  display: block;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 16px 18px;
}

#add-op-code-body {
  display: block;
  width: 100%;
  align-items: stretch;
}

.add-op-picker-body-row { flex: 1; min-height: 0; }
.add-op-picker-body-row.hidden { display: none; }

.add-op-info-form {
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.add-op-change-code-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  padding: 7px 12px;
  font: 600 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--signal-blue);
  cursor: pointer;
}
.add-op-change-code-btn.hidden { display: none; }

.add-op-info-form.hidden { display: none; }

.add-op-info-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.add-op-info-opcode {
  font: 700 12px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--signal-blue);
}

.add-op-info-name {
  font: 700 13.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
}

.add-op-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.add-op-field-label {
  font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.add-op-field input,
.add-op-field select {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  padding: 8px 11px;
  font: 500 0.9rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  background: #fff;
}

.add-op-field input:focus,
.add-op-field select:focus {
  outline: none;
  border-color: var(--seafoam);
}

.add-op-field input[readonly] {
  background: var(--app-bg);
  color: var(--text-faint);
}

.add-op-field-row {
  display: flex;
  gap: 10px;
}

.add-op-extra-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.add-op-extra-fields .add-op-field { min-width: 160px; }
.add-op-extra-fields .hidden { display: none; }

.add-op-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.add-op-cancel-btn {
  background: none;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  padding: 9px 16px;
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  cursor: pointer;
}

.add-op-submit-btn {
  background: var(--seafoam);
  border: none;
  border-radius: var(--radius-control);
  padding: 9px 18px;
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  cursor: pointer;
}

.add-op-submit-btn:hover { background: #0C6D64; }

.add-op-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid #EDF1F5;
  flex-shrink: 0;
}

.add-op-footer-hint {
  font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
}

.add-op-done-btn {
  background: var(--harbor-navy, #0C2C49);
  border: none;
  border-radius: var(--radius-control);
  padding: 9px 20px;
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  cursor: pointer;
}

/* Op detail panel (#job / #opCodeForm) — scoped so the many other plain
   fieldset/legend pairs elsewhere in the app are untouched. */
#opCodeForm fieldset {
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
}

#opCodeForm legend {
  font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 5px;
  padding: 0;
}

#opCodeForm select,
#opCodeForm input,
#opCodeForm textarea {
  width: 100%;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  padding: 9px 12px;
  font: 500 0.92rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  background: #fff;
}

#opCodeForm select:focus,
#opCodeForm input:focus,
#opCodeForm textarea:focus {
  outline: none;
  border-color: var(--seafoam);
}

#opCodeForm .form-area textarea {
  height: 120px;
}

#opCodeForm .jobTop {
  border-bottom: 1px solid var(--card-border);
}

#opCodeForm .op-coats-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}

#opCodeForm .op-coats-stepper #opCoatsCount {
  width: 60px;
  text-align: center;
}

#opCodeForm .op-coats-stepper-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--harbor-navy);
  font: 700 1rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  cursor: pointer;
}

#opCodeForm .op-coats-stepper-btn:hover {
  border-color: var(--seafoam);
  color: var(--seafoam);
}

.add-job-button {
  background: var(--seafoam) !important;
  color: #fff !important;
  outline: none !important;
  border: none !important;
  border-radius: var(--radius-control) !important;
}

.delete-job-button {
  background: var(--red) !important;
  color: #fff !important;
  outline: none !important;
  border: none !important;
  border-radius: var(--radius-control) !important;
}

.lowerButton {
  font: 600 0.88rem var(--font-body, 'Public Sans', system-ui, sans-serif) !important;
  padding: 12px !important;
  margin: 8px 0 0 !important;
}

#opCodeTable .button-exit-row {
  border-bottom: 1px solid var(--card-border);
  padding: 18px 22px;
}

#opCodeTable #entryTitle {
  font: 700 19px var(--font-display);
  color: #fff;
  margin: 0;
}

#opCodeTable .exitButtonSpacer {
  visibility: hidden;
}

.labor-section{
  margin: auto;
  overflow-y: scroll;
  height: 80%;
  padding: 1rem 2rem;
}

.op-box{
  padding: 1rem;
}

#currentCustomerName, #currentBoatName{
  font-size: 1rem;
}

#statusTable .modal-inside{
  height: 100%;
}

.entry-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  background: var(--app-deep-blue);
  padding: .5rem;
  width: 100%;
  border-radius: 10px 10px 0px 0px;
  font-size: 1.5rem;
}

.qs-button{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  height: 40px;
  border-radius: 20px;
  border: none;
  background: var(--app-light-blue);
  gap: .5rem;
}

.exit-solo{
  justify-content: flex-end;
}

#job-data .modal{
  align-items: initial;
}

.job-description{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
}

#shortDesc, #generalWorkOrder,#winterWorkOrder,#springWorkOrder{
  border-bottom: 2px solid black;

  &:focus-visible{
    border-bottom: 2px solid black !important;
  }

}

.jobBox::before{
  content: "< ";
  font-weight: bold;
}

.jobBox{
  display: flex;
  gap: .25rem;
  align-items: center;
}

.wo-job-row {
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  background: #fff;
  margin-bottom: 6px;
}

.wo-job-row-desc {
  margin: 0;
  font: 600 0.88rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  flex: 1;
  min-width: 0;
}

.wo-job-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.wo-job-row-status {
  font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.wo-job-row-status.op-tone-blue  { background: var(--pill-in-progress-bg); color: var(--pill-in-progress-fg); }
.wo-job-row-status.op-tone-green { background: var(--pill-ready-to-bill-bg); color: var(--pill-ready-to-bill-fg); }
.wo-job-row-status.op-tone-navy  { background: var(--pill-hauled-bg); color: var(--pill-hauled-fg); }
.wo-job-row-status.op-tone-red   { background: var(--pill-on-hold-bg); color: var(--pill-on-hold-fg); }
.wo-job-row-status.op-tone-slate { background: var(--pill-scheduled-bg); color: var(--pill-scheduled-fg); }

.wo-job-row-hours {
  font: 600 12px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-muted);
}

.wo-job-row::before { content: none; }

.wo-job-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  visibility: hidden;
}

.wo-job-row:hover .wo-job-row-actions { visibility: visible; }

.wo-job-row-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--card-border-alt, #E4EAF0);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #3D4F60;
  cursor: pointer;
  padding: 0;
}

.wo-job-row-icon-btn:hover { background: #F4F7FA; }

.wo-job-row-icon-danger { color: var(--red-text, #B03030); }

.wo-job-row.wo-job-row-confirming {
  background: #FBEDEC;
  border-color: #F2D7D5;
  justify-content: space-between;
}

.wo-job-row-confirm-text {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #8C2B2B;
}

.wo-job-row-confirm-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.wo-job-row-confirm-remove {
  font: 700 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  background: var(--red-text, #B03030);
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
}

.wo-job-row-confirm-cancel {
  font: 600 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #3D4F60;
  background: #fff;
  border: 1px solid var(--card-border-alt, #E4EAF0);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
}

/* ============ Validation checklist (D4) ============ */
.wo-validation-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 26px;
  background: #FBEFD8;
  border-bottom: 1px solid #EFDCB2;
}

.wo-validation-title {
  font: 700 13px var(--font-display, 'Archivo', sans-serif);
  color: #0C2C49;
  flex-shrink: 0;
}

.wo-validation-count-pill {
  font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #B5790C;
  background: #fff;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  flex-shrink: 0;
}

.wo-validation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  flex: 1;
}

.wo-validation-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 9px;
  font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
}

.wo-validation-item.issue {
  background: #fff;
  border: 1px solid #EFDCB2;
  color: #8A5B14;
  cursor: pointer;
}

.wo-validation-item.ok {
  background: rgba(255,255,255,.6);
  color: #3D4F60;
}

.wo-validation-item-mark { font-weight: 700; flex-shrink: 0; }
.wo-validation-item.issue .wo-validation-item-mark { color: #B5790C; }
.wo-validation-item.ok .wo-validation-item-mark { color: #1F8B4D; }

/* F6 — whole-database CSV export utilities (bottom paint / outdrive
   service reports). Not part of a single work order, so they're no longer
   parked on the creation screen at all (previously they lived there and
   were simply hidden with display:none — unreachable from anywhere). Now
   live in the Work Orders list toolbar as a small "Reports" group; the
   existing #bottom-paint-export/#service-outdrive-export
   .addEventListener() calls in app.js are unchanged. */
.wo-reports-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-left: 1px solid var(--card-border, #E8EDF2);
  margin-left: 8px;
}

.wo-reports-label {
  font: 700 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint-alt, #9AA8B5);
}

.wo-legacy-export-btn {
  font: 600 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy, #0C2C49);
  background: #fff;
  border: 1px solid var(--card-border, #E8EDF2);
  border-radius: var(--radius-control, 8px);
  padding: 6px 11px;
  cursor: pointer;
}

.wo-legacy-export-btn:hover {
  border-color: var(--text-faint, #8A98A6);
}

/* ============ D1 · Customer / boat picker ============ */
.wo-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,44,73,.32);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.wo-picker-panel {
  width: 470px;
  max-width: 92vw;
  height: 560px;
  max-height: 88vh;
  background: #fff;
  border-radius: var(--radius-frame, 18px);
  box-shadow: var(--shadow-popover, 0 30px 70px rgba(10,33,53,.4));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wo-picker-header {
  padding: 16px 18px 13px;
  border-bottom: 1px solid #EDF1F5;
  flex-shrink: 0;
}

.wo-picker-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wo-picker-title {
  font: 700 15px var(--font-display, 'Archivo', sans-serif);
  color: #0C2C49;
}

.wo-picker-close {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #F1F4F7;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 15px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #8A98A6;
  cursor: pointer;
}

.wo-picker-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--app-bg, #F4F7FA);
  border: 1.5px solid #D9E6E4;
  border-radius: 10px;
  padding: 10px 13px;
  margin-top: 12px;
}

.wo-picker-search-box input {
  border: none;
  outline: none;
  background: transparent;
  font: 600 14px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #102A43;
  flex: 1;
}

.wo-picker-search-count {
  font: 500 11px var(--font-mono, 'Spline Sans Mono', monospace);
  color: #9AA8B5;
  flex-shrink: 0;
}

.wo-picker-body {
  flex: 1;
  /* A flex item's default min-height is auto, not 0 — without this,
     "flex:1; overflow-y:auto" never actually shrinks below the content's
     own height, so it grows past the panel's allotted space and just gets
     clipped by .wo-picker-panel's overflow:hidden instead of scrolling
     (same root cause as the grid min-width:0 fix elsewhere in this file). */
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wo-picker-group {
  border: 1px solid #ECEFF3;
  border-radius: 13px;
  overflow: hidden;
  background: #fff;
  /* A flex child with overflow != visible gets an automatic minimum size
     of 0 instead of content-based — the flex algorithm was free to
     compress each customer group to fit .wo-picker-body's available
     height (clipping the group's own content via its overflow:hidden)
     instead of ever letting .wo-picker-body's own overflow-y:auto scroll.
     flex-shrink:0 keeps every group at its natural height, so the list's
     real total height now properly exceeds the body and scrolls. */
  flex-shrink: 0;
}

.wo-picker-group-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  cursor: pointer;
}

.wo-picker-group-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #EAEEF2;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #5A6B7B;
  flex-shrink: 0;
}

.wo-picker-group-main { flex: 1; min-width: 0; }
.wo-picker-group-name { font: 700 13.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: #102A43; }
.wo-picker-group-sub { font: 500 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: #8A98A6; }

.wo-picker-dm-pill {
  font: 600 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  padding: 4px 9px;
  border-radius: var(--radius-pill, 999px);
  flex-shrink: 0;
}
.wo-picker-dm-pill.linked { background: #E2F4EA; color: #1F8B4D; }
.wo-picker-dm-pill.unlinked { background: #F1F4F7; color: #8A98A6; }

.wo-picker-boat-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px 11px 59px;
  border-top: 1px solid #F2F5F8;
  cursor: pointer;
}

.wo-picker-boat-row:hover { background: #F8FAFC; }
.wo-picker-boat-row.selected { background: rgba(15,140,130,.05); }

.wo-picker-boat-icon { opacity: .55; flex-shrink: 0; }
.wo-picker-boat-main { flex: 1; min-width: 0; }
.wo-picker-boat-name { font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif); color: #102A43; }
.wo-picker-boat-sub { font: 500 11px var(--font-body, 'Public Sans', system-ui, sans-serif); color: #9AA8B5; }

.wo-picker-selected-pill {
  font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  background: var(--seafoam, #0F8C82);
  padding: 5px 12px;
  border-radius: var(--radius-pill, 999px);
  flex-shrink: 0;
}

.wo-picker-warn-pill {
  font: 600 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #B5790C;
  background: #FBEFD8;
  padding: 4px 9px;
  border-radius: var(--radius-pill, 999px);
  flex-shrink: 0;
}

.wo-picker-empty {
  text-align: center;
  font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #9AA8B5;
  padding: 30px 0;
}

.wo-picker-hint {
  font: 400 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #9AA8B5;
  line-height: 1.5;
  padding: 2px 4px;
}

.double-modal{
  display: none;
  position: fixed;
  justify-content:center;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

#open-filter{
  background: var(--app-light-blue);
  border-radius: 10px;
  width: 60%;
  padding: .25rem;
  margin: 2rem auto .25rem auto;
}

#removeHoldButton{
  background: gray;
  color: white;
}

#removeHoldButton{
  display:none;
}

.mooring-select{
  position: relative;
  display: inline-block;
}

.mooring-menu{
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-flow: column;
  gap: .5rem;
  background-color: lightsteelblue;
  border: 4px solid var(--nav-background-color);
  padding: 10px;
  border-radius: 10px;
  z-index: -1;
  width: 14px;
  height: 10px;
  filter: opacity(0);
  overflow: hidden;
  transition: filter 250ms ease-in-out;
}

.mooring-menu.open {
  top: 0px;
  left: 75px;
  width: fit-content;
  height: auto;
  background-color: white;
  z-index: 99999;
  filter: opacity(1);
  text-wrap: nowrap;
  box-shadow: 0px 4px 10px 5px rgba(0, 0, 0, .5);
}

.mooring-menu button{
  background: var(--nav-background-color);
  text-align: center;
  vertical-align: middle;
  padding: .5rem;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, .5);
}

#current-page{
  color: var(--harbor-navy);
  font: 700 17px var(--font-display);
  pointer-events: none;
}

.navbar {
  height: var(--topbar-height);
  background: #fff;
  border-bottom: 1px solid var(--card-border);
}

/* Reserves space for the fixed-position "new version available" banner (app.js
   showUpdateNotification()) so it stops overlapping/clipping the top of the navbar instead of
   pushing content down via normal document flow. */
body.has-update-banner .navbar {
  margin-top: 40px;
}

/* .navbar's margin-top above only shifts the (now largely superseded) top bar — it doesn't
   touch .main-body, the flex row that actually holds the sidebar + every page's iframe
   (.page-frame) side by side. Without this, the banner overlaps/clips the top of whatever
   page is loaded (confirmed on Inventory: its search box and toolbar buttons were cut off).
   Shrinking the height alongside the margin keeps .main-body's total box at exactly 100vh, so
   nothing overflows past the bottom of the viewport either. */
body.has-update-banner .main-body {
  margin-top: 40px;
  height: calc(100vh - 40px);
}

#Add input:focus-visible{
  border:none;
  outline:none;
}

.op-filter-body{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60vh;
  gap: 1rem;
}

.selected-vendors {
  margin-bottom: 10px;
}

.selected-vendor {
  display: inline-block;
  background-color: #f0f0f0;
  padding: 5px;
  margin: 2px;
  border-radius: 3px;
}

.remove-vendor {
  cursor: pointer;
  color: red;
  margin-left: 5px;
}

.vendor-search-section {
  border-top: 1px solid #ccc;
  padding-top: 10px;
  display: flex;
  flex-flow: column;
  margin: .5rem;
  align-items: center;
}

.msrp-group{
  display:none;
}

#vendorSearch {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}

.vendor-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.vendor-item input[type="checkbox"] {
  margin-right: 5px;
  width: 25px;
}

.vendor-item label {
  margin: 0;
  font-size: 1rem;
}

.vendor-list{
  overflow-y: scroll;
  max-height: 150px;
  margin: 1.5rem 0rem;
  width: 100%;
  min-height: fit-content;
}

.suggestion-list {
  position: absolute;
  width: 91%;
  top: 37%;
  background: white;
  border: 4px solid black;
  max-height: 275px;
  overflow-y: auto;
  border-radius: 10px;
  padding: 1rem;
  z-index: 1004;
  box-sizing: border-box;
  flex-flow: column;
  gap: .5rem;
}

.suggestion-item {
  cursor: pointer;
  background: lightgrey;
  border-radius: 5px;
  padding: 0.5rem;
}

.suggestion-item:hover {
  background-color: #f0f0f0;
}

.pop-up-submit-button, .pop-up-cancel-button{
  padding: 1rem;
  border-radius: 10px;
  border: 2px solid black;
  font-size: 1.5rem;
  font-weight: bold;
}

.pop-up-submit-button{
  background: green;
  color:white;
}

.pop-up-cancel-button{
  background: red;
  color: white;
}

#calendar {
  display:flex;
  flex-flow:column;
  font-family: Arial, sans-serif;
  width:100%;
  overflow-y: scroll;
  height: calc(100vh - 100px);
}

#calendar > header{
  width:100%;
  position: sticky;
  top: 0;
  background: white;
  padding: .5rem;
  border-bottom: 4px solid var(--nav-background-color);
}

#week-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#date-navigation{
  display:flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid var(--nav-background-color);
  border-radius: 60px;
  width:30%;
}

#week-dates{
  cursor: pointer;
  font-size: 1.5rem;
}

#prev-week, #next-week {
  border: none;
  background-color: var(--nav-background-color);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

#prev-week img, #next-week img {
  width: 40px;
  height: 40px;
  filter:invert(1);
}

#prev-week{
  border-radius: 100% 0% 0% 100%;
}

#next-week{
  border-radius: 0% 100% 100% 0%;
}

#week-container {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  min-height: 400px;
  padding: .5rem;
}

.day-column {
  flex: 0 20%;
  background-color: #f0f0f0;
  min-height: 200px;
  margin: 4px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .5);
  display:flex;
  flex-flow: column;
  justify-content: space-between;
}

.progress-wrapper{
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, .25);
  padding: 2px;
  width: 100%;
}

.progress-bar{
  background-color: #f5ac2f;
  height: 20px;
}

.progress-bar-container{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  flex-flow: column;
  align-items: flex-end;
}

.count-element{
  display: flex;
  justify-content: flex-end;
  color: var(--nav-background-color);
  font-family: fantasy;
  font-style: italic;
  padding: .5rem;
}

.tech-container{
  border: 2px solid var(--nav-background-color);
  border-radius: 12px;
}

.tech-hours{
  display: flex;
  justify-content: center;
  color: var(--nav-background-color);
  font-family: fantasy;
  font-style: italic;
}

.day-header {
  flex: 1;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.date-header, .tech-header{
  flex: 0 20%;
  font-weight: 100;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .5);
}

#daily-log-list .tech-header{
  justify-content: space-between;
  background: var(--nav-background-color);
  color: white;
  font-size: 1.25rem;
  padding: .5rem;
  position: sticky;
  top:0;
}

.tech-stats{
  flex: 0 15%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .25);
  margin: 4px;
  padding: .5rem;
}

.tech-name{
  color: var(--nav-background-color);
  font-family: fantasy;
  font-size: 1.5rem;
}

#spring-open-button, #hauling-open-button{
  display:flex;
}

.current-day {
  background-color: #e0e0e0;
}

.event {
  cursor: move;
  margin-bottom: 5px;
  padding: 5px;
  background-color: white;
  border-radius: 3px;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .25);
  font-size: 0.9em;
}

#stuff {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
}


.event-container {
  min-height: 50px;
  max-height: 150px;
  padding: .5rem;
  overflow-y: scroll;
}

.drag-over {
  border: 2px dashed #000;
}

.weather-icon {
  position: relative;
  display: inline-block;
}

.weather-popup {
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  z-index: 1;
  left: 100%;
  top: 0;
  white-space: nowrap;
}

.job-box, .schedule-box, .tech-box{
  height:100%;
  width: 100%;
}

.hide{
  display:none;
}

.weather-popup {
  position: absolute;
  top: 0;
  display: none;
  z-index: 1000;
}

.job-group{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  flex: 0 22%;
}

@media screen and (max-width: 600px) {
  .job-group{
    flex: 1;
  }
  
}

.group-row{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.hideBox {
  opacity: 0;
}

.filter-box{
  position: absolute;
  display: block;
  background-color: white;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-frame);
  z-index: 99;
  border-radius: var(--radius-card);
  overflow-y: auto;
  padding: 1rem;
  max-height: calc(100vh - 200px);
  opacity: 0;
  transition: opacity 500ms ease-in-out;
  visibility: hidden;
  margin-left: 7px;
}

@media screen and (max-width: 600px) {
  .filter-box{
    max-height: calc(100vh - 370px);
    margin-top:3rem;
  }
  
}

.filter-box label{
  margin:0;
  font: 500 0.9rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
}

.filter-box h3 {
  font: 700 0.8rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: .6em 0 .3em;
}

#billing-filter-section button {
  font: 600 0.82rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  padding: .4em 1em;
  cursor: pointer;
}

#billing-filter-section button:hover {
  border-color: var(--seafoam);
}

/* ============ FILTER PANEL REDESIGN ============
   9 groups / ~34 controls previously stacked in one long scroll with mixed interaction patterns
   (pill buttons vs. plain checkboxes). Restructured into collapsible sections, all collapsed by
   default, with a live "(N)" count per section — same counting approach as the Filter button's own
   badge. Scoped under .filter-box-redesign so the base .filter-box rules (still used by the
   unrelated View/Sort dropdowns) are untouched. */

#filter-view.filter-box-redesign {
  width: 320px;
  padding: 14px;
}

.filter-panel-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}

.filter-panel-top #clear-filters {
  font: 600 0.8rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--red-text, #C23A3A);
  background: none;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  padding: .35em .8em;
  cursor: pointer;
  flex-shrink: 0;
}

.filter-panel-top #clear-filters:hover { border-color: var(--red-text, #C23A3A); }

.filter-panel-top .date-filter { flex: 1; }

.filter-section {
  border-bottom: 1px solid var(--card-border);
}

.filter-section:last-child { border-bottom: none; }

.filter-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 10px 2px;
  cursor: pointer;
  text-align: left;
}

.filter-section-name {
  font: 700 0.78rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-body);
}

.filter-section-count {
  font: 600 0.78rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--seafoam);
}

.filter-section-chevron {
  margin-left: auto;
  color: var(--text-faint);
  transition: transform 150ms ease;
  font-size: 0.7rem;
}

.filter-section.expanded .filter-section-chevron { transform: rotate(180deg); }

.filter-section-body {
  display: none;
  padding: 2px 2px 12px;
}

.filter-section.expanded .filter-section-body { display: block; }

.filter-subsection-label {
  font: 700 0.68rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 10px 0 4px;
}

.filter-checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
}

.filter-checkbox-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font: 500 0.85rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
}

.filter-checkbox-row:hover { background: rgba(15,140,130,.08); }

.filter-checkbox-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--seafoam);
  cursor: pointer;
  flex-shrink: 0;
}

.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.filter-chip-btn {
  font: 600 0.8rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  padding: .4em 1em;
  cursor: pointer;
}

.filter-chip-btn:hover { border-color: var(--seafoam); }

.filter-chip-btn.active {
  background: var(--seafoam);
  border-color: var(--seafoam);
  color: #fff;
}

.filter-radio-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 0.8rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  padding: .4em 1em;
  cursor: pointer;
}

.filter-radio-chip:has(input:checked) {
  background: var(--seafoam);
  border-color: var(--seafoam);
  color: #fff;
}

.filter-radio-chip input[type="radio"] {
  accent-color: #fff;
  cursor: pointer;
  margin: 0;
}

.showBox{
  opacity: 1 !important;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  padding: 5px 0;
}

.active-sort {
  font-weight: bold;
}

.sort-asc::after {
  content: ' ▲';
}

.sort-desc::after {
  content: ' ▼';
}

#filter-view input[type="checkbox"] {
  z-index: 10;
  opacity: 100%;
  width: 20px;
  height: 20px;
  pointer-events: initial;
  text-align: center;
  vertical-align: middle;
}

.slide-panel-wrapper, .slide-panel-static, .slide-panel-static-sub {
  position: fixed;
  background: #fff;
  top: 60px;
  right: -9000px;
  width: 60%;
  transition: right 0.3s ease-out;
  z-index: 1000;
  flex-flow: column;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-frame);
  height: fit-content;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  border-radius: var(--radius-frame);
}

@media screen and (max-width: 600px) {
  .slide-panel-wrapper, .slide-panel-static, .slide-panel-static-sub {
    display: none;
  }
}

@media screen and (max-height: 600px) {
  .slide-panel-wrapper, .slide-panel-static, .slide-panel-static-sub {
    height: 500px;
    overflow-y:scroll;
  }
}

.slide-panel-static, .slide-panel-static-sub {
  display: none;
  right: 50px;
  z-index: 1001;
  height: 800px;
  max-height: calc(100vh - 125px);
  overflow: hidden;
  /* Cleared further below/left of the top toolbar's own right-aligned,
     same-seafoam-color buttons (e.g. #estimates-list-button) — at 75px/25px
     the panel's Job Complete button sat close enough to collide with them. */
  top: 100px;
}

.slide-panel-static-sub{
  z-index: 1002;
}

@media screen and (max-width: 600px) {
  .slide-panel-static, .slide-panel-static-sub {
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

#Update > .button-exit-row{
  border-radius: 10px 10px 0 0;
}

@media screen and (max-width: 600px) {
  #Update > .button-exit-row{
    border-radius: 0;
  }
}

.slide-panel-wrapper.active {
  right: 25px;
}

@media screen and (max-width: 600px) {
  .slide-panel-wrapper.active {
    left: 0px;
    display: flex;
    top: 0px;
    width: 100vw;
    height: 100vh;
  }
  
}

.slide-panel {
  background-color: #ffffff;
  border-left: 2px solid #000080;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.slide-panel__close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.slide-panel__content {
  margin-top: 30px;
}

.slide-panel__info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.slide-panel__details p {
  margin: 10px 0;
}

.slide-panel__actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.slide-panel__button {
  padding: 10px 15px;
  background-color: #ffffff;
  border: 1px solid #000080;
  color: #000080;
  cursor: pointer;
}

.slide-panel__button:hover {
  background-color: #000080;
  color: #ffffff;
}

.label-pair{
  display:flex;
  gap: 0.5rem;
  margin: .25rem 0rem;
  justify-content: flex-start;
  align-items: center;
}

.label-pair input{
  display: flex;
  border: none;
  flex: 1;
  flex-wrap: wrap;
  font-size: 1rem;
}

@media screen and (max-width: 600px) {
  .label-pair input, .label-pair strong{
    font-size: .85rem;
  }

}

@media screen and (max-width: 600px) {
  .slide-panel-wrapper, .slide-panel-static, .slide-panel-static-sub {
    border-radius:0px;
  }
}

/* Add Note panel — brought in line with the design language used
   throughout the rest of the app (--font-body/--seafoam/--card-border/
   --radius-control tokens, the same clean card + subtle-border look as
   .op-code-row/.add-op-running-row) instead of the old black-border,
   drop-shadow chat-bubble styling. Composer moved to the bottom of the
   panel (was above the list) to match the standard comment-thread layout —
   new notes append near where you're typing, not disconnected above it. */
.note-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.note-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}

.note-panel-title-group {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.note-panel-title {
  font: 700 15px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy, #0C2C49);
}

.note-panel-subtitle {
  font: 500 12.5px var(--font-body, 'Public Sans', sans-serif);
  color: var(--text-muted, #62748A);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-notes-data {
  flex: 1;
  min-height: 0;
}

#note-area{
  display:flex;
  flex-flow: column;
  gap: 10px;
  height: 420px;
  overflow-y: auto;
  padding: 16px 20px;
}

.note-empty-state {
  margin: auto;
  font: 500 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
}

.note-input-section{
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--card-border);
  flex-shrink: 0;
}

.note-input-section textarea{
  flex: 1;
  resize: none;
  max-height: 120px;
  padding: 10px 13px;
  border-radius: var(--radius-control);
  border: 1.5px solid #D9E6E4;
  background: var(--app-bg);
  font: 500 0.9rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
}

.note-input-section textarea:focus {
  outline: none;
  border-color: var(--seafoam);
  background: #fff;
}

.note-input-section button{
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-control);
  border: none;
  background: var(--seafoam);
  cursor: pointer;
}

.note-input-section button:hover { background: #0C6D64; }
.note-input-section button img { filter: brightness(0) invert(1); }

.note-pair {
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  padding: 10px 34px 10px 12px;
  background: #fff;
}

.note-p{
  font: 500 0.9rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  white-space: pre-wrap;
  word-break: break-word;
}

.note-info-tech{
  margin-top: 6px;
  display: flex;
  gap: 8px;
  font: 500 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
}

.note-tech-name { font-weight: 700; color: var(--text-muted); }

.note-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-faint);
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

.note-pair:hover .note-delete-btn { opacity: 1; }

.note-delete-btn:hover {
  background: var(--pill-on-hold-bg, #FCE9E9);
  color: var(--red-text, #C23A3A);
}

.confirmation-note-delete-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(12,44,73,.32);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
}

.note-delete-modal-content {
  width: 320px;
  max-width: 90vw;
  background: #fff;
  padding: 20px;
  border-radius: var(--radius-frame, 14px);
  text-align: center;
  box-shadow: var(--shadow-popover, 0 30px 70px rgba(10,33,53,.4));
  font: 600 14px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
}

.note-delete-modal-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.confirm-delete {
  background: var(--red, #C23A3A);
  color: white;
  border: none;
  border-radius: var(--radius-control);
  padding: 8px 18px;
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  cursor: pointer;
}

.cancel-delete {
  background: none;
  color: var(--text-muted);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  padding: 8px 18px;
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  cursor: pointer;
}

.new-part-input, .new-qty-input, .new-desc-input, .new-kit-input{
  font-size: 1.5rem;
  margin: 1rem 0rem;
  border-radius:10px;
  padding:.5rem;
}

.parts-entry-body-header{
  display:flex;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 1rem;
}

#parts-header{
  margin-top: 2rem;
}

.qty-container{
  display:flex;
  justify-content: flex-start;
  align-items: center;
  gap: .5rem;
}

.flex-start{
  display:flex;
  justify-content: flex-start;
  align-items: center;
  gap: .5rem;
}

.parts-data-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.parts-data-row label{
  margin: 0;
}

.parts-data-row input{
padding:.25rem;
border-radius: 5px;
}

.parts-selector{
  flex: 1
}

.tech-date-section{
  display:flex;
  justify-content: space-between;
  align-items: center;
  margin:1rem 0rem;
}

@media screen and (max-width: 600px) {
  .tech-date-section{
    display: none;
  }
  
}

.tech-date-section label{
  margin:0;
  font: 700 10.5px var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.labor-description-section label {
  font: 700 10.5px var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

#labor-entry-tech, #part-entry-tech {
  height: 42px;
  border-radius: var(--radius-control);
  border: 1.5px solid var(--card-border-alt);
  padding: 0 13px;
  font: 500 14px var(--font-body);
  color: var(--text-body);
  background: #fff;
}

#labor-entry-tech:focus, #part-entry-tech:focus {
  border-color: var(--seafoam);
  box-shadow: 0 0 0 3px rgba(15,140,130,.15);
  outline: none;
}

#laborAndPartsQS{
  display:flex;
}

#laborAndPartsQS > .button-exit-row{
  background: white;
}

#part-entry-date, #labor-entry-date{
  height: 42px;
  width: 200px;
  border-radius: var(--radius-control);
  border: 1.5px solid var(--card-border-alt);
  padding: 0 13px;
  font: 500 14px var(--font-mono);
  color: var(--text-body);
}

#part-entry-date:focus, #labor-entry-date:focus {
  border-color: var(--seafoam);
  box-shadow: 0 0 0 3px rgba(15,140,130,.15);
  outline: none;
}

#parts-customer-data, #labor-customer-data{
  padding: 1rem 1.5rem 0;
  font: 700 19px var(--font-display);
  color: var(--harbor-navy);
}

#part-entry-section, #labor-entry-section{
  border: none;
  padding: 0 1.5rem 1.5rem;
  flex: 1;
  margin: 0;
  max-height: 480px;
  overflow: hidden;
}

#save-parts, #add-labor{
  padding: 10px 20px;
  width: fit-content;
  font: 600 13px var(--font-body);
  border: none;
  border-radius: var(--radius-control);
  background: var(--seafoam);
  color: #fff;
  margin: 0;
}

.labor-footer-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--card-border);
}

.labor-cancel-button {
  padding: 10px 18px;
  font: 600 13px var(--font-body);
  border: 1.5px solid var(--card-border-alt);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--harbor-navy);
}

#add-part{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  height: 40px;
  border-radius: 20px;
  border: none;
  background: limegreen;
  gap: .5rem;
}

#open-scanner{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  height: 40px;
  border-radius: 20px;
  border: 2px solid black;
}

#labor-entry-hours{
  height: 42px;
  width: 8rem;
  border-radius: var(--radius-control);
  border: 1.5px solid var(--card-border-alt);
  padding: 0 13px;
  font: 500 14px var(--font-mono);
  color: var(--text-body);
}

#labor-entry-hours:focus {
  border-color: var(--seafoam);
  box-shadow: 0 0 0 3px rgba(15,140,130,.15);
  outline: none;
}

#parts-table-body{
  display: flex;
  flex-flow: column;
  gap: .5rem;
  min-height: 100px;
  max-height: 200px;
  padding: .25rem;
  width: 100%;
  overflow-y: auto;
}

.flex-between{
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.labor-description-section{
  display:flex;
  flex-flow: column;
}

#labor-entry-description{
  border: 1.5px solid var(--card-border-alt);
  border-radius: var(--radius-control);
  height: 90px;
  padding: 11px 13px;
  font: 500 13.5px var(--font-body);
  color: var(--text-body);
  resize: vertical;
}

#labor-entry-description:focus {
  border-color: var(--seafoam);
  box-shadow: 0 0 0 3px rgba(15,140,130,.15);
  outline: none;
}

@media screen and (max-width: 600px) {
  #labor-entry-description{
    font-size: 1rem !important;
  }
}

@media screen and (max-width: 600px) {
  .qs-open{
    right: 2.5%;
    box-shadow:0px 0px 1000px 1000px rgba(0, 0, 0, 0.5);
  }

  .modalQS{
    width: 95%;
    top: 10%;
  }
}

.flex-start label{
  margin: 0;
}

.padding{
  padding: 1rem;
}

#updateCategory, #updateOpType, #updateStatus{
  font-size: 1rem !important;
  height: fit-content !important;
}

#updateCategory, #updateOpType {
  border: 1px solid var(--card-border) !important;
}

.part-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ddd;
}

.part-row.exclude {
  background-color: #ffdddd;
}

.kit-select-modal, .kit-modal{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
}

.kit-select-modal-content{
  width: 30%;
  height: fit-content;
  background-color: white;
  border-radius:10px;
  border:4px solid black;
}

.kit-modal-content{
  width: 70%;
  max-height: calc(100vh - 150px);
  min-height: fit-content;
  background-color: white;
  border-radius:10px;
  border:4px solid black;
}

@media screen and (max-width: 600px) {
  .kit-select-modal-content, .kit-modal-content{
    width: 90%;
    height: 90%;
  }
}

.kit-modal-header{
  width: 100%;
  text-align: center;
  background: var(--nav-background-color);
  color: white;
  padding: .5rem;
}

/* ============================================================
   PARTS KIT — picker (C1) + review-before-posting (C2).
   Overrides the legacy black-border boxes with the Marina OS shell;
   .kit-select-modal/.kit-modal keep providing the fixed-overlay backdrop.
   ============================================================ */
.pk-modal-content {
  width: 640px !important;
  max-width: 92vw;
  max-height: 82vh;
  background: #fff !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-frame) !important;
  box-shadow: var(--shadow-popover);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pk-header {
  flex-shrink: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid #EDF1F5;
}
.pk-title { font: 700 15px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); white-space: nowrap; }
.pk-header-sub { font: 600 11px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--signal-blue); }
.pk-search {
  flex: 1;
  max-width: 260px;
  box-sizing: border-box;
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 9px 13px;
  font: 400 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
}
.pk-header .exitButton { margin-left: auto; }
.pk-back-button {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--app-bg);
  border: none;
  font: 500 15px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.pk-kits-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
  padding: 14px 18px 6px;
}
.pk-kit-list { flex: 1; overflow: auto; padding: 0 18px 14px; }
.pk-kit-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 13px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
  font: inherit;
}
.pk-kit-row:hover { border-color: var(--seafoam); background: rgba(15,140,130,.04); }
.pk-kit-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #E8F0F8;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pk-kit-info { min-width: 0; flex: 1; }
.pk-kit-name-row { display: flex; align-items: center; gap: 8px; }
.pk-kit-name { font: 600 13.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--harbor-navy); }
.pk-kit-contents { font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-kit-stats { text-align: right; flex-shrink: 0; white-space: nowrap; }
.pk-kit-count { font: 700 13px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); }
.pk-kit-stock { font: 600 11px var(--font-mono, 'Spline Sans Mono', monospace); }
.pk-kit-stock.stock-ok { color: #0E7C73; }
.pk-kit-stock.stock-short { color: var(--red-text); }

.pk-lines { flex: 1; overflow: auto; padding: 8px 20px 4px; }
.pk-line-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid #F1F4F7;
}
.pk-line-row:first-child { border-top: none; }
.pk-line-check {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--card-border-alt);
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--seafoam);
}
.pk-line-info { min-width: 0; flex: 1; }
.pk-line-num-row { display: flex; align-items: center; gap: 7px; }
.pk-line-num { font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); }
.pk-line-desc { font: 500 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); }
.pk-line-row.excluded { opacity: .45; }
.pk-qty-stepper { display: flex; align-items: center; border: 1px solid #E4EAF0; border-radius: 8px; flex-shrink: 0; }
.pk-qty-btn {
  width: 26px; height: 26px;
  border: none;
  background: none;
  font: 600 14px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint-alt);
  cursor: pointer;
}
.pk-qty-value {
  width: 40px;
  text-align: center;
  border: none;
  border-left: 1px solid #E4EAF0;
  border-right: 1px solid #E4EAF0;
  font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--harbor-navy);
  padding: 4px 0;
}

.pk-short-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 20px 0;
  background: rgba(222,168,52,.08);
  border: 1px solid rgba(222,168,52,.35);
  border-radius: 10px;
  padding: 10px 13px;
  font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
}
.pk-short-tag { flex-shrink: 0; }

.pk-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 20px 18px;
}
.pk-selected-count { font: 600 12px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-faint-alt); margin-left: auto; }
.pk-kit-select-footer { justify-content: space-between; }
.pk-ghost-button {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: #fff;
  border: 1.5px solid var(--card-border-alt);
  border-radius: 10px;
  padding: 9px 15px;
  cursor: pointer;
}
.pk-post-button {
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  background: var(--seafoam);
  border: none;
  border-radius: 10px;
  padding: 9px 17px;
  cursor: pointer;
}

.gray-text{
  color: gray;
  font-size: .75rem;
}

.translate-container {
  display:none;
  position:fixed;
  top:0;
  left:0;
  width: 80%;
  margin: auto;
  overflow: hidden;
  padding: 20px;
}

.control-panel {
  text-align: center;
  margin-bottom: 20px;
}

.translate-container button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition: 0.3s;
}

.translate-container button:hover {
  background-color: #45a049;
}

#stopButton {
  background-color: #f44336;
}

#stopButton:hover {
  background-color: #da190b;
}

.transcription-box, .translation-box {
  background-color: white;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#interim, #final, #translation {
  min-height: 50px;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
}

@media (max-width: 600px) {
  .translate-container {
      width: 95%;
  }
  
  .translate-container button {
      width: 100%;
  }
}

.scrollable-textarea {
  width: 100%;
  height: 100px;
  resize: none;
  overflow-y: auto;
  padding: .25rem;
  box-sizing: border-box;
  font-size: 1rem;
}

@media screen and (max-width: 600px) {
  .scrollable-textarea {
    font-size: .85rem;
  }
  
}

/* ============================================================
   OP DETAIL PANEL (#statusTable) — context strip + Labor/Parts cards.
   See design_handoff_op_detail_labor_parts.
   ============================================================ */

.op-detail-legacy-clone-source { display: none; }

.op-detail-panel .op-data-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.op-detail-topbar {
  flex-shrink: 0;
  height: var(--topbar-height, 62px);
  background: #fff;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
}

.op-detail-back {
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  background: var(--app-bg) !important;
  flex-shrink: 0;
}
.op-detail-back img { width: 16px; height: 16px; }

.op-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.op-detail-crumb-dim {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint-alt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-detail-crumb-sep { color: var(--card-border-alt); }
.op-detail-crumb-title {
  font: 700 17px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-detail-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.op-detail-status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  border-radius: var(--radius-pill, 999px);
  padding: 6px 13px;
  white-space: nowrap;
  background: var(--pill-scheduled-bg);
  color: var(--pill-scheduled-fg);
}
.op-detail-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.op-detail-status-pill.op-tone-blue  { background: var(--pill-in-progress-bg); color: var(--pill-in-progress-fg); }
.op-detail-status-pill.op-tone-green { background: var(--pill-ready-to-bill-bg); color: var(--pill-ready-to-bill-fg); }
.op-detail-status-pill.op-tone-navy  { background: var(--pill-hauled-bg); color: var(--pill-hauled-fg); }
.op-detail-status-pill.op-tone-red   { background: var(--pill-on-hold-bg); color: var(--pill-on-hold-fg); }
.op-detail-status-pill.op-tone-slate { background: var(--pill-scheduled-bg); color: var(--pill-scheduled-fg); }

.op-detail-topbar .job-complete-button {
  background: var(--seafoam);
  color: #fff;
  border: none;
  border-radius: var(--radius-control);
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  padding: 9px 18px;
  margin: 0;
  line-height: 1.3;
  cursor: pointer;
}

.op-detail-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 26px;
  background: var(--app-bg);
  overflow: auto;
}

/* context strip */
.op-context-strip {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.op-context-boat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--harbor-navy);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.op-context-boat-icon img { filter: brightness(0) invert(1); }
.op-context-boat-block { min-width: 0; }
.op-context-boat-row { display: flex; align-items: center; gap: 9px; }
.op-context-boat-name { font: 700 16px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); }
.op-context-wo { font: 600 12px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--signal-blue); }
.op-context-customer { font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); }
.op-context-divider { width: 1px; height: 38px; background: #EDF1F5; flex-shrink: 0; }
.op-context-op-block { min-width: 0; flex: 1; }
.op-context-op-row { display: flex; align-items: center; gap: 8px; }
.op-context-op-chip {
  font: 700 12px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--seafoam);
  background: rgba(15,140,130,.08);
  border: 1px solid rgba(15,140,130,.3);
  border-radius: 7px;
  padding: 3px 8px;
  flex-shrink: 0;
}
.op-context-op-desc {
  font: 600 13.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.op-context-meta { font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); margin-top: 4px; }
.op-context-totals { display: flex; gap: 16px; flex-shrink: 0; margin-left: auto; }
.op-context-total { text-align: right; }
.op-context-total-num { font: 700 18px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); }
.op-context-total-label { font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint-alt); }
.op-context-total-divider { width: 1px; background: #EDF1F5; }

/* phone width — tabs + sticky action bar (hidden on desktop) */
.op-detail-tabs { display: none; }
.op-detail-tab {
  font: 600 13.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint-alt);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 0 0 10px;
  cursor: pointer;
}
.op-detail-tab.active { color: var(--harbor-navy); border-bottom-color: var(--seafoam); }
.op-detail-tab-count { font: 600 11px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--card-border-alt); }
.op-detail-tab.active .op-detail-tab-count { color: var(--text-faint-alt); }

.op-detail-mobile-bar {
  display: none;
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid var(--card-border);
  padding: 12px 16px 22px;
}
.op-detail-mobile-bar-group { display: flex; gap: 9px; }
.op-detail-mobile-ghost, .op-detail-mobile-primary {
  flex: 1;
  text-align: center;
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  border-radius: 11px;
  padding: 13px 0;
  cursor: pointer;
  min-height: 44px;
}
.op-detail-mobile-ghost { color: #0E7C73; background: rgba(15,140,130,.08); border: 1px solid rgba(15,140,130,.3); }
.op-detail-mobile-primary { color: #fff; background: var(--seafoam); border: none; }

/* labor / parts cards */
.op-detail-cards {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 16px;
}
.op-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.op-card-header {
  display: flex;
  align-items: center;
  padding: 16px 20px 12px;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.op-card-title { font: 700 15px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); }
.op-card-summary { font: 600 11.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-faint-alt); }
.op-card-header-actions { margin-left: auto; display: flex; gap: 8px; }
.op-card-add-button {
  margin-left: auto;
  display: flex; align-items: center; gap: 7px;
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #0E7C73;
  background: rgba(15,140,130,.08);
  border: 1px solid rgba(15,140,130,.3);
  border-radius: 9px;
  padding: 7px 13px;
  cursor: pointer;
}
.op-card-header-actions .op-card-add-button { margin-left: 0; }
.op-card-ghost-button {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: #fff;
  border: 1.5px solid var(--card-border-alt);
  border-radius: 9px;
  padding: 6.5px 12px;
  cursor: pointer;
}
.op-card-body { flex: 1; overflow: auto; padding: 0 20px 18px; min-height: 0; }

/* Labor card — narrative entries */
.op-card-labor .op-card-body { display: flex; flex-direction: column; gap: 9px; }
.labor-entry {
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 13px 15px;
}
.labor-entry.header { display: none; }
.labor-entry > .labor-part-delete-div {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  transition: opacity .12s;
}
.labor-entry:hover > .labor-part-delete-div,
.labor-entry:focus-within > .labor-part-delete-div { opacity: 1; }
.labor-entry-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.labor-entry-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: #E8F0F8; color: var(--signal-blue);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  flex-shrink: 0;
}
.labor-tech { font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--harbor-navy); }
.labor-tech[contenteditable] { outline: none; }
.labor-data.date { font: 500 11.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-faint-alt); }
.labor-entry-latest-chip {
  font: 600 9.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .06em; text-transform: uppercase;
  color: #0E7C73; background: rgba(15,140,130,.08); border: 1px solid rgba(15,140,130,.3);
  border-radius: 5px; padding: 2px 6px;
}
.labor-data.hours { margin-left: auto; font: 700 13px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); white-space: nowrap; }
.labor-data.hours-unit { font: 500 11px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); }
.labor-data.description {
  font: 400 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  line-height: 1.6;
  outline: none;
}
.labor-data.description.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.labor-entry-show-all {
  font: 600 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--signal-blue);
  margin-top: 6px;
  cursor: pointer;
  background: none; border: none; padding: 0;
}
.op-card-labor-footer {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 20px 16px; padding-top: 12px;
  border-top: 1px solid #F1F4F7;
  flex-shrink: 0;
}
.op-card-labor-footer-label { font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint-alt); }
.op-card-labor-footer-total { font: 700 14px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); }
.op-card-labor-footer-split { margin-left: auto; font: 500 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); }

/* Parts card — grid rows */
.op-card-column-header {
  display: grid;
  grid-template-columns: 52px 1fr 52px 52px 30px;
  gap: 10px;
  padding: 6px 20px;
  flex-shrink: 0;
}
.op-card-column-header span { font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint-alt); }
.op-card-column-header span:nth-child(3), .op-card-column-header span:nth-child(4) { text-align: right; }

.part-entry {
  display: grid;
  grid-template-columns: 52px 1fr 52px 52px 30px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid #F1F4F7;
}
.part-entry.header { display: none; }
.part-entry:hover { background: #F8FAFC; }
.part-tech, .part-data.tech {
  font: 600 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  outline: none;
}
.part-table-part-number { min-width: 0; }
.part-table-part-number-row { display: flex; align-items: center; gap: 7px; }
.part-table-part-data {
  font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--harbor-navy);
  outline: none;
}
.part-misc-badge {
  font: 600 9.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .06em; text-transform: uppercase;
  color: #B07816; background: rgba(222,168,52,.12); border: 1px solid rgba(222,168,52,.4);
  border-radius: 5px; padding: 2px 6px;
  flex-shrink: 0;
}
.part-description {
  font: 500 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint-alt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.part-data.quantity { font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); text-align: right; outline: none; }
.part-data.date { font: 500 11.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-faint-alt); text-align: right; }
.labor-part-delete-div { display: flex; justify-content: flex-end; }
.labor-data-delete-button, .parts-data-delete-button {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  opacity: .35;
}
.labor-data-delete-button:hover, .parts-data-delete-button:hover { opacity: 1; background: #FDF0F0; }
.labor-data-delete-button img, .parts-data-delete-button img { width: 14px; height: 14px; }

/* Inline composers — Add labor / Add part (replaces the old slide-in panels) */
.op-composer {
  margin: 0 20px 14px;
  flex-shrink: 0;
  border: 1.5px solid var(--seafoam);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 0 0 3px rgba(15,140,130,.1);
}
.op-composer-title {
  font: 700 15px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
  margin-bottom: 11px;
}
.op-composer-title-sub { font: 600 11.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-faint-alt); margin-left: 8px; }
.op-composer-row { display: flex; gap: 10px; margin-bottom: 11px; }
.op-composer-field { flex: 1; min-width: 0; }
.op-composer-field-narrow { flex: 0 0 100px; }
.op-composer-field label {
  display: block;
  font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  margin-bottom: 5px;
}
.op-composer-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.op-composer-label-row label { margin-bottom: 0; }
.op-composer-select, .op-composer-input, .op-composer-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--card-border-alt);
  border-radius: 9px;
  padding: 8px 11px;
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
}
.op-composer-textarea {
  font: 400 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  line-height: 1.55;
  min-height: 64px;
  resize: vertical;
}
.op-composer-footer { display: flex; gap: 8px; justify-content: flex-end; }
.op-composer-cancel {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
}
.op-composer-save {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  background: var(--seafoam);
  border: none;
  border-radius: 9px;
  padding: 8px 16px;
  cursor: pointer;
}

/* Add part — search + results */
.op-composer-search-wrap { position: relative; margin-bottom: 10px; }
.op-composer-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--card-border-alt);
  border-radius: 10px;
  padding: 10px 13px;
  font: 600 13px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--harbor-navy);
}
.op-composer-search:focus { outline: none; border-color: var(--seafoam); box-shadow: 0 0 0 3px rgba(15,140,130,.1); }
.op-composer-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 11px;
  box-shadow: var(--shadow-popover);
  z-index: 5;
  max-height: 220px;
  overflow: auto;
}
.op-composer-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-top: 1px solid #F1F4F7;
  cursor: pointer;
}
.op-composer-result-row:first-child { border-top: none; }
.op-composer-result-row:hover { background: rgba(15,140,130,.06); }
.op-composer-result-num { font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); }
.op-composer-result-desc { font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-composer-result-stock { font: 600 11px var(--font-mono, 'Spline Sans Mono', monospace); white-space: nowrap; }
.op-composer-result-stock.stock-ok { color: #0E7C73; }
.op-composer-result-stock.stock-low, .op-composer-result-stock.stock-out { color: var(--red-text); }
.op-composer-manual-hint {
  font: 500 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--amber-text);
  margin: -4px 0 10px;
}
.op-composer-misc-toggle {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  background: none;
  border: 1.5px dashed var(--card-border-alt);
  border-radius: 10px;
  padding: 10px 13px;
  font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 10px;
}
.op-composer-misc-toggle:hover { border-color: var(--seafoam); }
.op-composer-misc-toggle.active { border-style: solid; border-color: var(--seafoam); background: rgba(15,140,130,.06); }

/* Job complete confirm */
#job-complete-confirm {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(12,44,73,.45);
  align-items: center;
  justify-content: center;
}
.job-complete-confirm-content {
  width: 420px;
  max-width: 90vw;
  background: #fff;
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-popover);
  padding: 22px;
}
.job-complete-confirm-title { font: 700 17px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); }
.job-complete-confirm-title-es { font: 500 13px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); margin-top: 3px; }
.job-complete-confirm-totals {
  display: flex;
  gap: 12px;
  margin: 16px 0;
  background: #F8FAFC;
  border: 1px solid #EAEFF4;
  border-radius: 11px;
  padding: 13px 15px;
}
.job-complete-confirm-total { flex: 1; }
.job-complete-confirm-total-num { font: 700 16px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); }
.job-complete-confirm-total-label { font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint-alt); }
.job-complete-confirm-total-divider { width: 1px; background: #EDF1F5; }
.job-complete-confirm-footer { display: flex; gap: 9px; }
.job-complete-confirm-not-yet, .job-complete-confirm-yes {
  flex: 1;
  text-align: center;
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  border-radius: 10px;
  padding: 10px 0;
  cursor: pointer;
}
.job-complete-confirm-not-yet { color: var(--harbor-navy); background: #fff; border: 1.5px solid var(--card-border-alt); }
.job-complete-confirm-yes { color: #fff; background: var(--seafoam); border: none; }

/* ============================================================
   OP DETAIL — phone width. Nothing hidden, layout changes instead:
   tabs replace the side-by-side cards, a sticky bar replaces the
   per-card action buttons, rows reflow to one column.
   ============================================================ */
@media screen and (max-width: 600px) {
  .op-detail-panel .op-data-main { height: 100vh; }
  .op-detail-topbar .job-complete-button { display: none; }
  .op-detail-crumb-dim { display: none; }
  .op-context-totals { display: none; }
  .op-context-strip { padding: 12px 14px; gap: 12px; }

  .op-detail-tabs { display: flex; gap: 22px; padding: 0 2px; }

  .op-detail-cards { grid-template-columns: 1fr; }
  .op-card-header { display: none; }
  .op-card-column-header { display: none; }
  .op-card.op-card-labor.op-tab-inactive,
  .op-card.op-card-parts.op-tab-inactive { display: none; }

  .op-composer { margin: 12px 14px; }
  .op-composer-select, .op-composer-input { min-height: 44px; box-sizing: border-box; }

  .labor-data.description.clamped { -webkit-line-clamp: 6; }

  .part-entry {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3px 8px;
    padding: 12px 26px 12px 0;
  }
  .part-entry .part-table-part-number { flex: 1 1 100%; order: 1; }
  .part-entry .part-data.quantity { order: 2; font-size: 11.5px; }
  .part-entry .part-data.quantity::before { content: '×'; }
  .part-entry .part-tech { order: 3; }
  .part-entry .part-tech::after { content: '·'; margin: 0 5px; color: var(--text-faint-alt); }
  .part-entry .part-data.date { order: 4; }
  .part-entry .labor-part-delete-div { position: absolute; top: 10px; right: 0; opacity: .35; }

  .op-detail-mobile-bar { display: block; }
}

.part-popup{
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

#labor-header, #parts-header{
  position: sticky;
  top:0%;
  background-color:white;
}

.parts-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.parts-data-row.header-row {
  font-weight: bold;
  background-color: #f0f0f0;
}

.parts-selector, .qty-selector {
  padding: 5px;
}

.parts-selector {
  flex-grow: 1;
  margin-right: 10px;
}

.qty-selector {
  width: 50px;
  text-align: center;
}

.parts-data-row.header-row {
  position: sticky;
  top: 0;
  z-index: 1;
}

.part-table-part-number{
  grid-column: 2;
  display:flex;
  flex-flow:column;
  justify-content: center;
  align-items: flex-start;
}

custom-tech-select {
  position: relative;
  display: inline-block;
  width: 200px; /* Adjust the width as needed */
}

.custom-select .tech-list {
  display: none;
  position: absolute;
  background-color: white;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
  width: 100%;
  max-height: 200px; /* Adjust the max-height as needed */
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.custom-select .tech-list.open {
  display: block;
}

.custom-select .tech-list .tech-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.custom-select .tech-list .tech-item:hover {
  background-color: #f1f1f1;
}

.custom-select .selected-techs {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  position: relative;
}

.custom-select .selected-techs:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-top-color: #000;
}

.custom-select .selected-techs.open:after {
  border-top-color: transparent;
  border-bottom-color: #000;
}

.tech-item input[type="checkbox"] {
  margin-right: 10px;
}


.haul-launch-container {
  position: relative;
}

.hauling-modal {
  position: absolute;
  left: 130%;
  top: 0;
  display: none;
  flex-flow:column;
  background-color: #fff;
  border: 2px solid var(--nav-background-color);
  padding: .5rem;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
  z-index: 1500;
}

.hauling-modal .tideButton {
  display: block;
  margin-bottom: 5px;
}

.hauling-modal .tideButton:last-child {
  margin-bottom: 0;
}

.tech-row, .header-row{
  display: flex;
}

.tech-row{
  gap: .5rem;
  align-items: center;
}

.header-row{
  position: sticky;
  top: 0;
  background: white;
}

#addModal{
  height: min(900px, 92vh);
}

#customerDatabaseButton{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .5rem;
  width: 50%;
  border-radius: 5px;
  font-weight: bold;
  background-color: var(--nav-background-color);
  color:white;
}

#customerDatabaseButton:hover{
  background-color: var(--app-light-blue);
  color:black
}

#customerDatabaseButton > img{
  filter: invert(1);
}

#customerDatabaseButton:hover > img{
  filter: invert(0);
}

.work-order-form{
  display:flex;
  flex-flow: column;
}

/* .work-order-form label / .work-order-form input (generic, unscoped
   rules from before the WO Create redesign) deleted here — every label and
   input inside this form now has its own specific styling
   (.wo-editors-field, .wo-number-input, #general-work-order-section
   input[type="text"], .work-order-form-dates input[type="date"],
   .wo-estimate-details, etc.), and these two generic rules' specificity
   (class+type, 0,1,1) was beating those single-class rules (0,1,0) —
   forcing borderless underline inputs and centered/row-flex labels across
   the editors panel, dates strip, and General/Storage/Estimate sections. */

.section-header, .section-header > input{
  display:flex;
  font-size: 1.25rem;
  font-weight: bold;
  cursor:pointer;
}

.section-header-container{
  position:relative;
  padding: 20px;
}

.section-header-container > strong::after{
  content: "\25B2"; /* Up arrow */
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  pointer-events: none;
}

.section-header-container.open > strong::after{
  content: "\25BC"; /* Down arrow */
}

.work-order-form-left{
  display: flex;
  flex-flow: column;
  flex: 0 auto;
}

.work-order-form-right{
  display: flex;
  flex-flow: column;
  flex: 0 auto;
}

.work-order-form-customer{
  display:flex;
  flex-flow:column;
  gap: .5rem;
  margin: 1rem;
}

.work-order-form-customer-data.open{
  display:flex;
}

.work-order-form-customer-data{
  display:none;
  margin: .5rem;
}

.work-order-form-customer-data-left{
  flex: 0 50%;
}

.work-order-form-customer-data-right{
  flex: 0 50%;
}

.work-order-form-boat{
  display:flex;
  flex-flow:column;
  gap: .5rem;
  margin: 1rem;
}

.work-order-form-boat-data{
  display:none;
  margin: .5rem;
}

.work-order-form-boat-data.open{
  display:flex;
}

.work-order-form-boat-data-left{
  flex: 0 50%;
}

.work-order-form-boat-data-right{
  flex: 0 50%;
}

.work-order-form-customer-name, .work-order-form-boat-name{
  font-size: 1.25rem;
  font-weight: bold;
}

.work-order-form-storage{
  display: flex;
  flex-flow: column;
  gap: .5rem;
  margin: 1rem;
}

.work-order-form-storage-top{
  display:flex;
  justify-content: flex-start;
  align-items: center;
}

.work-order-form-storage-top-left, .work-order-form-storage-top-right{
  flex:0 50%;
}

#section-header-container-storage {
  position: relative;
  display: flex;
  padding-right: 20px;
  justify-content: flex-start;
  align-items: center;
  width: 60%;
}

#section-header-container-storage::after {
  content: "\25B2"; /* Up arrow */
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  pointer-events: none;
}

#section-header-container-storage.open::after {
  content: "\25BC"; /* Down arrow */
}

#work-order-form-storage-data{
  display:none;
}

#work-order-form-storage-confirm{
  width: 30px;
  height: 30px;
}

/* Was display:flex (an old single-row accordion body) — the price card's
   markup is now .open permanently (see G rail), and .wo-storage-price-card
   is a stacked-block layout (head / lines / total), not a flex row. flex
   here was collapsing all 4 lines onto one row. */
#work-order-form-storage-data.open{
  display:block;
}

#section-header-container-customer,#section-header-container-boat {
  position: relative;
  display: flex;
  padding-right: 20px;
  justify-content: flex-start;
  align-items: center;
  width: 60%;
}

#section-header-container-customer::after, #section-header-container-boat::after {
  content: "\25B2"; /* Up arrow */
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  pointer-events: none;
}

#section-header-container-customer.open::after, #section-header-container-boat.open::after {
  content: "\25BC"; /* Down arrow */
}

#work-order-form-customer-data, #work-order-form-boat-data {
  display:none;
}

#work-order-form-customer-data.open, #work-order-form-boat-data.open {
  display:flex;
}

/* .work-order-form-dates / .work-order-form-dates label / .work-order-
   form-dates label > strong (deleted, all pre-redesign) forced this
   element into a centered flex row with a stray 1rem margin, each label
   to 50% width, and label text to 1.25rem bold — stacking the haul/launch
   fields vertically and centering everything instead of the redesign's
   own .work-order-form-dates{display:flex;...} block (defined later, near
   the G rail CSS) and .wo-dates-field/-label styling actually winning. */

/* .work-order-form-work-orders (deleted) used to force this element — now
   carrying .wo-details-card, the left grid column — into a centered flex
   row with a stray 1rem margin, shrink-wrapping the storage rail's
   contents and fighting the grid's own gap/padding. Layout is now owned
   by .wo-details-card + its block-level children (#general-work-order-
   section keeps its own flex-column rule below, untouched). */

#general-work-order-section{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}

.hidden-form-section{
  display:none;
}

.not-hidden{
  display:flex;
}

.work-order-type{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgrey;
  border: 1px solid black;
  margin-top: 1rem;
  flex-shrink: 0;
  box-sizing: border-box;
}

#work-order-type-select{
  background: none;
  border: none;
  outline:none;
  font-size: 1.5rem;
  width: fit-content;
}

#storage-work-order-section{
  display:none;
  justify-content: space-around;
  align-items: center;
}

/* This id's display:flex is forced via inline style (see the
   #work-order-type-select change handler) with no flex-direction, so it
   defaulted to row + center + space-around — fine for the original 3
   wo-number-cards side by side, but wrong for the G rail's 5 stacked
   elements (toggle+price card, Generate-both button, 3 season cards),
   which were all getting squeezed into a single horizontal row. This is
   the actual root cause behind every "cramped storage rail" report so far.
   Re-scoped through the id so it wins over the rule above regardless of
   the inline style's computed row default. */
#storage-work-order-section {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
}

.flex-row-space-between{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.winter-contract-section, .spring-contract-section{
  display:flex;
  flex-flow: column;
  align-items: flex-start;
}

.estimated-hours-popup {
  display: none; 
  position: fixed;
  z-index: 1100;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, .25);
  justify-content: center;
  align-items: center;
}

.estimated-hours-popup-content {
  background-color: white;
  border-radius: 10px;
  border:4px solid black;
  width: 30%;
  height: fit-content;
}

@media screen and (max-width: 600px) {
  .estimated-hours-popup-content {
    width: 75%;
  }
  
}

.estimated-hours-header{
  width: 100%;
  background: var(--nav-background-color);
  color: white;
  text-align: center;
  font-size: 1.5rem;
  padding: .5rem;
}

.estimated-hours-body{
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}

.estimated-hours-body label{
  margin:0 !important;
}

.estimated-hours-button-row{
  display:flex;
  justify-content: space-around;
  margin:0;
  flex-flow:column;
  gap:.5rem;
  padding:2rem;
}

#submitEstimatedHours{
    font-size: 1.5rem;
    padding: 1rem 3rem;
    border-radius: 10px;
    background:green;
    color:white;
}

#cancelEstimatedHours{
    font-size: 1.5rem;
    padding: 1rem 3rem;
    border-radius: 10px;
    background:red;
    color:white;
}

#estimatedHoursInput{
  font-size: 1.25rem;
  border-radius: 5px;
  width: 50%;
  padding: .5rem;
}

.customer-table-header{
  padding:1rem;
  font-size: 1.5rem;
  font-weight: bold;
}

#myTable th{
  border: 4px solid black;
}

.priority-select{
  width: fit-content;
  font: 600 0.82rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  padding: 6px 8px;
  cursor: pointer;
}

.priority-select:focus-visible{
  outline: none;
  border-color: var(--seafoam);
}

.op-priority-info{
  display: flex;
  align-items: center;
  gap: 6px;
}

.op-priority-info p {
  font: 600 0.78rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0;
  white-space: nowrap;
}

.op-status-info{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Two-line operation row: a full-width top line for the description +
   status + notes, and a roomier meta line below for dates/tech/priority —
   replaces five columns squeezed into one row, which was clipping the
   description and crowding every control together. */
.op-description-work-order-div{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.op-customer-boat-div{
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.op-date-div{
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 18px;
}

.op-tech-select{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  border: 1px solid var(--card-border);
  background: var(--app-bg);
  color: var(--harbor-navy);
  font: 600 0.85rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  padding: .45rem .9rem;
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
}

.op-tech-select:hover {
  border-color: var(--seafoam);
}

.op-tech-select.op-tech-unassigned {
  color: var(--text-faint);
  font-style: italic;
  font-weight: 500;
}

.op-tech-select select{
  font: 600 0.85rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  width: max-content;
  padding: 0.25rem 0.5rem;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--harbor-navy);
}

.op-notes-div{
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}

.op-data-description{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -moz-line-clamp: 2;
  -ms-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  font: 600 0.92rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  margin: 0;
}

.op-data {
  font: 500 0.85rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  margin: 0;
}

.op-data-work-order {
  font: 600 0.8rem var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--signal-blue);
}

.op-start-date-info, .op-scheduled-date-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 0.82rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  margin: 0;
}

.op-start-date-info strong, .op-scheduled-date-info strong {
  color: var(--text-faint-alt);
  font-weight: 600;
}

.schedule-date-info {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  padding: 4px 8px;
  font: 500 0.82rem var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-body);
  background: #fff;
}

.schedule-date-info.schedule-date-unset {
  color: var(--amber-text);
  border-color: var(--amber);
  background: rgba(224,147,15,.06);
}

.op-status-info p {
  font: 500 0.78rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

.op-div-main{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 100%;
  width: 100%;
}

.op-row-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.op-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-top: 10px;
  border-top: 1px solid var(--card-border);
}

@media screen and (max-width: 600px) {
  .op-div-main{
    gap:.5rem;
  }

}

#partsKitTable{
  width: 100%;
}

#partsKitTable th{
  background:black;
}

#parts-container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 350px;
  padding: 0rem 2rem;
  border-top: 2px solid var(--app-deep-blue);
  border-bottom: 2px solid var(--app-deep-blue);
}

.part-header-container{
  padding:2rem;
}

.part-header, .part-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  text-align: center;
  padding: 5px 0;
}

.part-header {
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  background: var(--app-deep-blue);
  color: white;
}

.part-row.exclude {
  background-color: #f8d7da;
}

.part-row div {
  padding: 5px;
}

.print-kit-button{
  color: black !important;
  border: darkgray 2px solid !important;
}

.customer-data-body{
  display: flex;
  height: 100%;
  overflow: hidden;
}

.customer-form-buttons{
  display: flex;
  flex-flow: column;
  height: 100%;
  gap: 1rem;
  padding: 1rem .5rem;
}

.container-add-customer{
  padding: 1rem;
  margin: 1rem;
  height: calc(100vh - 150px);
  display: flex;
  flex-flow: column;
  overflow-y: scroll;
}

.container-add-customer > fieldset{
  padding: 1rem;
}

.customer-data-viewport{
  display: flex;
  flex-flow: column;
  width: 100%;
  overflow: auto;
  padding: 1rem;
  height: calc(100vh - 150px);
}

.form-section{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.form-group{
  display: flex;
  flex-flow: column;
}

.form-group label{
  font-weight: bold;
  font-size: 1rem;;
}

.form-group input{
  border-radius: 10px;
  border: none;
  box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, .5);
  padding: .5rem;
  width: 100%;
  font-size: 1.25rem;
  padding-right: 3rem;
}

.form-group select{
  padding: .5rem;
  border-radius: 10px;
  border: none;
  box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, .5);
  font-size: 1.25rem;
}

.modal-content-small > .form-group{
  margin: 2rem;
}

.small-group{
  max-width: 25%;
}

.add-customer-button{
  background: var(--nav-background-color);
  border: 4px solid white;
  outline: 4px solid var(--nav-background-color);
  color: white;
  width: 70%;
  padding: .5em;
  font-size: 1.5em;
  margin: 2em;
  font-weight: bold;
  border-radius: 10px;
}

.kit-modal-content > .button-row{
  margin: 1em 0em;
  width: 100%;
}

.kit-modal-content > .button-row button{
  padding: .5rem 2rem;
  border-radius: 5px;
  border: none;
  color: white;
  font-size: 1.5rem;
  width: 50%;
}

#add-part-to-kit{
  background: var(--app-medium-blue);
}

#add-to-job{
  background: var(--app-deep-blue);
}

.kit-part-quantity{
  border: none;
  background-color: inherit;
  text-align: center;
}

.op-type-container{
  display: flex;
  flex-flow: column;
  gap: 1rem;
  width: 80%;
  justify-content: center;
  align-items: center;
}

.op-type-container > h4{
  position:sticky;
  top: 0px;
  background: var(--app-bg);
  padding: 9px 1rem;
  width: 100%;
  text-align: center;
  z-index: 10;
  font: 700 11px var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-radius: var(--radius-control);
  margin: 0;
}

.op-category-container > h3, .category-container > h3{
  font-size: 1.5rem;
  background: black;
  color: white;
  width: 100%;
  padding: .5rem;
  border-radius: 5px 5px 0px 0px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 11;
}

#tech-view{
  display:none;
  flex-flow:column;
}

.print-buttons{
  display:flex;
  justify-content: flex-end;
  padding: 1rem 2rem 0rem 0rem;
  width: 100%;
}

.print-table-button{
  display:none;
  background: var(--nav-background-color);
  border-radius: 100%;
  padding: .5rem;
  justify-content: center;
  align-items: center;
  color: white;
  width: 40px;
  height: 40px;
  border: 2px white solid;
  outline: 4px solid var(--nav-background-color);
}

#jobList, #schedule-list, #closedJobList{
  height: calc(100vh - 230px);
}

@media screen and (max-width: 600px) {
  button[tooltip]::before {
    position: initial
}
}

.chat-window {
  width: 400px;
  height: 500px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #f9f9f9;
  margin: 20px;
  z-index: 1300;
  position: fixed;
  bottom: 0;
  right: 0;

}

.chat-messages {
  flex: 1;
  padding: 10px;
  overflow-y: scroll;
  background-color: #fff;
}

.chat-form {
  display: flex;
  border-top: 1px solid #ccc;
  padding: 10px;
  background-color: #fafafa;
}

.chat-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.chat-submit {
  padding: 10px 20px;
  margin-left: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.filter-box li {
  font: 500 0.88rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
}

/* Leaf items (no nested <ul>) are the actual clickable rows — category
   headers (which wrap a nested <ul>) get a quieter, non-interactive look. */
.filter-box li:not(:has(ul)) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-control);
  cursor: pointer;
  color: var(--text-body);
  text-transform: none;
  font-weight: 500;
}

.filter-box li input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--seafoam);
  cursor: pointer;
}

.filter-box li:not(:has(ul)):hover {
  background: rgba(15,140,130,.1);
  color: var(--harbor-navy);
}

.filter-box li:has(ul) {
  font: 700 0.78rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: .5em;
  padding: 4px 10px;
  cursor: default;
}

.filter-box li:has(ul):hover {
  background: none;
}

#change-view ul{
  text-align: center;
}

#date-picker-div{
  display:flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background: white;
  border: var(--nav-background-color);
  border: 4px solid var(--nav-background-color);
  border-radius: 10px;
  width:25%;
  height: 25%;
  padding: 1rem;
  flex-flow: column;
}

#date-picker-div > h2{
  text-decoration: underline;
}

#date-picker{
  font-size: 1.5rem;
  padding: .5rem;
  border-radius: 10px;
}


.waves {
  width: 100%;
  height:15vh;
  margin-bottom: -5px;
  min-height: 150px;
}

.wave1{
  fill: var(--nav-background-color);
  opacity: .25;
}

.wave2{
  fill: white;
  opacity: .5;
}

.wave3{
  fill: var(--nav-background-color);
  opacity: .75;
}

.wave4{
  fill: white;
  opacity: 1;
}

.wave-content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 15s;
}
.parallax > use:nth-child(2) {
  animation-delay: -10s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -2s;
  animation-duration: 8s;
}
.parallax > use:nth-child(4) {
  animation-delay: 0s;
  animation-duration: 5s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}

.small-popup{
  display:none;
  position:fixed;
  right: 10px;
  bottom: 100px;
  width:30%;
  height: 50%;
  background:white;
  z-index: 1400;
  flex-flow: column;
  border: 4px solid var(--nav-background-color);
  border-radius: 10px;
}

#week-count-body{
  display: flex;
  flex-flow: column;
  gap: .5rem;
  margin: auto;
  padding: 1rem;
}


.login-container {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: fit-content;
  background-color: #ffffff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;
}

.login-form-container {
  padding: 50px;
  width: 100%;
  max-width: 400px;
  background-color: #ffffff;
}

.login-container h1 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

/* ============================================================ */
/* Redesign: labeled nav rail (replaces icon-only flyout rail)   */
/* ============================================================ */

#buttonBar.page-select {
  position: relative;
  width: var(--rail-width);
  min-width: var(--rail-width);
  max-width: var(--rail-width);
  background: linear-gradient(180deg, var(--harbor-navy), #0A2135);
  border-right: none;
  padding: 20px 16px;
  align-items: stretch;
  gap: 0;
  font-family: var(--font-body);
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 22px;
}

.rail-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rail-brand-name {
  font: 700 14px var(--font-display);
  color: #fff;
  line-height: 1;
}

.rail-brand-sub {
  font: 500 11px var(--font-body);
  color: #6E8398;
}

#buttonBar.page-select .page-buttons {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#buttonBar.page-select .rail-item {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  border: none;
  outline: none;
  background: transparent;
  box-sizing: border-box;
}

#buttonBar.page-select .rail-item.selected-tide-button {
  background: rgba(95, 208, 196, .14);
  border: none;
  outline: none;
}

#buttonBar.page-select .rail-item.selected-tide-button::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--mist);
}

#buttonBar.page-select .rail-item .icon-brand {
  filter: brightness(0) invert(1);
  opacity: .6;
  pointer-events: none;
  width: 17px;
  height: 17px;
}

#buttonBar.page-select .rail-item.selected-tide-button .icon-brand {
  opacity: 1;
}

#buttonBar.page-select .rail-item .rail-label {
  font: 600 13.5px var(--font-body);
  color: rgba(255, 255, 255, .66);
  white-space: nowrap;
}

#buttonBar.page-select .rail-item.selected-tide-button .rail-label {
  color: #fff;
}

#buttonBar.page-select .rail-item.submenu-open .icon-brand {
  opacity: 1;
}

#buttonBar.page-select .rail-item.submenu-open .rail-label {
  color: #fff;
}

/* ============================================================ */
/* Rail submenu — grouped flyout (desktop) / bottom sheet (mobile) */
/* design_handoff_rail_submenus, variant 1B/2B                  */
/* ============================================================ */

.rail-flyout-scrim {
  display: none;
}

.rail-flyout {
  position: absolute;
  left: calc(var(--rail-width) + 8px);
  top: 20px;
  max-height: calc(100% - 40px);
  width: 278px;
  background: #10304C;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(6, 20, 34, .42);
  padding: 16px 18px 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2000;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.rail-flyout[hidden] {
  display: none;
}

.rail-flyout.open {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .rail-flyout {
    transition: none;
  }
}

.rail-flyout-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  flex-shrink: 0;
}

.rail-flyout-header img {
  filter: brightness(0) invert(1);
  opacity: .75;
}

.rail-flyout-header span {
  font: 700 12px var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}

.rail-flyout-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

.rail-flyout-group-label {
  font: 700 9.5px var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5C7489;
  padding: 10px 8px 4px;
}

.rail-flyout-item {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px;
  border-radius: 9px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
}

.rail-flyout-item img {
  filter: brightness(0) invert(1);
  opacity: .7;
  margin-top: 2px;
  flex-shrink: 0;
}

.rail-flyout-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rail-flyout-item-label-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.rail-flyout-item-label {
  font: 600 13px var(--font-body);
  color: #fff;
}

.rail-flyout-item-desc {
  font: 400 11.5px var(--font-body);
  color: #7D93A6;
  line-height: 1.4;
}

.rail-flyout-item:hover,
.rail-flyout-item:focus-visible {
  background: rgba(95, 208, 196, .12);
  outline: none;
}

.rail-flyout-item.active {
  background: rgba(95, 208, 196, .16);
}

.rail-flyout-item.active::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--mist);
}

.rail-flyout-badge {
  font: 700 10px var(--font-body);
  color: #0A2135;
  background: var(--mist);
  border-radius: 9px;
  padding: 1px 6px;
  flex-shrink: 0;
}

body.scroll-locked {
  overflow: hidden;
}

@media (max-width: 768px) {
  .rail-flyout {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-height: 68%;
    border-radius: 18px 18px 0 0;
    padding: 10px 16px 18px;
    box-shadow: 0 -14px 40px rgba(6, 20, 34, .4);
    transform: translateY(100%);
  }

  .rail-flyout.open {
    transform: translateY(0);
  }

  .rail-flyout-header {
    position: relative;
  }

  .rail-flyout::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .22);
    margin: 0 auto 12px;
    flex-shrink: 0;
  }

  .rail-flyout-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(6, 20, 34, .5);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
  }

  .rail-flyout-scrim[hidden] {
    display: none;
  }

  .rail-flyout-scrim.open {
    opacity: 1;
    pointer-events: auto;
  }

  .rail-flyout-item {
    min-height: 48px;
    align-items: center;
    gap: 12px;
    padding: 7px 8px;
  }

  .rail-flyout-item img {
    width: 18px;
    height: 18px;
    margin-top: 0;
  }

  .rail-flyout-item-label {
    font-size: 14px;
  }

  .rail-flyout-item:active {
    background: rgba(95, 208, 196, .14);
  }

  @media (prefers-reduced-motion: reduce) {
    .rail-flyout {
      transition: none;
    }
  }
}

.rail-user-chip {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.rail-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1B4A6B;
  flex-shrink: 0;
}

.rail-user-chip #currentUserName {
  font: 600 13px var(--font-body);
  color: #fff;
  margin: 0;
}

.login-input {
  width: 100%;
  padding: 15px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}

.login-button {
  width: 100%;
  padding: 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-button:hover {
  background-color: #45a049;
}

.login-google-button {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4285F4;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-google-button img {
  margin-right: 10px;
}

.login-google-button:hover {
  background-color: #357ae8;
}

.tech-login-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  font: 600 13px var(--font-body, inherit);
  color: var(--seafoam, #0F8C82);
  text-decoration: none;
}

.tech-login-link:hover {
  text-decoration: underline;
}

.login-switch {
  margin-top: 20px;
  font-size: 14px;
  color: #555;
}

.login-switch a {
  color: #4CAF50;
  text-decoration: none;
  cursor: pointer;
}

.login-switch a:hover {
  text-decoration: underline;
}

.login-signup-container {
  display: none;
}

@media screen and (max-width: 768px) {
  .login-container {
    flex-direction: column;
    box-shadow: none;
    border-radius: 0;
  }
}

#assignment-check, .no-assignments{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

#no-role-div{
  display: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

#log-out-button-no-role, #reload-button-no-role{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  font-size: 1.5rem;
  color: white;
  border-radius: 10px;
  margin: 1rem;
  width: 25%;
}

#log-out-button-no-role{
  background: red;
}

#reload-button-no-role{
  background: var(--nav-background-color);
}

#splash-screen{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  position:fixed;
  top:0;
  left:0;
  background: white;
  z-index: 1000;
}

.complete-row{
  display: none;
}

.status-info {
  position: relative;
}

.exclude-checkbox {
  opacity: 0;
  visibility: hidden;
  margin: 5px;
  width:0px !important;
  height:0px !important;
  transition: opacity 0.3s ease, visibility 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.status-info:hover .exclude-checkbox {
  opacity: 1;
  visibility: visible;
  width:40px !important;
  height:40px !important;
}

.exclude-checkbox:checked {
  opacity: 1;
  visibility: visible;
  width:40px !important;
  height:40px !important;
}

#jobList .job-item {
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

#jobList .status-info {
  flex: 0 20%;
  max-width: fit-content;
  min-width: 25px;
  padding: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#reset-exclude{
  display:none;
  justify-content: center;
  align-items: center;
  padding:.5rem;
  font-size: 1rem;
  font-weight:bold;
  background:var(--app-deep-blue);
  color:white;
  border:none;
  border-radius: 10px;
  margin:10px;
}

.filtered{
  display:none;
}

#shrinkwrap-menu-button{
  display:none;
  padding: .5rem;
  margin: 1rem 0rem;
  font-size: 1.5rem;
  border: none;
  background-color: var(--nav-background-color);
  color: white;
  border-radius: 10px;
  outline: 2px solid var(--nav-background-color);
  outline-offset: 2px;
  transition: outline-offset 0.3s ease-in-out background-color 0.3s ease-in-out;
}

#shrinkwrap-menu-button:hover{
  outline-offset: 5px;
  background-color: var(--app-light-blue);
}

#shrinkwrap-menu{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.5);
  z-index: 1500;
  justify-content: center;
  align-items: center;
}

.shrinkwrap-menu-content{
  display:flex;
  flex-flow:column;
  gap:1rem;
  background:white;
  border-radius: 10px;
}


#boat-popup-list{
  height: 100vh;
  overflow-y: scroll;
}

select.update-form {
  width: 100%;
  padding: 4px;
  font-size: 16px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
}

/* Style the option elements */
select.update-form option {
  padding: 10px;
  font-size: 16px;
  background-color: white;
  color: #333;
}

/* Style the optgroup label */
select.update-form optgroup {
  font-weight: bold;
  color: white;
  background-color: black;
}

/* Style the options inside an optgroup */
select.update-form optgroup option {
  padding-left: 20px; /* Indent the options */
}

select.update-form option:hover {
  background-color: #ddd;
}

select.update-form:focus {
  outline: 2px solid #007BFF;
}

/* Status select on the operation editor (#Update panel) reads as a colored
   pill matching the read-only status pills elsewhere — see
   syncUpdateStatusTone() in app.js. */
#updateStatus.update-form {
  font: 600 13px var(--font-body);
  border: none;
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  width: auto;
  display: inline-block;
}

#updateStatus.op-tone-blue  { background: var(--pill-in-progress-bg); color: var(--pill-in-progress-fg); }
#updateStatus.op-tone-green { background: var(--pill-ready-to-bill-bg); color: var(--pill-ready-to-bill-fg); }
#updateStatus.op-tone-navy  { background: var(--pill-hauled-bg); color: var(--pill-hauled-fg); }
#updateStatus.op-tone-red   { background: var(--pill-on-hold-bg); color: var(--pill-on-hold-fg); }
#updateStatus.op-tone-slate { background: var(--pill-scheduled-bg); color: var(--pill-scheduled-fg); }

#shrinkwrap-menu-inside{
  display: flex;
  flex-flow: column;
  gap: .5rem;
  padding: 1rem;
}

#shrinkwrap-menu-inside button{
  padding: .5rem;
  border-radius: 10px;
  border: none;
  background: var(--app-deep-blue);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
}

.shrinkwrap-hours-input{
  padding: 1rem;
  border-radius: 10px;
  font-size: 1.25rem;
}

/* ============================================================
   BILLING SURFACE (#billing-modal / billingModal()) — full-screen
   working surface, layout 1a. See design_handoff_billing/README.md.
   Step 1 only: visual restyle, same four saved fields, same two
   handlers (#billing-labor, #billing-parts, #billing-description,
   #billing-notes / Save draft, Record billing). No suggestions,
   variance banner, new persisted fields, or reconciliation panel —
   those are later, independently-shippable steps.
   ============================================================ */

#billing-modal.billing-surface {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--app-bg);
  z-index: 2000;
}

/* The fixed-position "new version available" banner (showUpdateNotification(),
   z-index 9999) sits above this surface's z-index 2000 and clips its topbar —
   same app-wide bug documented for .main-body. Reserve the same 40px. */
body.has-update-banner #billing-modal.billing-surface {
  top: 40px;
  height: calc(100vh - 40px);
}

.billing-topbar {
  flex-shrink: 0;
  height: var(--topbar-height, 62px);
  background: #fff;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
}

.billing-back.exitButton {
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  background: var(--app-bg) !important;
  flex-shrink: 0;
}
.billing-back img { width: 16px; height: 16px; }

.billing-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.billing-crumb-dim {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint-alt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.billing-crumb-sep { color: var(--card-border-alt); }
.billing-crumb-title {
  font: 700 17px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billing-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.billing-status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  border-radius: var(--radius-pill, 999px);
  padding: 6px 13px;
  white-space: nowrap;
  background: var(--pill-ready-to-bill-bg);
  color: var(--pill-ready-to-bill-fg);
}
.billing-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.billing-status-pill.billing-tone-navy { background: var(--pill-hauled-bg); color: var(--pill-hauled-fg); }

.billing-ghost-btn {
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: #fff;
  border: 1.5px solid var(--card-border-alt);
  border-radius: var(--radius-control);
  padding: 9px 16px;
  margin: 0;
  cursor: pointer;
}

.billing-primary-btn {
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  background: var(--seafoam);
  border: none;
  border-radius: var(--radius-control);
  padding: 9px 18px;
  margin: 0;
  cursor: pointer;
}

#billing-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 26px 26px;
  background: var(--app-bg);
  overflow: auto;
}

.billing-context-strip {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.billing-context-boat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--harbor-navy);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.billing-context-boat-icon img { filter: brightness(0) invert(1); }
.billing-context-boat-block { min-width: 0; }
.billing-context-boat-row { display: flex; align-items: center; gap: 9px; }
.billing-context-boat-name { font: 700 16px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); }
.billing-context-wo { font: 600 12px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--signal-blue); }
.billing-context-customer { font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); }
.billing-context-divider { width: 1px; height: 38px; background: #EDF1F5; flex-shrink: 0; }
.billing-context-op-block { min-width: 0; flex: 1; }
.billing-context-op-row { display: flex; align-items: center; gap: 8px; }
.billing-context-op-chip {
  font: 700 12px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--seafoam);
  background: rgba(15,140,130,.08);
  border: 1px solid rgba(15,140,130,.3);
  border-radius: 7px;
  padding: 3px 8px;
  flex-shrink: 0;
}
.billing-context-op-desc {
  font: 600 13.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.billing-context-meta { font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); margin-top: 4px; }
.billing-context-totals { display: flex; gap: 16px; flex-shrink: 0; margin-left: auto; }
.billing-context-total { text-align: right; }
.billing-context-total-num { font: 700 18px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); }
.billing-context-total-label { font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint-alt); }
.billing-context-total-divider { width: 1px; background: #EDF1F5; }

.billing-columns {
  flex: 1;
  min-height: 0;
  min-width: 960px;
  display: grid;
  grid-template-columns: 1fr 392px;
  gap: 20px;
}

.billing-evidence-col, .billing-rail {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* learned the hard way: default flex-shrink:1 on cards inside a scrolling
   column stops the column from scrolling and clips each card's own footer */
.billing-evidence-col > *, .billing-rail > * { flex: none; }

.billing-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.billing-card-header {
  display: flex;
  align-items: baseline;
  padding: 16px 20px 12px;
  gap: 10px;
  flex-wrap: wrap;
}
.billing-card-title { font: 700 15px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); }
.billing-card-summary { font: 600 11.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-faint-alt); }
.billing-card-subtotal { margin-left: auto; font: 700 14px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); }
.billing-card-body { padding: 0 20px 18px; }
.billing-empty-state { font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); padding: 6px 0 14px; }

/* Labor card — narrative entries */
.billing-labor-row {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 13px 15px;
}
.billing-labor-row + .billing-labor-row { margin-top: 9px; }
.billing-labor-row-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.billing-labor-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: #E8F0F8; color: var(--signal-blue);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  flex-shrink: 0;
}
.billing-labor-tech { font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--harbor-navy); }
.billing-labor-date { font: 500 11.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-faint-alt); }
.billing-labor-hours-block { margin-left: auto; text-align: right; }
.billing-labor-hours { font: 700 13px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); white-space: nowrap; }
.billing-labor-hours-unit { font: 500 10px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); text-transform: uppercase; letter-spacing: .04em; }
.billing-labor-amount-block { text-align: right; min-width: 66px; }
.billing-labor-amount { display: block; font: 700 13px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); white-space: nowrap; }
.billing-labor-rate-sub { font: 500 10px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); white-space: nowrap; }
.billing-labor-desc {
  font: 400 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  line-height: 1.6;
}

/* Parts card — grid rows */
.billing-part-columns-header {
  display: grid;
  grid-template-columns: 1fr 46px 60px 70px;
  gap: 10px;
  padding: 6px 0;
}
.billing-part-columns-header span { font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint-alt); }
.billing-part-columns-header span:not(:first-child) { text-align: right; }

.billing-part-row {
  display: grid;
  grid-template-columns: 1fr 46px 60px 70px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid #F1F4F7;
}
.billing-part-row:first-child { border-top: none; }
.billing-part-number-row { display: flex; align-items: center; gap: 7px; }
.billing-part-number {
  font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--harbor-navy);
}
.billing-part-misc-badge {
  font: 600 9.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .06em; text-transform: uppercase;
  color: #B07816; background: rgba(222,168,52,.12); border: 1px solid rgba(222,168,52,.4);
  border-radius: 5px; padding: 2px 6px;
  flex-shrink: 0;
}
.billing-part-desc {
  font: 500 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint-alt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.billing-part-qty { font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); text-align: right; }
.billing-part-unit { font: 500 11.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-faint-alt); text-align: right; }
.billing-part-line { font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); text-align: right; }

/* Right rail — the fields that actually save */
.billing-rail-card-header { padding: 16px 18px 2px; }
.billing-rail-card-title { font: 700 14px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); display: flex; align-items: center; gap: 8px; }
.billing-rail-card-sub { font: 500 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); margin-top: 4px; line-height: 1.5; }
.billing-rail-card-body { padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 14px; }

.billing-chip-blue {
  font: 700 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .03em;
  color: var(--pill-in-progress-fg);
  background: var(--pill-in-progress-bg);
  border-radius: 6px;
  padding: 2px 7px;
}

.billing-field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.billing-field label {
  font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
}
.billing-field-math {
  font: 500 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint-alt);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.billing-field-input-row { display: flex; align-items: center; gap: 8px; }
.billing-dollar-input {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--card-border-alt);
  border-radius: var(--radius-control);
  padding: 10px 13px;
  flex: 1;
  min-width: 0;
}
.billing-dollar-input:focus-within { border-color: var(--seafoam); box-shadow: 0 0 0 3px rgba(15,140,130,.1); }
.billing-dollar-input span { font: 600 13px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-faint-alt); }
.billing-dollar-input input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font: 700 14px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--harbor-navy);
  padding: 0;
}
.billing-use-chip {
  flex-shrink: 0;
  font: 600 11.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: #0E7C73;
  background: rgba(15,140,130,.08);
  border: 1px solid rgba(15,140,130,.3);
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.billing-use-chip:hover { background: rgba(15,140,130,.14); }

/* Variance banner (§4) — advisory only, never blocks Record billing */
.billing-variance-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #FFF9EE;
  border: 1px solid #F3E3C4;
  border-radius: var(--radius-card);
  padding: 13px 16px;
}
.billing-variance-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--amber, #E0930F);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
}
.billing-variance-text { min-width: 0; }
.billing-variance-headline { font: 700 13px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--amber-text, #B5790C); }
.billing-variance-detail { font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif); color: #8A6D3C; margin-top: 3px; line-height: 1.5; }

/* Description card ghost actions (§4) */
.billing-ghost-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.billing-ghost-action {
  font: 600 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: #fff;
  border: 1.5px solid var(--card-border-alt);
  border-radius: 9px;
  padding: 7px 12px;
  cursor: pointer;
}
.billing-ghost-action:hover { border-color: var(--seafoam); }

/* Invoice reconciliation (§5) — lazy, read-only, never blocks Save/Record */
.billing-recon-match {
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--green-text, #1F8B4D);
  padding: 4px 0 14px;
}
.billing-recon-row {
  display: grid;
  grid-template-columns: 1fr 110px 110px 110px;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid #F1F4F7;
  align-items: center;
}
.billing-recon-row:first-child { border-top: none; }
.billing-recon-header span {
  font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint-alt);
}
.billing-recon-row:not(.billing-recon-header) span {
  font: 600 13px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--harbor-navy);
}
.billing-recon-row span:not(:first-child) { text-align: right; }
.billing-recon-diff { color: var(--amber-text, #B5790C) !important; }
.billing-recon-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #F1F4F7; }
.billing-recon-mark-btn {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  background: var(--seafoam);
  border: none;
  border-radius: var(--radius-control);
  padding: 9px 16px;
  cursor: pointer;
}
.billing-recon-mark-btn:disabled { background: var(--card-border-alt); color: var(--text-faint-alt); cursor: not-allowed; }
.billing-recon-reconciled-note { font: 500 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); margin-top: 10px; }

/* Record card (§3) — dashed, additive fields, always shown, "—" when unset */
.billing-record-card { border-style: dashed; box-shadow: none; }
.billing-record-rows { display: flex; flex-direction: column; gap: 9px; }
.billing-record-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.billing-record-row span:first-child { font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-muted); }
.billing-record-row span:last-child { font: 600 12px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); text-align: right; }

.billing-job-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
}
.billing-job-total-row span:last-child {
  font: 700 20px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--seafoam);
}

.billing-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--card-border-alt);
  border-radius: 9px;
  padding: 10px 12px;
  font: 400 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  line-height: 1.55;
  resize: vertical;
}
.billing-textarea:focus { outline: none; border-color: var(--seafoam); box-shadow: 0 0 0 3px rgba(15,140,130,.1); }

.wo-invoice-preview-content {
  width: 480px;
  max-width: 90vw;
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-popover);
}

.wo-invoice-preview-content #entryTitle {
  font: 700 18px var(--font-display);
  color: var(--harbor-navy);
  margin: 0;
}

.wo-invoice-preview-print-btn {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-control);
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
}
.wo-invoice-preview-print-btn:disabled {
  color: var(--text-faint-alt);
  border-color: var(--card-border);
  cursor: not-allowed;
  opacity: .6;
}

.wo-invoice-preview-body {
  padding: 4px 26px 22px;
}

.wo-invoice-preview-loading, .wo-invoice-preview-empty {
  font: 500 13.5px var(--font-body);
  color: var(--text-muted);
  text-align: center;
  padding: 24px 0;
}

.wo-invoice-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 14px;
}

.wo-invoice-preview-customer {
  font: 600 14px var(--font-body);
  color: var(--text-body);
}

.wo-invoice-preview-boat {
  font: 500 12px var(--font-body);
  color: var(--text-faint);
}

.wo-invoice-preview-status-pill {
  font: 600 11.5px var(--font-body);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--pill-awaiting-parts-bg);
  color: var(--pill-awaiting-parts-fg);
  white-space: nowrap;
}

.wo-invoice-preview-line {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font: 500 13px var(--font-body);
  color: var(--text-body);
}

.wo-invoice-preview-line span:last-child {
  font: 600 13px var(--font-mono);
}

.wo-invoice-preview-total-row {
  display: flex;
  justify-content: space-between;
  padding: 11px 0 0;
  margin-top: 8px;
  border-top: 1.5px solid var(--card-border);
  font: 700 15px var(--font-body);
  color: var(--harbor-navy);
}

.wo-invoice-preview-total-row span:last-child {
  font: 700 17px var(--font-mono);
  color: var(--seafoam);
}

.wo-invoice-preview-due {
  font: 500 12px var(--font-body);
  color: var(--text-faint);
  margin-top: 8px;
  text-align: right;
}

#billing-description{
  min-height: 150px;
}

.tab {
  padding: 10px 100px;
  cursor: pointer;
  border: none;
  background-color: #f1f1f1;
  margin: 0 !important;
  margin-right: 2px;
  border-color: var(--nav-background-color);
  font-size: 1.5em;
  border: 2px solid var(--nav-background-color);
  border-bottom:none;
}

.tab.active {
  background-color: var(--nav-background-color);
  color:white;
}

#billing-filter-section{
  display: flex;
  flex-flow: column;
  border: 2px solid var(--app-deep-blue);
  border-radius: 5px;
  margin: 1rem 0rem;
  padding: .5rem;
}

#billing-filter-section > h3{
  text-align: center;
  border-bottom: 1px solid var(--nav-background-color);
}

#clear-filters{
  background-color: var(--app-medium-blue);
  color: white;
  padding: .25rem 1rem;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  width: 100%;
  border: none;
  border-radius: 5px;
}

.centered{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 1rem;
  padding: .5rem;
}

.centered li{
  width: 100%;
}

.centered li, .centered button{
  padding:0;
  margin:0;
}

.centered button{
  width: 100%;
  border: none;
  background: var(--app-deep-blue);
  color: white;
  padding: .25rem;
  font-size: 1rem;
  border-radius: 5px;
  margin: 0;
}

.collapsed{
  height: 65px;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.update-work-order-info-div{
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: .5rem 0rem;
  width: 100%;
  min-height: 80px;
}

.update-work-order-div{
  display:flex;
}

#editWorkOrderForm{
  flex: 0 40%;
}

.boat-name {
  color: var(--app-deep-blue);
}

.field-div {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
}

.description-div,
.start-div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.description-div label,
.start-div label {
  margin: 0;
}

input {
  padding: 5px;
  border-radius: 10px;
  font-size: 1.25rem;
  width: fit-content;
}

.update-work-order-button-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  width: 100%;
}

.update-button,
.cancel-button {
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 75%;
  font-size: 1.5rem;
}

.update-button {
  background-color: var(--app-deep-blue);
  color: white;
}

.cancel-button {
  background-color: red;
  color: white;
}

.update-data input{
  padding: 1px;
}

#Update{
  top: 75px;
}

.checkbox-item{
  display: grid;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  grid-template-columns: 1fr 8fr;
}

.checkbox-item input[type="checkbox"] {
  flex-shrink: 0;
  accent-color: var(--nav-background-color);
  width: 40px !important;
}

.checkbox-item label {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin:0;
  padding:0;
}

.move-operations-div{
  flex: 0 60%;
}

.move-operations-div .label-pair{
  flex-flow: column;
  padding: 1rem;
  border: 1px solid black;
  margin: 1rem;
}

.move-operations-div .label-pair label{
  font-size: 1rem;
  font-weight: bold;
  margin:0 !important;
}

#moveOperationSelectContainer{
  display: flex;
  flex-flow: column;
  gap: .5rem;
}

.move-operation-new-work-order{
  display:flex;
  flex-flow:column;
  gap:.5rem;
}

.move-operation-work-order-title{
  margin: 1rem;
  display: flex;
  flex-flow: column;
  gap: 1rem;
  justify-content: center;
  border: 2px solid var(--app-deep-blue);
  border-radius: 5px;
  padding: 1rem;
}

.move-operation-work-order-title input{
  border: 2px solid var(--app-medium-blue);
  border-radius: 5px;
}

#move-operation-work-order-button{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  border-radius: 10px;
  border: none;
  background-color: var(--app-deep-blue);
  color: white;
  font-size: 1rem;
  font-weight: bold;
  outline: 2px solid var(--app-deep-blue);
  outline-offset: -2px;
}

#move-operation-work-order-button:hover{
  outline-offset: 2px;
  background-color: var(--app-light-blue);
  color: var(--nav-background-color);
}

#move-operation-work-order-button img{
  filter: invert(1);
  transform: scale(1.15)
}

#move-operation-work-order-button:hover img{
  filter: invert(0);
}

.move-operation-container{
  border: 2px solid var(--nav-background-color);
  border-radius: 5px;
  padding: 1rem;
  margin: 1rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.flex-pair{
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  width: 75%;
}

.flex-pair label{
  margin: 0;
  padding: 0;
}

#move-operations-button{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  border-radius: 10px;
  border: none;
  background-color: var(--nav-background-color);
  color: white;
  font-size: 1rem;
  font-weight: bold;
  width: 100%;
  font-size: 1.5rem;
}

#move-operations-button:hover{
  background-color: var(--app-light-blue);
  color: var(--nav-background-color);
}

.move-operation-container label{
  margin: 0;
  padding: 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid black;
  width: 100%;
  padding: .5rem;
  text-align: center;
}

.not-interactive{
  pointer-events: none;
  display: none;
}

#op-code-buttons{
  display: flex;
  justify-content: center;
  border-bottom: 2px solid var(--app-deep-blue);
  padding: .25rem;
}

#op-code-buttons button{
  padding: .5rem;
  border-radius: 10px;
  border: none;
  background: var(--nav-background-color);
  color: white;
  font-size: 1.25rem;
  margin: 1rem;
  flex: 1;
  justify-content: center;
  align-items: center;
  max-width: 150px;
}

#op-code-buttons button:hover{
  background: var(--app-light-blue);
  color:var(--nav-background-color);
}

.selected-op-button{
  background: var(--app-medium-blue) !important;
}

.op-button-highlight{
  background: green !important;
}

#techSelectModal{
  width: 460px;
  display: flex;
  flex-flow: column;
}

@media screen and (max-width: 600px){
  #techSelectModal{
    width:100%;
  }
}

/* design_handoff_wo_ops_rows_tech_select — everything below is scoped under
   #techSelectModal on purpose: .tech-row / .tech-name / .tech-avatar are
   also used, completely unrelated, by the Scheduler week-view board
   (createTechRow()/updateTechProgressBar() in app.js, which does a bare
   document.querySelector('.tech-row[data-tech="..."]') lookup). Unscoped
   rules here would restyle the Scheduler board by accident. */
/* Not var(--harbor-navy) — #entryTitle lives inside .button-exit-row, whose
   background is the app-wide dark navy header (var(--nav-background-color))
   shared by every modal. Navy-on-navy was reading as nearly invisible in
   testing; white matches how every other modal's title already renders on
   this same header. */
#techSelectModal #entryTitle {
  font: 800 18px var(--font-display);
  color: #fff;
}
#techSelectModal .tech-select-op-context {
  font: 500 12.5px var(--font-body);
  color: var(--text-muted);
  padding: 12px 22px 0;
}
#techSelectModal .tech-select-op-context:empty { display: none; }

.tech-select-container{
  display: flex;
  flex-flow: column;
  height: 100%;
  min-height: 0;
}

#techSelectModal .tech-select-estimated-hours-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px 0;
}
#techSelectModal .tech-select-estimated-hours-row label {
  font: 700 10px var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
#techSelectModal #techSelectEstimatedHours {
  width: 86px;
  height: 38px;
  padding: 0 11px;
  background: #fff;
  border: 1px solid #D8E0E8;
  border-radius: 9px;
  font: 700 14px var(--font-mono);
  color: var(--harbor-navy);
}

#techSelectModal .tech-select-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  margin: 16px 22px 0;
  padding: 0 12px;
  background: #F7F9FB;
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
#techSelectModal .tech-select-filter input {
  border: none;
  background: none;
  width: 100%;
  font: 400 13px var(--font-body);
  color: var(--text-body);
}
#techSelectModal .tech-select-filter input:focus { outline: none; }

#techSelectModal .tech-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 22px 0;
}
#techSelectModal .tech-selected-chips:empty { padding: 0; }
#techSelectModal .tech-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #F4FAF9;
  border: 1px solid #A9D3CF;
  border-radius: 999px;
  padding: 5px 9px 5px 5px;
  font: 600 12.5px var(--font-body);
  color: var(--harbor-navy);
}
#techSelectModal .tech-selected-chip-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  font: 700 8.5px var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
#techSelectModal .tech-selected-chip-remove {
  cursor: pointer;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1;
}
#techSelectModal .tech-selected-chip-remove:hover { color: #B23A30; }

#techSelectBody{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 22px 0;
}

#techSelectModal .tech-select-list {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}
#techSelectModal .tech-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid #EDF1F5;
  cursor: pointer;
}
#techSelectModal .tech-row:last-child { border-bottom: none; }
#techSelectModal .tech-row:hover { background: #F7FAFC; }
#techSelectModal .tech-row.selected { background: #F4FAF9; }
#techSelectModal .tech-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px var(--font-body);
  color: #fff;
}
#techSelectModal .tech-row-info { flex: 1; min-width: 0; }
#techSelectModal .tech-name {
  font: 600 13px var(--font-body);
  color: var(--harbor-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#techSelectModal .tech-load {
  font: 400 11.5px var(--font-body);
  color: var(--text-faint);
  margin-top: 1px;
}
#techSelectModal .tech-checkbox { position: absolute; opacity: 0; pointer-events: none; }
#techSelectModal .tech-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: none;
  border: 1.5px solid #C9D4DE;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px var(--font-body);
  color: transparent;
}
#techSelectModal .tech-row.selected .tech-check {
  background: var(--seafoam);
  border-color: var(--seafoam);
  color: #fff;
}

#techSelectModal .tech-yard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  margin: 8px 22px 14px;
  padding: 0 12px;
  background: #F7F9FB;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  cursor: pointer;
}
#techSelectModal .tech-yard-row.selected { background: #EAF0F6; border-color: #BFD5EE; }
#techSelectModal .tech-yard-row.selected .tech-check {
  background: var(--harbor-navy);
  border-color: var(--harbor-navy);
  color: #fff;
}
#techSelectModal .tech-yard-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--harbor-navy);
  color: #fff;
  font: 700 11px var(--font-body);
}

.tech-select-button-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 22px 18px;
  border-top: 1px solid #EDF1F5;
  background: #FAFCFD;
  position: sticky;
  bottom: 0;
}
#techAssignButton {
  flex: 1;
  height: 44px;
  background: var(--seafoam);
  border: 1px solid var(--seafoam);
  border-radius: 10px;
  font: 700 13.5px var(--font-body);
  color: #fff;
}
#techAssignButton:disabled {
  background: #EAEEF2;
  border-color: var(--card-border);
  color: var(--text-faint-alt);
  cursor: not-allowed;
}
/* Its role moved onto the pinned .tech-yard-row + #techAssignButton's
   dynamic label (see populateTechSelectModal() / the click handler on
   #techAssignButton in app.js) — kept in the DOM only because
   assignYardToJob() is still wired to a click, just from elsewhere now. */
#yardAssignButton {
  display: none;
}
#yardRemoveButton {
  height: 44px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #EBC0BC;
  border-radius: 10px;
  font: 700 13px var(--font-body);
  color: #B23A30;
}

#jobDisplayContainer{
  flex-flow:column;
  gap:1rem;
  padding:1rem;
  max-height: 80vh;
  overflow-y: auto;
  border: 2px solid var(--app-deep-blue);
  border-radius: 5px;
  flex:0 70%;
}

.tech-job-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
  padding: .5rem;
  border-radius: 10px;
}

.tech-job-row p{
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tech-assign-button{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  border-radius: 10px;
  border: none;
  background-color: var(--nav-background-color);
  color: white;
  font-size: 1rem;
  font-weight: bold;
  width: 100%;
  font-size: 1.5rem;
}

#daily-log-div{
  flex-flow: column;
}

#daily-log-list{
  padding: 1rem;
  display: flex;
  flex-flow: column;
  gap: 2rem;
  width:100%;
}

.daily-log-box{
  flex-flow: column;
  width: 100%;
}

.daily-log-date-container{
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 2px solid var(--nav-background-color);
}

.daily-log-date-select{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.daily-div-main{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 1rem;
  width: 100%;
}

.tech-date-daily{
  flex: 0 20%;
}

.op-code-daily{
  flex: 0 20%;
}

.labor-parts-count-daily{
  flex: 0 40%;
}

.hours-status-daily{
  flex: 0 20%;
}

#daily-log-job-list{
  display:none;
  flex-flow: column;
  width: 100%;
}

#daily-view{
  overflow-y:scroll;
}

.active-daily-view, .active-log-view{
  background-color: var(--nav-background-color);
  color:white;
}

.log-view-select-buttons{
  display:flex;
  border: 2px var(--nav-background-color) solid;
  border-radius: 12px;
  justify-content: space-between;
  padding: .25rem;
}

.log-view-select-buttons button{
    flex: 1;
    padding: .25rem;
    border: none;
    font-size: 1.25rem;
    margin: 0;
    border: 2px solid var(--nav-background-color);
}

#daily-view-button{
  border-radius: 10px 0px 0px 10px;
}

#weekly-view-button{
  border-inline: none;
}

#monthly-view-button{
  border-radius: 0px 10px 10px 0px;
}

.left-button{
  border-radius: 10px 0px 0px 10px;
}

.right-button{
  border-radius: 0px 10px 10px 0px;
}

.daily-log-view-button{
  padding: .25rem .5rem;
  border: none;
  font-size: 1.5rem;
  margin: 0;
  flex:1;
}

.log-view-button-div{
  gap: 1rem;
  display: flex;
  flex-flow: column;
  flex:0 25%;
}

.labor-count-jobs {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: s-resize;
  transition: all 0.3s ease;
}

.labor-count-jobs.expanded{
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.job-count{
  display: none;
}

#weekly-view{
  display:none;
  flex-flow:column;
}

#weekly-log-list .tech-container{
  display:flex;
}

.week-view-row{
  display: none;
}

.show-week-row{
  display:flex !important;
}

.hide-hours{
  display:none;
}

.update-boat-popup{
  position: relative;
  display: none;
  flex-flow: column;
  gap: 1rem;
  border: 2px solid var(--nav-background-color);
  border-radius: 10px;
  background: white;
  z-index: 2200;
  justify-content: center;
  align-items: center;
}

.update-boat-button{
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 75%;
  font-size: 1.5rem;
  background-color: var(--app-medium-blue);
}

.update-boat-select{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  width: 80%;
}

#update-boat-list button{
  width: 100%;
  padding: .5rem;
  border-radius: 10px;
  border: 2px solid;
  background-color: var(--app-light-blue);
  font-size: 1.5rem;
}

/* Photo Popup Styles */
.photo-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.photo-popup-content {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}

.photo-popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

.photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-height: 85vh;
  overflow-y: auto;
}

.photo-card {
  position: relative;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* Button Container */
.photo-buttons {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 5px;
}

.photo-card:hover .photo-buttons {
  display: flex;
}

/* Buttons */
.photo-buttons button {
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.photo-buttons button:hover {
  background-color: #0056b3;
}

/* Image Modal */
.image-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.image-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  overflow: hidden;
}

.image-modal-content img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.image-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}

#photoModal{
  z-index: 3000;
}

.photo-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: red;
  color: white;
  font-size: 12px;
  font-weight: bold;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  visibility: hidden;
}

.photo-date{
  position: fixed;
}

#barcodeScanner{
  z-index: 2000;
}

.camera-btn{
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: .75rem;
  border-radius: 10px;
  border: 2px solid black;
  font-weight: bold;
}

.note-icon:hover { color: var(--nav-background-color); cursor: pointer; }

.has-notes{
  filter:brightness(0) saturate(100%) invert(15%) sepia(95%) saturate(6932%) hue-rotate(359deg) brightness(94%) contrast(113%);
}

.active-work-order{
  position: sticky;
  top: 0;
}

.large-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100; }
.large-modal-inner { background: white; color: #eee; width: min(1200px, 95vw); height: min(90vh, 900px); margin: 4vh auto; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; }
.large-modal-header { display: flex; gap: .75rem; align-items: center; padding: 1rem; border-bottom: 1px solid #333; }
.large-modal-header h2 { margin: 0; flex: 1; color:black; }
#declined-search { width: 320px; }
#declined-jobList { flex: 1; overflow: auto; padding: .5rem 1rem; }

/* ============================================================ */
/* Work Order Creation redesign — collapses the #Add modal's
   always-open input grids into a read-only context strip + a
   two-column layout, and (further down) turns #opCodeTable / #job
   from stacked modals into inline panels. General Work Order path
   only — Storage Contract keeps its existing UI, reachable via the
   same segmented control, unredesigned for now. */
/* ============================================================ */

.wo-create-modal {
  width: min(1180px, 95vw);
  height: min(900px, 92vh);
  background: #fff;
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-frame);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 200ms ease, margin 200ms ease;
}

/* G — Storage Contract's rail (toggle+price card, Generate-both, 3 season
   cards) needs meaningfully more left-column width than General's simple
   Category/Short Desc/WO# stack. Widen the whole modal a bit and give the
   grid a wider left track instead of cramming it into General's 392px. */
.wo-create-modal--storage {
  width: min(1320px, 96vw);
}

.wo-create-modal--storage .wo-create-columns {
  grid-template-columns: 460px 1fr;
}

/* .modal-inside's own height:91% doesn't account for the topbar + type-bar
   rows also sharing this flex column, so it (and everything below it) kept
   growing past the modal's own declared height. flex:1 + min-height:0 lets
   it correctly claim just the remaining space and scroll internally. */
.wo-create-modal .modal-inside {
  flex: 1;
  height: auto;
  min-height: 0;
  overflow-y: auto;
}

/* Side-by-side instead of an overlap: while the op picker or op-detail
   panel is open (see syncWoPickerOpenState in app.js), shrink the form to
   the left so the Operations list stays visible alongside it rather than
   getting covered by the picker sliding in from the right.
   The width is computed FROM the picker's own width (--wo-picker-panel-width,
   set once below and reused by .op-picker-modal .op-picker-panel) so the two
   can never drift out of sync and overlap again if either is resized. */
:root {
  --wo-picker-panel-width: 900px;
}

#Add.wo-picker-open {
  justify-content: flex-start;
  padding-left: 40px;
}

#Add.wo-picker-open .wo-create-modal {
  width: min(calc(100vw - var(--rail-width, 236px) - var(--wo-picker-panel-width) - 100px), 1180px);
  min-width: 420px;
}

/* See syncNavbarHiddenForAdd() in app.js. */
body.wo-add-open .navbar {
  display: none;
}

/* Removed everywhere on desktop/tablet per explicit confirmation that the
   lost page titles (Work Orders/Dashboard/Haul-Launch/Fuel/Mooring, the
   screens that have no title of their own) are an accepted tradeoff.
   #current-page keeps its text via .innerHTML regardless (confirmed one
   read site at app.js ~14780 isn't affected by display:none). Kept visible
   below the mobile breakpoint — #mobile-menu-button inside it is the only
   way to open the sidebar nav on mobile. */
@media screen and (min-width: 601px) {
  .navbar {
    display: none;
  }
}

.wo-create-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  flex-shrink: 0;
  min-height: 62px;
  box-sizing: border-box;
  padding: 0 22px;
  background: #fff;
  border-bottom: 1px solid var(--card-border);
  border-radius: var(--radius-frame) var(--radius-frame) 0 0;
}

.wo-create-breadcrumb {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wo-create-topbar-actions {
  flex-shrink: 0;
}

.wo-create-breadcrumb {
  margin: 0;
  font: 600 15px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
}

.wo-create-breadcrumb-sep {
  margin: 0 4px;
  color: var(--text-faint-alt);
}

.wo-create-breadcrumb strong {
  font: 700 15px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
}

.wo-create-topbar-actions {
  display: flex;
  gap: 10px;
}

/* Also carries .exitButton (old circular 40x40 "X" close button) in the
   markup — width/height/border-radius/margin/line-height must be
   explicitly overridden here since that rule never gets touched otherwise. */
.wo-create-cancel-btn {
  width: auto;
  height: auto;
  margin: 0;
  line-height: normal;
  padding: 9px 16px;
  font: 600 0.85rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.wo-create-cancel-btn:hover {
  border-color: var(--text-faint);
}

.wo-create-done-btn {
  padding: 9px 18px;
  font: 600 0.85rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  background: var(--seafoam);
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
}

.wo-create-done-btn:hover {
  background: #0c7a71;
}

/* Type segmented control — drives the existing #work-order-type-select
   (kept in the DOM, visually hidden) so every change-listener and
   downstream read of its .value keeps working unmodified. */
.wo-type-segmented {
  display: inline-flex;
  gap: 2px;
  background: var(--app-bg);
  border-radius: var(--radius-control);
  padding: 3px;
}

.wo-type-btn {
  padding: 8px 16px;
  font: 600 0.85rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.wo-type-btn.active {
  background: #fff;
  color: var(--harbor-navy);
  box-shadow: 0 1px 3px rgba(16,42,67,.1);
}

.wo-type-select-hidden {
  display: none;
}

/* Context strip */
.wo-context-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  margin: 0 0 18px;
}

.wo-context-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.wo-context-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--harbor-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wo-context-icon img {
  filter: invert(1);
  opacity: .9;
}

.wo-context-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wo-context-boat-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.wo-context-boat-name {
  font: 700 16px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
  white-space: nowrap;
}

.wo-context-mooring {
  font: 600 12px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--signal-blue);
}

.wo-context-customer {
  font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wo-context-divider {
  width: 1px;
  height: 34px;
  background: var(--card-border);
  flex-shrink: 0;
}

.wo-context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.wo-context-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  border-radius: 9px;
  padding: 6px 11px;
}

.wo-context-chip-label {
  font: 700 9.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
}

.wo-context-chip-value {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #3D4F60;
}

.wo-context-change-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font: 600 0.8rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--seafoam);
  background: rgba(15,140,130,.08);
  border: 1px solid rgba(15,140,130,.3);
  border-radius: var(--radius-control);
  cursor: pointer;
  white-space: nowrap;
}

.wo-context-change-btn:hover {
  background: rgba(15,140,130,.16);
}

/* Old navy "Select Customer" button — its job is now done by
   .wo-context-change-btn (see the click handler in app.js), but the
   element itself stays in the DOM since several other places call
   .click() on it directly. !important is required: those call sites also
   toggle it via inline style.display, which would otherwise win. */
#customerDatabaseButton {
  display: none !important;
}

/* #customerData ("Customer List" modal) still used the legacy table/input
   styling. Scoped to #customerData specifically — #myTable/.customer-table-header/
   #customer-search are shared selectors with other tables (#kitTable,
   #tech-table, #customerEmailTable) elsewhere in the app. */
#customerData .modal-content {
  width: min(640px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-frame);
  overflow: hidden;
}

#customerData .modal-inside {
  overflow-y: auto;
  min-height: 0;
}

#customerData #customer-search {
  box-sizing: border-box;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-control);
  font: 500 0.92rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  padding: 10px 14px;
}

#customerData #customer-search:focus {
  outline: none;
  border-color: var(--seafoam);
}

#customerData .new-customer-row #addCustomer {
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-control);
  background: #fff;
  padding: 8px 10px;
  cursor: pointer;
}

#customerData #myTable {
  border: none;
  border-collapse: collapse;
  font-size: 0.92rem;
}

#customerData .customer-table-header {
  font: 700 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--app-bg);
  border: none;
  padding: 8px 14px;
}

#customerData #myTable th {
  border: none;
  background: var(--app-bg);
  color: var(--text-faint);
  text-align: left;
}

#customerData #myTable td {
  padding: 11px 14px;
  color: var(--text-body);
  font-weight: 500;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--card-border);
}

#customerData #myTable tr.header,
#customerData #myTable tr:hover {
  background: rgba(15,140,130,.06);
  cursor: pointer;
}

/* Editors panel: the existing customer/boat detail inputs + storage/date
   sections — collapsed behind "Change customer / boat" once a boat is on
   the record; expanded by default while nothing is selected yet. */
.wo-editors-panel {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  margin: 0 0 18px;
}

.wo-editors-panel.wo-editors-collapsed {
  display: none;
}

/* Two-column body */
.wo-create-columns {
  display: grid;
  grid-template-columns: 392px 1fr;
  gap: 20px;
  align-items: start;
}

@media screen and (max-width: 900px) {
  .wo-create-columns {
    grid-template-columns: 1fr;
  }
}

.wo-details-card, .wo-ops-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  /* Grid items default to min-width:auto, which lets a child's intrinsic
     content width (long numbers, an input+button row that won't wrap)
     force this card past its grid track — the whole reason the storage
     rail was overflowing the modal horizontally. min-width:0 lets the
     column's own width win and pushes any remaining overflow into wrapping
     instead of a horizontal scrollbar. */
  min-width: 0;
  overflow-x: hidden;
}

/* The Operations list grows with every op added — let it scroll internally
   with a capped height instead of growing the whole modal past the
   viewport. Header and "+ Add operation" stay outside the scroll area. */
.wo-ops-card {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
}

#activeJobs {
  flex: 1;
  min-height: 0;
  max-height: 420px;
  overflow-y: auto;
}

.wo-ops-card-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.wo-ops-card-title {
  font: 700 15px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
}

.wo-ops-card-count {
  font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
}

.wo-ops-card-hours {
  margin-left: auto;
  font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-muted);
}

#selectOpCode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
  margin-top: 10px;
  padding: 12px;
  font: 600 0.88rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--seafoam);
  background: rgba(15,140,130,.05);
  border: 1.5px dashed rgba(15,140,130,.4);
  border-radius: var(--radius-control);
  cursor: pointer;
}

#selectOpCode:hover {
  background: rgba(15,140,130,.1);
}

#selectOpCode img {
  width: 18px;
  height: 18px;
  filter: invert(33%) sepia(54%) saturate(1000%) hue-rotate(140deg);
}

/* Work order details card (General Work Order path only — scoped to
   #general-work-order-section so the Storage Contract sections, which
   share .flex-row-space-between, are left exactly as they were). */
#general-work-order-section {
  width: 100%;
  gap: 16px !important;
}

#general-work-order-section .flex-row-space-between {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

#general-work-order-section label {
  font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

#general-work-order-section select,
#general-work-order-section input[type="text"] {
  width: 100%;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-control);
  padding: 9px 12px;
  font: 500 0.92rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  background: #fff;
}

#general-work-order-section select:focus,
#general-work-order-section input[type="text"]:focus {
  outline: none;
  border-color: var(--seafoam) !important;
}

/* "Work Order:" row becomes the amber/dashed WO# sub-card */
#general-work-order-section .flex-row-space-between:has(#generalWorkOrder) {
  background: var(--app-bg);
  border: 1px dashed var(--card-border);
  border-radius: var(--radius-control);
  padding: 12px;
  margin-top: 4px;
}

#general-work-order-section #generalWorkOrder {
  background: #fff;
  font-family: var(--font-mono, 'Spline Sans Mono', monospace);
}

#general-work-order-section #generalWorkOrder:placeholder-shown:not(:focus) {
  border-color: var(--amber) !important;
}

/* This used to force the button full-width on its own row below the WO#
   input (width:100% + margin-top:6px), but the actual markup has always
   put it inline with the input inside .wo-number-row (flex row, same
   structure winter/spring/shrinkwrap already use via .wo-generate-btn
   alone) — width:100% on a flex sibling of a flex:1 input forced both to
   overflow the card. Dropped the conflicting sizing so this button behaves
   like its 3 siblings; kept the signal-blue color as this card's accent. */
#general-work-order-button {
  padding: 10px 14px;
  font: 600 0.85rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  background: var(--signal-blue);
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
  white-space: nowrap;
}

#general-work-order-button:hover {
  background: #0f4f8c;
}

/* ============ Work order # card (D2 — 4 states) ============ */
.wo-number-card {
  background: var(--app-bg, #F8FAFC);
  border: 1px solid #EAEFF4;
  border-radius: var(--radius-control, 12px);
  padding: 14px;
  margin-top: 10px;
}

.wo-number-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.wo-number-card-label {
  font: 600 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #5A6B7B;
}

.wo-number-status-pill {
  font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  padding: 3px 9px;
  border-radius: var(--radius-pill, 999px);
}

.wo-status-pending { color: #B5790C; background: #FBEFD8; }
.wo-status-assigned { color: #1F8B4D; background: #E2F4EA; }
.wo-status-blocked { color: #8A5B14; background: #FBEFD8; }
.wo-status-failed { color: #B03030; background: #FBEDEC; }

.wo-number-row {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.wo-number-input {
  flex: 1;
  min-width: 0;
  border: 1.5px dashed #CBD6E0;
  border-radius: 9px;
  padding: 10px 12px;
  font: 600 13px var(--font-mono, 'Spline Sans Mono', monospace);
  color: #C2CCD6;
  background: #fff;
}

.wo-number-input:not(:placeholder-shown) {
  border: 1.5px solid rgba(15,140,130,.35);
  background: rgba(15,140,130,.05);
  color: #0C2C49;
  font-weight: 700;
}

.wo-generate-btn {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  background: var(--signal-blue, #1462B8);
  border: none;
  border-radius: 9px;
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.wo-generate-btn:hover { opacity: .92; }

.wo-loading-inline {
  display: none;
  align-items: center;
  gap: 8px;
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #5A6B7B;
  background: #F1F4F7;
  padding: 10px 14px;
  border-radius: 9px;
  margin: 0;
  white-space: nowrap;
}

.wo-spinner {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #C2CCD6;
  border-top-color: var(--signal-blue, #1462B8);
  animation: wo-spin .7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes wo-spin { to { transform: rotate(360deg); } }

.wo-number-hint {
  font: 400 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #9AA8B5;
  margin-top: 9px;
  line-height: 1.4;
}

.wo-number-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 10px;
  padding: 11px 13px;
  margin-top: 10px;
  font: 400 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  line-height: 1.45;
}

.wo-number-message-failed {
  background: #FBEDEC;
  border: 1px solid #F2D7D5;
  color: #B36B6B;
}

.wo-number-message-blocked {
  background: #FBEFD8;
  border: 1px solid #EFDCB2;
  color: #A8853F;
}

.wo-number-message-title {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  display: block;
  margin-bottom: 2px;
}

.wo-number-message-failed .wo-number-message-title { color: #8C2B2B; }
.wo-number-message-blocked .wo-number-message-title { color: #8A5B14; }

.wo-number-message-action {
  margin-left: auto;
  flex-shrink: 0;
  font: 700 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.wo-number-message-failed .wo-number-message-action { color: #fff; background: #B03030; }
.wo-number-message-blocked .wo-number-message-action { color: #8A5B14; background: #fff; border: 1px solid #EAD9B4; }

/* ==================================================================== */
/* Redesign: nav rail utilities folded in + docked Tide/Calendar panels */
/* (design_handoff_dailylog_calendar_tides)                             */
/* ==================================================================== */

#buttonBar.page-select .rail-add-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 12px;
  border-radius: var(--radius-control);
  border: 1px dashed rgba(95, 208, 196, .35);
  background: rgba(95, 208, 196, .08);
  box-sizing: border-box;
}

#buttonBar.page-select .rail-add-btn img {
  filter: brightness(0) invert(1);
  opacity: .85;
  width: 15px;
  height: 15px;
  pointer-events: none;
}

#buttonBar.page-select .rail-add-btn .rail-label {
  font: 600 13px var(--font-body);
  color: var(--mist);
}

#buttonBar.page-select .rail-today-group {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#buttonBar.page-select .rail-group-header {
  font: 700 10px var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7C93A8;
  padding: 0 12px 7px;
}

#buttonBar.page-select .rail-glance-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-control);
  border: none;
  outline: none;
  background: transparent;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 120ms ease;
}

#buttonBar.page-select .rail-glance-row:hover {
  background: rgba(255, 255, 255, .07);
}

#buttonBar.page-select .rail-glance-row .icon-brand {
  filter: brightness(0) invert(1);
  opacity: .6;
  width: 17px;
  height: 17px;
  pointer-events: none;
  flex-shrink: 0;
}

#buttonBar.page-select .rail-glance-row:hover .icon-brand {
  opacity: .85;
}

#buttonBar.page-select .rail-glance-row .rail-label {
  font: 600 13.5px var(--font-body);
  color: rgba(255, 255, 255, .66);
  white-space: nowrap;
}

#buttonBar.page-select .rail-glance-row:hover .rail-label {
  color: #fff;
}

#buttonBar.page-select .rail-glance-value {
  margin-left: auto;
  font: 600 11px var(--font-mono);
  color: #8FD8CE;
  letter-spacing: .02em;
  white-space: nowrap;
}

#buttonBar.page-select .rail-glance-count {
  display: none;
  margin-left: auto;
  font: 700 11px var(--font-body);
  color: #A7BACB;
  background: rgba(255, 255, 255, .10);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
}

.rail-user-chip {
  position: relative;
}

.rail-signout-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.rail-signout-btn img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
  opacity: .7;
  pointer-events: none;
}

.rail-signout-btn:hover {
  border-color: rgba(230, 112, 112, .45);
  background: rgba(214, 69, 69, .18);
}

.rail-signout-btn:hover img {
  opacity: 1;
}

/* ---------------- Docked panel shell (Tide / Calendar) ---------------- */

.dock-panel {
  position: fixed;
  top: 88px;
  right: -420px;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--panel-radius);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-frame);
  overflow: hidden;
  z-index: 9999;
  transition: right .3s ease-in-out;
  font-family: var(--font-body);
}

.dock-panel.open {
  right: 24px;
}

.dock-panel-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px 14px;
  flex-shrink: 0;
}

.dock-panel-title {
  font: 700 16px var(--font-display);
  color: #fff;
  line-height: 1;
}

.dock-panel-title-dark {
  color: var(--harbor-navy);
}

.dock-panel-eyebrow {
  font: 600 10px var(--font-mono);
  color: var(--mist);
  letter-spacing: .08em;
  margin-top: 3px;
}

.dock-panel .closeButton {
  margin-left: auto;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 13px var(--font-body);
  cursor: pointer;
}

.dock-panel .closeButton img { display: none; }

.dock-panel .closeButton.closeButton-light {
  background: #fff;
  border: 1px solid var(--card-border-alt);
  color: var(--text-faint);
}

/* ---------------- Tide panel ---------------- */

.tide-panel-header {
  background: var(--panel-header-gradient);
}

.tide-panel-body {
  padding: 18px 20px 0;
  overflow-y: auto;
}

.tide-panel .tide-date-container {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.tide-panel .tide-date-button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--card-border-alt);
  border-radius: 9px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.tide-date-display {
  flex: 1;
  text-align: center;
}

.tide-weekday {
  font: 800 17px var(--font-display);
  color: var(--harbor-navy);
}

.tide-fulldate {
  font: 500 12px var(--font-body);
  color: var(--text-faint);
  margin-top: 1px;
}

.tide-date-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.tide-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.tide-tile {
  border: 1px solid var(--card-border);
  background: #F8FAFC;
  border-radius: 13px;
  padding: 14px 16px;
}

.tide-tile-label {
  font: 700 10px var(--font-mono);
  letter-spacing: .1em;
}

.tide-tile-high .tide-tile-label { color: var(--seafoam); }
.tide-tile-low .tide-tile-label { color: var(--signal-blue); }

.tide-tile-value {
  font: 800 24px var(--font-display);
  color: var(--harbor-navy);
  margin-top: 7px;
}

.tide-ampm {
  font: 700 13px var(--font-display);
  color: var(--text-faint);
}

.tide-caption {
  font: 400 11.5px var(--font-body);
  color: var(--text-faint-alt);
  margin-top: 12px;
  padding-bottom: 18px;
}

.tide-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
}

.tide-error-title,
.tide-error-body {
  background: #FFF8EC;
  border: 1px solid #F2E2C4;
  border-left: 3px solid #F0A24A;
  border-radius: 10px;
}

.tide-error-title {
  font: 700 13px var(--font-body);
  color: #8A5B14;
  padding: 12px 14px 0;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}

.tide-error-body {
  font: 400 12.5px var(--font-body);
  color: #7A6233;
  line-height: 1.5;
  padding: 3px 14px 12px;
  border-top: none;
  border-radius: 0 0 10px 10px;
  margin-top: -1px;
}

.panel-retry-btn,
.calendar-reconnect-btn {
  font: 600 12.5px var(--font-body);
  border-radius: 10px;
  padding: 8px 16px;
  cursor: pointer;
}

.panel-retry-btn {
  color: var(--text-muted);
  border: 1.5px solid #D5DEE7;
  background: #fff;
}

.tide-waves {
  margin-top: auto;
  line-height: 0;
  flex-shrink: 0;
}

.tide-panel .waves {
  height: 64px;
  min-height: 64px;
  margin-bottom: 0;
}

.tide-panel .wave1 { fill: rgba(15, 140, 130, .18); opacity: 1; }
.tide-panel .wave2 { fill: rgba(15, 140, 130, .30); opacity: 1; }
.tide-panel .wave3,
.tide-panel .wave4 { fill: var(--harbor-navy); opacity: 1; }

/* ---------------- Calendar panel ---------------- */

.calendar-panel-header {
  background: #fff;
  border-bottom: 1px solid var(--card-border);
}

.calendar-status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.calendar-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C2CCD6;
  flex-shrink: 0;
}

.calendar-status-dot-connected {
  background: var(--green-text);
}

#calendar-status-text {
  font: 600 11px var(--font-body);
  color: var(--text-faint);
}

#calendar-pop-out-box .events,
#eventsContainer {
  padding: 6px 0 14px;
  overflow-y: auto;
  flex: 1;
}

.date-section {
  padding: 12px 20px 2px;
  color: inherit;
}

.date-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-section-label {
  font: 700 10.5px var(--font-mono);
  letter-spacing: .1em;
  color: var(--text-faint);
  white-space: nowrap;
}

.date-section-today-tag {
  font: 700 9.5px var(--font-mono);
  letter-spacing: .08em;
  color: var(--seafoam);
  background: #EAF5F3;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.date-section-hairline {
  flex: 1;
  height: 1px;
  background: #EEF2F6;
}

.event-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
}

.event-item-chip {
  flex-shrink: 0;
  font: 600 10.5px var(--font-mono);
  border-radius: 7px;
  padding: 4px 8px;
  margin-top: 1px;
  white-space: nowrap;
}

.event-item-chip-timed {
  background: #F1F4F7;
  color: #3D4F60;
}

.event-item-chip-allday {
  background: #EAF5F3;
  color: var(--seafoam);
}

.event-item-title {
  font: 600 13px var(--font-body);
  color: var(--text-body);
  line-height: 1.4;
}

.calendar-empty {
  flex: 1;
  padding: 34px 24px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}

.calendar-empty-title {
  font: 700 14.5px var(--font-display);
  color: var(--harbor-navy);
}

.calendar-empty-body {
  font: 400 12.5px var(--font-body);
  color: var(--text-faint);
  line-height: 1.5;
}

.calendar-reconnect-btn {
  margin-top: 10px;
  color: #fff;
  background: var(--seafoam);
  border: none;
  box-shadow: 0 4px 12px rgba(15, 140, 130, .25);
}

@media (max-width: 600px) {
  .dock-panel { display: none; }
}

/* ==================================================================== */
/* Redesign: Daily Log — tech groups, status pills, day/week/month      */
/* (design_handoff_dailylog_calendar_tides)                             */
/* ==================================================================== */

#daily-log-div .daily-log-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#daily-log-div .daily-log-topbar {
  height: var(--topbar-height);
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  flex-wrap: wrap;
}

#daily-log-div .daily-log-title {
  font: 700 19px var(--font-display);
  color: var(--harbor-navy);
  white-space: nowrap;
}

#daily-log-div .daily-log-date-select {
  display: flex;
  align-items: center;
  gap: 4px;
}

#daily-log-div .daily-log-date-button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--card-border-alt);
  border-radius: 9px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

#daily-log-div .daily-log-date-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#daily-log-div .daily-log-date-label {
  font: 700 13.5px var(--font-display);
  color: var(--harbor-navy);
  min-width: 112px;
  text-align: center;
  white-space: nowrap;
}

#daily-log-div .daily-log-today-btn {
  font: 600 12.5px var(--font-body);
  color: var(--seafoam);
  background: none;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}

#daily-log-div .log-view-select-buttons {
  display: flex;
  background: #EEF2F6;
  border: none;
  border-radius: var(--radius-control);
  padding: 3px;
}

#daily-log-div .log-view-select-buttons button {
  flex: 1;
  font: 600 12.5px var(--font-body);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
}

#daily-log-div .log-view-select-buttons button.active-log-view,
#daily-log-div .log-view-select-buttons button.active-daily-view {
  background: #fff;
  color: var(--harbor-navy);
  box-shadow: 0 1px 2px rgba(16, 42, 67, .08);
}

#daily-log-div .daily-log-topbar-spacer {
  flex: 1;
  min-width: 8px;
}

#daily-log-div .daily-log-search {
  flex: 0 1 240px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  background: var(--app-bg);
  border: 1px solid var(--card-border-alt);
  border-radius: var(--radius-control);
  padding: 0 12px;
  color: var(--text-faint);
}

#daily-log-div .daily-log-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font: 500 13px var(--font-body);
  color: var(--text-body);
}

#daily-log-div .daily-log-search input::placeholder {
  color: #9AA8B5;
}

#daily-log-div .daily-log-summary {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 4px;
  flex-wrap: wrap;
}

#daily-log-div .daily-log-summary-date {
  font: 700 10.5px var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

#daily-log-div .daily-log-summary-sep {
  width: 1px;
  height: 14px;
  background: #DEE5EC;
}

#daily-log-div .daily-log-summary-text {
  font: 600 12.5px var(--font-body);
  color: #3D4F60;
}

#daily-log-div .daily-log-summary-hours {
  font: 700 12px var(--font-mono);
  color: var(--harbor-navy);
}

#daily-log-div #daily-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--app-bg);
}

#daily-log-div #daily-log-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 22px 20px;
}

#daily-log-div .tech-container {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

#daily-log-div .tech-header {
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 11px;
  padding: 11px 18px;
  border-bottom: 1px solid #EEF2F6;
  background: #F8FAFC;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

#daily-log-div .tech-header p {
  margin: 0;
}

#daily-log-div .tech-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #EAF5F3;
  color: var(--seafoam);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px var(--font-body);
  flex-shrink: 0;
}

#daily-log-div .tech-name-header {
  font: 700 14px var(--font-display);
  color: var(--harbor-navy);
}

#daily-log-div .tech-counts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

#daily-log-div .job-count {
  display: inline;
  font: 600 12px var(--font-body);
  color: var(--text-faint);
  white-space: nowrap;
}

#daily-log-div .hour-count-value {
  font: 700 13px var(--font-mono);
  color: var(--harbor-navy);
}

#daily-log-div .tech-rows {
  display: flex;
  flex-direction: column;
}

#daily-log-div .daily-item {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 128px 64px 64px;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid #F2F5F8;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  box-shadow: none;
  background: #fff;
  cursor: pointer;
  transition: background 120ms ease;
}

#daily-log-div .daily-item:last-child {
  border-bottom: none;
}

#daily-log-div .daily-item:hover {
  background: #FAFBFC;
  box-shadow: none;
}

#daily-log-div .daily-item-main {
  min-width: 0;
}

#daily-log-div .daily-item-op {
  font: 700 13.5px var(--font-body);
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#daily-log-div .daily-item-cust {
  font: 500 12px var(--font-body);
  color: var(--text-faint);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#daily-log-div .daily-item-labor {
  min-width: 0;
  font: 400 12.5px var(--font-body);
  color: #5A6B7B;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#daily-log-div .daily-item-parts {
  font: 500 12px var(--font-body);
  color: var(--text-faint);
}

#daily-log-div .daily-item-hours {
  font: 700 13.5px var(--font-mono);
  color: var(--harbor-navy);
  text-align: right;
}

#daily-log-div .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11.5px var(--font-body);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

#daily-log-div .status-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

#daily-log-div .status-pill-info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
#daily-log-div .status-pill-success { background: var(--status-success-bg); color: var(--status-success-fg); }
#daily-log-div .status-pill-amber   { background: var(--status-amber-bg);   color: var(--status-amber-fg); }
#daily-log-div .status-pill-danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
#daily-log-div .status-pill-neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

/* Week window: date column instead of the 5-column detail grid */
#daily-log-div .daily-item.daily-item-week {
  grid-template-columns: 82px 1fr 60px;
}

#daily-log-div .daily-item-date {
  font: 600 11.5px var(--font-mono);
  color: var(--text-faint);
}

#daily-log-div .daily-item-op-compact {
  min-width: 0;
  font: 700 13px var(--font-body);
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* By job: flat list, tech chip per row */
#daily-log-div #daily-log-job-list {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  margin: 0 22px 20px;
  overflow: hidden;
  flex-shrink: 0;
}

#daily-log-div .daily-job-row {
  display: grid;
  grid-template-columns: 108px 1.1fr 128px 64px;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid #F2F5F8;
  cursor: pointer;
  transition: background 120ms ease;
}

#daily-log-div .daily-job-row:last-child {
  border-bottom: none;
}

#daily-log-div .daily-job-row:hover {
  background: #FAFBFC;
}

#daily-log-div .tech-chip {
  display: inline-block;
  font: 600 11.5px var(--font-body);
  color: var(--seafoam);
  background: #EAF5F3;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Empty state */
#daily-log-div .daily-log-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 38px 24px;
  text-align: center;
}

#daily-log-div .daily-log-empty-title {
  font: 700 15px var(--font-display);
  color: var(--harbor-navy);
}

#daily-log-div .daily-log-empty-caption {
  font: 400 13px var(--font-body);
  color: var(--text-faint);
}

#daily-log-div .daily-log-empty-back-btn {
  margin-top: 10px;
  font: 600 12.5px var(--font-body);
  color: #3D4F60;
  border: 1.5px solid #D5DEE7;
  background: #fff;
  border-radius: var(--radius-control);
  padding: 8px 16px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {
  #daily-log-div .daily-item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "main hours"
      "status status";
  }
  #daily-log-div .daily-item-labor,
  #daily-log-div .daily-item-parts { display: none; }
  #daily-log-div .daily-item-main { grid-area: main; }
  #daily-log-div .daily-item-hours { grid-area: hours; }
  #daily-log-div .daily-item-status { grid-area: status; }
  #daily-log-div .daily-log-search { display: none; }
}

/* ============================================================
   ESTIMATES (Type: Estimate, inside the shared #Add work-order
   creation modal) — design_handoff_estimates_mooring_pesticide
   ============================================================ */

.wo-create-breadcrumb-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.wo-status-pill {
  flex-shrink: 0;
  font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.wo-status-pill-draft     { color: #5A6B7B; background: #EAEEF2; }
.wo-status-pill-sent      { color: var(--signal-blue); background: #E5EFFB; }
.wo-status-pill-accepted  { color: var(--green-text); background: #E2F4EA; }
.wo-status-pill-declined  { color: var(--red-text); background: #FBE6E6; }
.wo-status-pill-expired   { color: var(--amber-text); background: #FBEFD8; }
/* Storage Contract lifecycle (H1-H3): draft/sent reuse the pairs above;
   completed = "needs staff review", signed = fully executed. */
.wo-status-pill-completed { color: var(--seafoam); background: rgba(15,140,130,.1); }
.wo-status-pill-signed    { color: var(--green-text); background: #E2F4EA; }

.wo-create-print-btn {
  padding: 9px 16px;
  font: 600 0.85rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.wo-create-print-btn:hover { border-color: var(--text-faint); }

/* Stubbed actions (e.g. Contract Builder's Print/Send — later phases)
   need to visually read as inert, not just non-clickable. */
.wo-create-print-btn:disabled,
.wo-create-done-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.wo-create-print-btn:disabled:hover { border-color: var(--card-border); }
.wo-create-done-btn:disabled:hover { background: var(--seafoam); }

/* Estimate details (left column) */
.wo-estimate-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* .wo-estimate-details and .hidden-form-section (display:none, defined
   earlier in this file) have equal specificity, so source order alone
   made .wo-estimate-details always win — #estimate-details-section
   rendered permanently visible, overlapping General/Storage, on every
   fresh "New Work Order" open (syncEstimateModeVisibility() only runs on
   an explicit tab switch, never on initial open). Re-scoped through the
   id to guarantee this wins regardless of source order. */
#estimate-details-section.hidden-form-section {
  display: none;
}

.wo-estimate-details .flex-row-space-between {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.wo-estimate-details label {
  font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.wo-estimate-details input[type="text"],
.wo-estimate-details textarea {
  width: 100%;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-control);
  padding: 9px 12px;
  font: 500 0.92rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  background: #fff;
  box-sizing: border-box;
}

.wo-estimate-details textarea { resize: vertical; line-height: 1.5; }

.wo-estimate-details input:focus,
.wo-estimate-details textarea:focus,
.wo-estimate-details select:focus {
  outline: none;
  border-color: var(--seafoam) !important;
}

.wo-estimate-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wo-estimate-field select {
  width: 100%;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  padding: 9px 12px;
  font: 500 0.92rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  background: #fff;
  box-sizing: border-box;
}

.wo-estimate-number {
  font: 600 13px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--harbor-navy);
  margin-top: 4px;
}

.wo-estimate-terms-field { margin-top: auto; }

/* Operations list, estimate mode */
#estimate-ops-list { display: flex; flex-direction: column; }

/* Same collision as #estimate-details-section above, worse here since a
   bare id rule always beats .hidden-form-section regardless of source
   order — re-scoped through the id+class to guarantee the hide wins. */
#estimate-ops-list.hidden-form-section { display: none; }

.wo-estimate-op-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-top: 1px solid #EDF1F5;
}

.wo-estimate-op-row-main { min-width: 0; flex: 1; }
.wo-estimate-op-row-name { font: 600 14px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-body); }
.wo-estimate-op-row-code { font: 500 11.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-faint-alt); }
.wo-estimate-op-row-hrs { font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-muted); width: 52px; text-align: right; flex-shrink: 0; }
.wo-estimate-op-row-amt { font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-body); width: 78px; text-align: right; flex-shrink: 0; }
.wo-estimate-op-row-remove {
  border: none;
  background: none;
  color: #C7D0DA;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.wo-estimate-op-row-remove:hover { color: var(--red-text); }

/* Parts card */
.wo-parts-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  grid-column: 2;
}

.wo-parts-card-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.wo-parts-table-head {
  display: grid;
  grid-template-columns: 110px 1fr 100px 44px 68px 78px;
  gap: 10px;
  padding: 0 4px 7px;
  font: 600 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
}

.wo-parts-row {
  display: grid;
  grid-template-columns: 110px 1fr 100px 44px 68px 78px;
  gap: 10px;
  align-items: center;
  padding: 9px 4px;
  border-top: 1px solid #EDF1F5;
}

.wo-parts-row-pn { font: 600 11.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--signal-blue); }
.wo-parts-row-pn.manual { color: var(--amber-text); }
.wo-parts-row-desc { font: 500 13px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-body); }
.wo-parts-row-vendor { font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-muted); }
.wo-parts-row-qty, .wo-parts-row-unit { font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-muted); text-align: right; }
.wo-parts-row-ext { font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-body); text-align: right; }
.wo-parts-row-remove {
  border: none;
  background: none;
  color: #C7D0DA;
  font-size: 15px;
  cursor: pointer;
  grid-column: 6;
  justify-self: end;
}
.wo-parts-row-remove:hover { color: var(--red-text); }

.wo-parts-add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 14px;
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--seafoam);
  background: rgba(15,140,130,.05);
  border: 1.5px dashed rgba(15,140,130,.4);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.wo-parts-add-btn:hover { background: rgba(15,140,130,.1); }
.wo-parts-add-icon {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--seafoam);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
}

/* Pricing bar */
.wo-pricing-bar {
  grid-column: 2;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
}

/* Same .hidden-form-section collision as #estimate-details-section above. */
#estimate-pricing-bar.hidden-form-section {
  display: none;
}

.wo-pricing-item { white-space: nowrap; }
.wo-pricing-label {
  font: 600 9.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
}
.wo-pricing-value {
  font: 600 13px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-body);
  margin-top: 3px;
}
.wo-pricing-total .wo-pricing-label { font-weight: 700; color: var(--harbor-navy); }
.wo-pricing-total .wo-pricing-value { font: 700 16px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--harbor-navy); }

.wo-pricing-divider { width: 1px; height: 30px; background: #EDF1F5; flex-shrink: 0; }

.wo-pricing-deposit {
  margin-left: auto;
  background: rgba(15,140,130,.07);
  border: 1px solid rgba(15,140,130,.25);
  border-radius: var(--radius-control);
  padding: 7px 11px;
  white-space: nowrap;
}
.wo-pricing-deposit-label {
  font: 600 9.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #0E7C73;
}
.wo-pricing-deposit-value {
  font: 700 13px var(--font-mono, 'Spline Sans Mono', monospace);
  color: #0E7C73;
  margin-top: 2px;
}

/* Parts picker: result rows (reuses .wo-picker-overlay/panel/header/search-box/body) */
.wo-parts-picker-result {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #ECEFF3;
  border-radius: 11px;
  padding: 11px 14px;
  cursor: pointer;
}
.wo-parts-picker-result:hover { background: #F8FAFC; }
.wo-parts-picker-result-pn {
  font: 600 11px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--signal-blue);
  width: 108px;
  flex-shrink: 0;
}
.wo-parts-picker-result-main { min-width: 0; flex: 1; }
.wo-parts-picker-result-desc { font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-body); }
.wo-parts-picker-result-sub { font: 500 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); }
.wo-parts-picker-result-stock {
  font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  white-space: nowrap;
}
.wo-parts-picker-result-stock.in-stock  { background: #E2F4EA; color: var(--green-text); }
.wo-parts-picker-result-stock.low-stock { background: #FBEFD8; color: var(--amber-text); }
.wo-parts-picker-result-stock.out-of-stock { background: #FBE6E6; color: var(--red-text); }
.wo-parts-picker-result-price {
  font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-body);
  width: 62px;
  text-align: right;
  flex-shrink: 0;
}

.wo-parts-picker-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid #EDF1F5;
  padding: 12px 16px;
  flex-shrink: 0;
}
.wo-parts-picker-footer span { font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); }
.wo-parts-picker-footer button {
  border: none;
  background: none;
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--seafoam);
  cursor: pointer;
}

/* Manual part line panel */
.wo-parts-manual-panel { width: 560px; height: auto; max-height: 88vh; }
.wo-parts-manual-badge {
  font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--amber-text);
  background: #FBEFD8;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-left: 8px;
}
.wo-parts-manual-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.wo-parts-manual-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; }
.wo-parts-manual-row-4 { grid-template-columns: 1fr 90px 110px 110px; align-items: end; }
.wo-parts-manual-optional { color: var(--text-faint-alt); font-weight: 400; text-transform: none; letter-spacing: 0; }
.wo-parts-manual-row label {
  display: block;
  font: 600 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  margin-bottom: 6px;
}
.wo-parts-manual-row input {
  width: 100%;
  border: 1.5px solid var(--card-border-alt);
  border-radius: var(--radius-control);
  padding: 10px 12px;
  font: 500 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  box-sizing: border-box;
}
.wo-parts-manual-row input:focus { outline: none; border-color: var(--seafoam); }
.wo-parts-manual-add-btn {
  padding: 11px 0;
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  background: var(--seafoam);
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
}
.wo-parts-manual-hint { font: 400 12px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); line-height: 1.5; }

@media screen and (max-width: 900px) {
  .wo-parts-card, .wo-pricing-bar { grid-column: 1; }
}

/* ============================================================
   ESTIMATES LIST + DETAIL/LIFECYCLE
   ============================================================ */

#estimates-list-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 40px;
  padding: 0 16px;
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  background: var(--seafoam);
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
  white-space: nowrap;
}
#estimates-list-button:hover { background: #0c7a71; }

.estimates-list-panel { width: 560px; height: 620px; }

.estimate-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #ECEFF3;
  border-radius: 11px;
  padding: 12px 14px;
  cursor: pointer;
}
.estimate-list-row:hover { background: #F8FAFC; }
.estimate-list-row-number { font: 600 12px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--signal-blue); width: 108px; flex-shrink: 0; }
.estimate-list-row-main { min-width: 0; flex: 1; }
.estimate-list-row-name { font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-body); }
.estimate-list-row-sub { font: 500 11px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-faint-alt); margin-top: 2px; }
.estimate-list-row-total { font: 600 13px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-body); flex-shrink: 0; }

.estimate-detail-panel { width: 620px; height: 640px; }
.estimate-detail-body { gap: 14px; }

.estimate-detail-section-label {
  font: 700 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
  margin-bottom: 6px;
}

.estimate-detail-context {
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px 14px;
}
.estimate-detail-context-name { font: 700 14px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); }
.estimate-detail-context-sub { font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-muted); margin-top: 2px; }

.estimate-detail-op-row, .estimate-detail-part-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid #EDF1F5;
  font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
}
.estimate-detail-op-row span:last-child, .estimate-detail-part-row span:last-child {
  font-family: var(--font-mono, 'Spline Sans Mono', monospace);
  font-weight: 600;
  flex-shrink: 0;
}

.estimate-detail-totals { align-self: flex-end; width: 220px; margin-top: 4px; }
.estimate-detail-totals-row {
  display: flex;
  justify-content: space-between;
  font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  padding: 3px 0;
}
.estimate-detail-totals-row span:last-child { font-family: var(--font-mono, 'Spline Sans Mono', monospace); font-weight: 600; color: var(--text-body); }
.estimate-detail-totals-row.total { border-top: 1.5px solid var(--harbor-navy); margin-top: 4px; padding-top: 6px; font-weight: 700; color: var(--harbor-navy); }
.estimate-detail-totals-row.total span:last-child { color: var(--harbor-navy); }

.estimate-detail-convert-note {
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px 14px;
  font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  line-height: 1.7;
}
.estimate-detail-convert-note b { color: var(--text-body); }

.estimate-detail-actions {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #EDF1F5;
  flex-shrink: 0;
}
.estimate-detail-actions button {
  flex: 1;
  padding: 10px;
  font: 600 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  border-radius: var(--radius-control);
  cursor: pointer;
  border: 1.5px solid var(--card-border);
  background: #fff;
  color: var(--harbor-navy);
}
.estimate-detail-actions button.primary { background: var(--seafoam); border-color: var(--seafoam); color: #fff; }
.estimate-detail-actions button.danger { color: var(--red-text); border-color: rgba(211,65,65,.35); }
.estimate-detail-actions button:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   PESTICIDE TRACKING — B1 log-application panel (work-order side)
   ============================================================ */

.pesticide-log-sub {
  font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  margin-top: 4px;
}

.pesticide-log-product {
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px 14px;
}
.pesticide-log-product-name { font: 700 14px var(--font-display, 'Archivo', sans-serif); color: var(--harbor-navy); }
.pesticide-log-product-sub { font: 500 12px var(--font-mono, 'Spline Sans Mono', monospace); color: var(--text-faint-alt); margin-top: 2px; }

.pesticide-log-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
}
.pesticide-log-stepper { display: flex; align-items: center; gap: 8px; }
.pesticide-log-stepper button {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1.5px solid var(--card-border);
  background: #fff;
  color: var(--harbor-navy);
  font: 700 15px var(--font-body, 'Public Sans', system-ui, sans-serif);
  cursor: pointer;
}
.pesticide-log-stepper input {
  width: 64px;
  text-align: center;
  font: 700 14px var(--font-mono, 'Spline Sans Mono', monospace);
  border: 1.5px solid var(--card-border-alt);
  border-radius: 8px;
  padding: 6px 0;
}

.pesticide-log-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.pesticide-log-detail-grid > div { display: flex; flex-direction: column; gap: 3px; }
.pesticide-log-detail-label {
  font: 600 9.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
}

/* ============================================================
   Round 2 refresh — F1 editors panel, F2 op detail modal,
   G storage rail (see Work Order Creation - States.dc.html)
   ============================================================ */

/* ---- F1 · #wo-editors-panel ---- */

.wo-editors-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.wo-editors-title {
  font: 700 15px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
}

.wo-editors-pill {
  font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--amber-text, #B5790C);
  background: var(--status-amber-bg, #FFF4E2);
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
}

.wo-editors-done-btn {
  margin-left: auto;
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--seafoam);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}

.wo-editors-done-btn:hover {
  text-decoration: underline;
}

/* Override the old bold/clickable-arrow look (.section-header /
   .section-header-container are shared with #section-header-container-storage
   too, so this is scoped to the editors panel specifically). */
.wo-editors-panel .wo-editors-section-label {
  padding: 0;
  margin: 14px 0 8px;
}

.wo-editors-panel .wo-editors-section-label:first-of-type {
  margin-top: 0;
}

/* The old rules for these two ids set width/padding-right/justify-content
   and an arrow ::after (specificity beats a plain class override), so the
   reset has to be re-scoped through the same ids to win. */
.wo-editors-panel #section-header-container-customer,
.wo-editors-panel #section-header-container-boat {
  width: auto;
  padding-right: 0;
}

.wo-editors-panel #section-header-container-customer::after,
.wo-editors-panel #section-header-container-boat::after {
  content: none;
}

.wo-editors-panel .wo-editors-section-label .section-header,
.wo-editors-panel .wo-editors-section-label .section-header > input {
  display: inline;
  font: 700 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint-alt, #9AA8B5);
  cursor: default;
}

.wo-editors-panel .section-header > input {
  border: none;
  background: none;
  padding: 0 0 0 2px;
  font: 700 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif) !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--harbor-navy) !important;
  width: auto;
}

.wo-editors-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
  margin: 0 0 4px;
}

.wo-editors-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wo-editors-field-wide {
  grid-column: span 1;
}

@media screen and (max-width: 1300px) {
  .wo-editors-grid { grid-template-columns: repeat(2, 1fr); }
}

.wo-editors-field-label {
  font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted, #5A6B7B);
}

.wo-editors-field input {
  border: 1.5px solid var(--card-border-alt, #E4EAF0) !important;
  border-radius: var(--radius-control, 8px) !important;
  padding: 8px 10px !important;
  font: 500 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  background: #fff;
}

.wo-editors-field input:focus {
  outline: none;
  border-color: var(--seafoam) !important;
}

.wo-editors-hint {
  font: 400 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint, #8A98A6);
  margin-top: 2px;
}

.wo-context-edit-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font: 600 0.8rem var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-control);
  cursor: pointer;
  white-space: nowrap;
}

.wo-context-edit-btn:hover {
  border-color: var(--text-faint);
}

/* ---- shared haul/launch date strip (used by both General-category and
   Storage-contract flows — see categorySelect's change handler) ---- */
.work-order-form-dates {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 18px;
  margin: 0 0 18px !important;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* Same .hidden-form-section collision as #estimate-details-section above —
   this rule and the pre-existing earlier .work-order-form-dates{display:
   flex} declaration both fight .hidden-form-section on source order alone.
   Re-scoped through the id so hiding always wins regardless of which
   .work-order-form-dates declaration is "last". */
#work-order-date-section.hidden-form-section {
  display: none;
}

.wo-dates-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}

.wo-dates-field-label {
  font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted, #5A6B7B);
}

.work-order-form-dates input[type="date"] {
  border: 1.5px solid var(--card-border-alt, #E4EAF0);
  border-radius: var(--radius-control, 8px);
  padding: 8px 10px;
  font: 500 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
}

.wo-dates-hint {
  font: 400 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint, #8A98A6);
  flex: 1;
  min-width: 200px;
  text-align: right;
}

/* ---- G · storage rail ---- */

.wo-storage-toggle-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px;
  margin-bottom: 12px;
}

.wo-storage-toggle-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* #section-header-container-storage carries the old accordion-header id
   rules (width:60%, an arrow ::after) — re-scope through the id to win
   since it's now the toggle switch's row, not a collapsible header. */
#section-header-container-storage.wo-storage-toggle-head {
  width: auto;
  padding-right: 0;
  justify-content: flex-start;
}

#section-header-container-storage.wo-storage-toggle-head::after {
  content: none;
}

.wo-storage-toggle-switch {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 40px;
  height: 24px;
  cursor: pointer;
}

.wo-storage-toggle-switch input {
  position: absolute;
  opacity: 0;
  /* #work-order-form-storage-confirm carries an old fixed 30x30 id rule —
     !important needed to win so the input covers the full track. */
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.wo-storage-toggle-track {
  position: absolute;
  inset: 0;
  background: #CBD5DF;
  border-radius: 999px;
  transition: background .15s ease;
}

.wo-storage-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16,42,67,.3);
  transition: transform .15s ease;
}

.wo-storage-toggle-switch input:checked ~ .wo-storage-toggle-track {
  background: var(--seafoam);
}

.wo-storage-toggle-switch input:checked ~ .wo-storage-toggle-thumb {
  transform: translateX(16px);
}

.wo-storage-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wo-storage-toggle-copy .section-header {
  font: 700 13.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  cursor: default;
}

.wo-storage-toggle-sub {
  font: 400 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint, #8A98A6);
}

.wo-storage-toggle-sub code {
  font: 600 10.5px var(--font-mono, 'Spline Sans Mono', monospace);
  background: var(--app-bg);
  padding: 1px 5px;
  border-radius: 4px;
}

.wo-storage-date-pill {
  flex-shrink: 0;
  font: 700 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--green-text, #1F8B4D);
  background: var(--status-success-bg, #E2F4EA);
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
  margin-left: auto;
}

.wo-storage-price-card {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border-alt, #E4EAF0);
}

.wo-storage-price-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.wo-storage-price-label {
  font: 700 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint-alt, #9AA8B5);
}

.wo-storage-dims-chip,
.wo-storage-tier-chip {
  font: 600 11px var(--font-mono, 'Spline Sans Mono', monospace);
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  padding: 3px 9px;
  border-radius: var(--radius-pill, 999px);
  color: var(--text-muted);
}

.wo-storage-tier-chip {
  color: var(--signal-blue);
  background: var(--status-info-bg, #E5EFFB);
  border-color: transparent;
}

.wo-storage-price-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.wo-storage-price-line {
  display: flex;
  justify-content: space-between;
  font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
}

.wo-storage-price-line span:last-child {
  font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-body);
}

.wo-storage-price-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--card-border-alt, #E4EAF0);
  font: 700 14px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
}

.wo-storage-price-total-row .currSign {
  font: 700 16px var(--font-mono, 'Spline Sans Mono', monospace);
}

.wo-generate-both-btn {
  width: 100%;
  font: 700 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #fff;
  background: var(--seafoam);
  border: none;
  border-radius: var(--radius-control);
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
}

.wo-generate-both-btn:hover { background: #0c7a71; }

/* G3 — dormant until a shrinkwrap op is added (see wakeShrinkwrapCard()) */
.wo-number-card.wo-number-card-dormant {
  background: transparent;
  border: 1.5px dashed var(--card-border);
}

.wo-number-card-dormant .wo-number-card-label,
.wo-number-card-dormant .wo-number-status-pill {
  color: var(--text-faint, #8A98A6);
}

.wo-number-card-dormant .wo-number-status-pill {
  background: transparent;
}

/* Mini included-ops preview under each season card (G0/G1) */
.wo-included-ops {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wo-included-op-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
}

.wo-included-op-row-pending {
  opacity: .6;
}

.wo-included-op-tag {
  font: 700 9.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--green-text, #1F8B4D);
  background: var(--status-success-bg, #E2F4EA);
  padding: 2px 7px;
  border-radius: var(--radius-pill, 999px);
  flex-shrink: 0;
}

.wo-included-op-row-pending .wo-included-op-tag {
  color: var(--text-faint-alt);
  background: var(--app-bg);
}

.wo-included-op-name { flex: 1; }

.wo-included-op-code {
  font: 600 10.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-faint-alt);
}

/* Included vs added — Operations list (right column) rows, G0 */
.wo-job-row.wo-job-row-included {
  background: rgba(15,140,130,.04);
  border-color: rgba(15,140,130,.35);
}

.wo-job-row-included-pill,
.wo-job-row-added-pill {
  font: 700 9.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 7px;
  border-radius: var(--radius-pill, 999px);
}

.wo-job-row-included-pill {
  color: var(--green-text, #1F8B4D);
  background: var(--status-success-bg, #E2F4EA);
}

.wo-job-row-added-pill {
  color: var(--text-faint);
  background: var(--app-bg);
}

/* ---- F2 · #job / #opCodeForm header + footer ---- */

.job-detail-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 18px !important;
  /* .smallModal centers its direct children (column flex, align-items:
     center) — without an explicit width this row would shrink-wrap and
     center instead of spanning edge-to-edge with the × pinned right. */
  width: 100%;
  box-sizing: border-box;
}

.job-detail-header-opcode {
  font: 700 11px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--seafoam);
  background: rgba(15,140,130,.08);
  border: 1px solid rgba(15,140,130,.28);
  padding: 4px 9px;
  border-radius: var(--radius-pill, 999px);
  flex-shrink: 0;
}

.job-detail-header-name {
  font: 700 14px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.job-detail-header-fits-pill {
  flex-shrink: 0;
  font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--green-text, #1F8B4D);
  background: var(--status-success-bg, #E2F4EA);
  padding: 3px 9px;
  border-radius: var(--radius-pill, 999px);
}

.job-detail-header-close {
  margin-left: auto;
}

.job-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px !important;
  padding-top: 14px;
  border-top: 1px solid var(--card-border, #E8EDF2);
}

.job-detail-footer-right {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.job-detail-footer .job-detail-delete-btn {
  background: transparent !important;
  color: var(--red-text, #C23A3A) !important;
  border: none !important;
  padding: 9px 4px !important;
  margin: 0 !important;
}

.job-detail-footer .job-detail-delete-btn:hover {
  text-decoration: underline;
}

.job-detail-cancel-btn {
  font: 600 0.85rem var(--font-body, 'Public Sans', system-ui, sans-serif) !important;
  color: var(--harbor-navy);
  background: #fff !important;
  border: 1.5px solid var(--card-border) !important;
  border-radius: var(--radius-control) !important;
  padding: 9px 16px !important;
  margin: 0 !important;
  cursor: pointer;
}

.job-detail-cancel-btn:hover {
  border-color: var(--text-faint);
}

.job-detail-footer .job-detail-add-btn {
  margin: 0 !important;
}
.pesticide-log-detail-grid span:last-child { font: 500 13px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-body); }

/* ============================================================
   H1 — Storage Contract Builder (Phase 3)
   ============================================================ */

.wo-storage-contract-btn {
  width: 100%;
  font: 700 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-control);
  padding: 11px;
  margin-bottom: 12px;
  cursor: pointer;
}

.wo-storage-contract-btn:hover { border-color: var(--seafoam); color: var(--seafoam); }

.contract-builder-modal {
  width: min(1360px, 96vw);
  height: min(920px, 92vh);
}

.contract-builder-modal .modal-inside {
  padding: 20px 22px;
  overflow-y: auto;
}

.contract-builder-columns {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  align-items: start;
}

@media screen and (max-width: 1000px) {
  .contract-builder-columns { grid-template-columns: 1fr; }
}

.contract-builder-form-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.contract-builder-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.contract-builder-rail-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 15px 17px;
  min-width: 0;
}

.contract-builder-rail-title {
  font: 700 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  margin-bottom: 10px;
}

.contract-builder-section {
  border-top: 1px solid var(--card-border-alt, #E4EAF0);
  padding-top: 14px;
}

.contract-builder-section:first-child {
  border-top: none;
  padding-top: 0;
}

.contract-builder-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.contract-builder-section-title {
  font: 700 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint-alt, #9AA8B5);
}

.contract-builder-prefill-pill {
  font: 600 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--green-text, #1F8B4D);
  background: var(--status-success-bg, #E2F4EA);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

.contract-builder-priced-pill {
  font: 600 10px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-muted);
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

.contract-builder-owner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

@media screen and (max-width: 1200px) {
  .contract-builder-owner-grid { grid-template-columns: repeat(2, 1fr); }
}

.contract-builder-owner-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.contract-builder-owner-field-wide { grid-column: span 2; }

.contract-builder-owner-field-label {
  font: 600 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
}

.contract-builder-owner-field-value {
  font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  background: var(--app-bg);
  border: 1.5px solid var(--card-border-alt);
  border-radius: 8px;
  padding: 7px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-builder-owner-field-value.contract-builder-owner-field-missing {
  color: var(--amber-text);
  background: var(--status-amber-bg, #FFF4E2);
  border-color: #EFDCB2;
  font-style: italic;
}

.contract-builder-weeks-row {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.contract-builder-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.contract-builder-field label {
  font: 600 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
}

.contract-builder-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--card-border-alt);
  border-radius: 8px;
  padding: 8px 10px;
  font: 500 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
}

.contract-builder-field input:focus { outline: none; border-color: var(--seafoam); }

.contract-builder-hint {
  font: 400 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint, #8A98A6);
  line-height: 1.5;
  margin-top: 6px;
}

.contract-builder-included-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contract-builder-included-chip {
  font: 600 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--seafoam);
  background: rgba(15,140,130,.08);
  border: 1px solid rgba(15,140,130,.28);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}

.contract-builder-services {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.contract-builder-service-group-title {
  font: 700 10px var(--font-mono, 'Spline Sans Mono', monospace);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
  margin: 8px 0 2px;
  flex-shrink: 0;
}

.contract-builder-service-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--card-border-alt);
  background: #fff;
  border-radius: 9px;
  padding: 8px 11px;
  min-width: 0;
  flex-shrink: 0;
}

.contract-builder-service-row.checked {
  background: rgba(15,140,130,.04);
  border-color: rgba(15,140,130,.35);
}

.contract-builder-service-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.contract-builder-service-name {
  flex: 1;
  min-width: 0;
  font: 600 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-builder-service-rate {
  flex-shrink: 0;
  font: 500 10.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-faint-alt);
}

.contract-builder-service-price {
  flex-shrink: 0;
  width: 78px;
  text-align: right;
  font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-muted);
}

.contract-builder-service-row.checked .contract-builder-service-price {
  color: var(--harbor-navy);
}

.contract-builder-zinc-card {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  border: 1.5px solid #EFDCB2;
  background: #FDF9EF;
  border-radius: var(--radius-control);
  padding: 11px 14px;
}

.contract-builder-zinc-top {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.contract-builder-required-pill {
  font: 600 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--amber-text, #B5790C);
  background: var(--status-amber-bg, #FFF4E2);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.contract-builder-zinc-label {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  white-space: nowrap;
}

.contract-builder-zinc-choices {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-left: auto;
}

.contract-builder-zinc-choice {
  font: 600 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  background: #fff;
  border: 1px solid var(--card-border-alt);
  padding: 6px 11px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.contract-builder-zinc-choice:has(input:checked) {
  color: var(--seafoam);
  background: rgba(15,140,130,.1);
  border-color: rgba(15,140,130,.3);
}

#contractBuilderRequests {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--card-border-alt);
  border-radius: 10px;
  padding: 10px 13px;
  font: 400 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  resize: vertical;
}

.contract-builder-rail-line {
  font: 600 13px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-body);
}

.contract-builder-rail-hint {
  font: 400 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  margin-top: 8px;
  line-height: 1.5;
}

.contract-builder-total-lines, .contract-builder-payment-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.contract-builder-total-line, .contract-builder-payment-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
}

.contract-builder-total-line span:last-child, .contract-builder-payment-line span:last-child {
  font: 600 12.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-body);
  flex-shrink: 0;
}

.contract-builder-total-line.contract-builder-total-line-grand {
  border-top: 1px solid var(--card-border-alt);
  margin-top: 4px;
  padding-top: 9px;
  font-weight: 700;
  color: var(--harbor-navy);
}

.contract-builder-total-line.contract-builder-total-line-grand span:last-child {
  font-size: 15px;
  color: var(--harbor-navy);
}

.contract-builder-card-auth-pill {
  margin-top: 10px;
  font: 500 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  background: var(--app-bg);
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.5;
}

.contract-builder-fixed-pill {
  display: inline-block;
  font: 600 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  background: var(--app-bg);
  border: 1px solid var(--card-border);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-bottom: 8px;
}

.contract-builder-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--card-border);
  flex-shrink: 0;
}

/* ============================================================
   H2 — Storage Contracts list (Phase 4)
   ============================================================ */

#contracts-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.contracts-list-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contracts-unsigned-pill {
  font: 700 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--amber-text, #B5790C);
  background: var(--status-amber-bg, #FFF4E2);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.contracts-remind-btn {
  font: 600 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-control);
  padding: 8px 14px;
  cursor: pointer;
}

.contracts-remind-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.contracts-empty {
  padding: 30px;
  text-align: center;
  color: var(--text-faint);
  font: 500 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
}

.contracts-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 13px 16px;
  margin-bottom: 8px;
  flex-shrink: 0;
  min-width: 0;
}

.contracts-row-main {
  flex: 1;
  min-width: 0;
}

.contracts-row-boat {
  font: 700 13.5px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contracts-row-owner {
  font: 500 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contracts-row-total {
  flex-shrink: 0;
  font: 700 13px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-body);
  width: 90px;
  text-align: right;
}

.contracts-row-actions {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.contracts-row-action-btn {
  font: 600 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 6px 11px;
  cursor: pointer;
  white-space: nowrap;
}

.contracts-row-action-btn:hover { border-color: var(--text-faint); }

.contracts-row-action-primary {
  color: #fff;
  background: var(--seafoam);
  border-color: var(--seafoam);
}

.contracts-row-action-primary:hover { background: #0c7a71; border-color: #0c7a71; }

/* ============================================================
   H3 — Contract → WO review (Phase 4)
   ============================================================ */

.contract-review-modal {
  width: min(1100px, 95vw);
  height: min(760px, 90vh);
}

.contract-review-modal .modal-inside {
  padding: 20px 22px;
  overflow-y: auto;
}

.contract-review-summary {
  font: 500 14px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  margin-bottom: 6px;
}

.contract-review-summary strong {
  font: 700 15px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
}

.contract-review-hint {
  font: 400 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  line-height: 1.5;
  margin-bottom: 16px;
}

.contract-review-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.contract-review-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  min-width: 0;
}

.contract-review-card.contract-review-card-shrinkwrap {
  border: 1.5px dashed #EFDCB2;
  background: #FFFBF3;
}

.contract-review-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font: 700 13px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
}

.contract-review-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid #F1F4F7;
  min-width: 0;
}

.contract-review-row:last-child { border-bottom: none; }

.contract-review-tag {
  font: 700 9.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.contract-review-tag.included { color: var(--green-text); background: var(--status-success-bg, #E2F4EA); }
.contract-review-tag.contract { color: var(--seafoam); background: rgba(15,140,130,.1); }
.contract-review-tag.unmapped { color: var(--amber-text); background: var(--status-amber-bg, #FFF4E2); }

.contract-review-name {
  min-width: 0;
  font: 600 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-review-code {
  flex-shrink: 0;
  font: 500 10.5px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-faint-alt);
}

.contract-review-price {
  flex-shrink: 0;
  font: 700 12px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-body);
  text-align: right;
}

.contract-review-empty {
  font: 400 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  padding: 6px 0;
}

/* ============================================================
   Part 3 — Printable Storage Contract (Phase 5)
   Shares .estimateContainer/.estDoc-page geometry + the same
   @media print rule (both are ".estimateContainer, .estimateContainer *")
   ============================================================ */

.contractDoc-page { font-size: 11px; gap: 10px; }

.contractDoc-season {
  font: 700 11px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--signal-blue);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.contractDoc-return-notice {
  background: var(--app-bg);
  border-radius: 8px;
  padding: 10px 14px;
  font: 500 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  margin: 10px 0;
}

.contractDoc-section-label {
  font: 700 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--harbor-navy);
  border-bottom: 1.5px solid var(--harbor-navy);
  padding-bottom: 4px;
  margin: 12px 0 8px;
}

.contractDoc-fill-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 14px;
}

.contractDoc-fill-field { grid-column: span 1; }
.contractDoc-fill-field-wide { grid-column: span 2; }

.contractDoc-fill-label {
  font: 600 8.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
}

.contractDoc-fill-value {
  font: 600 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  border-bottom: 1px solid var(--card-border-alt);
  padding: 2px 0 4px;
  min-height: 15px;
}

.contractDoc-weeks-row {
  display: flex;
  gap: 24px;
}

.contractDoc-weeks-row > div { flex: 1; }

.contractDoc-includes-row { margin-top: 10px; }

.contractDoc-includes-label {
  font: 700 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
  margin-bottom: 6px;
}

.contractDoc-includes-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 20px;
  font: 500 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
}

.contractDoc-includes-note {
  margin-top: 6px;
  font: 400 9.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  line-height: 1.5;
}

.contractDoc-rate-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.contractDoc-rate-table {
  flex: 1;
  border-collapse: collapse;
  font: 500 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
}

.contractDoc-rate-table th, .contractDoc-rate-table td {
  text-align: left;
  padding: 4px 10px 4px 0;
}

.contractDoc-rate-table th {
  font: 700 9px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
  border-bottom: 1px solid var(--card-border);
}

.contractDoc-rate-table tr.contractDoc-rate-tier-active {
  background: rgba(15,140,130,.08);
  font-weight: 700;
  color: var(--seafoam);
}

.contractDoc-estimator-box {
  width: 260px;
  flex-shrink: 0;
  border: 1.5px solid rgba(15,140,130,.3);
  background: rgba(15,140,130,.05);
  border-radius: 8px;
  padding: 10px 13px;
}

.contractDoc-estimator-label {
  font: 700 9px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--seafoam);
  margin-bottom: 6px;
}

.contractDoc-estimator-line {
  font: 600 11px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--text-body);
}

.contractDoc-estimator-total {
  font: 800 14px var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--harbor-navy);
  margin-top: 6px;
}

.contractDoc-estimator-note {
  margin-top: 6px;
  font: 400 9px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  line-height: 1.4;
}

.contractDoc-services-note {
  font: 400 10px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  margin-bottom: 8px;
  line-height: 1.4;
}

.contractDoc-service-group-title {
  font: 700 9.5px var(--font-mono, 'Spline Sans Mono', monospace);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--seafoam);
  margin: 8px 0 3px;
}

.contractDoc-service-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font: 500 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
}

.contractDoc-service-check {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border: 1.2px solid var(--text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
}

.contractDoc-service-row.selected .contractDoc-service-check {
  border-color: var(--seafoam);
  background: var(--seafoam);
  color: #fff;
}

.contractDoc-service-row.selected .contractDoc-service-name { font-weight: 700; }

.contractDoc-service-name { flex: 1; color: var(--text-body); }
.contractDoc-service-rate { flex-shrink: 0; width: 90px; color: var(--text-faint); font-family: var(--font-mono, 'Spline Sans Mono', monospace); font-size: 9.5px; }
.contractDoc-service-price { flex-shrink: 0; width: 60px; text-align: right; font-family: var(--font-mono, 'Spline Sans Mono', monospace); font-weight: 700; }

.contractDoc-zinc-box {
  margin-top: 12px;
  border: 1.5px solid #EFDCB2;
  background: #FDF9EF;
  border-radius: 8px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 11px var(--font-body, 'Public Sans', system-ui, sans-serif);
}

.contractDoc-zinc-required {
  font: 700 9px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .04em;
  color: var(--amber-text);
  background: var(--status-amber-bg, #FFF4E2);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

.contractDoc-total-payment-row {
  display: flex;
  gap: 24px;
  margin-top: 6px;
}

.contractDoc-total-payment-row > div { flex: 1; }

.contractDoc-totals-stack, .contractDoc-payment-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contractDoc-totals-row, .contractDoc-payment-row {
  display: flex;
  justify-content: space-between;
  font: 500 11.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
}

.contractDoc-totals-row span:last-child, .contractDoc-payment-row span:last-child {
  font-family: var(--font-mono, 'Spline Sans Mono', monospace);
  font-weight: 700;
}

.contractDoc-totals-row-total {
  border-top: 1.5px solid var(--harbor-navy);
  margin-top: 4px;
  padding-top: 8px;
  font: 800 13px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
}

.contractDoc-card-auth-box {
  margin-top: 12px;
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  padding: 10px 13px;
}

.contractDoc-card-auth-label {
  font: 700 9px var(--font-body, 'Public Sans', system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint-alt);
  margin-bottom: 6px;
}

.contractDoc-card-auth-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: 500 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
}

.contractDoc-card-auth-sig {
  margin-top: 8px;
  font: 500 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
}

.contractDoc-card-auth-note {
  margin-top: 8px;
  font: 400 9px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
  line-height: 1.4;
}

.contractDoc-terms-text {
  columns: 2;
  column-gap: 24px;
  font: 400 9.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
  line-height: 1.55;
  white-space: pre-line;
}

.contractDoc-signature-box {
  margin-top: 14px;
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  padding: 12px 16px;
}

.contractDoc-signature-accept {
  font: 700 10.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--harbor-navy);
  margin-bottom: 14px;
}

.contractDoc-signature-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 1fr;
  gap: 14px;
}

.contractDoc-signature-line {
  border-top: 1px solid var(--text-faint);
  padding-top: 4px;
  font: 500 9px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-faint);
}

/* ==========================================================================
   design_handoff_wo_ops_list — Part 1: Work Orders row (progress bar +
   attention slot + tech avatars) and expand panel, Part 2: Operations flat
   table. Appended as its own section rather than interleaved with the rules
   above, matching how this file already groups handoff-specific additions.
   ========================================================================== */

/* --- Part 1: Work Orders row — six .info-div slots --- */
.table-item .info-div {
  align-items: center;
  gap: 18px;
  padding: 10px 18px 10px 4px;
  flex-wrap: nowrap;
}
.table-item .job-group.wo-boat-customer { flex: 0 0 200px; min-width: 0; }
.table-item .job-group.wo-description-group { flex: 0 0 172px; min-width: 0; }
.table-item .wo-progress-group {
  flex: 1 1 200px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.table-item .wo-techs-group {
  flex: 0 0 116px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.table-item .job-group.wo-status-group { flex: 0 0 116px; align-items: flex-end; gap: 6px; }

@media screen and (max-width: 900px) {
  .table-item .info-div { flex-wrap: wrap; }
  .table-item .job-group.wo-boat-customer,
  .table-item .job-group.wo-description-group,
  .table-item .wo-progress-group,
  .table-item .wo-attention,
  .table-item .wo-techs-group,
  .table-item .job-group.wo-status-group {
    flex: 1 1 auto;
  }
}

.wo-boat-customer .boat-name-jobs { font: 500 12px var(--font-body); color: var(--text-faint); margin-left: 4px; }
.wo-number-tag { display: block; font: 600 12px var(--font-mono); color: var(--signal-blue); margin-top: 3px; }

.wo-description-group .work-order-description { margin: 0; }
.wo-category-chip {
  display: inline-block;
  font: 600 10.5px var(--font-body);
  color: #5A6B7B;
  background: #F1F4F7;
  border: 1px solid var(--card-border-alt);
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 6px;
}

.wo-progress-headline { display: flex; align-items: baseline; gap: 10px; }
.wo-progress-pct { font: 800 24px var(--font-display); color: var(--harbor-navy); }
.wo-progress-pct-zero { color: var(--text-faint); }
.wo-progress-detail { font: 500 12px var(--font-body); color: var(--text-muted); }
.wo-progress-bar {
  position: relative;
  height: 12px;
  border-radius: 4px;
  background: #DFE6EE;
  overflow: hidden;
  margin-top: 8px;
}
.wo-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); }
.wo-progress-fill-inprogress { position: absolute; top: 0; bottom: 0; background: var(--signal-blue); }
.wo-progress-notch { position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 1px; }

.wo-attention {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 11px;
  padding: 10px 13px;
  background: #F8FAFC;
  border: 1px solid var(--card-border);
}
.wo-attention-spine { align-self: stretch; width: 3px; border-radius: 2px; background: #8A98A6; flex: none; }
.wo-attention-body { flex: 1; min-width: 0; }
.wo-attention-headline { font: 700 11.5px var(--font-body); color: var(--text-body); }
.wo-attention-detail { font: 500 11px var(--font-body); color: var(--text-muted); margin-top: 2px; }
.wo-attention-invoice-btn {
  font: 600 11px var(--font-body);
  color: #fff;
  background: var(--green);
  border: none;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  flex: none;
}

.wo-attention--hold { background: #FFF7F7; border-color: #F0D8D8; }
.wo-attention--hold .wo-attention-spine { background: var(--red); }
.wo-attention--hold .wo-attention-headline { color: var(--red-text); }
.wo-attention--hold .wo-attention-detail { color: #8E3535; }

.wo-attention--parts { background: #FFF9EE; border-color: #F2E2C4; }
.wo-attention--parts .wo-attention-spine { background: var(--amber); }
.wo-attention--parts .wo-attention-headline { color: var(--amber-text); }
.wo-attention--parts .wo-attention-detail { color: #8A6414; }

.wo-attention--overdue { background: #FFF7F7; border-color: #F0D8D8; }
.wo-attention--overdue .wo-attention-spine { background: var(--red); }
.wo-attention--overdue .wo-attention-headline { color: var(--red-text); }
.wo-attention--overdue .wo-attention-detail { color: #8E3535; }

.wo-attention--ready { background: #F6FAF7; border-color: #DCEBE1; }
.wo-attention--ready .wo-attention-spine { background: var(--green); }
.wo-attention--ready .wo-attention-headline { color: var(--green-text); }
.wo-attention--ready .wo-attention-detail { color: #3D4F60; }

.wo-attention--waiting { background: #F7FBFB; border-color: #D9E6E4; }
.wo-attention--waiting .wo-attention-spine { background: var(--seafoam); }
.wo-attention--waiting .wo-attention-headline { color: #0E7C73; }
.wo-attention--waiting .wo-attention-detail { color: #3D4F60; }

.wo-attention--default { background: #F8FAFC; border-color: var(--card-border); }
.wo-attention--default .wo-attention-spine { background: #8A98A6; }
.wo-attention--default .wo-attention-headline { color: #3D4F60; }
.wo-attention--default .wo-attention-detail { color: var(--text-muted); }

.wo-tech-avatars { display: flex; align-items: center; }
.wo-tech-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  color: #fff;
  font: 700 10.5px var(--font-display);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  flex: none;
}
.wo-tech-avatar + .wo-tech-avatar { margin-left: -8px; }
.wo-tech-avatar-extra { background: #5A6B7B; }
.wo-tech-names {
  font: 500 11.5px var(--font-body);
  color: var(--text-muted);
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wo-tech-next { font: 500 11.5px var(--font-mono); color: var(--text-muted); margin-top: 7px; }

.wo-status-group .wo-disclose { font: 600 11px var(--font-body); color: var(--text-faint); }

/* Red pill tone for Hold — the attention/sub-line axis, not the spine/status-
   pill tone map (woStatusToneSlug never emits 'red', per Appendix A1). */
.status-info-p.wo-tone-red { background: var(--pill-on-hold-bg); color: var(--pill-on-hold-fg); }

/* --- Part 1: expand panel — summary chips + operation-row states --- */
.op-summary-chips { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; flex-wrap: wrap; }
.op-summary-chip { font: 600 11px var(--font-body); padding: 5px 11px; border-radius: var(--radius-pill); }
.op-summary-chip--done { color: var(--green-text); background: #E2F4EA; }
.op-summary-chip--running { color: var(--signal-blue); background: var(--pill-in-progress-bg); }
.op-summary-chip--scheduled { color: #5A6B7B; background: #EAEEF2; }
.op-summary-chip--unscheduled { color: var(--amber-text); background: #FBEFD8; }
.op-summary-sort-note { margin-left: auto; font: 500 11px var(--font-body); color: var(--text-faint); }

.op-table-data-row.op-row-done { opacity: .7; }
.op-table-data-row.op-row-done .op-row-operation-title {
  text-decoration: line-through;
  text-decoration-color: #CBD5DF;
  color: var(--text-muted);
}
/* design_handoff_wo_ops_rows_tech_select — tint-only now that the accent bar
   (below) carries the severity signal; the old border-left + padding-left
   shift competed with the bar for the same 6-10px of space. */
.op-table-data-row.op-row-compact.op-row-running {
  background: #F4FAF9;
}
.op-table-data-row.op-row-compact.op-row-unscheduled {
  background: #FFFCF6;
}
.op-table-data-row.op-row-compact.op-row-tint--hold {
  background: #FEFAF9;
}

/* Compact single-line grid row for the Work Orders expand panel
   (buildOpTableRow()). Tight, no per-row card border/shadow — a bottom
   divider between rows instead, like the mockup, not a stack of boxed cards.

   Column widths here are a deliberately conservative widening of the
   previous, live-measured set (design_handoff_wo_ops_rows_tech_select's
   README ships wider literal px values sized against its ~1320px mockup
   canvas — pasting those verbatim would overflow this panel, which measured
   ~611px wide in the real app sharing its row with the customer/boat
   sidebar). Operation keeps its proven minmax(140px, 460px) cap + trailing
   1fr spacer (same fix as before: without the cap, Operation stretches on
   wide viewports and drags every other column far to the right). Re-check
   these numbers against the live app before shipping — see the CSS comment
   history above for why "looks right at one width" isn't enough here. */
/* No leading 6px column for the accent bar — it's position:absolute (see
   .op-row-dot below), which takes it out of grid auto-placement entirely.
   Keeping a dedicated leading track for it here was actively wrong: with the
   bar abspos, in-flow auto-placement no longer skips that column for it, so
   the very next in-flow item (the title) landed there instead — measured
   live as titles collapsing to a single character in a 6px-wide column,
   with every other column shifted one slot left of where it belonged.
   padding-left:6px on both rows reserves the visual space the bar draws
   into instead, and keeps the header's labels aligned with the data rows'
   real (bar-less) columns. */
.op-table-header-row,
.op-table-data-row.op-row-compact {
  display: grid;
  grid-template-columns: minmax(140px, 460px) 104px 88px 38px 38px 108px 30px 1fr;
  gap: 9px;
  align-items: center;
  padding: 11px 14px 11px 6px;
}

.op-row-opcode-inline {
  font: 600 11.5px var(--font-mono);
  color: var(--text-faint);
  margin-right: 7px; /* .op-row-operation-title isn't flex — see comment above it */
}

#operations-table {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card, 12px);
  overflow: hidden;
}

.op-table-header-row {
  background: #F7F9FB;
  font: 700 10px var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--card-border);
}
.op-table-header-row .op-row-hrs { text-align: right; }

.op-table-data-row.op-row-compact {
  position: relative;
  min-height: 52px;
  margin: 0;
  border: none;
  border-bottom: 1px solid #EDF1F5;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}
.op-table-data-row.op-row-compact:last-child { border-bottom: none; }
.op-table-data-row.op-row-compact:hover { background: #F7FAFC; }

/* Left accent — one full-height bar in the first grid track replaces the old
   9px dot + competing border-left/padding-left shift on hold/unscheduled
   rows. Element/class names are unchanged (refreshOpRowSeverity() keeps
   working); only the box model/color changes here.

   position:absolute (not align-self:stretch in normal grid flow) — measured
   live that a stretched, contentless grid item pushed this row's auto-sized
   track to 65px against a 52/64px target regardless of every other cell's
   actual height (reproducible even with every other cell hidden one at a
   time), a real browser grid/stretch sizing quirk, not a specificity fight.
   Taking the bar out of grid flow entirely sidesteps it — there's no longer
   a dedicated grid column for it (see padding-left:6px above, which reserves
   the space instead), and the bar draws on top via inset, anchored to
   .op-row-compact's position:relative above.

   height:auto is explicit, not assumed: Part 2 (the Operations-tab flat
   table, further below) has its own unscoped `.op-row-dot--unscheduled`
   etc. rules that set a literal `height:7px`. Those are lower specificity
   than everything else here, but top+bottom+height is an over-constrained
   combination for an absolutely positioned box — when a *height* value is
   present at all, however low its specificity, it wins over 'bottom' by
   the box model's own resolution rules, not CSS specificity. Only writing
   our own `height` value (even just `auto`) makes ours the one that's
   actually in the running. */
.op-row-compact .op-row-dot {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  height: auto;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: #CBD5DF;
}
.op-row-compact .op-row-dot--hold,
.op-row-compact .op-row-dot--overdue,
.op-row-compact .op-row-dot--parts       { background: #C0453B; }
.op-row-compact .op-row-dot--unscheduled { background: #E3A93C; }
.op-row-compact .op-row-dot--in-progress { background: #1462B8; }
.op-row-compact .op-row-dot--done        { background: #1F8B4D; }

/* Shared field shell — anything you can change gets this 32px bordered white
   pill; anything you can only read (op code, title, sub-line, hours) stays
   borderless text. */
.op-row-compact .op-row-tech.op-tech-select,
.op-row-compact .op-row-schedule.schedule-date-info,
.op-row-compact .op-row-priority,
.op-row-compact .op-row-status {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 32px;
  min-height: 32px; /* an unrelated global .op-tech-select rule sets min-height:36px — without this override, min-height wins over the smaller height above and the shell renders 4px taller than spec'd */
  padding: 0 10px;
  background: #fff;
  border: 1px solid #D8E0E8;
  border-radius: 8px;
  font: 500 12.5px var(--font-body);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.op-row-compact .op-row-tech.op-tech-select:hover,
.op-row-compact .op-row-schedule.schedule-date-info:hover,
.op-row-compact .op-row-priority:hover {
  border-color: var(--seafoam);
  background: #F9FDFC;
}

/* Tech: label + chevron. min-width:0 on the label is the fix that makes
   inline-flex safe here — without it, a flex child defaults to
   min-width:auto and won't shrink below its content size, which is exactly
   what previously corrupted "Unassigned" into "Jnassigned" when this was
   tried as a bare display:flex (see git history / prior regression notes).
   Two spans, not flattened text, for the same reason: the label alone owns
   the ellipsis so the chevron can never be clipped by it. */
.op-row-compact .op-row-tech.op-tech-select { justify-content: space-between; text-align: left; }
.op-row-compact .op-row-tech-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.op-row-compact .op-row-tech-chevron { font-size: 9px; color: var(--text-faint); flex: none; margin-left: 6px; }
.op-row-compact .op-row-tech.op-tech-unassigned { border-color: #E3C88F; color: var(--amber-text); }
.op-row-compact .op-row-tech.op-tech-unassigned .op-row-tech-chevron { color: var(--amber-text); }

/* Scheduled: mono, and an unset date is a dashed field, not amber text. */
.op-row-compact .op-row-schedule.schedule-date-info {
  justify-content: space-between;
  font: 500 12px var(--font-mono);
  color: var(--text-body);
}
.op-row-compact .op-row-schedule.schedule-date-unset {
  border-style: dashed;
  border-color: #C9D4DE;
  color: var(--text-faint);
}

.op-row-compact .op-row-hrs {
  font: 600 13px var(--font-mono);
  color: var(--harbor-navy);
  text-align: right;
}

/* Priority: centered, no native select chrome fight. */
.op-row-compact .op-row-priority {
  justify-content: center;
  padding: 0 4px;
  font: 600 12px var(--font-body);
  color: var(--harbor-navy);
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  text-align-last: center;
}

/* Status: keeps its tint, gains a same-hue border + chevron so it reads as a
   control, not inert text — clicking anywhere on the row opens the editor. */
.op-row-compact .op-row-status {
  justify-self: stretch;
  justify-content: space-between;
  font: 600 12px var(--font-body);
  white-space: nowrap;
}
.op-row-compact .op-row-status.wo-tone-red    { background: #FCE9E9; border-color: #EBC0BC; color: #B23A30; }
.op-row-compact .op-row-status.wo-tone-amber  { background: #FBEFD8; border-color: #E8CF9A; color: var(--amber-text); }
.op-row-compact .op-row-status.wo-tone-blue   { background: #E5EFFB; border-color: #BFD5EE; color: var(--signal-blue); }
.op-row-compact .op-row-status.wo-tone-green  { background: #E2F4EA; border-color: #B4DFC6; color: var(--green-text); }
.op-row-compact .op-row-status.wo-tone-slate  { background: #F2F5F8; border-color: #DCE3EB; color: #5A6B7B; }
.op-row-compact .op-row-status::after {
  content: '\25BE';
  font-size: 9px;
  margin-left: 6px;
  opacity: .75;
}
/* Border + chevron now carry the "this is editable" message on their own —
   the brightness dip on hover is redundant but harmless, left as-is. */
.op-row-status-editable {
  cursor: pointer;
  transition: filter 120ms ease;
}
.op-table-data-row:hover .op-row-status-editable {
  filter: brightness(0.94);
}

/* Not display:flex — opRowHoldSublineHtml() appends the (optional) sub-line
   as a nested <div>, a second child of this same element, meant to drop to
   its own row below the title. As a block element that's automatic under
   normal block flow (which is what let the row measure 52px/64px cleanly),
   but as a flex item it sits inline next to the opcode+title text instead
   (measured: every row inflated to a uniform 69px, meaning the "single line
   vs. two line" distinction the height check depends on had stopped
   happening). min-width:0 stays — grid items get the same implicit
   min-width:auto as flex items, and without it this cell could ignore its
   track's ellipsis-enabling width constraint. */
.op-row-compact .op-row-operation-title {
  font: 600 13.5px var(--font-body);
  color: var(--harbor-navy);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Scoped to .op-row-compact — .op-row-operation-sub / --hold are also used,
   unscoped, by the Operations-tab flat table (Part 2 below), which paints
   the whole hold sub-line red via .op-row-operation-sub--hold. An unscoped
   mute rule here would have silently killed that page's red-on-hold cue. */
.op-row-compact .op-row-operation-sub {
  font: 400 11.5px var(--font-body);
  color: var(--text-muted);
  margin-top: 3px;
}
/* README §1e also wants the hold reason itself colored red inside this
   muted line (<span class="op-row-sub-reason">) — skipped: both call sites
   of resolveOperationSubline() (app.js:2814 and :7918) run its return value
   through escapeHTML(), so injecting a raw <span> there would print literal
   "<span...>" text rather than style it. The README explicitly offers this
   as the fallback ("ship the mute, leave the reason uncoloured") rather
   than restructure shared escaping across two files for it. */

.op-row-compact .op-row-notes-btn {
  position: static;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  opacity: 1;
  padding: 0;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.op-row-compact .op-row-notes-btn:hover {
  border-color: var(--seafoam);
  background: #F4FAF9;
}
.op-row-compact .op-row-notes-btn--has-notes {
  background: #F4FAF9;
  border-color: #A9D3CF;
}

/* --- Part 2: Operations tab flat table --- */
.job-item.op-table-row {
  display: grid;
  grid-template-columns: 12px 60px 1fr 190px 104px 120px 100px 54px 122px;
  gap: 14px;
  align-items: center;
  padding: 13px 20px;
}

.op-row-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; justify-self: center; }
.op-row-dot--done { background: var(--green); }
.op-row-dot--in-progress { background: var(--signal-blue); box-shadow: 0 0 0 3px rgba(20,98,184,.18); }
.op-row-dot--scheduled { width: 7px; height: 7px; border: 2px solid #CBD5DF; background: transparent; }
.op-row-dot--unscheduled { width: 7px; height: 7px; border: 2px solid #E3C88F; background: transparent; }
.op-row-dot--parts, .op-row-dot--overdue { background: var(--amber); }
.op-row-dot--hold { background: var(--red); }

.op-row-opcode { font: 600 11.5px var(--font-mono); color: var(--text-faint); }

.op-row-operation { min-width: 0; position: relative; }
.op-row-operation-title { font: 600 13.5px var(--font-body); color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-row-operation-sub { font: 500 11px var(--font-body); color: var(--text-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-row-operation-sub--hold { color: var(--red-text); }
.op-row-operation-sub--overdue, .op-row-operation-sub--parts { color: var(--amber-text); }

.op-row-notes-btn {
  position: absolute;
  top: -4px; right: -4px;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease;
}
.job-item.op-table-row:hover .op-row-notes-btn,
.op-row-notes-btn--has-notes { opacity: 1; }

.op-row-boat { min-width: 0; }
.op-row-boat-name { font: 600 12.5px var(--font-body); color: var(--harbor-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-row-customer-name { font: 500 11px var(--font-body); color: var(--text-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.op-row-wo-chip {
  font: 600 11px var(--font-mono);
  color: var(--signal-blue);
  background: #F1F6FC;
  border: 1px solid #DCE8F6;
  padding: 5px 8px;
  border-radius: 7px;
  cursor: pointer;
  justify-self: center;
}
.op-row-wo-chip:hover { border-color: var(--signal-blue); }

.op-row-tech.op-tech-select {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.op-row-tech-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  color: #fff;
  font: 700 9.5px var(--font-display);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.op-row-tech-avatar--empty { border: 1.5px dashed #E3C88F; background: none; }
.op-row-tech-name { font: 500 11.5px var(--font-body); color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-row-tech.op-tech-unassigned .op-row-tech-name { color: var(--amber-text); }

.op-row-schedule.schedule-date-info {
  font: 600 11.5px var(--font-mono);
  color: var(--text-body);
  border: none;
  background: none;
  padding: 0;
  width: 100%;
}
.op-row-schedule.schedule-date-unset { color: var(--amber-text); }

.op-row-hrs { font: 500 11.5px var(--font-mono); color: var(--text-muted); text-align: right; }

.op-row-status { justify-self: end; }

.op-row-tint--in-progress { background: rgba(20,98,184,.035); }
.op-row-tint--parts, .op-row-tint--unscheduled, .op-row-tint--overdue { background: #FFFCF6; }
.op-row-tint--hold { background: #FFF9F9; }
.op-row-tint--done { background: #FBFCFD; }
.op-row-tint--done .op-row-operation-title { color: var(--text-muted); }

/* --- Operations-tab quick filters + hide-completed toggle --- */
.wo-filter-chip-count { opacity: .75; font-weight: 500; }
.job-hide-completed-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font: 500 11.5px var(--font-body);
  color: var(--text-muted);
}
.job-hide-completed-toggle label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
#job-hide-completed-note { color: var(--text-faint); }

/* --- Part 3: receiving-page Expected_Date field hint --- */
.field-hint { display: block; font: 400 10.5px var(--font-body); color: var(--text-faint); margin-top: 3px; }