:root {
  --bs-border-radius: 1rem;
  --bs-body-bg: #f7f3e9;
  --bs-body-bg-rgb: 247, 243, 233;
  
  --bs-tertiary-bg: #4b644a40;
  --bs-tertiary-bg-rgb: 75, 100, 74, 0.25;
  
  --bs-disabled-bg: #e1e0d3;
  --bs-disabled-bg-rgb: 225, 224, 211;
  
  /* things for cards */
  --bslib-spacer: 0.5rem;
}

.content-wrapper .col-sm-2 {
  min-width: 240px;
}

.content-wrapper .col-sm-10 {
  max-width: calc(100% - 240px);
}

h2 {
  font-weight: 800;
  letter-spacing: 0.06rem;
  margin-bottom: 1.5rem;
}

h3 {
  font-weight: 700;
}

.page-title {
  margin-bottom: 1rem;
  border-bottom: 2px solid #7B5E43;
}

.page-title,
.order-title {
  color: #153b18;
}

::placeholder {
  font-style: italic;
}

.inline-inputs {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
}

.rhandsontable {
  margin-bottom: 1rem;
  width: max-content;
  overflow: visible;
}

.btn {
  margin-bottom: 1rem;
  align-self: center;
  border-radius: 2rem;
}

.radiobtn {
  margin-bottom: 0;
}

label {
  font-weight: 600;
}

.orderLink {
  color: #805834;
  text-decoration: none;
  font-weight: 600;
}

.orderLink:hover{
  color:#483828;
  text-decoration: underline;
  cursor: pointer;
}

.pretty .state label:before {
  border-color: #666761;
}

.handsontable .currentRow {
  background-color: lemonchiffon !important;
}

.shiny-input-container {
  width: unset;
}

.htContextMenu {
  z-index: 9999 !important;
}

.listbox {
  text-align: left;
}

.grey {
  background-color: #00000040;
  display:block;
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  opacity: 1.01;
  z-index: 9999;
}

.overlay {
  background-color: white;
  z-index: 9999;
  position: absolute;
  padding: 17px;
  padding-bottom: 40px;
  border-radius: 5px;
}


.order-details-wrapper {
  position: relative;
}

.order-loading-overlay {
  position: absolute;
  inset: 0;
  min-height: 300px;
  background-color: rgba(247, 243, 233, 0.7);
  border-radius: 5px;
  z-index: 1000;
}

.order-loading-overlay .shiny-spinner-output-container {
  height: 100%;
  min-height: 300px;
}

.order-loading-overlay .load-container {
  top: 150px;
}

.overlay .btn-default {
  text-align: center;
}

.overlay .submit {
  width: calc(100% - 20px);
  margin: auto;
  margin-top: 1rem;
  font-weight: 500;
  font-size: 1.25rem;
}

.overlay * input {
  background: white;
  width: 100%;
}

.overlay * .shiny-input-container {
  width:100%;
}

.overlay .handsontable {
  margin-bottom: 20px;
} 

#orders-details-invQu > div {
  overflow: visible !important;
}

#invoiceDetailsDiv,
#quoteDetailsDiv{
  width: 80%;
  margin-left: 10%;
}

#addPayment,
#addPaymentInv {
  text-align: center !important;
}

#paymentDate > input,
#paymentDateInv > input {
  text-align: center;
}

#paymentAccount,
#paymentAccountInv {
  text-align: center;
}

#hideInvoice,
#hideQuote{
  margin-bottom: 10px;
}

.row > * {
  padding-right: var(--bs-gutter-x);
  padding-left: var(--bs-gutter-x);
}

.datepicker {
  z-index: 100009 !important;
}

.mandatory_star {
  color: red;
}

/* LOGIN PAGE */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: #253825;
  background-image: url(background-leaf.png);
}

.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  padding: 2.5rem 3.75rem;
  background-color: #f7f3e9;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.login-title {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.04rem;
  color: #153b18;
  font-size: 2.5rem;
  margin: 0 1.25rem;
}

.login-hr{
  width: 100%;
  border-top: 3px solid #7B5E43;
  opacity: 1;
  margin-top: -0.5rem;
  margin-bottom: 2.25rem;
}

.login-subtitle {
  font-size:0.9rem;
  color: #7b5e43;
}

