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