:root{
    --modal-content-background-color: #fff;
    --placement-font-color: #757575;
    --calendar-icon: url('/caddy/images/icons/calendar/Light Date icon.png');
}

body.dark {
    --modal-content-background-color: #141314;
    --calendar-icon: url('/caddy/images/icons/calendar/Dark Date icon.png');
}

/* modals.js hides things by adding this class: the file input behind a Browse button, an error
   line with nothing to say, the share modal's two modes. It was only ever defined per page
   (landing.css, view-users.css), so on a page that did not happen to declare it the hidden
   element stayed on screen. It belongs here, beside the markup that depends on it.

   !important because it has to beat a display set by a component rule, e.g. the two-tone form's
   own `.modal-form > input { display: block }`. */
.hidden {
    display: none !important;
}

/* The confirm modal's button row. .modal-content .button-row > button stretches every modal
   button to the full width, which is right for a single action but stacks a confirm and a cancel
   into two banners, the destructive one of which reads as the page's main action. Sized and laid
   out here so the pair reads as a choice, with the safe option first. */
.modal-content .button-row.cl-confirm-row {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: 1.25rem;
}

.modal-content .button-row.cl-confirm-row > button {
    width: auto;
    min-width: 104px;
    margin-top: 0;
}

/* The confirm button on a destructive modal. A delete that looks exactly like a save is the one
   place in the app where a misread click cannot be undone, so it carries its own colour.

   --danger-color is the palette's own destructive colour. It was added for this: the palette is
   green and grey throughout, and the assurance status reds are scoped to the assurance pages, so
   a modal that opens app-wide cannot reach them. */
.modal-content .button-row > button.cl-btn-destructive {
    background-color: var(--danger-color);
    color: #FFFFFF;
}

.modal-content .button-row > button.cl-btn-destructive:hover {
    background-color: var(--danger-accent-color);
}

/* Modal background overlay */
.modal {
    display: none; /* hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5); /* semi-transparent overlay */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
}

/* Modal box */
.modal-content {
    background-color: var(--sub-background-color);
    color: var(--font-color);
    padding: 20px;
    border: 2px solid var(--background-color);
    border-radius: 12px;
    width: 400px;
    max-width: 80%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    position: absolute;
    top: 10%;
}

.modal-content h2{
    margin-top: 0;
    color: var(--secondary-color);
    font-weight: 800;
    font-size: 1.5rem;
}

/* Header text */
.modal-content h2 {
    margin-top: 0;
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0;
}

.modal-content label {
    display: block;
    margin-top: 10px;
    font-weight: 600;
}

.modal-content input {
    width: 95%;
    padding: 10px;
    margin-top: 5px;
    font-size: .9rem;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    background-color: var(--background-color);
    color: var(--font-color);
}

.modal-content select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    font-size: .9rem;
    font-weight: 500;
    border: 2px solid var(--background-color);
    border-radius: 6px;
    background-color: var(--modal-content-background-color);
    color: var(--font-color);
}

.modal-content input:focus {
    border-color: var(--sub-background-color);
    outline: none;
}

/* Compile Modal */
.download-group {
    margin-bottom: 1rem;
}

.download-group h3 {
    margin: 0 0 0.4rem 0;
    font-size: 1rem;
}

.download-options {
    display: grid;
    grid-template-columns: 150px 150px; /* Two equal-width columns */
    gap: 10px 20px; /* row gap, column gap */
}

.download-options label {
    display: flex;
    align-items: center;
    gap: 6px; /* Space between checkbox and text */
}

/* Wrapper for input + icon */
.date-input-wrapper {
  position: relative;
  width: 100%;
}

/* Date Input Styling */
.modal-content input#projectDate {
  width: 95%;
  border: 1px solid var(--accent-color);
  border-radius: 6px;
  background-color: var(--background-color);
  color: var(--font-color);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
}

.modal-content input#projectDate:focus {
  border-color: var(--accent-color-strong);
  outline: none;
}

