/*
 * READ THIS BEFORE ADDING PORTAL CSS.
 *
 * Every portal page loads TWO stylesheets (see Elements/head.php): this one, by relative
 * path from whatever host is serving the portal, and then the STAFF styles.css pulled over
 * https from getConfig('domains')['staff'] -- a fixed, live host. Two consequences that cost
 * an hour each to rediscover:
 *
 *   1. Portal-only CSS belongs HERE. Put it in the staff stylesheet and a worktree host will
 *      silently not see it, because the worktree portal is still fetching the staff CSS from
 *      the live staff host rather than from the worktree.
 *
 *   2. Editing the staff stylesheet on a served tree changes EVERY portal immediately, on
 *      every host that points at that staff domain. It is not a portal-local change.
 *
 * The staff sheet is loaded second, so on equal specificity it wins. Prefer class names that
 * cannot collide with it rather than fighting that with !important.
 */

/* --- 

 ____   ___   ___ _____ ____ _____ ____      _    ____  
| __ ) / _ \ / _ \_   _/ ___|_   _|  _ \    / \  |  _ \ 
|  _ \| | | | | | || | \___ \ | | | |_) |  / _ \ | |_) |
| |_) | |_| | |_| || |  ___) || | |  _ <  / ___ \|  __/ 
|____/ \___/ \___/ |_| |____/ |_| |_| \_\/_/   \_\_|    

--- */

:root {
  --primary-color: #3A5874;
  --light-color: #f3f3f3;
  --light-red: #ffe2e1;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.nav-item {
  margin-left: 10px;
  font-size: 0.83em;
  display: inline-block;
}

.nav-item:hover {
  text-decoration: underline;
  cursor: pointer;
}

.nav-item input[type=submit] {
  border: none;
  background-color: transparent;
  padding: 0;
}

.nav-link input[type=submit] {
  color: white;
  cursor: pointer
}

.nav-link input[type=submit]:hover {
  text-decoration: underline;
}

.form-group label {
  font-size: 90%;
  padding-left: 5px;
  margin-bottom: 1px;
}

.modal-table {
  font-size: 10.5pt;
}


/* --- 

 _____ ___  _   _ _____ ____  
|  ___/ _ \| \ | |_   _/ ___| 
| |_ | | | |  \| | | | \___ \ 
|  _|| |_| | |\  | | |  ___) |
|_|   \___/|_| \_| |_| |____/ 

--- */
@font-face {
  font-family: manrope;
  src: url("Fonts/Manrope/Manrope-VariableFont_wght.ttf");
}


/* --- 

 _   _ _   _ _____     _______ ____  ____    _    _     
| | | | \ | |_ _\ \   / / ____|  _ \/ ___|  / \  | |    
| | | |  \| || | \ \ / /|  _| | |_) \___ \ / _ \ | |    
| |_| | |\  || |  \ V / | |___|  _ < ___) / ___ \| |___ 
 \___/|_| \_|___|  \_/  |_____|_| \_\____/_/   \_\_____|

--- */

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 1.1s linear infinite;
  position: fixed;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  z-index: 100000000;
}

.bold {
  font-weight: bold;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

html,
body {
  height: 100%;
}

body {
  font-family: manrope;
  overflow-x: hidden;

  /* LPS-10351 — see the matching note in staff/CSS/styles.css. Clients read the
     same records-request verbiage here, so the portal needs the same switch or
     "(c)" still renders as © on their side. */
  font-variant-ligatures: none;
}

article {
  display: flex;
  min-height: 100%;
  height: 100%;
  flex-direction: column;
  align-items: stretch;
}

main {
  flex-grow: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  vertical-align: top;
  padding: 5px;
}

.header-buffer {
  width: 100%;
  height: 58px;
}

.header-buffer,
main,
footer {
  flex-shrink: 0;
}

#content::after {
  content: "";
  display: block;
}

.static-top {
  width: 100%;
  position: fixed;
  background-color: white;
  z-index: 2;
  left: 0;
  right: 0;
}

.static-top-content {
  padding: 10px;
}

.full-table-header {}

.full-table-header th {
  background-color: var(--primary-color);
  color: white;
}

.full-table-header th input[type=submit] {
  color: white;
  font-weight: bold;
  padding: 0px;
  background-color: transparent;
  border: none;
}

/* .full-table .main-row:nth-child(4n + 1) {
    background-color: var(--light-color);
} */

