: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;
}






.flex-group label{
  margin: 0;
}

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


.flex-expand{
  flex:1;
}



#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):not(.contractDoc-page thead)) {
      font-weight: bold;
      text-align: center;
      font-size: 1.25em;
    }

    td:where(:not(.estDoc-page td):not(.invDoc-page td):not(.contractDoc-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):not(.contractDoc-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);
    }

  .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; }
#invoices-list-button { margin-left: 6px; }
.estDoc-toolbar .estDoc-email-btn { color: var(--signal-blue); background: #fff; border: 1.5px solid var(--signal-blue) !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; }

/* height: auto — style.css's bare "table { height: 300px }" stretched these rows. */
.invDoc-line-table { width: 100%; height: auto; 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; padding-left: 24px; text-align: right; }
.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; }
.invDoc-app-row.hidden, .invDoc-notes.hidden { display: none; }
.invDoc-notes {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #F6F8FA;
  font: 400 11px/1.5 var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-body);
  white-space: pre-wrap;
}
.invDoc-past-due-pill.invDoc-pill-draft { color: #5A6B7D; background: #EEF2F6; border-color: #DCE3EA; }
.invDoc-past-due-pill.invDoc-pill-void { color: #B3261E; background: #FDECEC; border-color: #F2C9C6; }
.invDoc-past-due-pill.invDoc-pill-paid { color: #1E7F4F; background: #E7F6EE; border-color: #C6E8D5; }

@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:not(.estDoc-page thead):not(.invDoc-page thead):not(.contractDoc-page 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;
  }

  .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,
#mooringPlanning, #mooringHaul, #mooringLaunch, #mooringEstimator, #inventoryDatabase, #receivingDatabase,
#schedule, #fuel-reading, #fuel-dashboard, #settings, #launchDispatch, #mooringMapEditor, #mooringFitCheck, #mooringField, #impactForecast, #maintenance, #compliance, #battery, #equipment, #slips, #timeclock, #dockSchedule, #requests, #reports, #drystack, #messages, #techQuestions, #help, #uscg{
  flex: 1;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

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

/* A page loading in the background (shellPreload.js): drawn at full size, off-screen. */
.page-view.page-preloading{
  display: flex !important;
  position: fixed !important;
  left: -20000px !important;
  top: 0 !important;
  width: var(--preload-w, 100vw) !important;
  height: var(--preload-h, 100vh) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.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);
}


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

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

.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;
}

.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 > svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.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;
  /* not the generic input's padding, radius and fit-content width */
  padding: 0;
  border-radius: 0;
  width: auto;
  min-width: 0;
}

.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);
}

#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;
}

#updateStatus{
  font-size: 1rem !important;
  height: fit-content !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);
}

.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%;
  min-width: 280px;
  max-width: 420px;
  height: 50%;
  background:white;
  z-index: 1400;
  flex-flow: column;
  border: 4px solid var(--nav-background-color);
  border-radius: 10px;
  overflow: hidden;
}

#week-count-body{
  display: flex;
  flex-flow: column;
  gap: .35rem;
  padding: 1rem;
  overflow-y: auto;
}

.week-count-header {
  display: flex;
  flex-flow: column;
  gap: .15rem;
  padding-bottom: .6rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--card-border, #E1E6EB);
}

.week-count-range {
  font-weight: 700;
  font-size: 14px;
  color: var(--harbor-navy, #14324D);
}

.week-count-summary {
  font-size: 12.5px;
  color: var(--text-muted, #5A6B7B);
}

.week-count-loading,
.week-count-empty {
  color: var(--text-muted, #5A6B7B);
  font-size: 13px;
  padding: .5rem 0;
}

.week-count-row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid #EDF1F5;
  font-size: 12.5px;
}

.week-count-row:last-child { border-bottom: none; }

.week-count-row-date {
  flex-shrink: 0;
  width: 52px;
  font-weight: 700;
  font-family: var(--font-mono, 'Spline Sans Mono', monospace);
  color: var(--signal-blue, #1462B8);
}

.week-count-row-boat {
  flex: 1;
  font-weight: 600;
  color: var(--text-body, #29414F);
}

.week-count-row-customer {
  flex-shrink: 0;
  color: var(--text-faint-alt, #8C9BA8);
  text-align: right;
}

/* ============================================================ */
/* 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;
  /* The nav list is the one part of the rail allowed to shrink: on a short
     screen it scrolls, so the Today group and user chip below stay visible.
     (The rail itself can't scroll — the Moorings/Fuel flyout is positioned
     outside its right edge and would be clipped.) */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

#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;
}

/* Help's "?" stands in for an icon image, at the same size and weight as the others. */
#buttonBar.page-select .rail-item .rail-help-mark {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  box-sizing: border-box;
  border: 1.6px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  color: rgba(255, 255, 255, .7);
  font: 700 11px/14px var(--font-body);
  text-align: center;
  pointer-events: none;
}

#buttonBar.page-select .rail-item.selected-tide-button .rail-help-mark {
  border-color: #fff;
  color: #fff;
}

#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;
}

/* Columns layout (Moorings) — design_handoff_moorings_menu, option 1B */
.rail-flyout--columns {
  width: 580px;
  padding: 16px 14px 14px;
  gap: 12px;
}

.rail-flyout--columns .rail-flyout-header {
  padding: 0 8px;
  border-bottom: none;
}

.rail-flyout--columns .rail-flyout-body {
  padding-top: 0;
}

.rail-flyout-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.rail-flyout-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rail-flyout--columns .rail-flyout-group-label {
  color: #6E8398;
  padding: 4px 8px 6px;
}

.rail-flyout--columns .rail-flyout-item {
  height: 32px;
  padding: 0 8px;
  align-items: center;
  gap: 7px;
}

.rail-flyout--columns .rail-flyout-item-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Columns 2-3 don't touch the panel edge, so the bar sits on the row's own left edge */
.rail-flyout--columns .rail-flyout-item.active::before {
  left: 0;
}

.rail-flyout-hint {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 10px 8px 0;
  font: 400 11.5px var(--font-body);
  color: #7D93A6;
  min-height: 16px;
  flex-shrink: 0;
}

body.scroll-locked {
  overflow: hidden;
}

@media (max-width: 768px) {
  .rail-flyout--columns {
    width: auto;
  }

  .rail-flyout-cols {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .rail-flyout--columns .rail-flyout-item {
    height: auto;
    min-height: 48px;
  }

  .rail-flyout-hint {
    display: none;
  }

  .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;
}

#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;
}

.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;
}

:root {
  --wo-picker-panel-width: 900px;
}

/* Picking mode (syncWoPickerOpenState in woForm.js): one window. While the
   op picker or op form is open, the form becomes a rail (boat, the work
   order's own fields, the Operations list) and #opCodeTable / #job fill
   #wo-pick-pane beside it — they live inside #addModal, not over it. */
.wo-create-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.wo-create-modal .wo-create-body > .modal-inside {
  min-width: 0;
}

.wo-pick-pane,
.wo-pick-summary,
.wo-pick-done-btn {
  display: none;
}

.wo-create-modal.wo-picking {
  width: min(1400px, 96vw);
}

.wo-create-modal.wo-picking .wo-validation-bar,
.wo-create-modal.wo-picking .work-order-type {
  display: none !important;
}

.wo-create-modal.wo-picking .wo-create-body > .modal-inside {
  flex: 0 0 340px;
  padding: 16px;
  background: var(--app-bg);
  border-right: 1px solid var(--card-border);
}

.wo-create-modal.wo-picking .work-order-form {
  gap: 12px;
  min-height: 100%;
}

.wo-create-modal.wo-picking .wo-context-strip,
.wo-create-modal.wo-picking .wo-editors-panel,
.wo-create-modal.wo-picking #work-order-date-section,
.wo-create-modal.wo-picking .wo-details-card,
.wo-create-modal.wo-picking .wo-parts-card,
.wo-create-modal.wo-picking .wo-pricing-bar,
.wo-create-modal.wo-picking #selectOpCode,
.wo-create-modal.wo-picking #general-wo-card {
  display: none !important;
}

.wo-create-modal.wo-picking.wo-picking-general .wo-details-card {
  display: block !important;
  padding: 14px;
  box-shadow: none;
}

.wo-create-modal.wo-picking.wo-picking-general #general-work-order-section {
  gap: 10px !important;
}

.wo-create-modal.wo-picking .wo-create-columns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.wo-create-modal.wo-picking .wo-details-card,
.wo-create-modal.wo-picking .wo-ops-card {
  width: 100%;
  box-sizing: border-box;
}

.wo-create-modal.wo-picking .wo-ops-card {
  flex: 1;
  min-height: 200px;
  padding: 14px;
  box-shadow: none;
}

.wo-create-modal.wo-picking #activeJobs {
  max-height: none;
}

.wo-create-modal.wo-picking .wo-pick-summary {
  display: block;
  padding: 2px 2px 4px;
}

.wo-pick-summary-boat {
  font: 700 16px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
}

.wo-pick-summary-meta {
  margin-top: 3px;
  font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: var(--text-muted);
}

.wo-create-modal.wo-picking .wo-pick-done-btn {
  display: block;
  width: 100%;
  flex-shrink: 0;
  margin-top: 12px;
  padding: 11px;
  font: 600 0.88rem 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-modal.wo-picking .wo-pick-done-btn:hover {
  border-color: var(--seafoam);
  color: var(--seafoam);
}

.wo-create-modal.wo-picking .wo-pick-pane {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.wo-pick-pane > #opCodeTable,
.wo-pick-pane > #job {
  position: static;
  z-index: auto;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  pointer-events: auto;
}

.wo-pick-pane.wo-pick-detail > #opCodeTable {
  display: none !important;
}

.wo-pick-pane .op-picker-panel,
.wo-pick-pane #opCodeForm.smallModal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Light headers: the pane is part of the work order window, not a modal of its own. */
.wo-pick-pane #opCodeTable .button-exit-row,
.wo-pick-pane #opCodeForm > .job-detail-header {
  background: #fff;
  color: var(--harbor-navy);
  border-radius: 0;
  border-bottom: 1px solid var(--card-border);
  padding: 12px 18px !important;
}

.wo-pick-pane #opCodeTable .exitButtonSpacer {
  display: none;
}

.wo-pick-pane #opCodeTable #entryTitle {
  flex: 1;
  text-align: left;
  font: 700 16px var(--font-display, 'Archivo', sans-serif);
  color: var(--harbor-navy);
}

