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

/*
 * THE FILTER SUMMARY MUST BE ABLE TO GIVE WAY.
 *
 * cases.php and records.php hang "Showing: Declaration, Master Subpoena, Notice, ..." on the left
 * of their search box as one joined control. What is in that list is the client's own document-type
 * preference, so its width is data, not a layout decision -- on this test firm it measures 690px,
 * and with nowrap set and no floor of its own it pushed the whole input-group to 1033px and simply
 * overflowed anything narrower. Measured on main as well as here: 138px of horizontal page scroll
 * in a 900px window, 338px at 700. A client who works with a laptop window at half screen has been
 * dragging cases.php sideways to reach its own search box.
 *
 * min-width:0 is the fix, and it is not a detail: a flex item refuses to shrink below its content
 * without it, which is why every other cap on this control did nothing. The summary then truncates
 * to an ellipsis rather than growing the row taller or shoving the search box off the page.
 *
 * NOTHING TRUNCATES WHILE THERE IS ROOM. At a full-width window the summary is drawn character for
 * character as it is today, so this changes no page that was not already broken -- it only acts on
 * a window too narrow to have shown the whole list anyway. The complete list stays one tap behind
 * the pencil beside it, which is also where it is edited, and the "(N hidden)" note keeps its
 * popover.
 */
/* min-width:0 alone changes nothing here, and that is worth stating because it looks like it
 * should: it lifts the floor UNDER an item that is being squeezed, and nothing in this row was
 * being squeezed. The search form sizes itself to its content, the input-group inside it is
 * flex-wrap:nowrap so its own minimum is the sum of its parts, and the row simply grew to 1033px
 * and hung off the page. The cap is what creates the pressure -- hold the form and the group to
 * the width they were given, and min-width:0 is then what lets that pressure reach the summary
 * instead of stopping at it. Both halves are needed; either one on its own is a no-op.
 *
 * Scoped to .table-search-area, the wrapper cases.php, records.php, statuses.php and invoices.php
 * already put around this row, so no other input-group in the portal is touched. */
/* AND THE ROW HAS TO STAY ON ONE LINE. .table-search-area is a fixed 40px tall and the table
 * under it is position:absolute at top:100px, so nothing below moves when this row gets taller --
 * a second line does not push the table down, it lands underneath it. Wrapping was how the row
 * used to cope with not fitting (Add Case on one line, the search on the next, overlapping the
 * first two rows of cases), so the cap above would have swapped a page that scrolled sideways for
 * one that overlaps itself. Held to one line, the pressure goes where it should: into the summary,
 * which has somewhere to give.
 *
 * !important because the wrap is an inline style on that div, in two files. At a full-width window
 * the row is nowhere near wrapping, so this changes nothing there -- it only decides what happens
 * when it runs out of room. Only cases.php and records.php use this flex row; statuses.php and
 * invoices.php float a fixed-width group instead and are untouched by it. */
.table-search-area > div[style*="flex"] {
    flex-wrap: nowrap !important;
}

/* One line is only half of it -- WHICH item gives way is the other half. Left to itself the row
 * squeezed the button on the left instead (Add Case broke onto two lines and made the row 52px
 * tall, which put it back under the table), because every flex item shrinks by default and the
 * button is the one with slack in its label. So: nothing shrinks except the search form, which is
 * the item that has a summary inside it built to truncate. The left item is a button on cases.php
 * and a form on records.php, hence the shape of the second selector -- it picks the search form by
 * the inline display:flex it carries, which the download form does not. */
.table-search-area > div[style*="flex"] > * {
    flex-shrink: 0;
}

.table-search-area > div[style*="flex"] > form[style*="flex"] {
    flex-shrink: 1;
}

.table-search-area form {
    max-width: 100%;
    min-width: 0;
}

.table-search-area .input-group {
    min-width: 0;
    max-width: 100%;
}

.input-group-element,
.input-group-element-left {
    min-width: 0;
}