.login-btn {
  width: 80%;
  margin-bottom: 0;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: -10px;
}

.login-btn i {
  margin-right: 0.25rem;
}

#switcharoo label,
#analysisonly label {
  display: table-cell;
  padding-right: 10px;
}

#analysisonly label{
  width:200px;
}

#switcharoo label span,
#analysisonly label span{
 margin-bottom: auto; 
}

#switcharoo .form-group,
#analysisonly .form-group {
  display: table-row;  
}

#uids-switch-transferUIDsTable,
#uids-switch-transferKeys {
  margin-top: 10px;
}

#uids-switch-transferUIDsTable tr td,
#uids-switch-transferKeys tr td {
  vertical-align: middle;
  background-color: #cbcec2;
  border-color: #a2a88f;
}

#uids-switch-transferKeys th {
  font-weight: 600;
  vertical-align: middle;
  background-color: #c4c9b5;
  border-color: #a2a88f;
}

#uids-switch-transferUIDsTable .handsontableInput,
#uids-switch-transferKeys .handsontableInput {
  background-color:#cbcec2;
  vertical-align: central;
}

.vscomp-wrapper {
  font-family: inherit !important;
  font-size: inherit !important;
}

.vscomp-toggle-button {
  background-color: var(--bs-body-bg) !important;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius) !important;
  padding: 11.25px !important;
}

.vscomp-dropbox-container {
  font-family: inherit;
  font-size: inherit;
}

.input-daterange {
  align-items: baseline;
}

.sweet-alert-overflow {
  overflow: visible !important;
}

.newDiscount .shiny-input-container{
  width:100%;
}

.autonumeric-input {
  font-size: initial !important;
}

.accordion-title {
  font-size: larger;
  font-weight: bolder;
}

.form-control:focus,
.selectize-input.focus{
  border-color: #357635 !important;
  box-shadow: 0 0 0 0.25rem #35763540 !important;
}

.selectize-dropdown .active {
  background-color: #4b644a40 !important;
}

.selectize-dropdown .selected {
  background-color: #357635 !important;
}

/* Nav pill list section headers */
/*  Top Navigation Bar Tabs */
.nav-fill>.nav {
  background: white;
  border-radius: var(--bs-border-radius);
  margin: 1rem 0;
}

.nav-fill>.nav-pills {
  padding: 0.5rem;
  font-weight: bold;
  font-size: x-large;
  --bs-nav-pills-link-active-bg: #FF1493;
}

.nav-link:hover {
  background-color: #F7F3E930;
}


/*  Side Navigation Bar Tabs */
.titlePanel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: #F7F3E9;
  align-items: center;
  margin-bottom: 2rem;
  margin-top: 1.5rem;
}

#logout {
  color: #F7F3E9;
}

.nav-title {
  display: block;
  text-align: center;
    padding: 0.5rem;
    font-weight: bold;
    font-size: large;
    background: #4B644A;
    margin: 0.5rem -0.5rem; 
}

.nav-stacked>.nav-item>.nav-link {
    color: #F7F3E9;
    text-align: left;
    padding: 0.5rem 1.5rem;
    margin: 0 1rem;
    border-radius: 1.2rem;
}

.nav-stacked>.nav-item>.nav-link.active {
    background: #805834;
}

.nav-link:focus-visible, 
.nav-tabs>li>a:focus-visible, 
.nav-pills>li>a:focus-visible, 
:where(ul.nav.navbar-nav > li)>a:focus-visible {
  box-shadow: 0 0 0 .25rem #80583450;
}

.well {
    padding: 0.5rem;
    color: #F7F3E9;
    background-color: #253825;
    background-image: url(background-leaf.png);
    border: none;
    border-radius: 0;
}

.tab-content {
  margin: 0.5rem -0.5rem;
}

/*  Icons  */
.fas, .far {
  color: #7b1717;
}

/* Xero organisation / currency mismatch highlight */
.field-mismatch {
  background: #7b171799;
  padding: 2px;
}

/* Sweet alert */
.sweet-alert button {
  background-color:#255625 !important;
}

.sweet-alert button:hover {
  background-color: #253825 !important;
}

.sweet-alert button.cancel {
  background-color:#7b5e43 !important;
}

.sweet-alert button.cancel:hover {
  background-color: #544231 !important;
}

