/* ============================================================
   Lonestar Platform Theme
   Matches legacy Sales Doc Pro visual identity on Bootstrap 5
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Teko:wght@400;500;700&display=swap');

/* --- Design Tokens (CSS Custom Properties) --- */
:root {
    /* Primary palette */
    --ls-blue: #006bb7;
    --ls-blue-dark: #002868;
    --ls-blue-light: #BFD9FF;
    --ls-blue-secondary: #3A54A4;

    /* Neutrals */
    --ls-bg: #fcfcfc;
    --ls-gray-100: #f7f7f7;
    --ls-gray-200: #efefef;
    --ls-gray-300: #E5E5E5;
    --ls-gray-400: #D6D6D4;
    --ls-gray-500: #d1d1d1;
    --ls-gray-600: #aaa;
    --ls-gray-700: #9e9e9e;
    --ls-gray-800: #555;
    --ls-gray-900: #303030;
    --ls-text: #333;

    /* Status */
    --ls-red: #BA1A1E;
    --ls-green: #26b050;

    /* Layout */
    --ls-sidebar-width: 220px;
    --ls-header-height: 52px;
    --ls-content-max-width: 1550px;

    /* Shadows */
    --ls-card-shadow: 0px 0px 4px 0 rgba(0, 0, 0, 0.15);

    /* Bootstrap overrides */
    --bs-primary: var(--ls-blue);
    --bs-primary-rgb: 0, 107, 183;
    --bs-body-font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    --bs-body-font-size: 16px;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--ls-text);
    --bs-body-bg: var(--ls-bg);
    --bs-link-color: var(--ls-blue);
    --bs-link-hover-color: var(--ls-gray-900);
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 4px;
}

/* --- Base Typography --- */
html, body {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ls-text);
    background: var(--ls-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Teko', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

h1 { font-size: 44px; font-weight: 700; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 28px; }
h5 { font-size: 28px; }
h6 { font-size: 24px; text-transform: none; }

/* --- Links --- */
a {
    color: var(--ls-blue);
    text-decoration: none;
    transition: all 300ms ease-out;
}

a:hover {
    color: var(--ls-gray-900);
    text-decoration: none;
}

a:focus {
    text-decoration: none;
}

/* --- Buttons --- */
.btn {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-align: center;
    border-radius: 3px;
    transition: all 300ms ease-out;
    cursor: pointer;
}

.btn-primary,
.btn-primary:active {
    background-color: var(--ls-blue);
    border-color: var(--ls-blue);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #005a9c;
    border-color: #005a9c;
    color: #fff;
}

.btn-secondary,
.btn-secondary:active {
    background-color: var(--ls-blue-light);
    border-color: var(--ls-blue-light);
    color: var(--ls-text);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #a8c8f0;
    border-color: #a8c8f0;
    color: var(--ls-text);
}

.btn-outline-primary {
    color: var(--ls-blue);
    border-color: var(--ls-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--ls-blue);
    border-color: var(--ls-blue);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--ls-blue);
    border-color: var(--ls-gray-400);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--ls-gray-200);
    border-color: var(--ls-gray-400);
    color: var(--ls-text);
}

.btn-danger,
.btn-danger:active {
    background-color: var(--ls-red);
    border-color: var(--ls-red);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #9a1518;
    border-color: #9a1518;
    color: #fff;
}

/* Button sizes — legacy sizing */
.btn-sm {
    font-size: 13px;
    padding: 6px 15px;
    min-width: auto;
}

.btn-lg {
    font-size: 20px;
    padding: 16px 60px;
}

.btn:focus,
.btn:active:focus {
    box-shadow: 0 0 0 2px var(--ls-blue-light);
}

/* --- Form Controls --- */
.form-control,
.form-select {
    font-size: 14px;
    border: 1px solid var(--ls-gray-900);
    border-radius: 4px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.form-control {
    padding: 4px 8px;
}

.form-select {
    /* Reserve right space for Bootstrap chevron (background-position: right .75rem) */
    padding: 4px 28px 4px 8px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ls-blue-light);
    box-shadow: 0 0 0 2px var(--ls-blue-light);
    outline: none;
}