.input-group-element > span,
.input-group-element-left > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/*
 * portal-alerts-2: the frozen-order notice on a Response Needed card in the "Waiting on you" view
 * -- a small snowflake and a short, company-set line, shown only when the order is frozen.
 *
 * SMALL AND COLD, AND DELIBERATELY NOTHING ELSE. Response Needed already carries the one accent in
 * this view (the 3px amber stripe down its edge); a second box or border here would turn a card
 * with one emphasis into a card with two. This is a quiet aside UNDER the response reason, sized
 * and weighted like the muted .woy-message beside it, only tinted a cold blue instead of grey so
 * the freeze reads at a glance without shouting.
 *
 * #3a7ca5 is a calm cold blue at roughly 5:1 on white -- comfortably legible as small text and
 * unmistakably not the grey of the reason line above it.
 *
 * A <small>, not a <p>: the staff stylesheet loads over this one on every portal page and forces
 * `.dark-mode .modal p` white (the ZR-10377 note above), which would have painted this notice out
 * inside the sign-in modal while leaving it blue on home.php. Not being a p sidesteps that by
 * construction, exactly as .woy-unsubmitted-notice does.
 */
.woy-frozen-notice {
    float: right;
    margin-left: 12px;
    color: #3a7ca5;
    font-size: 0.85em;
}

.woy-frozen-notice .fa-snowflake {
    margin-right: 3px;
}

/* Dark mode: the same hue lifted to stay legible on #121212 (#3a7ca5 there is under 3:1). Same
   approach as .woy-unsubmitted-notice's dark rule. */
.dark-mode .woy-frozen-notice {
    color: #7fb2d4;
}

/*
 * PORTAL-REMOVE-SURFACES -- the red X that takes an unfinished order off the list, on the rows of
 * the alerts modal, home.php and the "New Orders - Not Yet Activated" modal.
 *
 * IT SITS ON A CLICKABLE ROW, and that is what the resting state is for. The whole row opens the
 * order and repaints under .table-hover, so a full-strength red X on every row would read as the
 * point of the row rather than the exception to it. It rests dimmed, and comes up to full colour
 * and very slightly larger under the cursor -- so the thing the client is pointing at is
 * unmistakably the X and not the row beneath it, which is the only real risk here: pressing
 * remove while meaning to open.
 *
 * A tint change rather than a background or a border, because the cell it lives in is 46px wide
 * beside a 20px view glass and there is no room for a box. Opacity and transform only: nothing
 * that changes the layout, so a row cannot shift under the pointer as it is being aimed at.
 *
 * No dark-mode rule. This is an opacity on a red PNG, so it behaves the same on either ground --
 * unlike a colour, which would have needed one.
 */
.row-remove-x {
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.12s ease-in-out, transform 0.12s ease-in-out;
    vertical-align: middle;
}

.row-remove-x:hover {
    opacity: 1;
    transform: scale(1.15);
}

/*
 * PORTAL-REMOVE-SURFACES - the Alerts nav item.
 *
 * Exactly what the markup used to say inline: bold with an orange number while there is something
 * waiting, plain white at zero. It is a class now because the badge changes without a page load --
 * a client removing an unfinished order from the alerts modal stays where they are, and the update
 * writes the new number into .nav-alerts-count and toggles .has-alerts. Rebuilding the label in
 * JavaScript instead would have put a second copy of the wording somewhere it could drift from the
 * PHP that draws it the first time.
 *
 * font-weight rather than the <strong> it replaces: same weight, and one element to update instead
 * of a nested one to rebuild.
 */
.nav-alerts.has-alerts {
    font-weight: bold;
}

.nav-alerts.has-alerts .nav-alerts-count {
    color: orange;
}