/* Real clickable calendar icon */
.calendar-icon {
  position: absolute;
  right: 10px;
  top: 55%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: var(--calendar-icon);
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Flatpickr popup styling */
.flatpickr-calendar {
  background: var(--background-color) !important;
  border: 1px solid var(--accent-color) !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* Days */
.flatpickr-day {
  color: var(--font-color) !important;
}
.flatpickr-day:hover {
  background: var(--secondary-color) !important;  
  color: var(--background-color) !important;  
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange {
  background: var(--primary-accent-color) !important;
  color: var(--background-color) !important;  
  font-weight: bold !important;
}
/* Weekday labels (Sun–Sat) */
span.flatpickr-weekday {
  background: var(--background-color) !important;
  color: var(--font-color) !important;
  font-weight: 600 !important;
  padding: 4px 0 !important;
  border: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
/* Month bar */
.flatpickr-months .flatpickr-month {
  background: var(--secondary-accent-color) !important;
  color: var(--font-color) !important;
  border-radius: 2px 2px 0 0 !important;
  padding: 2px 0 !important;
}
/* Month dropdown */
.flatpickr-monthDropdown-months {
  background: var(--secondary-accent-color) !important;
  color: var(--font-color) !important;
  padding: 2px 6px !important;
  font-weight: bold !important;
  cursor: pointer !important;
}
.flatpickr-monthDropdown-months option {
  background: var(--background-color) !important;
  color: var(--font-color) !important;
  text-align: center !important;
}
/* Year input */
.flatpickr-current-month .numInputWrapper input {
  background: transparent !important;
  color: var(--font-color) !important;
  font-weight: bold !important;
  border: none !important;
  outline: none !important;
  text-align: center !important;
  padding-right: 10px !important;
}
.flatpickr-current-month .numInputWrapper span {
  margin-left: 10px !important; 
}
/* Year up/down arrows */
.flatpickr-current-month .numInputWrapper span.arrowUp:after,
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-bottom-color: var(--font-color) !important;
  border-top-color: var(--font-color) !important;
}
/* Arrows */
.flatpickr-prev-month, 
.flatpickr-next-month {
  color: var(--font-color) !important;
  fill: var(--font-color) !important;
}

.required-star {
  color: red;
  margin-left: 4px;
  font-weight: bold;
}

.modal-content form > button,
.modal-content .button-row > button {
    width: 100%;
    margin-top: 15px;
    background-color: var(--secondary-color);
    color: var(--font-color);
    font-weight: 600;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.modal-content form > button:hover,
.modal-content .button-row > button:hover,
.sidebar button:hover {
    background-color: var(--secondary-accent-color);
    border-color: var(--secondary-color);
    transform: scale(1.05);
}

.modal-content p {
  white-space: pre-line; /* treats \n as line breaks */
}

/* Close button (X) */
.close {
    color: var(--font-color);
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

/* Close hover effect */
.close:hover {
    color: var(--secondary-color);
}

/* Action button inside modal */
.modal-action {
    margin-top: 15px;
    background-color: var(--secondary-color);
    color: var(--font-color);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.modal-action:hover {
    background-color: var(--secondary-accent-color);
}

/* shared project log */
.chat-modal {
    width: 600px;
    max-height: 80vh;
    overflow: hidden;
}

.chat-log-container {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px;
}

.chat-entry {
    padding: 12px;
    border-bottom: 1px solid #444;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
    opacity: 0.8;
}

.chat-body {
    font-size: 15px;
}

/* unread dot on logs */
.chat-entry.unread {
    background-color: rgba(210, 63, 63, 0.08);
}

.chat-entry .chat-meta {
    font-size: 0.8rem;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--primary-accent-color, #d23f3f);
    flex-shrink: 0;
}

.chat-entry .chat-message {
    margin-top: 2px;
}

.custom-dropdown-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.custom-dropdown-trigger {
    margin-top: 5px;
    min-width: 200px;
    min-height: 40px;
    padding: 8px 30px 8px 12px;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    background: var(--background-color);
    color: var(--font-color);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

.custom-dropdown {
    position: relative;
    min-width: 0;
}

.modal-content.modal-two-tone .modal-form > .custom-dropdown {
    width: 100%;
    min-width: 0;
    margin: 0;
    margin-top: 0.35rem;
    background: transparent;
    box-sizing: border-box;
}

.custom-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--font-color);
    border-bottom: 2px solid var(--font-color);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
    opacity: 0.85;
}

.custom-dropdown.is-open .custom-dropdown-trigger {
    border-color: var(--primary-accent-color);
}

.custom-dropdown-label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    width: stretch;
    max-width: 500px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    background: var(--background-color);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    z-index: 2000;
    padding: 4px;
    box-sizing: border-box;
    white-space: nowrap;
}

/* The menu is moved into <body> while open, so a modal's overflow cannot clip it. That takes it
   out of the wrapper, so the open rule cannot be a descendant selector: .is-portaled is what the
   portaled menu is matched on, and the descendant rule stays for any menu still in place. */
.custom-dropdown.is-open .custom-dropdown-menu,
.custom-dropdown-menu.is-portaled {
    display: flex;
    flex-direction: column;
}

/* Positioned from JS against the trigger's viewport rect.

   The z-index is raised above the base .custom-dropdown-menu's 2000 because a portaled menu is a
   direct child of <body> and has to clear whatever the page stacks beneath it: /main escalates its
   own panels to 3001 while a dropdown is open. It stays well under a full-screen overlay (9999)
   and a modal (1000 on the host, which creates its own context), so neither is covered. */
.custom-dropdown-menu.is-portaled {
    position: fixed;
    z-index: 5000;
}

.custom-dropdown-option:hover {
    background: rgba(255, 255, 255, 0.06);
}

.custom-dropdown-option.is-selected {
    background: rgba(255, 255, 255, 0.10);
    font-weight: 400;
}

.custom-dropdown-option {
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--font-color);
    font: inherit;
    text-align: left;
    cursor: pointer;
    font-size: 15px;
    box-sizing: border-box;
}

.custom-dropdown-option:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.custom-dropdown-option:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Custom dropdown scrollbar */
.custom-dropdown-menu {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--background-color);
}

.custom-dropdown-menu::-webkit-scrollbar {
    width: 10px;
}

.custom-dropdown-menu::-webkit-scrollbar-track {
    background: var(--background-color);
    border-radius: 999px;
}

.custom-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 999px;
    border: 2px solid var(--background-color);
}

.custom-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--primary-accent-color);
}