.form-control::placeholder {
    color: var(--ls-gray-400);
}

.form-control:read-only,
.form-control:disabled,
.form-select:disabled {
    background-color: var(--ls-gray-200);
    color: #999;
    cursor: not-allowed;
}

.form-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.form-control-sm {
    font-size: 14px;
    padding: 4px 6px;
}

/* Custom checkbox styling */
.form-check-input {
    width: 22px;
    height: 22px;
    border: none;
    background-color: #ddd;
    border-radius: 3px;
    transition: all 250ms ease;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--ls-blue);
    border-color: var(--ls-blue);
}

.form-check-input:hover:not(:checked):not(:disabled) {
    background-color: #c2c2c2;
}

.form-check-input:focus {
    box-shadow: 0 0 0 2px var(--ls-blue-light);
}

.form-check-input:disabled {
    color: var(--ls-gray-400);
    cursor: not-allowed;
}

/* --- Cards --- */
.card {
    box-shadow: var(--ls-card-shadow);
    border: none;
    border-radius: 4px;
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--ls-gray-300);
    padding: 15px 20px;
    font-weight: 600;
}

.card-header h5,
.card-header h6 {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-weight: 600;
    letter-spacing: normal;
    margin-bottom: 0;
    font-size: 16px;
}

.card-body {
    padding: 20px;
}

.card-footer {
    background-color: #fff;
    border-top: 1px solid var(--ls-gray-300);
    padding: 12px 20px;
}

.card-title {
    font-family: 'Teko', sans-serif;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 1px;
}

/* --- Tables --- */
.table {
    font-size: 14px;
}

.table > thead > tr > th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ls-gray-800);
    padding: 12px 15px;
    border-bottom: 2px solid var(--ls-gray-400);
    background-color: var(--ls-gray-100);
}

.table > tbody > tr > td {
    padding: 10px 15px;
    vertical-align: middle;
    border-bottom: 1px solid var(--ls-gray-300);
}

.table-hover > tbody > tr:hover {
    background-color: rgba(0, 107, 183, 0.04);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f5f5f5;
}

/* --- List Page Action Links --- */
.options-cell {
    white-space: nowrap;
}

/* --- Documents grid: contained horizontal scroll + pinned Options column (#2257) --- */
/* The documents table has more columns than fit on most screens. The grid uses
   the default `.table-responsive` (overflow-x: auto), so the *table body* scrolls
   horizontally inside its own container while the filter card and the pagination
   footer — which live outside `.table-responsive` — stay fixed. The Options column
   (Send to SignWell + the actions menu) is pinned to the right so it stays
   reachable while the other columns scroll. Disabled under the mobile breakpoint,
   where the table reflows into stacked cards.

   The actions dropdown is rendered with `position: fixed` (positioned by
   `lonestarDocMenu.anchor` in site.js) so it escapes the scroll box instead of
   being clipped by overflow-x: auto — this is what kept #63's menu visible when
   the container was overflow: visible. */
@media (min-width: 768px) {
    .documents-grid .table-responsive th:last-child,
    .documents-grid .table-responsive td.options-cell {
        position: sticky;
        right: 0;
        z-index: 3;
    }

    .documents-grid .table-responsive thead th:last-child {
        background-color: var(--ls-gray-100);
    }

    .documents-grid .table-responsive tbody td.options-cell {
        background-color: #fff;
        box-shadow: -4px 0 6px -4px rgba(0, 0, 0, 0.1);
    }

    .documents-grid .table-striped > tbody > tr:nth-of-type(odd) td.options-cell {
        background-color: #f5f5f5;
    }

    .documents-grid .table-hover > tbody > tr:hover td.options-cell {
        background-color: #eef4f9;
    }
}

/* Actions dropdown: rendered outside `.documents-grid` (so it escapes the pinned
   Options column's sticky stacking context) and fixed-positioned so it escapes the
   scrolling table box. Starts hidden to avoid a flash at the pre-positioned origin;
   site.js sets top/left and reveals it. */
.doc-actions-menu {
    position: fixed;
    visibility: hidden;
    z-index: 1000;
}

.action-link {
    color: var(--ls-blue);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 10px;
}