/* ── THE TWO ORDER-ENTRY SIDE PANELS ON STEP 3 ────────────────────────────────────────────────
   PORTAL-LOC-PANELS. Step 3 of order entry now draws a panel on each side of the form:

     left   .oe-loc-sidecard    the chosen location profile - name, profile number, address,
                                Location Notes, On-Site Doctors. It was on the RIGHT until now;
                                Daniel asked for it on the left so the right-hand slot could hold
                                the list. Its own styles are still inline in Classes/order.php.
     right  .oe-locs-sidecard   the other locations on this order, and the way between them.
                                Styled here rather than inline, which is why the rules below exist
                                at all - the older card predates that preference.

   BOTH ARE position:fixed AND NOTHING RESERVES ROOM FOR EITHER. They are not beside the form,
   they are drawn ON TOP of the page wherever the form happens to reach that far, so the only thing
   keeping them off it is arithmetic:

     .order-center-container is 600px centred, so the form spans (W-600)/2 .. (W+600)/2
     the left card spans   20 .. 320
     the right card spans  (W-320) .. (W-20)

   The two clearances are the same number by symmetry: (W-600)/2 - 320. That is zero at W=1240 and
   a usable 20px gap at W=1280, which is where the breakpoint below is set. Measured, not guessed -
   at W=1600 the form comes back 500..1100 and the cards 20..320 and 1280..1580, exactly as above.

   Above 1280px: both pinned, which is the design.
   Below 1280px: BOTH unpinned into the flow. A panel that covers the form is worse than no panel -
   Chris photographed exactly that on a phone when the single card was on the right, with Reference
   #, Due Date, Rush Order and Notes clipped and the Add New Location button reading "Add Ne". Two
   panels at 1100px would do it to both edges at once.

   This supersedes nothing in mobile.css - that file unpins .oe-loc-sidecard on the 900px phone
   canvas (html.zr-phone-canvas), which this query also catches at 900px. They agree; the phone rule
   is kept because it is scoped to the canvas rather than to a width, and because its reasoning is
   the record of why the card moves at all. */

.oe-locs-shell {
    background: #f8f9fb;
    border-radius: 8px;
    padding: 15px;
    font-size: 0.875rem;
    color: #343a40;

    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}

.oe-locs-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6c757d;

    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.oe-locs-count {
    background: #e9ecef;
    color: #495057;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: bold;
}

/* The scrolling region is the ENTRIES, not the card: the header has to stay put or a client who
   has scrolled down a long series loses what they are looking at. Negative right margin so the
   scrollbar sits in the card padding instead of eating 5px off every line of text. */
.oe-locs-scroll {
    overflow-y: auto;
    padding-right: 5px;
    margin-right: -5px;
}