.full-table .main-row td {
  border-bottom: 1px solid rgb(223, 216, 216);
}

.inner-client-table th {
  background-color: var(--light-color);
}

.inner-client-table td {
  border-bottom: 1px solid var(--light-color);
}

.text-divider {
  --text-divider-gap: 1rem;
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.text-divider::before,
.text-divider::after {
  content: '';
  height: 1px;
  background-color: silver;
  flex-grow: 1;
}

.text-divider::before {
  margin-right: var(--text-divider-gap);
}

.text-divider::after {
  margin-left: var(--text-divider-gap);
}


.mini-alert {
  position: fixed;
  bottom: 60px;
  right: 30px;
  border-radius: 12px;
  background: #fff;
  padding: 20px 35px 20px 25px;
  overflow: hidden;
  transform: translateX(calc(100% + 30px));
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
  z-index: 10000;
}

.mini-alert.active {
  transform: translateX(0%);
  box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.6);
}

.mini-alert .mini-alert-content {
  display: flex;
  align-items: center;
}

.mini-alert-content .check {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-width: 35px;
  background-color: #4070f4;
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
}

.mini-alert-content .message {
  display: flex;
  flex-direction: column;
  margin: 0 20px;
}

.message .text {
  font-size: 16px;
  font-weight: 400;
  color: #666666;
}

.message .text.text-1 {
  font-weight: 600;
  color: #333;
}

.mini-alert .close {
  position: absolute;
  top: 10px;
  right: 15px;
  padding: 5px;
  cursor: pointer;
  opacity: 0.7;
}

.mini-alert .close:hover {
  opacity: 1;
}

.mini-alert .progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;

}

.mini-alert .progress:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #4070f4;
}

.progress.active:before {
  animation: progress 5s linear forwards;
}

.inherit-icon {
  height: 18px;
  margin-left: 3px;
}

@keyframes progress {
  100% {
    right: 100%;
  }
}

@media (min-width: 992px){
	.dropdown-menu .dropdown-toggle:after{
		border-top: .3em solid transparent;
	    border-right: 0;
	    border-bottom: .3em solid transparent;
	    border-left: .3em solid;
	}
	.dropdown-menu .dropdown-menu{
		margin-left:0; margin-right: 0;
	}
	.dropdown-menu li{
		position: relative;
	}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{
		display: block;
	}
}

span.circle {
  background: #e3e3e3;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  color: #6e6e6e;
  display: inline-block;
  font-weight: bold;
  line-height: 40px;
  margin-right: 5px;
  text-align: center;
  width: 40px;
}

.exp-notes-arrow-top,
.exp-notes-arrow {
  width: 18px;
  cursor: pointer;
}

.call-notes-div {
  height: 23px;
  overflow-y: hidden;
}

.exp-func-icon {
  height: 20px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: -3px;
}

.exp-favorites-list {
  display: inline-block;
}

.exp-tabs-table {
  table-layout: fixed;
}

.exp-tabs-table td {
  border: 1px solid black;
  text-align: center;
  font-size: 11pt;
  cursor: pointer;
}