.sweet-alert p {
  font-weight: 400 !important;
}

/*  Buttons  */ 
button i.fas, button i.far {
  color: inherit;
}

.btn-flex {
  flex-grow: 1;
}

.btn-primary {
    --bs-btn-color: #f7f3e9;
    --bs-btn-bg: #255625;
    --bs-btn-border-color: #255625;
    --bs-btn-hover-color: #f7f3e9;
    --bs-btn-hover-bg: #253825;
    --bs-btn-hover-border-color: #253825;
    --bs-btn-focus-shadow-rgb: 38,143,203;
    --bs-btn-active-color: #f7f3e9;
    --bs-btn-active-bg: #357635;
    --bs-btn-active-border-color: #357635;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    --bs-btn-disabled-color: #f7f3e9;
    --bs-btn-disabled-bg: #255625;
    --bs-btn-disabled-border-color: #255625;
}

.btn-outline-primary {
    --bs-btn-color: #255625;
    --bs-btn-bg: #f7f3e9;
    --bs-btn-border-color: #255625;
    --bs-btn-hover-color: #f7f3e9;
    --bs-btn-hover-bg: #255625;
    --bs-btn-hover-border-color: #253825;
    --bs-btn-focus-shadow-rgb: 38,143,203;
    --bs-btn-active-color: #f7f3e9;
    --bs-btn-active-bg: #357635;
    --bs-btn-active-border-color: #357635;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    --bs-btn-disabled-color: #f7f3e9;
    --bs-btn-disabled-bg: #f7f3e9;
    --bs-btn-disabled-border-color: #f7f3e9;
}

.btn-secondary {
    --bs-btn-color: #f7f3e9;
    --bs-btn-bg: #7b5e43;
    --bs-btn-border-color: #7b5e43;
    --bs-btn-hover-color: #f7f3e9;
    --bs-btn-hover-bg: #544231;
    --bs-btn-hover-border-color: #544231;
    --bs-btn-focus-shadow-rgb: 93,93,93;
    --bs-btn-active-color: #f7f3e9;
    --bs-btn-active-bg: #ae7642;
    --bs-btn-active-border-color: #ae7642;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    --bs-btn-disabled-color: #f7f3e9;
    --bs-btn-disabled-bg: #7b5e43;
    --bs-btn-disabled-border-color: #7b5e43;
}

.btn-outline-secondary {
    --bs-btn-color: #7b5e43;
    --bs-btn-bg: #f7f3e9;
    --bs-btn-border-color: #7b5e43;
    --bs-btn-hover-color: #f7f3e9;
    --bs-btn-hover-bg: #7b5e43;
    --bs-btn-hover-border-color: #544231;
    --bs-btn-focus-shadow-rgb: 93,93,93;
    --bs-btn-active-color: #f7f3e9;
    --bs-btn-active-bg: #ae7642;
    --bs-btn-active-border-color: #ae7642;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    --bs-btn-disabled-color: #f7f3e9;
    --bs-btn-disabled-bg: #7b5e43;
    --bs-btn-disabled-border-color: #7b5e43;
}

.btn-link {
  --bs-link-color: #255625;
  --bs-link-hover-color: #253825;
  --bs-btn-hover-bg: #4b644a40;
}

/* Dropdown buttons */
.dropdown-menu.show {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dropdown-menu > li {
  display: flex;
}

.dropdown-menu > li > .btn {
  flex: 1;
  margin-bottom: 0;
  border-radius: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.dropdown-item i {
  color: #255625 !important;
}



/*  Tables  */
.table {
  --bs-table-striped-bg: #4b644a40;
  --bs-table-hover-bg: #87857f20;
  --bs-table-bg: transparent;
  vertical-align: middle;
}

#orders-overview-overviewTable>.dataTables_wrapper>.dataTables_scroll>.dataTables_scrollBody {
  border-left: none !important;
}

#orders-overview-overviewTable .dataTables_scrollBody{
  min-height: 150px;
}

table.dataTable thead>tr>th.sorting {
    color: #255625;
    font-weight: 800;
    border-bottom: 2px solid #7B5E43cf;
    vertical-align: middle;
}

.pagination {
    --bs-link-hover-color: #805834;
    --bs-pagination-active-bg: #805834;
    --bs-pagination-active-border-color: #805834;
    --bs-pagination-color: #805834;
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(123, 94, 67 0.46);
    --bs-pagination-hover-bg: #80583450;
    --bs-pagination-focus-bg: #80583450;
}