.oe-locs-scroll::-webkit-scrollbar { width: 8px; }
.oe-locs-scroll::-webkit-scrollbar-track { background: transparent; }
.oe-locs-scroll::-webkit-scrollbar-thumb { background: #d3d8de; border-radius: 4px; }
.oe-locs-scroll::-webkit-scrollbar-thumb:hover { background: #b9c0c8; }

.oe-locs-entry {
    padding: 8px 8px 9px 9px;
    border-left: 3px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-left-color 0.12s ease;
}

.oe-locs-entry + .oe-locs-entry {
    border-top: 1px solid #e9ecef;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.oe-locs-entry:hover {
    background: #eef2f7;
    border-left-color: #b6c6d8;
}

/* The order being edited. It is listed so the client can see WHERE they are in the series, and it
   is not a link, because a link to the page you are already on is a dead click. */
.oe-locs-entry-current,
.oe-locs-entry-current:hover {
    background: #ffffff;
    border-left-color: #007bff;
    cursor: default;
}

.oe-locs-entry-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}

.oe-locs-wonu {
    font-weight: 600;
    font-size: 0.8rem;
    color: #343a40;
}

.oe-locs-when {
    font-size: 0.65rem;
    color: #8b949e;
    white-space: nowrap;
}

.oe-locs-entry-current .oe-locs-when {
    color: #007bff;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.oe-locs-name {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 2px;
    color: #343a40;
}

/* The department, on its own line under the location name and deliberately lighter than it. It was
   set alongside the name in brackets, where it read as part of the name and carried the name's
   weight; Chris asked for "DEPT with the name after, and that could also be smaller". The label is
   the same small-caps grey the card header uses, so the two read as the same kind of furniture. */
.oe-locs-dept {
    font-size: 0.7rem;
    font-weight: 400;
    color: #6c757d;
    line-height: 1.3;
    margin-top: 1px;
}

.oe-locs-dept-label {
    font-size: 0.6rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #97a0aa;
}

.oe-locs-address {
    font-size: 0.7rem;
    color: #6c757d;
    line-height: 1.3;
    margin-top: 2px;
}

.oe-locs-types {
    font-size: 0.68rem;
    color: #495057;
    line-height: 1.3;
    margin-top: 4px;
}

@media (max-width: 1279.98px) {

    /* !important because every one of these is an inline style on the panel div (Classes/order.php,
       singleLocationHtml and locationsPanelHtml) and an inline style outranks a stylesheet. */
    .oe-loc-sidecard,
    .oe-locs-sidecard {
        position: static !important;
        top:    auto !important;
        left:   auto !important;
        right:  auto !important;
        width:  auto !important;
        z-index: auto !important;
        margin-bottom: 16px;
    }

    /* The location card is emitted INSIDE .order-center-container, so unpinned it is already the
       width of the 600px form column. The locations list is emitted outside it, deliberately, so
       that it lands after the whole form rather than through the middle of it - which means it has
       to be given that column back by hand or it would run the full width of the window. */
    .oe-locs-sidecard {
        max-width: 600px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Both cards cap themselves and scroll internally, which is right for something pinned that
       must not run off the bottom of the screen and wrong for something in the flow - there it
       would be a second scrolling region inside a page that already scrolls, hiding half its own
       content behind a gesture nobody expects. In the flow they are as tall as their content. */
    .oe-loc-sidecard > div,
    .oe-locs-sidecard > div {
        max-height: none !important;
    }

    .oe-locs-scroll {
        overflow-y: visible !important;
        margin-right: 0;
        padding-right: 0;
    }

}
/*
 * card a252 / ZR-10392 item 1 - the missing-party warnings on the parties screen of step 1 of order
 * entry. a260 item 3 moved them ABOVE the parties table; they were under it until 2026-09-11.
 *
 * THIS REPLACED A BAR ACROSS THE TOP OF EVERY STEP, and the reason matters. .oe-top-info is
 * position: fixed and everything beneath it - the step buttons, the form pane - is pinned to a
 * hard-coded --topbar-height of 60px in the staff sheet. Adding a line to that bar therefore does
 * not push anything, it COVERS it: the step buttons stopped being clickable, and once that was
 * offset the whole page sat lower and cut off the location info card on step 3. Warnings that live
 * in normal flow underneath a table have none of that problem. Do not move these back up there.
 *
 * One card per missing party, because Daniel asked for "some kind of alert on the screen, for each"
 * and his wording runs to a full sentence or two apiece - these are not pills.
 *
 * No dismiss control: each card disappears by itself when its party is added, and
 * oePartiesWarningsHtml() returns the empty string once none are left, so a complete order has no
 * container and no reserved space above the table.
 */
/* FULL WIDTH, NOT A CENTRED COLUMN (Chris, 2026-09-08). These sit directly against the parties
   table, so a 900px centred block read as a separate floating panel rather than as a note about the
   table. Running the full width of the container lines their edges up with the table's and they
   stop competing for attention. (They are above the table since a260 item 3; the reasoning did not
   change with the side they are on.) */
/* SIDE BY SIDE, DIVIDING THE WIDTH EVENLY BY HOW MANY THERE ARE (Daniel and Chris, 2026-09-08).
   They were a stack of thin lines and were being missed, so they are now a row of cards across the
   full width - harder to skip, and each with room for an icon and its own add button.

   a260 item 2: A FIXED FOUR-COLUMN GRID, NOT A FLEX ROW. THE CARDS NO LONGER STRETCH.

   They used to be `flex: 1 1 0`, which divided the row evenly by however many cards happened to be
   there - so ONE missing party drew one card a full screen wide, and adding a second halved it.
   Chris, 2026-09-10: "if we have four cards total that are possible, then can we just always have a
   card equal twenty-five percent, and it just fills up as there's more, but they don't get larger or
   change in size - they're kind of added to the grid." A card is now a quarter of the row whether
   there is one of them or four, and a second one lands BESIDE the first instead of shrinking it.

   FOUR, BECAUSE FOUR IS WHAT A CLIENT CAN SEE AT ONCE. Five warnings exist - Primary Billing,
   Issuing Attorney, Represents Consumer, Additional Counsel and Ordering Party - but Ordering Party
   is the client's own firm and Daniel does not expect it to fire ("I do not think there is any way
   for the client to be missing, since it is them that is entering the job"). If it ever does, grid
   auto-flow puts the fifth card on a second row AT THE SAME WIDTH, which is the behaviour asked for
   rather than a case to guard against.

   minmax(0, 1fr) and not 25%: 25% plus the gaps overflows the row, and a bare 1fr refuses to shrink
   below its content - a long unbroken word in Daniel's wording would push the track wider than its
   quarter and take the stretching straight back. */
.oe-party-warnings {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    margin: 10px 0 4px 0;
}

.oe-party-warnings > .oe-party-warning {
    /* Grid sizes these; the card only has to agree to be narrower than its own content. */
    min-width: 0;
}

/* A RIGID QUARTER IS WRONG ON A PHONE, so the grid drops columns rather than the cards getting
   unreadable. Measured on the parties step: a card is 384px at a 1600px window, 344 at 1440, 304 at
   1280, 284 at 1200 and 240 at 1024 - four of them still read at every one of those. Much below
   1024 they do not, and Daniel's wording runs to a sentence or two apiece.

   992 and 700 are Bootstrap's own lg and the breakpoint this block already used, so the cards change
   shape at the same widths as everything else on the screen rather than at two new ones of their
   own. */
@media (max-width: 991px) {
    .oe-party-warnings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .oe-party-warnings { grid-template-columns: minmax(0, 1fr); }
}

/* A HOUSE CARD WITH A COLOURED EDGE (Chris, 2026-09-08). The element carries Bootstrap's own
   `card rounded shadow-sm`, so the radius, the border and the shadow are the same ones the parties
   cards above it use and they stay in step if the theme moves. Everything below is only what
   Bootstrap has no class for.

   GREY BODY, WARM EDGE. The body sits on the page's own neutral so the stack reads as quiet
   marginalia; the attention lives entirely in the left edge, which is the same device
   `border-danger bg-light` uses on the manual-party card on this screen. Orange rather than red:
   these are things the order still NEEDS, not things that are wrong.

   NO LONGER KEPT SHORT. That was right when these were a vertical stack, where every pixel was paid
   for once per missing role and four of them pushed the step off the screen. Side by side they cost
   the height of ONE card no matter how many there are, so the height is spent on being noticed
   instead - which is what Daniel asked for after clients kept missing them. */
/* ONE COLOUR PER CARD, and the button wears it too. Chris is colour-blind and asked whether the
   card was green or only the button - which is the question a solid GREEN button on an AMBER card
   invites, and a fair one: it was two signals saying different things. The border, the icon, the
   MISSING label and the outlined button are now all the same amber, so the card reads as one thing.
   #b35309 rather than #fd7e14 for text and the icon: the lighter orange is under 3:1 on this grey
   at small sizes, and the label is small by design. */
.oe-party-warning {
    border-left: 4px solid #b35309;
    background: #fbfaf8;
    font-size: 90%;
    line-height: 1.45;
}

/* Column, not row, now: the icon sits ABOVE the wording rather than beside it, and the add button
   sits under both. .card is already column-flow in Bootstrap, so this only sets the spacing.
   justify-content pushes the button to the bottom edge, which is what keeps the buttons on a row of
   cards lined up with each other when their sentences run to different lengths. */
.oe-party-warning-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 12px;
    height: 100%;
}

/* The add control. Full width of the card so it is a target rather than a detail, and pinned to the
   bottom by the justify-content above.

   a260 item 1: IT WEARS THE CARD'S OWN COLOUR, NOT BOOTSTRAP'S GOLD. Daniel, 2026-09-10: the gold
   text on the cards blends into the button. .btn-outline-warning paints its label #ffc107, which is
   about 1.7:1 on this near-white card body - a gold word on a cream ground, which is what he was
   looking at. Chris: "maybe we make them match the left colour and just lean into that colour - the
   same one we're using for missing in that left line."

   So the label and the border are now #b35309, the same value already carried by the left edge, the
   icon and the MISSING label. The card had four things in one colour and a fifth in another; it has
   five in one colour now, and that colour clears 3:1 at this size where the gold did not.

   TWO CLASSES, SO NO !important IS NEEDED. .btn-outline-warning is a single class and this selector
   is two, which wins on specificity wherever Bootstrap sits in the load order. The hover and focus
   rules have to be stated too: Bootstrap's own :hover fills the button with #ffc107 and would put
   the gold straight back the moment the pointer arrived. */
.oe-party-warning-add {
    align-self: stretch;
    margin-top: 8px;
    font-weight: 600;
}

.oe-party-warning .oe-party-warning-add {
    color: #b35309;
    border-color: #b35309;
}

.oe-party-warning .oe-party-warning-add:hover,
.oe-party-warning .oe-party-warning-add:focus,
.oe-party-warning .oe-party-warning-add:active {
    color: #ffffff;
    background-color: #b35309;
    border-color: #b35309;
}

/* Bootstrap's focus ring on this button is gold too. Same colour, same reason. */
.oe-party-warning .oe-party-warning-add:focus {
    box-shadow: 0 0 0 0.2rem rgba(179, 83, 9, 0.35);
}

/* The icon now leads the card rather than sitting beside a sentence, so it is bigger and it is the
   first thing read. Daniel picked these per role - a dollar sign for billing, scales for the issuing
   attorney, a person for represents-consumer - so that what is missing registers before the wording
   does. Sized in em so it tracks the card's own font-size rather than being pinned to a pixel. */
/* THE HEAD: icon and role name on one line. The name used to sit under the icon with a gap between
   them, which read as two unrelated things - Chris asked for it beside the icon. */
.oe-party-warning-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oe-party-warning-icon {
    flex: 0 0 auto;
    color: #b35309;
    font-size: 1.35em;
    line-height: 1;
}

/* SAYS THE PLAIN THING FIRST. Daniel's wording explains what happens if the party is not there,
   which is the right SECOND sentence; nothing said the first one. Chris: "I don't know if it's
   obvious that it's showing because something is missing." Small, uppercase and in the card's own
   colour so it reads as a label rather than competing with the role name above it. */
.oe-party-warning-missing {
    display: block;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #b35309;
    margin-top: 2px;
}

.oe-party-warning-body {
    display: block;
}

/* The role is still the heading - these read as "what this document type requires" rather than as
   "this input is empty" - but it is INLINE now rather than a line of its own. Daniel's wording runs
   a sentence or two, so a block-level title cost a whole extra line per warning and the stack grew
   fast. The trailing space is what separates it from the sentence; a border or bullet would put
   back the weight this change exists to remove. */
/* a278: BLOCK AGAIN, not inline. Inline was the right call for a thin stacked banner, where a
   title on its own line cost a whole extra line per warning. On a card there is vertical room by
   design, and the role name is the card's heading - it should sit above the sentence, not run into
   it. */
.oe-party-warning-title {
    display: block;
    font-weight: 700;
    font-size: 1.05em;
    color: #212529;
}

.oe-party-warning-title::after {
    content: ' ';
}

.oe-party-warning-text {
    display: inline;
    color: #495057;
}

.oe-party-warning-action {
    white-space: nowrap;
    font-weight: 600;
    cursor: pointer;
}

/* Dark mode is written to land on either host: 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. The grey body has to be RESTATED
   rather than inherited: .card carries Bootstrap's own light background, which stays light on a
   dark page and would leave these as four white slabs in the middle of a dark step.

   #fd7e14 keeps its hue on a dark ground and still clears 3:1 there, so the left edge and the icon
   are left alone - the warning reads as the same colour in both themes rather than as two. Nothing
   here needs an !important: no selector starting oe-party-warning exists in the staff sheet. */
.dark-mode .oe-party-warning {
    background: #262626;
    border-color: #3a3a3a;
    border-left-color: #fd7e14;
}

.dark-mode .oe-party-warning-title {
    color: #eaeaea;
}

.dark-mode .oe-party-warning-text {
    color: #c8c8c8;
}

/* a260 item 1, dark mode. The left edge and the icon become #fd7e14 above, because #b35309 is too
   dark to read on a dark ground - the button label has to move with them or the card is back to two
   colours, which is the whole complaint. */
.dark-mode .oe-party-warning .oe-party-warning-add {
    color: #fd7e14;
    border-color: #fd7e14;
}

.dark-mode .oe-party-warning .oe-party-warning-add:hover,
.dark-mode .oe-party-warning .oe-party-warning-add:focus,
.dark-mode .oe-party-warning .oe-party-warning-add:active {
    color: #1a1a1a;
    background-color: #fd7e14;
    border-color: #fd7e14;
}