.custom-dropdown-menu::-webkit-scrollbar-corner {
    background: transparent;
}

/* Custom dropdown: search, cap footer, groups and the stacked two-line option.
   All added with the assurance port, which needs searchable and capped dropdowns. */

.custom-dropdown-search {
    width: 100%;
    margin-bottom: 4px;
    padding: 6px 8px;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    background: var(--background-color);
    color: var(--font-color);
    font: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.custom-dropdown-search:focus {
    outline: none;
    border-color: var(--primary-accent-color);
}

/* Filtered out by the search. Must beat the flex display on the menu's children. */
.custom-dropdown-option-hidden {
    display: none !important;
}

.custom-dropdown-empty {
    padding: 8px;
    color: var(--font-color);
    font-size: 14px;
    opacity: 0.7;
    text-align: center;
}

.custom-dropdown-group-label {
    padding: 6px 8px 2px;
    color: var(--font-color);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
}

.custom-dropdown-show-more {
    color: var(--primary-accent-color);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

/* Two-line option: label above, a quieter detail line below. */
.custom-dropdown-option-stacked {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.custom-dropdown-option-main {
    display: block;
}

.custom-dropdown-option-sub {
    display: block;
    font-size: 12px;
    opacity: 0.65;
}

/* Multi-select option: a check box drawn ahead of the label. */
.custom-dropdown-option-multi {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-dropdown-check {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 1px solid var(--accent-color);
    border-radius: 3px;
    box-sizing: border-box;
}

.custom-dropdown-option-multi.is-selected .custom-dropdown-check {
    border-color: var(--primary-accent-color);
    background: var(--primary-accent-color);
}

.custom-dropdown-option-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-dropdown.is-disabled .custom-dropdown-trigger {
    opacity: 0.55;
    cursor: not-allowed;
}

/*  Toasts  */

/* Bottom right, above the page but below a modal: a toast reports something that happened and must
   never cover what the user is working on. pointer-events is off on the container so the gap
   between toasts does not swallow clicks. */
.caddy-toast-container {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(360px, calc(100vw - 36px));
    pointer-events: none;
}

.caddy-toast {
    padding: 11px 14px;
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    background: var(--sub-background-color);
    color: var(--font-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 8px 24px var(--shadow);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    pointer-events: auto;
}

.caddy-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.caddy-toast-info {
    border-left: 4px solid var(--primary-color);
}

.caddy-toast-warning {
    border-left: 4px solid var(--accent-orange);
}

/*  Wide and two-tone modals  */

/* A modal opened from inside another one has to sit above it. */
.modal.modal-overlay-2 {
    z-index: 1100;
}

.modal-content.modal-wide {
    width: min(860px, 92vw);
    max-width: 92vw;
}

/* Two-tone: labels in a tinted left column, controls in the right. Used by the assurance record
   modals, which carry far more fields than Lite's stacked layout reads well with. */
/* A two-tone modal is CENTRED and scrolls with the page rather than being pinned near the top.

   .modal-content's `position: absolute; top: 10%` is what the stacked modals use, and it is also
   what stops the overlay scrolling: an absolutely positioned child does not extend its scroll
   container, so a tall modal runs off the bottom with nowhere to go. Going static inside the
   overlay's flex puts it back in flow, and the overlay's own padding then leaves room to scroll a
   little past each end instead of the modal butting against the edge. */
.modal-content.modal-two-tone {
    /* relative, not static. Going static put the modal back in the overlay's flow, which is what
       lets the overlay scroll, but it also removed the containing block that .close is positioned
       against: the button then anchored to the viewport and sat in the corner of the SCREEN rather
       than the corner of the modal. relative keeps it in flow and gives the button its box back. */
    position: relative;
    top: auto;
    margin: auto 0;
    width: min(860px, 92vw);
    max-width: 92vw;
    padding: 0;
    overflow-x: hidden;
    overflow-y: visible;
}

/* The breathing room above and below, and the centring. align-items stays stretch-free so a short
   modal centres while a tall one simply scrolls. */
.modal:has(> .modal-content.modal-two-tone) {
    align-items: center;
    padding: 40px 0 72px;
    box-sizing: border-box;
}

.modal-content.modal-two-tone > .close {
    position: absolute;
    top: 14px;
    right: 18px;
}

.modal-content.modal-two-tone h2 {
    margin: 0;
    padding: 18px 22px;
    background: color-mix(in srgb, var(--sub-background-color) 78%, var(--background-color) 22%);
}

/* Context subtitle on its own line below the modal title, inside the header band. */
.modal-subtitle {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--font-color) 65%, transparent);
}

.modal-content.modal-two-tone p {
    margin: 0;
}

.modal-content.modal-two-tone .modal-form {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding-top: 5px;
    padding-right: 10px;
    background:
        linear-gradient(
            to right,
            color-mix(in srgb, var(--sub-background-color) 78%, var(--background-color) 22%) 0,
            color-mix(in srgb, var(--sub-background-color) 78%, var(--background-color) 22%) 220px,
            color-mix(in srgb, var(--background-color) 88%, black 12%) 220px,
            color-mix(in srgb, var(--background-color) 88%, black 12%) 100%
        );
}

.modal-content.modal-two-tone .modal-form > label {
    display: flex;
    grid-column: 1;
    align-items: center;
    box-sizing: border-box;
    min-height: 52px;
    margin: 0;
    padding: 14px 18px;
    background: transparent;
}

/* A section heading spans both columns and breaks the field run into groups. */
.modal-content.modal-two-tone .modal-form > h3 {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px 18px 6px;
    background: transparent;
    color: var(--secondary-color);
    font-size: 0.95rem;
    font-weight: var(--font-weight-bold);
}

.modal-content.modal-two-tone .modal-form > input,
.modal-content.modal-two-tone .modal-form > select,
.modal-content.modal-two-tone .modal-form > textarea,
.modal-content.modal-two-tone .modal-form > .date-input-wrapper,
.modal-content.modal-two-tone .modal-form > div:not(.button-row):not(.cp-error) {
    grid-column: 2;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    background: transparent;
}

/* The fields themselves, which need to read as fields rather than as bare text on the panel.
   --background-color is a step darker than the right column's fill, so a filled input is legible
   as an input in both themes. Matches how CADdy Bid styles the same layout. */
.modal-content.modal-two-tone .modal-form > input,
.modal-content.modal-two-tone .modal-form > textarea,
.modal-content.modal-two-tone .modal-form > .custom-dropdown .custom-dropdown-trigger {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    background: var(--background-color);
    color: var(--font-color);
}

.modal-content.modal-two-tone .modal-form > input:focus,
.modal-content.modal-two-tone .modal-form > textarea:focus {
    outline: none;
    border-color: var(--primary-accent-color);
}

.modal-content.modal-two-tone .modal-form > textarea {
    min-height: 110px;
    resize: vertical;
}

/* The dropdown trigger is a grid child in its own right, so it gets the same treatment without
   the wrapper picking up a second border around it. */
.modal-content.modal-two-tone .modal-form > .custom-dropdown {
    background: transparent;
}

.modal-content.modal-two-tone .modal-form > .custom-dropdown .custom-dropdown-trigger {
    margin-top: 0;
    width: 100%;
}

/* The footer.

   grid-column 2, NOT 1 / -1. Spanning both columns runs the label column's tint under the buttons,
   so the row reads as half-tinted rather than as a footer. Sitting in the right column only, with
   its own slightly darker fill and a hairline above, closes the form off the way a dialog footer
   should.

   The buttons also have to be told not to stretch: .modal-content .button-row > button sets
   width: 100% for the stacked single-column modals, and inherited here that makes three buttons
   share the full width at roughly 200px each. */
.modal-content.modal-two-tone .modal-form > .button-row {
    display: flex;
    grid-column: 2;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 16px 18px 18px;
    background: color-mix(in srgb, var(--background-color) 88%, black 12%);
    border-top: 1px solid var(--accent-color);
}

.modal-content.modal-two-tone .modal-form > .button-row > button {
    width: auto;
    min-width: 96px;
    margin-top: 0;
    padding: 9px 18px;
    /* A footer of three same-coloured buttons gives no clue which one is the action, so only the
       last keeps the accent and the others step back to the surface colour. */
    background-color: var(--accent-color);
    color: var(--font-color);
}

.modal-content.modal-two-tone .modal-form > .button-row > button:last-child {
    background-color: var(--secondary-color);
}

.modal-content.modal-two-tone .modal-form > .button-row > button:hover {
    background-color: var(--secondary-accent-color);
    /* The 1.05 scale from the base rule makes a button in a tight row jump into its neighbour. */
    transform: none;
}

/* The demo fill is a helper rather than one of the two real answers, so it sits apart on the left. */
.modal-content.modal-two-tone .modal-form > .button-row > .ae-new-sample {
    margin-right: auto;
}

/* A hidden row has to leave the grid entirely, or it still takes a track. */
.modal-content.modal-two-tone .modal-form > .hidden,
.modal-content.modal-two-tone .modal-form > .custom-dropdown.hidden {
    display: none !important;
}

/* A hidden two-tone form itself: the display:grid above outranks the plain .hidden rule, so a
   multi-step modal needs this to hide the step it is not on. */
.modal-content.modal-two-tone .modal-form.hidden {
    display: none !important;
}

/* Inline error line inside a modal form. */
.cp-error {
    grid-column: 1 / -1;
    margin: 0;
    padding: 8px 18px;
    color: #d14343;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
}

/*  Loading modal  */

/* A blocking "working on it" modal, for an action the user must wait out. */
.cl-loading-modal {
    max-width: 360px;
    text-align: center;
}

.cl-loading-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 26px 24px;
}

.cl-loading-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: cl-spin 0.8s linear infinite;
}

.cl-loading-text {
    margin: 0;
    color: var(--font-color);
    font-weight: 600;
}

@keyframes cl-spin {
    to { transform: rotate(360deg); }
}

/* A spinner that cannot be stilled is a problem for anyone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    .cl-loading-spinner {
        animation-duration: 2.4s;
    }
}

/* ---------- role checklists ----------
   One checkbox per role, label to the right: the admin Users page's Standards roles modal and the
   header's "view as" role picker. The Lite copy of CADdy Bid's .admin-users-role-option. */

.cl-role-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.modal-content .cl-role-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.modal-content .cl-role-option:hover {
    background-color: color-mix(in srgb, var(--font-color) 6%, transparent);
}

.modal-content .cl-role-option:has(input[type="checkbox"]:checked) {
    border-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* Undo the global ".modal-content input" width and padding so these stay small checkboxes. */
.modal-content .cl-role-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 2px 0 0;
    padding: 0;
    border: none;
    background-color: transparent;
    accent-color: var(--primary-accent-color);
    cursor: pointer;
}

.modal-content .cl-role-option span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.modal-content .cl-role-option small {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.75;
}

/* The role picker modal's company choice, shown only while Company rep is ticked. */
.cl-role-picker-company {
    margin-top: 12px;
}

.cl-role-picker-company[hidden] {
    display: none;
}

.modal-content .cl-role-picker-company .custom-dropdown,
.modal-content .cl-role-picker-company .custom-dropdown-trigger {
    box-sizing: border-box;
    width: 100%;
}

.cl-role-picker-note {
    margin: 10px 0 0;
    font-size: 0.85rem;
    opacity: 0.75;
}

.modal-content.cl-role-picker-modal {
    box-sizing: border-box;
    width: 460px;
    max-width: calc(100% - 32px);
}

.modal-content.cl-role-picker-modal input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    font-family: var(--font-family-base);
}

.cl-role-picker-picked {
    margin: 4px 0 6px;
    font-weight: 600;
    color: var(--heading-color);
}

.cl-role-picker-results {
    max-height: 200px;
    overflow-y: auto;
    margin: 6px 0 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    background: var(--background-color);
}

.cl-role-picker-results[hidden] {
    display: none;
}

.cl-role-picker-results li.is-empty {
    padding: 8px 10px;
    opacity: 0.7;
}

.cl-role-picker-results button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--font-color);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cl-role-picker-results button:hover {
    background: var(--row-hover);
}

.cl-role-picker-error {
    margin: 10px 0 0;
    color: var(--danger-color);
    font-size: 0.88rem;
}

.cl-role-picker-error[hidden] {
    display: none;
}