.dataTables_processing {
  --dt-row-selected: 123, 94, 67;
}

.dtfc-fixed-left {
    background-color: #f7f3e9 !important;
}

.country-tag {
    border-radius: 1rem;
    padding: 0.3rem 0.7rem;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    font-weight: 900;
}

.country-tag.nz {
  background: black;
  color: white;
}

.nz .country-icon {
  filter: brightness(0) saturate(100%) invert(89%) sepia(1%) saturate(309%) hue-rotate(69deg) brightness(93%) contrast(77%);
}

.country-tag.au {
  background:#FFD700;
  color: #00843d;
}

.au .country-icon {
  filter: brightness(0) saturate(100%) invert(26%) sepia(8%) saturate(3424%) hue-rotate(92deg) brightness(94%) contrast(78%);
}

.country-tag.us {
  background: #BE0B32;
  color: white;
}

.us .country-icon {
  filter: brightness(0) saturate(100%) invert(10%) sepia(56%) saturate(4596%) hue-rotate(210deg) brightness(96%) contrast(101%);
}

.country-icon {
  height: 1.3rem;
}

/* CARDS */

.card-inline {
  flex-direction: row;
  padding: calc(var(--bs-card-spacer-y) * 0.5) var(--bs-card-spacer-x);
  cursor: pointer;
}

.card {
  --bs-card-border-radius: 1rem;
  --bslib-card-body-max-height: 200px;
  border-color: #4b644a;
  max-width: 700px;
}

.card-uneditable {
  cursor: default !important;
  background: var(--bs-disabled-bg);
  box-shadow: none;
}

.bslib-card .card-header {
  font-size: large;
  font-weight: 600;
  cursor: pointer;
  background-image: url(background-leaf.png);
  color: #f7f3e9;
  justify-content: space-between;
  display: flex;
  gap: 1rem;
  align-items: center;
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
}

.card-header i {
  color: inherit;
}

.card-body hr {
    margin: 0;
}

.card-body .btn {
    margin: 0;
}

.card-lineitems {
  max-width: max-content;
  transition: none !important;
  --bslib-card-body-max-height: 500px;
}

.card-notes {
    margin-bottom: 6rem;
}

.note-meta {
    font-size: small;
    display: flex;
    justify-content: space-between;
}

.modal-body > .disabled {
    font-size: small;
    font-style: italic;
    background: var(--bs-disabled-bg) !important;
    padding: 0.5rem;
    border-radius: var( --bs-border-radius);
    justify-content: space-between;
    column-wrap: nowrap;
    column-gap: 0;
    align-items: center;
}

.modal-body > .disabled > .form-group {
  margin-bottom: 0;
  width: 30%;
}

.shipping-info .form-group {
  width: 100%;
}

.form-control:disabled {
  background-color: var(--bs-disabled-bg);
}

.datepicker.datepicker-dropdown.dropdown-menu {
  z-index: 2000 !important;
}

/* MODALS */

.modal-header {
  padding-bottom: 0;
}

.modal-title {
  font-weight: 700;
  margin: auto;
}

.modal-body {
  padding-bottom: 0;
}

.modal-footer .btn {
  margin-bottom: unset;
}

@media (min-width: 992px) {
    .modal-lg,.modal-xl {
        --bs-modal-width: 800px
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 1140px
    }
    
    .modal-xxl {
        --bs-modal-width: 90%;
    }
}

/* TOOLTIPS */

.bslib-card .card-header:has(.fa-pen-to-square),
.bslib-card .card-header:has(.fa-plus),
.card:has(.card-inline):not(.card-uneditable) {
  position: relative;
}