/* Allow <button class="action-link"> to render identically to the anchor variant.
   Buttons are used for in-place actions (e.g. Delete) that must not navigate, since
   an <a href="#"> triggers enhanced navigation to the home route in the Blazor Web App. */
button.action-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

.action-link:hover {
    color: var(--ls-blue);
    text-decoration: underline;
}

.action-link:last-child {
    margin-right: 0;
}

/* Visual feedback for a row that has been clicked and is navigating to its detail page. */
.row-navigating {
    opacity: 0.6;
    pointer-events: none;
}

/* --- Tabs --- */
.nav-tabs {
    border-bottom: 2px solid var(--ls-gray-400);
}

.nav-tabs .nav-link {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ls-gray-700);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 20px;
    margin-bottom: -2px;
    transition: all 200ms ease;
}

.nav-tabs .nav-link:hover {
    color: var(--ls-blue);
    border-bottom-color: var(--ls-blue-light);
    background: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--ls-blue);
    border-bottom-color: var(--ls-blue);
    background: transparent;
    font-weight: 600;
}

.tab-content {
    border: 1px solid var(--ls-gray-300);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 20px;
    background: #fff;
}

/* --- Badges / Status --- */
.badge {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
}

/* --- Search bar (DataGrid) --- */
.search-container {
    display: flex;
    max-width: 500px;
}

.search-container .form-control {
    border: 2px solid var(--ls-gray-300);
    border-right: 0;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
}

.search-container .form-control:focus {
    border-color: var(--ls-blue);
    box-shadow: none;
}

.search-container .search-submit {
    padding: 5px 15px;
    border: 2px solid var(--ls-blue);
    border-left: 0;
    border-radius: 0 4px 4px 0;
    background: var(--ls-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.search-container .search-submit:hover {
    background: #005a9c;
}

/* Legacy fallback for plain search inputs */
.card-header .form-control[placeholder="Search..."] {
    border: 2px solid var(--ls-gray-300);
    border-radius: 4px;
    font-size: 14px;
}

.card-header .form-control[placeholder="Search..."]:focus {
    border-color: var(--ls-blue);
    box-shadow: none;
}

/* --- Breadcrumbs --- */
.breadcrumb {
    font-size: 14px;
    background: transparent;
    padding: 0;
    margin-bottom: 16px;
}

.breadcrumb-item a {
    color: var(--ls-blue);
}

.breadcrumb-item.active {
    color: var(--ls-gray-700);
}

/* --- Alerts --- */
.alert {
    border-radius: 4px;
    font-size: 14px;
    border: none;
}

/* --- Pagination --- */
.pagination .page-link {
    color: var(--ls-blue);
    font-size: 14px;
    border-color: var(--ls-gray-400);
    padding: 6px 12px;
}

.pagination .page-item.active .page-link {
    background-color: var(--ls-blue);
    border-color: var(--ls-blue);
    color: #fff;
}

.pagination .page-link:hover {
    background-color: var(--ls-gray-200);
    border-color: var(--ls-gray-400);
    color: var(--ls-blue);
}

/* --- Modals --- */
.modal-content {
    border: none;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.modal-header {
    border-bottom: 1px solid var(--ls-gray-300);
    padding: 16px 20px;
}

.modal-title {
    font-family: 'Teko', sans-serif;
    font-size: 28px;
    letter-spacing: 1px;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    border-top: 1px solid var(--ls-gray-300);
    padding: 12px 20px;
}

/* --- Dropdowns --- */
.dropdown-menu {
    border: 1px solid var(--ls-gray-300);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-size: 14px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ls-blue);
    color: #fff;
}

.dropdown-item.active {
    background-color: var(--ls-blue);
    color: #fff;
}

/* --- Validation --- */
.valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: var(--ls-green);
}

.invalid {
    outline: none;
    border-color: var(--ls-red);
}

.validation-message {
    color: var(--ls-red);
    font-size: 13px;
    margin-top: 4px;
}

/* --- Utility: Content area --- */
.content {
    padding: 20px 0;
    max-width: var(--ls-content-max-width);
}

/* Lead text on home page */
.lead {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: 18px;
    font-weight: 400;
}

/* Home page stat numbers */
.card-body h3.mb-0 {
    font-family: 'Teko', sans-serif;
    font-size: 36px;
    font-weight: 500;
}

/* --- Section Layout (scrollable edit pages) --- */
/* Production uses plain Teko headings without blue background */
.section-title {
    background: none;
    color: var(--ls-text);
    font-family: 'Teko', sans-serif;
    font-size: 32px;
    font-weight: 400;
    padding: 0;
    margin: 0 0 24px 0;
    letter-spacing: 1px;
}

.sub-section-title {
    font-family: 'Teko', sans-serif;
    font-size: 22px;
    color: var(--ls-text);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ls-gray-300);
    margin: 25px 0 15px 0;
}