.truncate {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.exp-tabs-table td:hover {
  opacity: 0.65;
  transition: all 0.4s;
}

.exp-tabs-table .active-tab {
  font-weight: bold;
  background-color: aliceblue;
}

.exp-tabs-table .inactive-tab {
  background-color: #e3e3e3;
  color: gray;
}

.exp-right-content {
  height: 700px;
  overflow-y: auto;
}

.exp-worksheet-table-sm {
  font-size: 11pt;
}

.exp-worksheet-table-sm th {}

.exp-worksheet-table-sm-2 {
  font-size: 11pt;
}

.exp-worksheet-table-sm-2 th {
  border-bottom: 1px solid gray;
}

.exp-worksheet-table-sm-2 td {
  border-bottom: 1px dotted #e3e3e3;
}

.exp-worksheet-dynamic {
  display: block;
  height: 360px;
  overflow-y: auto;
}

/* ORDER PAGE */

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

.hover-darken:hover {
  transition: 0.5s;
  opacity: 0.8;
  cursor: pointer;
}

.order-form-area {
  width: 700px;
  margin-left: calc(50% - 350px);
  margin-top: 30px;
  background-color: rgb(248, 248, 248);
  border: 1px solid gray;
  padding: 20px;
  border-radius: 20px;
}

.order-form-divider {
  margin-bottom: 8px;
  font-weight: bold;
}

.order-party-check-table {
  border-top: 1px solid rgb(202, 202, 202);
  border-bottom: 1px solid rgb(202, 202, 202);
  margin: 5px 0;
}

.order-party-check-table tr:first-child td:nth-child(1) {
  width: 150px;
}

.order-party-check-table tr:first-child td:nth-child(2) {
  width: 80px;
}

.order-party-roles-table tr:first-child td:nth-child(1) {
  width: 133px;
}

.order-party-roles-table tr:first-child td:nth-child(2) {
  width: 65px;
}

.order-party-check-table td {
  padding: 3px;
}

.party-view-icon {
  width: 40px;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.order-center-container {
  width: 600px;
  margin-left: calc(50% - 300px);
}

.order-field-prepend {
  width: 200px;
}

.client-foca-prepend {
  width: 150px;
}

.settings-field-prepend {
  width: 200px;
}

.record-types-table {
  table-layout: fixed;
}

.hide {
  display: none;
}

.modal-scrolling-body {
  height: 400px;
  overflow: auto;
}

.modal-scrolling-body-lg {
  height: 550px;
  overflow: auto;
}

.dropzone-find {
  /* border: 1px dashed gray; */
}

.dz-button {
  border: none;
  background-color: transparent;
}

.review-order-table-container {
  width: 600px;
  margin-left: calc(50% - 300px);
  margin-top: 20px;
  margin-bottom: 20px;
}

.review-order-table {
  width: 100%;
  border: 1px solid rgb(196, 196, 196);
  margin: 20px 0;

}

.review-order-table th {
  background-color: aliceblue;
  text-align: center;
  border-bottom: 1px solid rgb(233, 233, 233);
  font-size: 110%;
}

.review-order-table td {
  border-bottom: 1px solid rgb(233, 233, 233);
  width: 50%;
}

.review-order-table tr td:first-of-type {
  font-weight: bold;
}

.review-order-table .loc-mini-header {
  background-color: rgb(243, 243, 243);
  text-align: center;
}

.acct-field-readonly {
  border: none;
  padding: 0;
}

.acct-field {
  width: 100%;
}

.accounts-page {
  width: 100%;
}

.accounts-page-left {
  width: 20%;
  padding: 20px;
  position: absolute;
  left: 0;
  top: 70px;
}

.accounts-page-right {
  position: absolute;
  width: 79%;
  padding: 20px;
  top: 70px;
  left: 20%;
}

.account-card {
  height: 750px;
}

.account-card label {
  font-weight: normal;
}

.container {
  min-width: 100%;
}

.account-settings-fields-1 {
  width: 480px;
  border-right: 1px solid #e3e3e3;
  padding-right: 30px;
  position: absolute;
  top: 30px;
  left: 30px;
}

.account-settings-fields-2 {
  position: absolute;
  top: 30px;
  left: 540px;
  width: calc(100% - 570px);
}

.accounts-list-badge img {
  width: 21px;
}

.help-icon {
  width: 18px;
  cursor: help;
  margin-left: 5px;
}

.remove-x {
  width: 18px;
  cursor: pointer;
}

.billing-session-input {
  width: 95%;
}

.billing-session-input[readonly] {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.form-control[readonly] {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.scrubber {
  cursor: ns-resize;
  background-color: white;
  width: 40px;
}

.table-cell-form-group {
  margin-bottom: 2px !important;
}

.billing-main-info-prepend {
  width: 150px;
}

.billing-info-right td {
  padding-top: 3px;
  padding-bottom: 2px;
  line-height: 1.1;
}

.billing-info-right table tr:nth-child(odd) {
  background-color: aliceblue;
}

.home-calendar {
  table-layout: fixed;
}

.home-calendar th {
  text-align: center;
  border: 1px solid rgb(197, 197, 197);
}

.home-calendar td {
  height: 100px;
  border: 1px solid rgb(197, 197, 197);
  position: relative;

}

.home-calendar td:hover {
  cursor: pointer;
  background-color: rgb(240, 240, 240);
  transition: 0.75s;
}

.calendar-day-number {
  position: absolute;
  border-bottom: 1px solid rgb(197, 197, 197);
  border-right: 1px solid rgb(197, 197, 197);
  top: 0;
  left: 0;
  width: 40px;
  text-align: center;
  background-color: white;
}

.current-calendar-day {
  background: #e8f4ea;
}

.calendar-month-header {
  text-align: center;
  font-size: 120%;
}

.calendar-month-header a {
  margin: 0 15px;
  cursor: pointer;
}

.file-manager-dir {
  width: calc(100% - 80px);
  margin-left: 40px;
  margin-top: 8px;
  margin-bottom: -20px;
}

.file-manager-table {
  width: calc(100% - 80px);
  border: 1px solid rgb(197, 197, 197);
  margin: 0 40px;
  margin-top: -5px;
}

.file-manager-table th {
  padding: 6px 8px;
}

.file-manager-table td {
  padding: 6px 8px;
}

.file-manager-table th input[type=submit] {
  padding: 0;
  background-color: transparent;
  font-weight: bold;
  border: none;
}

.file-manager-folder {
  width: 18px;
}

.file-manager-dir-row:hover {
  cursor: pointer;
  background-color: rgb(240, 240, 240);
  transition: 0.5s;
}

.add-event-prepend {
  width: 100px;
}

.ledger-transaction-prepend {
  width: 150px;
}

.w-120 {
  width: 120px;
}

.link {
  color: #007bff !important;
  text-decoration: none;
  background-color: transparent;
}

.link:hover {
  cursor: pointer;
  opacity: 0.8;
}

.full-table-sm {
  font-size: 90%;
}

.full-table-xsm {
  font-size: 85%;
}

.xs-input {
  font-size: 10pt !important;
}

.exp-commands-table tr {
  border: 1px solid rgb(192, 192, 192);
}

#available-commands-area,
#exp-codes-area-right {
  height: 400px;
  overflow-y: auto;
}

.temp-highlighted-row {
  background-color: rgb(255, 255, 214);
}

.prod-tank-static-top {
  padding: 40px 40px 0 40px;
}

.prod-tank-static-top table {
  table-layout: fixed;
}

.prod-tank-static-top table th {
  border-top: 2px solid black;
  border-bottom: 1px solid black;
  padding: 8px 0;
}

.prod-tank-table-bottom {
  padding: 0 40px;
}

.prod-tank-table-bottom table {
  table-layout: fixed;
}

.prod-tank-table-bottom table input[type=checkbox] {
  transform: scale(1.2);
}

.prod-tank-mini-table th {
 background-color: #e3e3e3;
 border-top: 1px solid gray;
 border-bottom: 1px solid gray;
 padding: 8px 0;
}

.prod-tank-mini-table tr td {
  padding: 4px 0;
  border-bottom: 1px dashed #e3e3e3;
}

.prod-tank-mini-table tr:first-of-type td {
  padding: 0;
}

.prod-tank-table-bottom table:first-of-type tr:first-of-type th {
  border-top: none;
}

.case-view-header-row {
  background-color: rgb(233, 233, 233);
  font-weight: bold;
}

.case-view-info-row {
  background-color: rgb(247, 247, 247);
}

.case-view-info-row td {
  
}

.case-view-btn {
  border: 1px solid gray;
  border-radius: 7px;
  padding: auto;
  width: 25px;
  height: 25px;
  font-size: 90%;
}

.case-view-btn-active {
  border: 1px solid rgb(85, 85, 85);
  border-radius: 7px;
  padding: auto;
  width: 25px;
  height: 25px;
  font-size: 90%;
  font-weight: bold;
  background-color: #C1E1C1;
}

.input-group-element {
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: #fff;
    border: 1px solid #ced4da;
    border-left: 0; /* matches how input-group elements join together */
    border-right: 0; 
    font-size: 90%;
}

.input-group-element-left {
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: #fff;
    border: 1px solid #ced4da;
    border-right: 0; 
    font-size: 90%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.oe-top-info {
  width: 100%;
  background-color: white;
  position: fixed;
  left: 20px;
  top: 55px;
  z-index: 3;
  /* height: 70px; */
}

.oe-top-info .info-div {
  width: calc(100% - 40px);
  border: 1px solid gray;
  background-color: white;
  padding: 10px 5px 10px 30px;
  position: fixed;
  left: 20px;
  top: 65px;
  border-radius: 5px;
  z-index: 3000000000 !important;
  height: auto;
}

.oe-top-info table {
  table-layout: fixed;
  font-weight: bold;
}

.oe-top-info table td {
  padding: 0;
}

.oe-top-orders {
  border-top: 1px solid #e3e3e3;
  margin-top: 10px;
}

.oe-top-orders table {
  margin-top: 10px;
  font-weight: normal;
}

.oe-top-orders table th,
.oe-top-orders table td {
  padding: 3px;
}

.oe-top-orders table td {
  border-bottom: 1px dashed #e3e3e3;
}

.oe-top-orders-series {
  border-top: 1px solid #e3e3e3;
  margin-top: 10px;
}

.oe-top-orders-series table {
  margin-top: 10px;
  font-weight: normal;
}

.oe-top-orders-series table th,
.oe-top-orders-series table td {
  padding: 3px;
}

.oe-top-orders-series table td {
  border-bottom: 1px dashed #e3e3e3;
}

.min-padding-input {
  padding: 2px !important;
}

.min-padding-input::placeholder {
  color: #bdbdbd;
  opacity: 1; /* Firefox */
}

.min-padding-input::-ms-input-placeholder { /* Edge 12 -18 */
  color: #bdbdbd;
}

.active-stepper {
  background-color: #007bff !important;
}

#ordering-page-content {
  width: 100%;
  position: absolute;
  top: 200px;
  height: calc(100% - 200px);
  overflow-y: auto;
  padding: 5px 20px 60px 20px;
}

.tools-table {
  table-layout: fixed;
}

.tools-table td {
  padding: 1px 3px;
}

.tools-table label {
  margin-bottom: 0;
}

.tools-table input[type=checkbox] {
  vertical-align: -9px;
  margin-right: 4px;
}

.status-progress-table {
  font-size: 9pt;
}

.status-progress-table td {
  width: 20%;
  text-align: center;
}

/* =========================
   Typable Dropdown (v1.6-fixed)
   Works with JS v1.5
   ========================= */

.typable-dropdown {
  position: absolute !important;
  font-size: 0.9rem;
  line-height: 1.3;
  background-color: #fff !important;   /* Solid paint layer */
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  max-height: 220px;
  z-index: 2147483647; /* Above everything, including modals */
  display: none;
  margin: 0;
  padding: 0;
}

/* Ensure dropdown paints fully opaque (fixes "see-through" in tables/modals) */
.typable-dropdown,
.typable-dropdown * {
  background-color: #fff !important;
  backdrop-filter: none !important;
}

/* Individual items */
.typable-dropdown .typable-item {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
  color: #212529;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover & keyboard active state */
.typable-dropdown .typable-item:hover,
.typable-dropdown .typable-item.active {
  background-color: #007bff !important;
  color: #fff !important;
}

/* Remove bottom border on last item */
.typable-dropdown .typable-item:last-child {
  border-bottom: none;
}

/* Custom scrollbar */
.typable-dropdown::-webkit-scrollbar {
  width: 8px;
}
.typable-dropdown::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

/* ---------- Dark Mode ---------- */
body.dark-mode .typable-dropdown {
  background-color: #2b2b2b !important;
  border-color: #444;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}

body.dark-mode .typable-dropdown .typable-item {
  background-color: #2b2b2b !important;
  color: #eaeaea;
  border-color: #3a3a3a;
}

body.dark-mode .typable-dropdown .typable-item:hover,
body.dark-mode .typable-dropdown .typable-item.active {
  background-color: #0d6efd !important;
  color: #fff !important;
}

.remove-td-formatting {
  background-color: white !important;
  padding: 0 !important;
  border: none !important;
  color: black;
}

.case-view-doc-table tr {
  border-bottom: 1px solid #e3e3e3;
}

.case-view-doc-table tr:last-of-type {
  border-bottom: none;
}

.case-view-doc-table tr td {
  border: none;
  padding: 3px;
}

.oe-manual-notif-input {
  padding: 3px;
}

.firm-grid-compact {
    font-size: 0.7rem;
}

.firm-grid-compact .form-control,
.firm-grid-compact .input-group-text {
    font-size: 0.7rem;
    padding: 2px 4px;
    height: 22px;
    line-height: 18px;
    border-radius: 0;
}

.firm-grid-compact .input-group {
    height: 22px;
}

.firm-grid-compact .input-group-text {
    display: flex;
    align-items: center;
    padding: 0 4px;
}

.firm-grid-compact .form-group,
.firm-grid-compact .form-row {
    margin: 0;
}

.firm-grid-compact .col,
.firm-grid-compact [class*="col-"] {
    padding: 0;
}

.tutorial-anchor {
    position: relative;
    margin: 16px 0;
}

.tutorial-anchor-line {
    height: 1px;
    background: #d6dde5;
    width: 100%;
}

.tutorial-anchor-copy {
    position: absolute;
    right: 0;
    top: -8px;
    background: #fff;
    padding: 2px 6px;
    cursor: pointer;
    color: #6c7a89;
    font-size: 13px;
    border-radius: 4px;
}

.tutorial-anchor-copy:hover {
    background: #f0f4f8;
}

.mini-toggle-wrap {
    margin: 6px 0 10px 0;
}

.mini-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.15s ease;
}

.mini-toggle-btn:hover {
    color: #343a40;
    text-decoration: none;
}

.mini-toggle-icon {
    width: 18px;
    height: 18px;
    border: 1px solid #cfd4da;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
}

.mini-toggle-content {
    margin-top: 8px;
    margin-left: 26px;
    padding: 10px 12px;
    border-left: 2px solid #dee2e6;
    color: #495057;
    font-size: 0.9rem;
}

/*
 * Scoped drag-to-resize for the two nicEdit fields in the order page's
 * 3 - Location / Witness section (main location "Specify Records" + location
 * add-on record types). The wrapper carries .nic-resizable; nicEdit inserts its
 * generated .nicEdit-main contentEditable div inside that same wrapper.
 * nicEdit sets overflow:hidden inline on .nicEdit-main, so !important is needed
 * for the resize handle to appear (CSS resize is ignored when overflow:visible/hidden).
 */
.nic-resizable .nicEdit-main {
    resize: vertical;
    overflow: auto !important;
    min-height: 80px;
}

/*
 * LPS-10399 fit: the alerts snapshot has to be readable in one look on a 1080p screen, and
 * both rules below exist to buy back the height that pushed its last section under the fold.
 * Portal stylesheet rather than the staff one, because these two class names are the portal
 * alerts view and nothing else loads them.
 */

/* New Records and Modified Statuses are a heading and a single one-line card each, so stacked
   they spent a whole row apiece on one line of content. Side by side they cost one row between
   them. flex-wrap plus a real flex-basis is what puts them back one above the other when the
   dialog is too narrow to seat two -- a phone, or the 500px Bootstrap gives a small screen. */
.woy-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
}

.woy-pair > div {
    flex: 1 1 260px;
    min-width: 0;
}

/* The reason a response is needed is a preview here, not the message: one line, ellipsis, and
   the row still opens the order for the rest of it. Clamped in CSS on purpose -- the whole
   string stays in the DOM, so nothing is lost to anyone reading the page another way, and no
   truncation decision gets baked into what the server sent. */
.woy-message {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Half a row wide, the card text ran straight into its button -- they only ever sat at full
   width before. A gap, because width alone does not fix touching: even at 1140px the longer
   of the two still met its button. */
.woy-pair .list-group-item {
    gap: 0 16px;
}

/* The button label is a sentence fragment with a number in it, so at half width it broke
   across two and sometimes three lines -- "View 6" over "records". It is a control, not
   prose, so it holds one line. Nothing else is needed to stop it being squeezed: a flex
   item will not shrink below its own min-content width, and nowrap is what makes that
   width the whole label. Verified stable up to a five-figure count. */
.woy-pair .list-group-item .btn {
    white-space: nowrap;
}

/* A one-line button needs more width than a wrapped one, and at the 800px Bootstrap gives
   .modal-lg that width comes out of the sentence beside it -- which then wrapped to four lines
   and cost 20px, exactly what stopping the button wrapping had just saved. 1000px is past the
   point where both fit on their natural number of lines, so the pair of them costs LESS height
   than the wrapped version did, not more. Measured: at 800 the worst case clears the body box by
   2px, at 900 and above by 26. Below the breakpoint this class does nothing and Bootstrap sizing
   applies unchanged, which is what keeps the narrow layout as it was. Stays under the 1180px cap
   that home.php puts on the same content. */
@media (min-width: 1100px) {
    .modal-dialog.woy-dialog {
        max-width: 1000px;
    }
}

/*
 * ZR-10377: the warning over Unsubmitted Orders in the "Waiting on you" view -- the sign-in
 * modal and home.php, both drawn by waitingOnYouHtml(). Portal stylesheet and not the staff
 * one, per the note at the top of this file: this class is the portal alerts view and nothing
 * else loads it.
 *
 * COLOUR AND AN ICON, AND DELIBERATELY NOTHING ELSE. No tinted panel, no border, no all-caps.
 * Response Needed directly above already carries the only accent in this view -- a 3px amber
 * stripe down its edge -- and a red box here would turn a screen with one emphasis into a screen
 * with two competing ones. Edge colour and text colour are different channels, so the two read
 * as a hierarchy rather than as a fight: one marks a card, the other marks a sentence.
 *
 * #b02a37 rather than Bootstrap .text-danger (#dc3545), which is tuned to sit on a red-tinted
 * alert panel and reads as an error against plain white. This is a darker, quieter red -- about
 * 6:1 on white, so it is comfortably legible as body text and still unmistakably not grey.
 *
 * 500 rather than bold: enough to separate it from the muted lines elsewhere in the view without
 * making a sentence shout at somebody who has done nothing wrong.
 *
 * The icon sits in its own flex column so the sentence keeps a hanging indent. That matters as
 * soon as the wording is not the built-in one: whoever writes this can write a long one, and at
 * 700px even the default runs to two lines -- with the icon inline, the second line tucked under
 * it and the block lost its left edge. baseline and not center, so the icon sits on the FIRST
 * line of text rather than halfway down a three-line sentence.
 */
.woy-unsubmitted-notice {
    display: flex;
    align-items: baseline;
    gap: 0 6px;
    color: #b02a37;
    font-weight: 500;
}

.woy-unsubmitted-notice .fa-triangle-exclamation {
    flex: 0 0 auto;
}

/* The portal puts dark-mode on <html> (getHtmlTagClasses), the staff tree puts it on <body>, and
   the staff stylesheet loads over this one on every portal page -- so this is written to match
   either. #b02a37 on #121212 is under 3:1 and disappears; #ea868f is the same hue lightened to
   roughly 8:1 there, which keeps it reading as the same warning rather than as a second colour.

   The element this lands on is a DIV, and that is load-bearing rather than incidental. The staff
   sheet -- which loads after this one on every portal page -- carries
   `.dark-mode .modal p { color: var(--dark-mode-text) !important; }`, so as a <p> the warning came
   out white inside the sign-in modal and red on home.php: the same sentence, two colours, in the
   one view that is supposed to be a single rendering. The note at the top of this file says to
   pick markup that cannot collide rather than to fight the staff sheet with !important, so the
   caller in portal/functions.php emits a div. */
.dark-mode .woy-unsubmitted-notice {
    color: #ea868f;
}

/*
 * ZR-10377: the section headings in the "Waiting on you" view, and the qualifier one of them
 * carries.
 *
 * -- THE QUALIFIER --
 *
 * "Unsubmitted Orders (7) — entire firm". Only that section is firm-wide; the other three are
 * limited to what the signed-in client is set up to see, so labelling them the same way would
 * be false. It sits after the count and outside the <strong>, muted and at the heading size, so
 * it reads as part of the heading rather than as a badge stuck onto it -- and NOT in or beside
 * parentheses, where it would read as part of the number.
 *
 * It is here and not in the sentence below it because the sentence is now the company's to
 * rewrite. A structural fact stored in editable prose lasts until the first edit, and whoever
 * makes that edit will not know they deleted it.
 *
 * -- THE HEADING COLOUR IN DARK MODE (a pre-existing fault, fixed here because this change
 *    depends on the heading being readable) --
 *
 * The portal puts .dark-mode on <html>, but Bootstrap sets `color: #212529` on BODY -- so every
 * heading in this view inherited near-black from body and sat on the #121212 that
 * `html.dark-mode main` paints behind it. Measured contrast 1.21:1, which is not "hard to read",
 * it is invisible. It has been that way since the view shipped and nobody had a reason to look,
 * but putting a disclosure in a heading that dark-mode readers cannot see would be worse than
 * leaving it in the sentence.
 *
 * Scoped to this class, so it fixes the four headings it is on and changes nothing else. The
 * body-colour problem underneath it is real and much wider; it is not this ticket.
 */
.woy-section-qualifier {
    color: #6c757d;
    font-weight: 400;
}

.dark-mode .woy-section-heading {
    color: #f0f0f0;
}

.dark-mode .woy-section-qualifier {
    color: #adb5bd;
}