.bslib-card .card-header:has(.fa-pen-to-square)::after,
.bslib-card .card-header:has(.fa-plus)::after,
.card:has(.card-inline):not(.card-uneditable)::after {
  position: absolute;
  right: 8px;
  padding: 0.2rem 0.5rem;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

/* Card header tooltips sit just below the header, inside the card body area */
.bslib-card .card-header:has(.fa-pen-to-square)::after,
.bslib-card .card-header:has(.fa-plus)::after {
  top: calc(100% + 4px);
}

/* Inline card tooltip sits in the bottom-right corner of the card */
.card:has(.card-inline):not(.card-uneditable)::after {
  bottom: 4px;
}

.bslib-card .card-header:has(.fa-pen-to-square)::after,
.card:has(.card-inline):not(.card-uneditable)::after {
  content: "Edit";
}

.bslib-card .card-header:has(.fa-plus)::after {
  content: "Add";
}

.bslib-card .card-header:has(.fa-pen-to-square):hover::after,
.bslib-card .card-header:has(.fa-plus):hover::after,
.card:has(.card-inline):not(.card-uneditable):hover::after {
  opacity: 1;
}

/* Card header dropdown toggle */
.card-header-dropdown {
  color: #f7f3e9 !important;
  box-shadow: none !important;
  margin: 0;
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

.card-header-dropdown::after {
  display: none; /* hide Bootstrap's default dropdown caret */
}

.card-header-dropdown i {
  color: #f7f3e9 !important;
}

/* RHANDSONTABLE IN MODALS */

/* Handsontable sets overflow:hidden on .ht_master to clip its virtual scroll.
   Overriding to visible lets autocomplete dropdowns escape the table bounds. */
.modal .ht_master {
  overflow: visible !important;
}

/* Header — match card header / DT header style */
.modal .handsontable thead th,
.modal .handsontable .htCore thead th {
  background-color: #253825;
  background-image: url(background-leaf.png);
  color: #f7f3e9;
  font-weight: 700;
  vertical-align: middle;
  border-color: #4b644a;
  text-align: left;
  padding: 5px 8px;
  white-space: nowrap;
}

/* Body cells */
.modal .handsontable td {
  font-size: 0.875rem;
  padding: 4px 8px;
  border-color: #dee2e6;
  vertical-align: middle;
  background-color: transparent;
}

/* Alternating rows — match DT striped colour */
.modal .handsontable tbody tr:nth-child(even) td {
  background-color: #4b644a20;
}

/* Row hover — match DT hover colour */
.modal .handsontable tbody tr:hover td {
  background-color: #87857f30 !important;
}

/* Keep the current-row highlight from the global rule */
.modal .handsontable .currentRow {
  background-color: lemonchiffon !important;
}

/* Autocomplete dropdown — ensure it clears the modal z-index */
.handsontable.listbox {
  z-index: 1060 !important;
}

/* Wider autocomplete dropdown list to avoid truncated text */
.handsontable .autocompleteEditor .listbox {
  min-width: 250px;
}

.handsontable tr {
  background: none !important;
}

/* Address From selector grid — 3 per row, square buttons */
.radio-group-grid .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radio-group-grid .btn-group .btn {
  flex: 0 0 calc(33.333% - 6px);
  height: -webkit-fill-available;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  border-radius: 1rem !important;
  padding: 0.75em 1em;
}

/* Rates modal stacks above the shipping modal */
#shippo-rates-modal {
  z-index: 1065;
}

#shippo-rates-modal + .modal-backdrop {
  z-index: 1060;
  opacity: 0.3;
}

/* Shipping rate card selector */
.rate-card {
  gap: 6px;
  width: 100%;
}

.rate-card-logo {
  height: 32px;
  object-fit: contain;
}

.rate-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rate-card-service {
  font-weight: 600;
  font-size: 0.875rem;
}

.rate-card-price {
  font-size: large;
  font-weight: 900;
}

.rate-card-price::before {
  content: '$';
}

.rate-card-days {
  font-size: 0.78rem;
  color: var(--bs-secondary);
}

.rate-card-terms {
  font-size: 0.75rem;
  color: var(--bs-secondary);
  font-style: italic;
}

/* Internal notes hover popup on orders overview table */
.notes-hover {
  position: relative;
  cursor: default;
  text-decoration: underline dotted #4b644a;
  text-underline-offset: 0.1rem;
}

.notes-popup {
  display: none;
  position: absolute;
  z-index: 1000;
  top: calc(100% + 4px);
  left: calc(250px / 2 * -1);
  min-width: 250px;
  overflow-y: auto;
  background: #f7f3e9;
  border: 1.5px solid #4b644a;
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  font-weight: normal;
  text-decoration: none;
  color: #483828;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.notes-hover:hover .notes-popup {
  display: block;
}