.form-section {
    margin-bottom: 30px;
    border: none;
    box-shadow: none;
}

.sub-section {
    padding: 0 20px 20px;
}

/* --- Top Bar (edit page title + action buttons) --- */
.top-bar {
    margin: 0 0 15px;
    padding: 0 0 15px;
    border-bottom: 1px solid #ddd;
}

.top-bar .title {
    font-family: 'Teko', sans-serif;
    text-transform: uppercase;
    margin-bottom: 0;
}

.page-links {
    display: flex;
    flex-flow: row wrap;
    margin: 16px 0;
    padding: 16px;
    background-color: #efefef;
}

.page-links h6 {
    flex-basis: 100%;
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-weight: 600;
    margin-bottom: 8px;
}

.form-actions {
    background: var(--ls-blue);
    border-top: 1px solid #ccc;
    padding: 4px 20px;
    position: fixed;
    bottom: 0;
    left: 220px;
    right: 0;
    z-index: 10;
    box-shadow: var(--ls-card-shadow);
}

.form-actions .btn-primary {
    background: #fff;
    border-color: #fff;
    color: var(--ls-blue);
}

.form-actions .btn-primary:hover {
    background: #8cbbff;
    border-color: #8cbbff;
    color: var(--ls-gray-900);
}

.form-actions .btn-outline-secondary,
.form-actions .btn-secondary {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.form-actions .btn-outline-secondary:hover,
.form-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
}

.edit-section .form-group {
    margin-bottom: 15px;
}

.edit-section .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Hide per-section save buttons when inside section layout */
.edit-section .text-end:has(button[type="submit"]) {
    display: none;
}

/* Also hide FormSection card wrappers inside section layout — content is already wrapped */
.edit-section .card.mb-3 {
    box-shadow: none;
    border: none;
    margin-bottom: 0 !important;
}

.edit-section .card.mb-3 > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ls-gray-300);
    padding: 0 0 8px 0;
}

.edit-section .card.mb-3 > .card-header h6 {
    font-family: 'Teko', sans-serif;
    font-size: 22px;
    color: var(--ls-text);
}

.edit-section .card.mb-3 > .card-body {
    padding: 15px 0;
}

/* --- Home Page (matches prod welcome layout) --- */
.home-content {
    display: flex;
    height: 95vh;
    overflow: hidden;
}

.home-left {
    flex-basis: 34%;
    padding: 100px;
}

.home-left h1 {
    font-family: 'Teko', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.05;
    text-transform: none;
    color: var(--ls-gray-900);
    margin-bottom: 20px;
}

.home-right {
    flex-basis: 66%;
}

.home-right img {
    object-fit: cover;
    object-position: bottom;
    width: 100%;
    height: 100%;
}

@media (max-width: 991px) {
    .home-content {
        flex-direction: column;
    }
    .home-left {
        flex-basis: 100%;
        padding: 50px;
    }
    .home-left h1 {
        font-size: 30px;
    }
    .home-left h6 {
        display: none;
    }
    .home-right {
        display: none;
    }
}

/* --- Button Refinements (Phase 6) --- */
/* Only apply large padding to standalone/form-action buttons, not table/inline buttons */
.form-actions .btn,
.button-section .btn {
    padding: 12px 16px;
    min-width: 180px;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--ls-blue-light);
    border-color: var(--ls-blue-light);
    color: var(--ls-blue);
}