.wo-pick-pane .exitButton {
  background: var(--app-bg);
  border: 1px solid var(--card-border);
}

.wo-pick-pane .op-picker-body-row .op-code-row {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 6px;
}

/* #Add input:focus-visible drops the border of every focused input in the
   work order window, which now includes this form: keep its focus ring. */
.wo-pick-pane #opCodeForm input:focus-visible,
.wo-pick-pane #opCodeForm textarea:focus-visible,
.wo-pick-pane #opCodeForm select:focus-visible {
  border: 1px solid var(--seafoam);
  box-shadow: 0 0 0 3px rgba(15,140,130,.15);
}

/* The description is the second <p>; a reason/hours pill may follow it. */
.wo-pick-pane .op-picker-body-row .op-code-row p.form-data:nth-of-type(2) {
  flex: 1;
  min-width: 0;
  color: var(--text-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 600 13.5px var(--font-body, 'Public Sans', system-ui, sans-serif);
  margin: 0;
}

.wo-job-row.wo-job-row-new {
  animation: wo-job-row-new 2s ease-out;
}

@keyframes wo-job-row-new {
  0% { background: rgba(15,140,130,.18); border-color: var(--seafoam); }
  100% { background: #fff; }
}

@media screen and (max-width: 900px) {
  .wo-create-modal.wo-picking .wo-create-body {
    flex-direction: column;
  }
  .wo-create-modal.wo-picking .wo-create-body > .modal-inside {
    flex: 0 0 auto;
    max-height: 38%;
    border-right: none;
    border-bottom: 1px solid var(--card-border);
  }
  .wo-create-modal.wo-picking .wo-ops-card {
    min-height: 0;
  }
}

/* The type switch sits on the window, not in a grey box. */
.wo-create-modal .work-order-type {
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--card-border);
  margin: 0;
  padding: 10px 0;
}

/* One focus look for the work order's own fields (was a black underline + navy outline). */
#general-work-order-section select:focus-visible,
#general-work-order-section input[type="text"]:focus-visible {
  outline: none;
  border: 1px solid var(--seafoam) !important;
  box-shadow: 0 0 0 3px rgba(15,140,130,.15);
}

/* 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);
}

/* The WO number fields keep their own look (.wo-number-input), like the season cards'. */
#general-work-order-section select,
#general-work-order-section input[type="text"]:not(.wo-number-input) {
  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"]:not(.wo-number-input):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;
}

/* 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: var(--text-muted); background: var(--app-bg); }
.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;
}

/* beats #Add input:focus-visible, which drops the border */
#Add .wo-number-input:focus-visible {
  outline: none;
  border: 1.5px solid var(--seafoam);
  box-shadow: 0 0 0 3px rgba(15,140,130,.15);
}