/* --- Responsive: Tablet (1023px) --- */
@media (max-width: 1023px) {
    .form-actions {
        left: 0;
    }

    .btn {
        min-width: auto;
        padding: 8px 15px;
        font-size: 14px;
    }
}

/* --- Responsive: Mobile (767px) --- */
@media (max-width: 767.98px) {
    .table-responsive thead {
        display: none;
    }

    .table-responsive tbody,
    .table-responsive tr,
    .table-responsive td {
        display: block;
        width: 100%;
    }

    .table-responsive tr {
        padding: 15px 0;
        border-bottom: 2px solid var(--ls-gray-300);
    }

    .table-responsive td {
        padding: 4px 15px;
        border-bottom: none;
    }

    .table-responsive td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        display: block;
        color: var(--ls-gray-700);
    }

    .subdivision-context .d-flex {
        flex-direction: column;
    }

    .detail-fields-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Responsive: Small mobile (576px) --- */
@media (max-width: 576px) {
    .form-actions {
        padding: 8px;
    }

    .form-actions .d-flex {
        width: 100%;
    }

    .form-actions .btn {
        flex: 1;
    }

    .detail-fields-grid {
        grid-template-columns: 1fr;
    }

    .top-bar {
        display: block;
    }

    .top-bar .title {
        margin-bottom: 10px;
        font-size: 20px;
    }
}

/* --- Print Styles --- */
@media print {
    .sidebar,
    .top-row,
    .navbar,
    .btn,
    .card-footer .pagination,
    .breadcrumb {
        display: none !important;
    }

    .page {
        display: block !important;
    }

    main {
        width: 100% !important;
        margin: 0 !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .form-control,
    .form-select {
        border: 1px solid #000;
    }

    body {
        font-size: 12px;
    }
}

/* --- Subdivision Context Header (Tract List) --- */
.subdivision-context {
    margin-bottom: 16px;
}

.subdivision-heading {
    font-family: 'Teko', sans-serif;
    font-size: 32px;
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
}

.on-market-date {
    font-size: 14px;
    color: var(--ls-gray-800);
    font-style: italic;
}

.lender-info-line {
    font-size: 14px;
    color: var(--ls-gray-800);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.lender-info-line span::after {
    content: " | ";
    color: var(--ls-gray-600);
}

.lender-info-line span:last-child::after {
    content: "";
}

.detail-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px 16px;
    background: var(--ls-gray-200);
    padding: 12px 16px;
    border-radius: 4px;
}

.detail-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.detail-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ls-gray-700);
}

.detail-value {
    font-size: 14px;
    color: var(--ls-text);
    overflow-wrap: anywhere;
}

/* --- Tract Status Row Colors --- */
tr.status-row-available {
    background-color: rgba(38, 176, 80, 0.08) !important;
}

tr.status-row-competing {
    background-color: rgba(255, 193, 7, 0.12) !important;
}

tr.status-row-pending {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

tr.status-row-closed {
    background-color: rgba(0, 0, 0, 0.06) !important;
}

/* --- Tract Status Badges --- */
.status-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.status-available {
    color: #155724;
    background-color: rgba(38, 176, 80, 0.15);
}

.status-competing {
    color: #856404;
    background-color: rgba(255, 193, 7, 0.2);
}

.status-pending {
    color: var(--ls-gray-800);
    background-color: rgba(0, 0, 0, 0.08);
}

.status-closed {
    color: var(--ls-gray-800);
    background-color: rgba(0, 0, 0, 0.1);
}

.status-onhold {
    color: #0c5460;
    background-color: rgba(23, 162, 184, 0.15);
}

/* --- Dirty Indicator (unsaved changes dot on quick-link buttons) --- */
.dirty-indicator {
    position: relative;
    border-color: var(--ls-orange, #e67e22);
    color: var(--ls-orange, #e67e22);
}

.dirty-indicator::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    background-color: var(--ls-orange, #e67e22);
    border-radius: 50%;
}

/* --- Save All sticky footer bar --- */
.save-all-bar {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    padding: 0.75rem 0;
    background-color: var(--ls-gray-100, #f7f7f7);
    border-top: 2px solid var(--ls-orange, #e67e22);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}