.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;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tide-date-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  background: none;
  padding: 2px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.tide-date-pick:hover { background: #F1F5F9; }

.tide-today-btn {
  margin-top: 4px;
  border: none;
  background: none;
  padding: 0;
  font: 600 11.5px var(--font-body);
  color: var(--signal-blue);
  cursor: pointer;
}

.tide-today-btn:hover { text-decoration: underline; }

.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-now {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
  margin-top: 14px;
  font: 500 12.5px var(--font-body);
  color: var(--text-muted);
}

.tide-now-dir { font: 700 12.5px var(--font-body); }
.tide-now.is-rising .tide-now-dir { color: var(--seafoam); }
.tide-now.is-falling .tide-now-dir { color: var(--signal-blue); }
.tide-now-height { font-weight: 700; color: var(--harbor-navy); }

.tide-chart { margin-top: 10px; }
.tide-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.tide-chart .tc-work { fill: #EEF4F8; }
.tide-chart .tc-line { fill: none; stroke: var(--seafoam); stroke-width: 2; stroke-linejoin: round; }
.tide-chart .tc-base { stroke: var(--card-border); stroke-width: 1; }
.tide-chart .tc-high { fill: #fff; stroke: var(--seafoam); stroke-width: 2; }
.tide-chart .tc-low { fill: #fff; stroke: var(--signal-blue); stroke-width: 2; }
.tide-chart .tc-now { stroke: var(--harbor-navy); stroke-width: 1; stroke-dasharray: 2 2; opacity: .55; }
.tide-chart .tc-now-dot { fill: var(--harbor-navy); stroke: #fff; stroke-width: 1.5; }
.tide-chart .tc-ticks text { font: 600 9px var(--font-mono); fill: var(--text-faint); }

.tide-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.tide-tile {
  border: 1px solid var(--card-border);
  background: #F8FAFC;
  border-radius: 13px;
  padding: 11px 14px;
}

.tide-tile.is-off-hours { opacity: .55; }
.tide-tile.is-next { opacity: 1; background: #fff; border-color: var(--seafoam); box-shadow: 0 0 0 1px var(--seafoam) inset; }
.tide-tile-low.is-next { border-color: var(--signal-blue); box-shadow: 0 0 0 1px var(--signal-blue) inset; }

.tide-tile-height {
  font: 600 12px var(--font-body);
  color: var(--text-muted);
  margin-top: 2px;
}

.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 21px var(--font-display);
  color: var(--harbor-navy);
  margin-top: 5px;
}

.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;
}

/* Water: three layers of different wavelengths drifting against each other, a slow swell, a
   gradient front with a light crest. tidePanel.js sets --tide-drop (higher water at high tide)
   and --swell-dur (faster while the tide runs). */
.tide-waves {
  --tide-drop: 8px;
  --swell-dur: 6s;
  margin-top: auto;
  line-height: 0;
  flex-shrink: 0;
}

.tide-sea { display: block; width: 100%; height: 70px; }
.tide-sea .tide-level { transform: translateY(var(--tide-drop)); transition: transform 1.5s ease-in-out; }
.tide-sea .tide-swell { animation: tide-swell var(--swell-dur) ease-in-out infinite; }
.tide-sea .tide-w-back { fill: rgba(95, 208, 196, .22); animation: tide-drift-r 23s linear infinite; }
.tide-sea .tide-w-mid { fill: rgba(15, 140, 130, .38); animation: tide-drift-l 15s linear infinite; }
.tide-sea .tide-w-front,
.tide-sea .tide-w-crest { animation: tide-drift-r 10s linear infinite; }
.tide-sea .tide-w-front { fill: url(#tide-sea-fill); }
.tide-sea .tide-w-crest { fill: none; stroke: rgba(205, 245, 240, .6); stroke-width: 1.3; vector-effect: non-scaling-stroke; }

@keyframes tide-drift-r { from { transform: translateX(-600px); } to { transform: translateX(0); } }
@keyframes tide-drift-l { from { transform: translateX(0); } to { transform: translateX(-600px); } }
@keyframes tide-swell { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  .tide-sea .tide-w, .tide-sea .tide-swell { animation: none; }
}

/* ---------------- 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)                             */
/* ==================================================================== */

/* The page stops at the frame, or the list below grows past it and can't scroll. */
#daily-log-div {
  height: 100%;
  min-height: 0;
}

#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,
#invoices-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,
#invoices-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; }

/* Also reused as the list-level "Unsigned only" toggle in the header — active
   state borrowed from the amber unsigned-count pill so it reads as the same concept. */
#contracts-unsigned-toggle.active {
  color: var(--amber-text, #B5790C);
  background: var(--status-amber-bg, #FFF4E2);
  border-color: var(--status-amber-bg, #FFF4E2);
}

/* ============================================================
   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-progress {
  padding: 12px 22px 0;
  flex-shrink: 0;
}

.contract-review-progress-track {
  height: 6px;
  border-radius: 3px;
  background: #F1F4F7;
  overflow: hidden;
}

.contract-review-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--signal-blue, #1462B8);
  transition: width .25s ease;
}

.contract-review-progress-label {
  font: 600 12px var(--font-body, 'Public Sans', system-ui, sans-serif);
  color: #5A6B7B;
  margin-top: 7px;
}

.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: 1 1 200px; min-width: 0; }
.table-item .job-group.wo-description-group { flex: 1.4 1 220px; min-width: 0; }
.table-item .wo-attention { flex: 1.4 1 220px; min-width: 0; }
.table-item .wo-techs-group {
  flex: 0 0 116px;
  min-width: 0;
  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-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-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 {
  min-width: 0;
  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 96px 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;
  padding: 0 7px;
  font: 500 12px var(--font-mono);
  color: var(--text-body);
}
/* A click anywhere opens the calendar (wireScheduleDateInput), so the icon only took room from the date. */
.op-row-compact .op-row-schedule::-webkit-calendar-picker-indicator { display: none; }
.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;
}

/* "Bill Operation" shortcut (syncOpRowBillButton()). On a billable row it stands in for the Status
   pill in the same 108px grid cell: the pill goes display:none (out of grid flow, so it stops
   occupying a track) and the button — inserted right after it in the DOM — becomes the in-flow
   child that auto-placement puts in that column. The column template is untouched, so nothing
   shifts relative to sibling rows (a dedicated extra column did — see syncOpRowBillButton()). The
   pill stays in the DOM because updateOperationTableUI()/refreshOpRowSeverity() still write to it. */
.op-row-compact.op-row-billable .op-row-status { display: none; }
.op-row-compact .op-row-bill-btn {
  justify-self: stretch;
  width: 100%;
  height: 32px;
  min-height: 32px;
  margin: 0; /* a global `button { margin: 5px }` would otherwise push it 5px out of its cell */
  padding: 0 6px;
  background: var(--green);
  border: 1px solid var(--green-text);
  border-radius: 8px;
  color: #fff;
  font: 600 12px var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease;
}
.op-row-compact .op-row-bill-btn:hover { background: var(--green-text); }
.op-row-compact .op-row-bill-btn:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; }
.op-row-compact .op-row-bill-btn:disabled { opacity: .6; cursor: default; }

/* Done rows are dimmed to .7 as a whole, which would wash the button out to look disabled — and a
   Complete / Ready to Bill row isn't finished business, it's waiting on this button. Opacity can't
   be undone on a child, so move the dimming from the row onto its other cells instead. */
.op-table-data-row.op-row-done.op-row-billable { opacity: 1; }
.op-table-data-row.op-row-done.op-row-billable > :not(.op-row-bill-btn) { opacity: .7; }

/* --- Part 2: Operations tab flat table --- */
/* Ready to Bill and Closed ops show only under their Billing Status filter (toggleJobs() sets
   show-complete / show-closed on the list). The grid rule below would otherwise override the
   older .job-item.complete-job { display:none } and show them in All. */
#jobList .job-item.complete-job,
#jobList .job-item.closed-job { display: none; }
#jobList.show-complete .job-item.complete-job,
#jobList.show-closed .job-item.closed-job { display: flex; }
#jobList.show-complete .job-item.op-table-row.complete-job,
#jobList.show-closed .job-item.op-table-row.closed-job { display: grid; }
.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-paint { font: 700 12.5px var(--font-body); color: var(--harbor-navy, #0C2C49); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-row-paint:empty { display: none; }
.op-row-paint.is-missing { color: #8A5B05; }
.op-paint-banner { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: #E5EFFB; }
.op-paint-banner.is-missing { background: #FBEFD8; }
/* Parts on order for this operation (opOrders.js). */
.op-orders { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.op-orders[hidden] { display: none; }
.op-orders-head { font: 700 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.op-order { display: grid; gap: 2px; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--card-border-alt); border-left-width: 4px; border-radius: 10px; background: #fff; font: 500 13px var(--font-body); color: var(--text-secondary); }
button.op-order { cursor: pointer; }
button.op-order:hover { background: #F7FAFC; }
.op-order-ref { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; margin-right: 4px; color: var(--text-primary, #1d2b3a); }
.op-order-items { color: var(--text-primary, #1d2b3a); }
.op-order-state { font-weight: 700; font-size: 12.5px; }
.op-order--blue { border-left-color: #2F6FB5; } .op-order--blue .op-order-state { color: #2F6FB5; }
.op-order--amber { border-left-color: #D99A1E; } .op-order--amber .op-order-state { color: #9A6A0C; }
.op-order--red { border-left-color: #C2412D; } .op-order--red .op-order-state { color: #A3321F; }
.op-order--green { border-left-color: #2E9E6A; } .op-order--green .op-order-state { color: #17704A; }
.op-order--grey { border-left-color: #A7B1BC; }
.op-paint-label { font: 700 12px var(--font-body); color: var(--text-muted); }
.op-paint-name { display: inline-flex; align-items: center; gap: 7px; font: 800 17px var(--font-display); color: var(--harbor-navy, #0C2C49); }
.op-paint-name i { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.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 --- */
.wo-filter-chip-count { opacity: .75; font-weight: 500; }
/* The chips sit at their own height (not stretched to the row). */
#job-quick-filters { align-items: center; }

/* --- 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; }

/* ---- Rail fit (kept last so it wins over the equal-specificity rail rules above) ---- */
#buttonBar.page-select > .rail-brand,
#buttonBar.page-select > .rail-add-btn,
#buttonBar.page-select > .rail-today-group,
#buttonBar.page-select > .rail-user-chip {
  flex-shrink: 0;
}

/* Legacy .tideButton margins (5px top/bottom) don't collapse in a flex
   column, so they stacked on top of the 3px gap — ~130px of dead space. */
#buttonBar.page-select .page-buttons .rail-item,
#buttonBar.page-select .rail-glance-row {
  margin: 0;
}
#buttonBar.page-select .rail-add-btn {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}
/* The chip was being stretched to fill leftover height (141px for ~50px of
   content), squeezing the nav list; margin-top:auto still pins it to the bottom. */
#buttonBar.page-select .rail-user-chip {
  flex: 0 0 auto;
}

/* Laptop-height screens: tighten the rail so it fits without scrolling. */
@media (max-height: 900px) {
  #buttonBar.page-select { padding: 12px 16px; }
  #buttonBar.page-select .rail-brand { padding: 2px 8px 12px; }
  #buttonBar.page-select .rail-add-btn { margin-bottom: 8px; padding: 7px 12px; }
  #buttonBar.page-select .page-buttons { gap: 2px; }
  #buttonBar.page-select .rail-item { padding: 7px 12px; }
  #buttonBar.page-select .rail-today-group { margin-top: 8px; padding-top: 8px; }
  #buttonBar.page-select .rail-group-header { padding-bottom: 4px; }
  #buttonBar.page-select .rail-glance-row { padding: 5px 12px; }
  #buttonBar.page-select .rail-user-chip { padding: 8px 10px; }
}

/* "Schedule it now" (scheduleAssist.js) lives in scheduleAssist.css: Equipment uses it too. */

/* Projected finish on a work order row */
.wo-tech-done { font: 500 11.5px var(--font-mono); color: var(--seafoam); margin-top: 3px; }
.wo-tech-done:empty { display: none; }
.wo-tech-done.is-late { color: var(--red-text); }

/* The global `label { margin-top: 2em; margin-bottom: 1em }` rule was leaking into
   this modal's <label class="add-op-field"> wrappers, spreading the form out and
   pushing everything under the hours field below the fold. */
.add-op-field { margin: 0; }

/* ============================================================ */
/* Office shell v2 (design_handoff_round2 §4A, kept in the rail):  */
/* grouped rail, action counts, global search, sync chip.        */
/* ============================================================ */

#buttonBar.page-select .page-buttons .rail-group-header {
  padding: 12px 12px 4px;
  font: 700 10.5px var(--font-body);
  letter-spacing: .1em;
  color: #6E8398;
  flex-shrink: 0;
}
#buttonBar.page-select .page-buttons .rail-group-header:first-child { padding-top: 2px; }

#buttonBar.page-select .rail-count {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--amber);
  color: #2A1A02;
  font: 700 11px var(--font-body);
  text-align: center;
  pointer-events: none;
}
#buttonBar.page-select .rail-count[hidden] { display: none; }

/* search */
.rail-search {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  margin: 0 0 10px; padding: 0 8px 0 11px; height: 38px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #8FA6BC;
  transition: background 120ms ease, border-color 120ms ease;
}
.rail-search:focus-within { background: rgba(255, 255, 255, .12); border-color: rgba(95, 208, 196, .55); color: #CFE3F5; }
.rail-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font: 500 13.5px var(--font-body); color: #fff; padding: 0; height: 100%;
}
.rail-search input::placeholder { color: #8FA6BC; }
.rail-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.rail-search-key {
  font: 700 11px var(--font-mono); color: #8FA6BC; padding: 1px 6px; border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .18); background: transparent;
}
.rail-search:focus-within .rail-search-key { display: none; }

.rail-search-results {
  position: fixed; z-index: 2500; width: 420px; max-width: calc(100vw - 24px); max-height: min(560px, calc(100vh - 40px));
  overflow-y: auto; background: #fff; border: 1px solid var(--card-border-alt); border-radius: 14px;
  box-shadow: 0 22px 54px rgba(10, 33, 53, .32); padding: 8px; font-family: var(--font-body); color: var(--text-body);
}
.rail-search-results[hidden] { display: none; }
.rail-search-results .rs-group {
  display: flex; justify-content: space-between; padding: 10px 10px 4px;
  font: 700 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.rail-search-results .rs-group span { letter-spacing: 0; font-weight: 600; }
.rail-search-results .rs-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.rail-search-results .rs-row.active { background: #EEF4FC; }
.rail-search-results .rs-main { display: flex; flex-direction: column; min-width: 0; }
.rail-search-results .rs-title { font: 700 14px var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-search-results .rs-sub { font: 500 12.5px var(--font-body); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-search-results .rs-kind { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; background: var(--status-neutral-bg) center / 15px no-repeat; }
.rail-search-results .rs-kind-wo { background-color: #E5EFFB; background-image: url('/assets/work-order.png'); }
.rail-search-results .rs-kind-customer { background-color: #EAF5F3; background-image: url('/assets/customers-icon.png'); }
.rail-search-results .rs-kind-boat { background-color: #EAF5F3; background-image: url('/assets/powerboat.png'); }
.rail-search-results .rs-kind-mooring { background-color: #FBEFD8; background-image: url('/assets/mooring.png'); }
.rail-search-results .rs-empty { padding: 16px 12px; font: 500 13px/1.5 var(--font-body); color: var(--text-muted); }
.rail-search-results .rs-empty b { display: block; color: var(--text-body); font-size: 14px; margin-bottom: 2px; }

/* sync chip slot + user chip */
#buttonBar.page-select .rail-sync { flex-shrink: 0; padding: 10px 2px 8px; margin-top: auto; }
/* "Email needs reconnecting" (shellNav.js watchMailHealth), above the Live chip */
#buttonBar.page-select .rail-mailhealth { flex-shrink: 0; padding: 10px 2px 0; margin-top: auto; }
#buttonBar.page-select .rail-mailhealth:not([hidden]) + .rail-sync { margin-top: 0; padding-top: 6px; }
.rail-mailhealth[hidden] { display: none !important; }
.rail-mailhealth-btn { margin: 0; height: 30px; max-width: 100%; padding: 0 11px; border-radius: 999px; border: none; cursor: pointer; background: #FDF1DC; color: #8A5A00; display: inline-flex; align-items: center; gap: 7px; font: 700 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif); white-space: nowrap; overflow: hidden; }
.rail-mailhealth-dot { width: 8px; height: 8px; border-radius: 50%; background: #E0930F; flex-shrink: 0; }
.rail-mailhealth-text { overflow: hidden; text-overflow: ellipsis; }
#buttonBar.page-select .rail-sync:empty { display: none; }
#buttonBar.page-select .rail-sync .sync-chip { height: 30px; padding: 0 11px; font-size: 12.5px; }
#buttonBar.page-select .rail-user-chip { margin-top: 0; gap: 9px; }
#buttonBar.page-select .rail-user-avatar {
  display: flex; align-items: center; justify-content: center;
  font: 700 12px var(--font-body); color: #9FD8E8; width: 32px; height: 32px;
}
#buttonBar.page-select .rail-user-chip #currentUserName { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#buttonBar.page-select .rail-icon-btn {
  flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .14); outline: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#buttonBar.page-select .rail-icon-btn:focus-visible { outline: 2px solid var(--mist); outline-offset: 2px; }
#buttonBar.page-select .rail-icon-btn img { filter: brightness(0) invert(1); opacity: .7; pointer-events: none; }
#buttonBar.page-select .rail-icon-btn:hover,
#buttonBar.page-select .rail-icon-btn.selected-tide-button { background: rgba(95, 208, 196, .16); border-color: rgba(95, 208, 196, .4); }
#buttonBar.page-select .rail-icon-btn.selected-tide-button img { opacity: 1; }
#buttonBar.page-select .rail-user-chip .rail-signout-btn { margin-left: 0; }
#buttonBar.page-select > .rail-search,
#buttonBar.page-select > .rail-sync { flex-shrink: 0; }

@media (max-height: 940px) {
  #buttonBar.page-select .page-buttons .rail-group-header { padding: 7px 12px 2px; font-size: 10px; }
  #buttonBar.page-select .page-buttons .rail-group-header:first-child { padding-top: 0; }
  #buttonBar.page-select .page-buttons { gap: 1px; }
  #buttonBar.page-select .rail-item { padding: 6px 12px; }
  #buttonBar.page-select .page-buttons .rail-glance-row { padding: 5px 12px; }
  .rail-search { height: 34px; margin-bottom: 8px; }
  #buttonBar.page-select .rail-sync { padding: 6px 2px 6px; }
}
@media (max-width: 600px) {
  .rail-search-results { left: 12px !important; right: 12px; width: auto; }
}
@media (max-height: 940px) {
  #buttonBar.page-select .rail-brand { padding-bottom: 8px; }
}

/* Found work (techs app) — Customer Portal v2 added-work approval */
.op-row-compact .op-row-operation-sub--found { color: var(--teal-text, #0E7C73); }
.op-row-compact .op-row-operation-sub--found.op-row-operation-sub--price { color: var(--amber-text, #B5790C); font-weight: 600; }

/* Op detail breadcrumb: equipment work links to the unit's page. */
.op-equipment-link { border: 0; background: none; padding: 0; font: inherit; color: var(--signal-blue, #1462B8); font-weight: 700; cursor: pointer; }

/* ---- Personal rail layout (railLayout.js) ---- */
#buttonBar.page-select .page-buttons .rail-customize-btn {
  flex-shrink: 0; align-self: flex-start; margin: 8px 0 2px 12px; padding: 2px 0;
  border: 0; background: none; cursor: pointer;
  font: 600 11.5px var(--font-body); color: #6E8398; text-decoration: underline; text-underline-offset: 3px;
}
#buttonBar.page-select .page-buttons .rail-customize-btn:hover { color: #CFE3F5; }
#buttonBar.page-select .page-buttons .rail-customize-btn:focus-visible { outline: 2px solid var(--mist); outline-offset: 2px; }
#rail-hidden-items[hidden] { display: none !important; }

.rl-scrim {
  position: fixed; inset: 0; z-index: 3000; background: rgba(10, 33, 53, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.rl-scrim[hidden] { display: none; }
.rl-modal {
  width: 560px; max-width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; box-shadow: 0 22px 54px rgba(10, 33, 53, .32);
  font-family: var(--font-body); color: var(--text-body);
}
.rl-header { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px 12px; border-bottom: 1px solid var(--card-border-alt); }
.rl-header h2 { margin: 0 0 4px; font: 700 18px var(--font-body); }
.rl-header p { margin: 0; font: 500 13px/1.45 var(--font-body); color: var(--text-muted); }
.rl-close { margin: 0 0 0 auto; border: 0; background: none; font-size: 16px; color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.rl-close:hover { background: var(--status-neutral-bg); }
.rl-body { overflow-y: auto; padding: 12px 20px; display: flex; flex-direction: column; gap: 12px; }
.rl-group { border: 1px solid var(--card-border-alt); border-radius: 10px; padding: 8px; }
.rl-group-hidden { background: #F6F8FA; border-style: dashed; }
.rl-group-head { display: flex; align-items: center; gap: 6px; padding: 2px 2px 6px; }
.rl-group-name {
  flex: 1; min-width: 0; margin: 0; padding: 6px 9px; border: 1px solid var(--card-border-alt); border-radius: 7px;
  font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-body);
}
.rl-hidden-title { font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: 6px 2px; }
.rl-hidden-sub { font: 500 12px var(--font-body); color: var(--text-muted); }
.rl-list { list-style: none; margin: 0; padding: 2px; min-height: 34px; border-radius: 8px; display: flex; flex-direction: column; gap: 2px; }
.rl-list.rl-drop-target { background: #EEF4FC; outline: 2px dashed #9CC0EA; }
.rl-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; background: #fff; cursor: grab; }
.rl-item:hover { background: #F3F6F9; }
.rl-item.rl-dragging { opacity: .4; }
.rl-item img, .rl-noicon { width: 15px; height: 15px; flex-shrink: 0; opacity: .75; }
.rl-noicon { font: 700 12px var(--font-body); text-align: center; color: var(--text-muted); }
.rl-grip { color: #A9B6C3; font-size: 11px; letter-spacing: -2px; user-select: none; }
.rl-name { flex: 1; min-width: 0; font: 600 13.5px var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-empty { padding: 7px 8px; font: 500 12.5px var(--font-body); color: var(--text-muted); }
.rl-btn {
  flex-shrink: 0; width: 26px; height: 26px; padding: 0; border: 1px solid var(--card-border-alt); border-radius: 6px;
  margin: 0; background: #fff; color: var(--text-body); cursor: pointer; font: 600 13px/1 var(--font-body);
}
.rl-btn:hover:not(:disabled) { background: #EEF4FC; }
.rl-btn:disabled { opacity: .35; cursor: default; }
.rl-btn-danger:hover:not(:disabled) { background: #FCEBEA; color: #B3261E; }
.rl-move {
  flex-shrink: 0; width: 118px; margin: 0; padding: 3px 4px; height: 26px; border: 1px solid var(--card-border-alt); border-radius: 6px;
  font: 500 12px var(--font-body); background: #fff; color: var(--text-body);
}
.rl-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--card-border-alt); }
.rl-spacer { flex: 1; }
.rl-text-btn { border: 0; background: none; padding: 6px 4px; font: 600 13px var(--font-body); color: var(--signal-blue, #1462B8); cursor: pointer; }
.rl-text-btn, .rl-cancel, .rl-save { margin: 0; }
.rl-cancel, .rl-save { padding: 8px 16px; border-radius: 8px; font: 700 13.5px var(--font-body); cursor: pointer; }
.rl-cancel { border: 1px solid var(--card-border-alt); background: #fff; color: var(--text-body); }
.rl-save { border: 0; background: var(--signal-blue, #1462B8); color: #fff; }
@media (max-width: 600px) {
  .rl-move { width: 92px; }
  .rl-spacer { flex-basis: 100%; }
  .rl-cancel { margin-left: auto; }
  .rl-header, .rl-body, .rl-footer { padding-left: 14px; padding-right: 14px; }
}

/* ============================================================ */
/* Rail styles (railStyles.js): collapsible / icons / pinned     */
/* ============================================================ */
#rl-groups { display: flex; flex-direction: column; gap: 12px; }
.rl-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rl-style { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border: 1.5px solid var(--card-border-alt); border-radius: 10px; cursor: pointer; }
.rl-style.on { border-color: var(--signal-blue, #1462B8); background: #F3F8FE; }
.rl-style input { position: absolute; opacity: 0; pointer-events: none; }
.rl-style:focus-within { outline: 2px solid var(--signal-blue, #1462B8); outline-offset: 1px; }
.rl-style-text { display: flex; flex-direction: column; gap: 2px; font: 500 12px/1.35 var(--font-body); color: var(--text-muted); }
.rl-style-text b { font: 700 13px var(--font-body); color: var(--text-body); }
.rl-style-pic { flex: none; width: 34px; height: 42px; border-radius: 6px; background: var(--harbor-navy, #0C2C49); padding: 5px 4px; box-sizing: border-box; display: flex; flex-direction: column; gap: 3px; }
.rl-style-pic i { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.55); }
.rl-style-pic-collapsible i:nth-child(2) { margin-left: 5px; }
.rl-style-pic-collapsible i:nth-child(4) { margin-top: 6px; }
.rl-style-pic-icons { width: 18px; align-items: center; }
.rl-style-pic-icons i { width: 8px; height: 6px; }
.rl-style-pic-pinned i:last-child { margin-top: auto; height: 6px; background: rgba(95,208,196,.8); }
.rl-pin-note { margin: 0; font: 500 12.5px var(--font-body); color: var(--text-muted); }
.rl-pin { color: #A9B6C3; }
.rl-pin.on { color: #B86E00; border-color: #F2C77A; background: #FFF8EA; }
@media (max-width: 600px) { .rl-styles { grid-template-columns: minmax(0, 1fr); } }

.rs-badge { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--signal-blue, #1462B8); color: #fff; font: 700 11px/18px var(--font-body); text-align: center; letter-spacing: 0; text-transform: none; }
.rs-badge[hidden] { display: none; }
.rs-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); }

/* Collapsible: headers are buttons */
#buttonBar.page-select .rail-group-header.rs-fold-head { display: flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 8px; user-select: none; }
#buttonBar.page-select .rail-group-header.rs-fold-head:hover { background: rgba(255,255,255,.06); color: #fff; }
#buttonBar.page-select .rail-group-header.rs-fold-head:focus-visible { outline: 2px solid #5FD0C4; outline-offset: 1px; }
.rs-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin: 0 4px 0 auto; transition: transform 120ms ease; }
.rs-fold-head .rs-badge:not([hidden]) + .rs-chev { margin-left: 0; }
.rs-fold-head[aria-expanded="true"] .rs-chev { transform: rotate(45deg); }
#buttonBar.page-select .rs-folded { display: none !important; }

/* Pinned + icons: the off-stage holder, the folded default headers */
#rail-offstage { display: none !important; }
#buttonBar.page-select .rail-group-header.rs-folded-head { display: none; }
#buttonBar.page-select .rs-all { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border-radius: var(--radius-control, 9px); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #E6EEF5; font: 700 13px var(--font-body); cursor: pointer; }
#buttonBar.page-select .rs-all:hover { background: rgba(255,255,255,.1); }
.rs-all kbd { font: 600 10.5px var(--font-body); color: #8FA8BC; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; padding: 1px 5px; }

/* Icons: a slim rail */
body.rail-style-icons { --rail-width: 84px; }
body.rail-style-icons #buttonBar.page-select { padding: 16px 8px; }
body.rail-style-icons #buttonBar .rail-brand { justify-content: center; padding: 4px 0 16px; }
body.rail-style-icons #buttonBar .rail-brand-text,
body.rail-style-icons #buttonBar .rail-add-btn .rail-label,
body.rail-style-icons #buttonBar .rail-search-key,
body.rail-style-icons #buttonBar #currentUserName,
body.rail-style-icons #buttonBar .rail-sync { display: none; }
body.rail-style-icons #buttonBar.page-select .rail-add-btn { justify-content: center; padding: 10px 0; }
body.rail-style-icons #buttonBar .rail-search { width: 44px; margin: 6px auto; overflow: hidden; position: relative; z-index: 5; transition: width 120ms ease; }
body.rail-style-icons #buttonBar .rail-search:focus-within { width: 300px; overflow: visible; }
body.rail-style-icons #buttonBar .rail-user-chip { flex-direction: column; gap: 6px; align-items: center; }
/* Icon rail: a real glyph + short label (a pseudo-element glyph rendered 0px wide). */
#buttonBar.page-select .rail-customize-icon { display: none; }
body.rail-style-icons #buttonBar.page-select .page-buttons .rail-customize-btn { align-self: stretch; margin: 8px 0 0; padding: 9px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 12px; text-decoration: none; color: #B9CCDD; font: 600 11px var(--font-body); }
body.rail-style-icons #buttonBar.page-select .page-buttons .rail-customize-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
body.rail-style-icons #buttonBar.page-select .rail-customize-icon { display: block; font-size: 17px; line-height: 20px; }
body.rail-style-icons #buttonBar.page-select .rail-customize-more { display: none; }
#buttonBar.page-select .rs-group-btn { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 2px; border: 0; border-radius: 12px; background: transparent; color: #B9CCDD; cursor: pointer; font: 600 11px var(--font-body); }
#buttonBar.page-select .rs-group-btn img { width: 20px; height: 20px; filter: brightness(0) invert(1); opacity: .8; pointer-events: none; }
#buttonBar.page-select .rs-group-btn:hover, #buttonBar.page-select .rs-group-btn[aria-expanded="true"] { background: rgba(255,255,255,.07); color: #fff; }
#buttonBar.page-select .rs-group-btn.rs-active { background: rgba(95, 208, 196, .14); color: #fff; }
#buttonBar.page-select .rs-group-btn.rs-active img { opacity: 1; }
#buttonBar.page-select .rs-group-btn .rs-badge { position: absolute; top: 4px; right: 10px; margin: 0; }
.rs-group-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-fly { position: absolute; left: calc(var(--rail-width) + 8px); width: 250px; }
.rs-fly .rail-flyout-body { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.rs-row { display: flex; align-items: center; gap: 4px; }
.rs-row .rs-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; }
.rs-fly .rs-row.active .rs-go, .rs-launch .rs-row.active .rs-go { background: rgba(95, 208, 196, .14); }

/* All pages */
.rs-launch-scrim { position: fixed; inset: 0; z-index: 2500; background: rgba(10, 33, 53, .45); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
.rs-launch { width: 820px; max-width: 100%; max-height: 80vh; overflow: auto; background: #10304C; color: #E6EEF5; border-radius: 16px; box-shadow: 0 22px 54px rgba(6, 20, 34, .5); padding: 16px 18px 20px; box-sizing: border-box; font-family: var(--font-body); }
.rs-launch-top { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.rs-launch-q { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: 500 15px var(--font-body); }
.rs-launch-q::placeholder { color: #8FA8BC; }
.rs-launch-hint { font: 500 12.5px var(--font-body); color: #8FA8BC; white-space: nowrap; }
.rs-launch-custom { border: 1px solid rgba(255,255,255,.18); background: none; color: #CFE3F5; font: 600 12.5px var(--font-body); padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.rs-launch-custom:hover { background: rgba(255,255,255,.08); }
.rs-launch-x { border: 0; background: none; color: #B9CCDD; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.rs-launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 18px; }
.rs-launch-head { font: 700 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #8FA8BC; margin: 0 0 6px 10px; }
.rs-launch-empty { color: #B9CCDD; padding: 10px; }
.rs-star, .rs-star-gap { flex: none; width: 30px; height: 30px; }
.rs-star { border: 0; background: none; color: #8FA8BC; font-size: 17px; cursor: pointer; border-radius: 6px; }
.rs-star:hover { background: rgba(255,255,255,.08); color: #fff; }
.rs-star.on { color: #F5B941; }
@media (max-width: 600px) { .rs-launch-hint { display: none; } .rs-launch-scrim { padding-top: 16px; } }

/* ============================================================
   Work Orders › Shrinkwrap season board (shrinkwrapView.js)
   ============================================================ */

#shrinkwrap-view {
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  flex: 1;
  align-self: stretch; /* full width, not as wide as its rows (a stage filter would jump) */
  padding: 0 16px;
}

.sw-stage-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sw-stage-chip {
  font: 600 12px var(--font-body);
  color: var(--harbor-navy);
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  padding: 6px 11px;
  cursor: pointer;
  white-space: nowrap;
}

.sw-stage-chip.active {
  background: var(--harbor-navy);
  border-color: var(--harbor-navy);
  color: #fff;
}

.sw-stage-chip--empty:not(.active) {
  color: var(--text-faint);
}

.sw-stage-count {
  font: 700 11.5px var(--font-mono);
  margin-left: 3px;
  opacity: .8;
}

.sw-stage-arrow {
  color: var(--faint);
  font-size: 13px;
}

.sw-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  min-height: 0;
  flex: 1;
}

.sw-groups {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

.sw-group {
  flex-shrink: 0;
}

.sw-group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}

.sw-group-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--faint);
  align-self: center;
}

.sw-group--waiting .sw-group-dot { background: var(--amber); }
.sw-group--ready .sw-group-dot { background: var(--green); }
.sw-group--framed .sw-group-dot,
.sw-group--vacuumed .sw-group-dot,
.sw-group--covered .sw-group-dot,
.sw-group--tightened .sw-group-dot { background: var(--signal-blue); }
.sw-group--review .sw-group-dot { background: var(--seafoam); }
.sw-group--done .sw-group-dot { background: var(--green-text); }

.sw-group-title {
  font: 700 14.5px var(--font-display);
  color: var(--harbor-navy);
}

.sw-group-count {
  font: 700 12px var(--font-mono);
  color: var(--text-muted);
}

.sw-group-hint {
  font: 500 12px var(--font-body);
  color: var(--text-faint);
}

.sw-group-toggle {
  margin-left: auto;
  font: 600 11.5px var(--font-body);
  color: var(--signal-blue);
  background: none;
  border: none;
  cursor: pointer;
}

.sw-rows {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* One boat per row (shrinkwrapView.js rowHTML): boat, owner, size, cut, chips, WO */
.sw-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.1fr) minmax(110px, 1fr) 72px minmax(150px, 1fr) minmax(0, 1.6fr) auto;
  gap: 14px;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid var(--divider);
  cursor: pointer;
  min-width: 0;
}

.sw-row:first-child {
  border-top: none;
}

.sw-row:hover,
.sw-row:focus-visible {
  background: #F7F9FB;
  outline: none;
}

.sw-group--ready .sw-row {
  box-shadow: inset 3px 0 0 var(--green);
}

.sw-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-row-boat {
  font: 700 13.5px var(--font-display);
  color: var(--harbor-navy);
}

.sw-row-owner {
  font: 500 12.5px var(--font-body);
  color: var(--text-secondary);
}

.sw-row-dims {
  font: 600 12px var(--font-mono);
  color: var(--text-faint);
}

.sw-row-wo {
  font: 600 11px var(--font-mono);
  color: var(--text-muted);
  text-align: right;
}

.sw-row-cut {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.sw-row-cut-label {
  font: 600 11px var(--font-body);
  color: var(--text-muted);
}

.sw-row-cut--recorded .sw-row-cut-label {
  color: var(--teal-text);
}

.sw-row-cut--none .sw-row-cut-label {
  color: var(--text-faint);
  font-style: italic;
}

.sw-row-cut-size {
  font: 700 13px var(--font-mono);
  color: var(--harbor-navy);
}

.sw-row-cut--recorded .sw-row-cut-size {
  color: var(--teal-text);
}

.sw-row > .sw-row-chips {
  display: flex;
  gap: 5px;
}

@media (max-width: 760px) {
  .sw-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
  }
  .sw-row-owner,
  .sw-row-dims,
  .sw-row-chips {
    grid-column: 1 / -1;
  }
  .sw-row-wo {
    grid-column: 2;
    grid-row: 1;
  }
}

.sw-chip {
  font: 600 11px var(--font-body);
  color: var(--text-muted);
  background: var(--status-neutral-bg);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-chip--wait {
  color: var(--amber-text);
  background: var(--status-amber-bg);
}

.sw-chip--hold {
  color: var(--pill-on-hold-fg);
  background: var(--pill-on-hold-bg);
}

.sw-chip--tech {
  color: var(--signal-blue);
  background: var(--status-info-bg);
}

.sw-empty {
  padding: 30px;
  text-align: center;
  color: var(--text-faint);
  font: 500 13px var(--font-body);
}

/* ---- Total shrinkwrap needed panel (rows: shrinkwrap-totals.css) ---- */

.sw-totals {
  width: 300px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
}

.sw-totals-title {
  font: 700 14px var(--font-display);
  color: var(--harbor-navy);
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .sw-layout {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .sw-totals {
    width: auto;
  }
  .sw-stage-arrow {
    display: none;
  }
}

/* ============================================================ */
/* Rail fold (design_handoff_rail_fold): glance strip, hubs and  */
/* their tabs, the user chip + menu, Customize menu hub panel    */
/* ============================================================ */

/* ---- Glance strip: Tides, Events, Email ---- */
#buttonBar.page-select .rail-glance { display: flex; gap: 6px; margin-bottom: 14px; flex-shrink: 0; }
#buttonBar.page-select .rail-glance-chip {
  flex: 1 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px 7px; border: 0; border-radius: var(--radius-control); background: rgba(255, 255, 255, .06);
  cursor: pointer; transition: background 120ms ease;
}
#buttonBar.page-select .rail-glance-chip:hover { background: rgba(255, 255, 255, .11); }
#buttonBar.page-select .rail-glance-chip:focus-visible { outline: 2px solid var(--mist); outline-offset: 1px; }
#buttonBar .rail-glance-top { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12px/15px var(--font-body); color: #fff; }
#buttonBar .rail-glance-tide { font: 600 11px/15px var(--font-mono); color: #8FD8CE; }
#buttonBar .rail-glance-tide:empty::before { content: '—'; }
/* app.js hides an empty events count; here the chip says so instead. */
#buttonBar .rail-glance-events { display: block !important; }
#buttonBar .rail-glance-events:empty::before { content: 'None'; font-weight: 600; color: #CFE3F5; }
#buttonBar .rail-glance-name { white-space: nowrap; font: 600 10.5px var(--font-body); color: #A7BACB; }

/* ---- Hubs on the rail ---- */
#rail-hub-members[hidden] { display: none !important; }
#buttonBar.page-select .page-buttons { flex: 0 1 auto; }

/* ---- Hub tabs: a bar above the page, only while a hub page with 2+ tabs is open ---- */
.hub-bar {
  flex: 0 0 var(--topbar-height); height: var(--topbar-height); width: 100%; box-sizing: border-box;
  display: flex; align-items: stretch; gap: 28px; padding: 0 28px;
  background: #fff; border-bottom: 1px solid var(--card-border);
}
.hub-bar[hidden] { display: none; }
.hub-bar-title { align-self: center; flex-shrink: 0; white-space: nowrap; font: 700 17px var(--font-display); color: var(--harbor-navy); }
.hub-tabs { display: flex; gap: 4px; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tab {
  position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 7px; margin: 0; padding: 0 12px;
  border: 0; border-radius: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 600 13.5px var(--font-body); color: var(--text-muted);
}
.hub-tab:hover { background: #F7FAFC; }
.hub-tab[aria-selected="true"] { color: var(--harbor-navy); }
.hub-tab[aria-selected="true"]::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--seafoam);
}
.hub-tab:focus-visible { outline: 2px solid var(--mist); outline-offset: -2px; }
.hub-tab .hub-tab-count {
  min-width: 20px; box-sizing: border-box; padding: 1px 7px; border-radius: 999px; text-align: center;
  background: var(--amber); color: #2A1A02; font: 700 11px var(--font-body);
}
.hub-tab-arrow { margin-left: -3px; font: 600 12px var(--font-body); color: var(--text-faint); }
/* The page below the bar takes what's left (pages are height:100% of the page area). */
.page-body > .hub-bar:not([hidden]) ~ .page-view { flex: 1 1 0; min-height: 0; }

/* ---- User chip ---- */
#buttonBar.page-select .rail-user-wrap { position: relative; flex-shrink: 0; margin-top: auto; }
#buttonBar.page-select .rail-user-chip,
#buttonBar.page-select #user-data.rail-user-chip {
  width: 100%; margin: 0; display: flex; align-items: center; gap: 11px; padding: 10px; box-sizing: border-box;
  border: 0; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: transparent;
  text-align: left; cursor: pointer; flex: 0 0 auto; justify-content: flex-start;
}
#buttonBar.page-select .rail-user-chip:hover { background: rgba(255, 255, 255, .06); }
#buttonBar.page-select .rail-user-chip.open { background: rgba(255, 255, 255, .08); }
#buttonBar.page-select .rail-user-chip:focus-visible { outline: 2px solid var(--mist); outline-offset: -2px; }
.rail-user-avatar-wrap { position: relative; flex-shrink: 0; display: flex; }
#buttonBar.page-select .rail-user-avatar { width: 34px; height: 34px; }
.rail-user-warn {
  position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 2px #0B2640;
}
.rail-user-warn[hidden] { display: none; }
.rail-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#buttonBar.page-select .rail-user-chip #currentUserName {
  display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 13px var(--font-body); color: #fff;
}
.rail-user-sync { display: flex; align-items: center; gap: 5px; min-width: 0; font: 500 11px var(--font-body); color: #8FA6BC; white-space: nowrap; }
.rail-user-sync-label { overflow: hidden; text-overflow: ellipsis; }
.rail-user-sync-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #1F9D57; }
.rail-user-sync[data-state="saving"] .rail-user-sync-dot { background: #2E7FD4; }
.rail-user-sync[data-state="offline"] .rail-user-sync-dot { background: var(--amber); }
.rail-user-sync[data-state="failed"] .rail-user-sync-dot { background: #E05252; }
.rail-user-chev { flex-shrink: 0; font-size: 12px; line-height: 1; color: #8FA6BC; }

/* ---- User menu: opens upward from the chip ---- */
.rail-user-menu {
  position: absolute; left: -4px; min-width: calc(100% + 8px); width: max-content; max-width: 280px; bottom: calc(100% + 10px); z-index: 2100;
  display: flex; flex-direction: column; padding: 6px; box-sizing: border-box;
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-popover); font-family: var(--font-body);
}
.rail-user-menu[hidden] { display: none; }
.rail-user-menu .rum-row {
  width: 100%; margin: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px; box-sizing: border-box;
  border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left;
  font: 600 13.5px var(--font-body); color: var(--text-body, #102A43);
}
.rail-user-menu .rum-row:hover, .rail-user-menu .rum-row:focus-visible { background: #F1F4F7; outline: none; }
.rail-user-menu .rum-icon { width: 15px; height: 15px; opacity: .7; flex-shrink: 0; }
.rail-user-menu .rum-help {
  flex-shrink: 0; width: 15px; height: 15px; box-sizing: border-box; border: 1.5px solid var(--text-muted); border-radius: 50%;
  font: 700 10px/12px var(--font-body); color: var(--text-muted); text-align: center;
}
.rail-user-menu .rum-glyph { flex-shrink: 0; width: 15px; text-align: center; font-size: 14px; line-height: 1; color: var(--text-muted); }
.rail-user-menu .rum-row > span { white-space: nowrap; }
.rail-user-menu .rum-hint { margin-left: auto; padding-left: 12px; font: 500 11.5px var(--font-body); color: var(--text-faint); }
.rail-user-menu .rum-div { height: 1px; margin: 4px 6px; background: #F1F4F7; }
.rail-user-menu .rum-signout { color: #C23A3A; }
.rail-user-menu .rum-signout:hover, .rail-user-menu .rum-signout:focus-visible { background: #FBEDEC; }
.rail-user-menu .rum-signout .rum-icon { filter: invert(27%) sepia(61%) saturate(2400%) hue-rotate(340deg) brightness(88%); opacity: 1; }
/* The sync chip, in full and still tappable for what's waiting. */
.rail-user-menu .rum-sync { padding: 4px 6px; }
.rail-user-menu .rum-sync .sync-chip {
  height: auto; padding: 4px 4px; gap: 7px; border: 0; background: none; box-shadow: none;
  font: 500 12.5px var(--font-body); color: var(--text-muted);
}
.rail-user-menu .rum-sync .sync-chip.sync-live { cursor: default; }
.rail-user-menu .rum-sync .sync-chip.sync-live .sync-label { font-size: 0; }
.rail-user-menu .rum-sync .sync-chip.sync-live .sync-label::after { content: 'Live · all changes saved'; font-size: 12.5px; }
.rail-user-menu .rum-sync .sync-pop { bottom: -6px; left: calc(100% + 18px); }
/* "Email needs reconnecting": a card at the top. */
.rail-user-menu .rail-mailhealth { padding: 0 0 4px; }
.rail-user-menu .rail-mailhealth[hidden] { display: none !important; }
.rail-user-menu .rail-mailhealth-btn {
  width: 100%; height: auto; margin: 0; display: flex; align-items: flex-start; gap: 9px; padding: 10px; box-sizing: border-box;
  border: 1px solid var(--amber-border); border-radius: 10px; background: var(--amber-bg); color: var(--text-body, #102A43);
  text-align: left; white-space: normal; cursor: pointer;
}
.rail-user-menu .rail-mailhealth-btn:hover, .rail-user-menu .rail-mailhealth-btn:focus-visible { filter: brightness(.98); outline: 2px solid var(--amber-border); }
.rail-user-menu .rail-mailhealth-dot { margin-top: 4px; }
.rail-user-menu .rail-mailhealth-text { display: flex; flex-direction: column; gap: 2px; }
.rail-user-menu .rail-mailhealth-text b { font: 700 13px var(--font-body); }
.rail-user-menu .rail-mailhealth-text span { font: 400 12px var(--font-body); color: var(--amber-text); }
.rail-user-scrim { position: fixed; inset: 0; z-index: 2090; background: rgba(6, 20, 34, .5); }
.rail-user-scrim[hidden] { display: none; }

/* ---- Icon rail: the strip stacks to values only, the chip to its avatar, the menu opens beside ---- */
body.rail-style-icons #buttonBar.page-select .rail-glance { flex-direction: column; gap: 4px; }
body.rail-style-icons #buttonBar.page-select .rail-glance-chip { padding: 7px 2px; }
body.rail-style-icons #buttonBar .rail-glance-name { display: none; }
body.rail-style-icons #buttonBar .rail-glance-events:empty::before { content: '0'; }
body.rail-style-icons #buttonBar .rail-glance-chip#email-open-button .rail-glance-top { font-size: 11px; }
body.rail-style-icons #buttonBar.page-select .rail-user-chip { justify-content: center; padding: 10px 0; }
body.rail-style-icons #buttonBar .rail-user-text,
body.rail-style-icons #buttonBar .rail-user-chev { display: none; }
body.rail-style-icons .rail-user-menu { left: calc(100% + 16px); bottom: 0; min-width: 248px; }

/* ---- Phones: the menu is a bottom sheet; tabs get their own row under the title bar ---- */
@media (max-width: 768px) {
  .rail-user-menu {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; min-width: 0; max-width: none;
    border-radius: 18px 18px 0 0; padding: 10px 12px 18px; box-shadow: 0 -14px 40px rgba(6, 20, 34, .4);
  }
  .rail-user-menu::before { content: ''; display: block; width: 38px; height: 4px; margin: 0 auto 10px; border-radius: 3px; background: #D5DEE6; }
  .rail-user-menu .rum-row { min-height: 44px; }
  .rail-user-menu .rum-sync .sync-pop { left: 0; right: 0; bottom: calc(100% + 8px); }
  .hub-bar { padding: 0 12px; gap: 16px; }
}
@media (max-width: 600px) {
  /* The top bar already shows the page title here. */
  .hub-bar { flex-basis: 44px; height: 44px; }
  .hub-bar-title { display: none; }
  .hub-tab { min-height: 44px; }
}
@media (max-height: 940px) {
  #buttonBar.page-select .rail-glance { margin-bottom: 8px; }
  #buttonBar.page-select .rail-glance-chip { padding: 6px 4px 5px; }
}

/* ---- Customize menu: a hub's pages and "Own link on rail" ---- */
.rl-label-wrap { flex: 1; min-width: 0; display: flex; align-items: center; }
.rl-label-wrap .rl-name { flex: 0 1 auto; }
.rl-label-wrap .rl-hub-toggle {
  margin: 0 0 0 6px; padding: 1px 4px; border: 0; border-radius: 5px; background: none; cursor: pointer;
  font: 500 12px var(--font-body); color: var(--text-faint);
}
.rl-label-wrap .rl-hub-toggle:hover { background: #EEF4F7; color: var(--text-body, #102A43); }
.rl-label-wrap .rl-hub-toggle[aria-expanded="true"] { color: #0E7C73; }
.rl-item.rl-item-open { box-shadow: inset 0 0 0 1.5px var(--seafoam); border-radius: 7px 7px 0 0; }
.rl-hub-panel {
  margin: -2px 0 2px; padding: 4px 10px 10px 46px; list-style: none;
  background: #F7FAF9; border-top: 1px solid #EAF5F3; border-radius: 0 0 7px 7px;
  box-shadow: inset 1.5px 0 0 var(--seafoam), inset -1.5px 0 0 var(--seafoam), inset 0 -1.5px 0 var(--seafoam);
}
.rl-hub-head { display: flex; justify-content: space-between; padding: 6px 0 4px; font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.rl-hub-tab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font: 500 13px var(--font-body); color: var(--text-body, #102A43); }
.rl-switch {
  position: relative; flex-shrink: 0; width: 32px; height: 18px; margin: 0; padding: 0; border: 0; border-radius: 999px;
  background: #D5DEE6; cursor: pointer; transition: background 120ms ease;
}
.rl-switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 120ms ease; }
.rl-switch[aria-checked="true"] { background: var(--seafoam); }
.rl-switch[aria-checked="true"] i { transform: translateX(14px); }
.rl-switch:focus-visible { outline: 2px solid var(--mist); outline-offset: 2px; }
.rl-from { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #EAF5F3; font: 500 11.5px var(--font-body); color: #0E7C73; }

/* ---- All pages: a hub's tabs, indented under it ---- */
.rs-launch .rs-row.rs-sub .rs-go { padding-left: 34px; font-size: 12.5px; opacity: .9; }

/* ============================================================ */
/* One New + one search (rail): app.js createNew, shellNav.js     */
/* ============================================================ */

/* New: "+ New work order" in one click, ▾ for anything else */
#buttonBar.page-select .rail-new { position: relative; display: flex; gap: 6px; margin-bottom: 12px; flex-shrink: 0; }
#buttonBar.page-select .rail-new .rail-add-btn { flex: 1; min-width: 0; margin: 0; cursor: pointer; }
#buttonBar.page-select .rail-new .rail-add-btn:hover,
#buttonBar.page-select .rail-new-more:hover { background: rgba(95, 208, 196, .16); }
#buttonBar.page-select .rail-new-more {
  flex: 0 0 34px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-control); border: 1px dashed rgba(95, 208, 196, .35); background: rgba(95, 208, 196, .08);
  color: var(--mist); font-size: 12px; cursor: pointer;
}
#buttonBar.page-select .rail-new-more[aria-expanded="true"] { background: rgba(95, 208, 196, .2); border-style: solid; }
#buttonBar.page-select .rail-add-btn:focus-visible,
#buttonBar.page-select .rail-new-more:focus-visible { outline: 2px solid var(--mist); outline-offset: 2px; }
.rail-new-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 2100;
  display: flex; flex-direction: column; padding: 6px; box-sizing: border-box;
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-popover); font-family: var(--font-body);
}
.rail-new-menu[hidden] { display: none; }
.rail-new-menu .rnm-head { padding: 6px 10px 4px; font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.rail-new-menu .rnm-row {
  width: 100%; margin: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px; box-sizing: border-box;
  border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left;
  font: 600 13.5px var(--font-body); color: var(--text-body, #102A43);
}
.rail-new-menu .rnm-row[hidden] { display: none; }
.rail-new-menu .rnm-row:hover, .rail-new-menu .rnm-row:focus-visible { background: #F1F4F7; outline: none; }
.rail-new-menu .rnm-row img { width: 15px; height: 15px; opacity: .7; flex-shrink: 0; }
body.rail-style-icons #buttonBar.page-select .rail-new-more { display: none; }
body.rail-style-icons .rail-new-menu { top: 0; left: calc(100% + 16px); right: auto; width: 220px; }
@media (max-height: 900px) { #buttonBar.page-select .rail-new { margin-bottom: 8px; } }

/* Search: the new kinds of result, the hint under the empty-box start list */
.rail-search-results .rs-kind-estimate { background-color: #F1ECFB; background-image: url('/assets/checklist.png'); }
.rail-search-results .rs-kind-page { background-color: #EEF2F6; background-image: url('/assets/next-arrow.svg'); }
.rail-search-results .rs-kind-action { background-color: #E6F6F3; background-image: url('/assets/add-icon.png'); }
.rail-search-results .rs-hint { padding: 10px 12px 6px; border-top: 1px solid #F1F4F7; margin-top: 4px; font: 500 12px/1.45 var(--font-body); color: var(--text-muted); }

/* Work Orders: Estimates and Invoices are lists, in the view row (not create buttons) */
.wo-view-tabs #estimates-list-button,
.wo-view-tabs #invoices-list-button {
  height: auto; width: auto; margin: 0; padding: 6px 14px;
  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);
}
.wo-view-tabs #estimates-list-button:hover,
.wo-view-tabs #invoices-list-button:hover { background: var(--app-bg); border-color: var(--harbor-navy); }
.wo-view-tabs #estimates-list-button::after,
.wo-view-tabs #invoices-list-button::after { content: ' ↗'; color: var(--text-faint); font-weight: 500; }

/* New menu: "For <customer>" when one is open on the Customers page */
.rail-new-menu .rnm-context[hidden] { display: none; }
.rail-new-menu .rnm-ctx-name { text-transform: none; letter-spacing: 0; font: 600 12px var(--font-body); color: var(--text-body, #102A43); }
.rail-new-menu .rnm-div { height: 1px; margin: 4px 6px; background: #F1F4F7; }

/* Search: parts, vendors, people, "filter this page", invoices; + WO / + Est on customers and boats */
.rail-search-results .rs-kind-part { background-color: #F4EFE6; background-image: url('/assets/parts.png'); }
.rail-search-results .rs-kind-vendor { background-color: #EEF2F6; background-image: url('/assets/inventory.png'); }
.rail-search-results .rs-kind-staff { background-color: #EAF5F3; background-image: url('/assets/customer.png'); }
.rail-search-results .rs-kind-filter { background-color: #EEF2F6; background-image: url('/assets/filter-icon.png'); }
.rail-search-results .rs-kind-invoices { background-color: #E6F6F3; background-image: url('/assets/invoice.png'); }
.rail-search-results .rs-acts { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; opacity: .55; }
.rail-search-results .rs-row.active .rs-acts,
.rail-search-results .rs-row:hover .rs-acts { opacity: 1; }
.rail-search-results .rs-act {
  margin: 0; padding: 3px 8px; border: 1px solid var(--card-border); border-radius: 999px; background: #fff;
  font: 600 11.5px var(--font-body); color: var(--seafoam); cursor: pointer; white-space: nowrap;
}
.rail-search-results .rs-act:hover { border-color: var(--seafoam); background: #EAF5F3; }

/* ? : keyboard shortcuts (shellKeys.js) */
.sk-scrim { position: fixed; inset: 0; z-index: 3200; background: rgba(10, 33, 53, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sk-panel { width: 640px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; background: #fff; border-radius: 14px; box-shadow: var(--shadow-popover); padding: 18px 22px 16px; font-family: var(--font-body); color: var(--text-body, #102A43); }
.sk-head { display: flex; align-items: center; margin-bottom: 8px; }
.sk-head h2 { margin: 0; font: 700 18px var(--font-display); color: var(--harbor-navy); }
.sk-x { margin: 0 0 0 auto; border: 0; background: none; font-size: 16px; color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.sk-x:hover { background: #F1F4F7; }
.sk-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.sk-cols h3 { margin: 12px 0 6px; font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.sk-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #F1F4F7; font: 500 13px var(--font-body); }
.sk-row > span:last-child { text-align: right; color: var(--text-muted); }
.sk-panel kbd { display: inline-block; min-width: 18px; padding: 1px 6px; border: 1px solid var(--card-border); border-bottom-width: 2px; border-radius: 5px; background: #F7FAFC; font: 600 11.5px var(--font-mono); text-align: center; color: var(--harbor-navy); }
.sk-note { margin: 14px 0 0; font: 500 12px/1.45 var(--font-body); color: var(--text-muted); }
@media (max-width: 600px) { .sk-cols { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ */
/* Work Orders toolbar: search · Filter & sort · ⋯               */
/* ============================================================ */
#filter-view-button { white-space: nowrap; width: auto; }
/* Sort by: first section of the Filter & sort panel */
#filter-view .filter-section-sort .filter-sort-current { margin-left: auto; margin-right: 6px; font: 600 11.5px var(--font-body); color: var(--seafoam); }
#filter-view .filter-sort-list { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
#filter-view .filter-sort-list li {
  margin: 0; padding: .35em .9em; border: 1px solid var(--card-border); border-radius: var(--radius-pill);
  background: var(--app-bg); font: 600 .8rem var(--font-body); color: var(--harbor-navy); cursor: pointer; user-select: none;
}
#filter-view .filter-sort-list li:hover { border-color: var(--seafoam); }
#filter-view .filter-sort-list li.active-sort { background: var(--harbor-navy); border-color: var(--harbor-navy); color: #fff; font-weight: 600; }
#filter-view .filter-sort-hint { margin-top: 6px; font: 500 11.5px var(--font-body); color: var(--text-faint); }
/* ⋯: print and export */
.view-change-buttons.wo-more-btn { width: 44px; min-width: 44px; padding: .45em 0; font-size: 1.1rem; line-height: 1; letter-spacing: 1px; }
#reports-view.wo-more-box { width: 240px; padding: 6px; }
#reports-view.wo-more-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#reports-view.wo-more-box li { padding: 0; }
#reports-view.wo-more-box .wo-legacy-export-btn {
  width: 100%; text-align: left; border: 0; border-radius: 8px; padding: 9px 10px; background: none;
  font: 600 13px var(--font-body); color: var(--text-body, #102A43);
}
#reports-view.wo-more-box .wo-legacy-export-btn:hover { background: #F1F4F7; }
/* The print row is hidden on views without a printable list (app.js switchView). */
#reports-view.wo-more-box .print-table-button { height: auto; outline: 0; }
#reports-view.wo-more-box .print-table-button[style*="display: flex"] { display: block !important; }

/* Work order picker: + New customer (app.js showWoNewCustomer) */
.wo-picker-foot { flex-shrink: 0; padding: 10px 16px 14px; border-top: 1px solid var(--card-border); }
.wo-picker-foot[hidden], .wo-picker-new-btn[hidden] { display: none; }
.wo-picker-foot:has(.wo-picker-new-btn[hidden]) { display: none; }
.wo-picker-new-btn, .wo-picker-new-inline {
  margin: 0; padding: 8px 14px; border: 1px dashed rgba(15, 140, 130, .5); border-radius: var(--radius-control);
  background: #EAF5F3; font: 600 13px var(--font-body); color: var(--seafoam); cursor: pointer;
}
.wo-picker-new-btn { width: 100%; }
.wo-picker-new-inline { margin-top: 10px; }
.wo-picker-new-btn:hover, .wo-picker-new-inline:hover { border-style: solid; }
#wo-customer-picker-body .wo-new-cust { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 8px; }
.wo-new-cust-title { font: 700 15px var(--font-display); color: var(--harbor-navy); }
/* Scoped to the picker: the app's old global label/input rules otherwise apply. */
#wo-customer-picker-body .wo-new-cust-field { display: flex; flex-direction: column; gap: 5px; margin: 0; }
#wo-customer-picker-body .wo-nc-label { display: block; margin: 0; font: 600 12px var(--font-body); color: var(--text-secondary, #3D4F60); }
#wo-customer-picker-body .wo-nc-label i { font-style: normal; font-weight: 500; color: var(--text-faint); }
#wo-customer-picker-body .wo-new-cust-field input { display: block; width: 100%; height: auto; box-sizing: border-box; margin: 0; padding: 9px 11px; border: 1px solid var(--card-border); border-radius: 8px; background: #fff; font: 500 14px var(--font-body); color: var(--text-body, #102A43); }
#wo-customer-picker-body .wo-new-cust-field input:focus { outline: 2px solid var(--mist); outline-offset: 0; border-color: var(--seafoam); }
.wo-new-cust-dup { padding: 8px 10px; border: 1px solid var(--amber-border); border-radius: 8px; background: var(--amber-bg); font: 500 12.5px var(--font-body); color: var(--text-body, #102A43); }
.wo-new-cust-dup[hidden] { display: none; }
.wo-new-cust-dup button { margin: 0 0 0 6px; border: 0; background: none; padding: 0; font: 700 12.5px var(--font-body); color: var(--seafoam); cursor: pointer; text-decoration: underline; }
.wo-new-cust-hint { font: 500 12px/1.4 var(--font-body); color: var(--text-muted); }
.wo-new-cust-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
.wo-new-cust-back { margin: 0; border: 0; background: none; font: 600 13px var(--font-body); color: var(--text-muted); cursor: pointer; padding: 8px 4px; }
.wo-new-cust-create { margin: 0; padding: 9px 16px; border: 0; border-radius: 8px; background: var(--seafoam); color: #fff; font: 700 13.5px var(--font-body); cursor: pointer; }
.wo-new-cust-create:disabled { opacity: .6; cursor: default; }

/* ============================================================ */
/* Phone bottom bar (mobileBar.js)                               */
/* ============================================================ */
.mbar, .mbar-scrim, .mbar-sheet { display: none; }
@media (max-width: 600px) {
  body.has-bottom-bar { --mbar-h: calc(58px + env(safe-area-inset-bottom, 0px)); }
  /* Room for the bar: the page area shrinks to fit above it. */
  body.has-bottom-bar .main-page { padding-bottom: var(--mbar-h); box-sizing: border-box; }
  body.has-bottom-bar .mbar {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 950; height: var(--mbar-h); width: auto; /* (the global nav rule is sticky, top:0) */
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch;
    padding: 0 4px env(safe-area-inset-bottom, 0px); box-sizing: border-box;
    background: #fff; border-top: 1px solid var(--card-border); box-shadow: 0 -6px 20px rgba(10, 33, 53, .08);
    font-family: var(--font-body);
  }
  /* The New Work Order form fills the screen and has its own buttons at the bottom. */
  body.has-bottom-bar.wo-add-open .mbar { display: none; }
  body.has-bottom-bar.wo-add-open .main-page { padding-bottom: 0; }
  .mbar button {
    margin: 0; padding: 6px 0 4px; min-height: 44px; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font: 600 10.5px var(--font-body); color: var(--text-muted); -webkit-tap-highlight-color: transparent;
  }
  .mbar button img { width: 20px; height: 20px; opacity: .55; }
  .mbar button.on { color: var(--harbor-navy); }
  .mbar button.on img { opacity: 1; }
  .mbar button:focus-visible { outline: 2px solid var(--mist); outline-offset: -4px; border-radius: 10px; }
  .mbar .mbar-plus {
    width: 38px; height: 30px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--seafoam); color: #fff; font: 600 22px/1 var(--font-body);
  }
  .mbar .mbar-new { color: var(--seafoam); }
  .mbar .mbar-new[aria-expanded="true"] .mbar-plus { background: var(--harbor-navy); }
  body.has-bottom-bar .mbar-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 960; background: rgba(6, 20, 34, .45); }
  body.has-bottom-bar .mbar-sheet:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 970;
    max-height: 75vh; overflow-y: auto; padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -14px 40px rgba(6, 20, 34, .35); font-family: var(--font-body);
  }
  .mbar-grip { width: 38px; height: 4px; border-radius: 3px; background: #D5DEE6; margin: 2px auto 10px; flex-shrink: 0; }
  .mbar-sheet-head { padding: 6px 8px 4px; font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
  .mbar-sheet-row {
    width: 100%; margin: 0; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 8px 10px; box-sizing: border-box;
    border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; font: 600 15px var(--font-body); color: var(--text-body, #102A43);
  }
  .mbar-sheet-row:active { background: #F1F4F7; }
  .mbar-sheet-row img { width: 18px; height: 18px; opacity: .7; }
  .mbar-sheet-div { height: 1px; margin: 6px 8px; background: #F1F4F7; }
  /* Things that sat at the bottom edge move up above the bar. */
  body.has-bottom-bar .update-prompt { bottom: calc(var(--mbar-h) + 12px); }
  /* The slide-out rail ends above the bar too. */
  body.has-bottom-bar #buttonBar.page-select { padding-bottom: calc(var(--mbar-h) + 12px); }
}

/* Work Orders' Filter, Sort and More boxes: a hidden one takes no room (it used to be only transparent,
   so on a phone its 320 px width hanging off the Filter button made the page scroll sideways), and on a
   phone an open one spans the screen instead of running off its right edge. */
/* Open = .showBox (two click handlers toggle .hideBox, so an open box can carry both). */
.filter-box:not(.showBox) { display: none; }
@media (max-width: 760px) {
  .filter-box,
  #filter-view.filter-box-redesign { position: fixed; left: 12px; right: 12px; width: auto; max-width: none; }
}


/* Op rows › checklist meter (checklistOffice.js opRowChecklistHtml) */
.op-row-checklist { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.op-row-checklist-bar { width: 80px; height: 4px; border-radius: 99px; background: #EEF2F6; overflow: hidden; flex: none; }
.op-row-checklist-bar > span { display: block; height: 100%; background: var(--seafoam, #0F8C82); }
.op-row-checklist-text { font: 600 11px var(--font-mono); color: var(--teal-text, #0E7C73); white-space: nowrap; }
.op-row-checklist--done .op-row-checklist-bar > span { background: var(--green, #1F9D57); }
.op-row-checklist--done .op-row-checklist-text { color: var(--green-text, #1F8B4D); }
.op-row-checklist--open-finished .op-row-checklist-bar > span { background: var(--amber, #E0930F); }
.op-row-checklist--open-finished .op-row-checklist-text { color: var(--amber-text, #B5790C); font-family: var(--font-body); }

/* Estimate lines: choices the customer picks one of, and their answers (Customer Portal v3 2e) */
.wo-estimate-op-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 0 8px 2px; }
.wo-estimate-op-opt { display: inline-flex; align-items: center; gap: 4px; font: 600 12px var(--font-body, 'Public Sans', system-ui, sans-serif); color: var(--text-body); background: var(--surface-muted, #EEF2F6); border-radius: 999px; padding: 3px 4px 3px 10px; }
.wo-estimate-op-opt button { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 0 4px; }
.wo-estimate-op-opt-add { border: 0; background: none; color: var(--teal-text, #0F8C82); font: 700 12px var(--font-body, 'Public Sans', system-ui, sans-serif); cursor: pointer; padding: 3px 0; }
.wo-estimate-op-opt-form { display: inline-flex; gap: 6px; align-items: center; }
.wo-estimate-op-opt-form input { height: 30px; border: 1px solid var(--border, #DCD3C4); border-radius: 8px; padding: 0 8px; font: 500 12.5px var(--font-body, 'Public Sans', system-ui, sans-serif); width: 130px; }
.wo-estimate-op-opt-form input[type=number] { width: 80px; }
.wo-estimate-op-opt-form button { height: 30px; border: 0; border-radius: 8px; padding: 0 12px; background: var(--teal-text, #0F8C82); color: #fff; font: 700 12px var(--font-body, 'Public Sans', system-ui, sans-serif); cursor: pointer; }
.estimate-detail-op-row.declined span:first-child { text-decoration: line-through; color: var(--text-muted); }
.estimate-detail-answer { font-style: normal; font: 700 11px var(--font-body, 'Public Sans', system-ui, sans-serif); margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--surface-muted, #EEF2F6); color: var(--text-muted); }
.estimate-detail-answer-approved { background: #E2F4EA; color: #1F8B4D; }
.estimate-detail-answer-declined { background: #FBE6E6; color: #C23A3A; }