/* ... existing code from your upload ... */
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
@media (prefers-color-scheme: dark) {
    /* Styles for dark mode go here */
    body {
        background-color: #333333; /* grey33*/
        color: royalblue;
    }
}

/* Improve dark mode visuals for cards, forms and buttons */
@media (prefers-color-scheme: dark) {
    .card {
        background-color: #2b2b2b;
        color: #e6eef8;
        border-color: #444;
    }

    .card .card-header {
        background-color: #555555;
        color: #ffffff;
        border-bottom: 2px solid #666;
    }

    .card .card-header h5 {
        color: #ffffff;
    }

    .card .card-header.bg-light {
        background-color: #555555 !important; /* important to override bootstrap */
        color: #ffffff;
    }

    .card .card-body {
        background-color: #2b2b2b;
        color: #e6eef8;
    }

    .form-control {
        background-color: #3b3b3b;
        color: #ffffff;
        border-color: #555;
    }

    .form-control:focus {
        background-color: #454545;
        color: #ffffff;
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    .form-control:disabled,
    .form-control[readonly] {
        background-color: #2f2f2f;
        color: #b0b8c1;
        border-color: #4a4a4a;
        opacity: 1;
    }

    /* Fix autofill/autocomplete styling in dark mode */
    .form-control:-webkit-autofill,
    .form-control:-webkit-autofill:hover,
    .form-control:-webkit-autofill:focus,
    .form-control:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px #3b3b3b inset !important;
        box-shadow: 0 0 0 30px #3b3b3b inset !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .form-control:-webkit-autofill {
        -webkit-text-fill-color: #ffffff !important;
        caret-color: #ffffff !important;
        -webkit-transition: background-color 5000s ease-in-out 0s !important;
        transition: background-color 5000s ease-in-out 0s !important;
    }

    /* Delay the transition to prevent flashing white during selection */
    .form-control:-webkit-autofill:hover {
        -webkit-transition-delay: 5000s !important;
        transition-delay: 5000s !important;
    }

    /* Remove spinner arrows from number inputs */
    .form-control[type="number"]::-webkit-outer-spin-button,
    .form-control[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .form-control[type="number"] {
        -moz-appearance: textfield;
    }

    /* Password toggle button styling */
    .password-toggle-btn {
        border-left: none;
        color: #6c757d;
        cursor: pointer;
    }

    .password-toggle-btn:hover {
        color: #495057;
    }

    @media (prefers-color-scheme: dark) {
        .password-toggle-btn {
            color: #b0b8c1;
            border-color: #555;
            background-color: #3b3b3b;
        }

        .password-toggle-btn:hover {
            color: #ffffff;
            background-color: #454545;
            border-color: #666;
        }

        .password-toggle-btn:focus {
            color: #ffffff;
            background-color: #454545;
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
    }

    .form-label {
        color: #b0b8c1;
    }

    .input-group .form-control {
        background-color: #3b3b3b;
    }

    .btn {
        /* keep buttons legible in dark mode */
        color: #fff;
        border-color: rgba(255,255,255,0.08);
    }
}

/* Ensure warning/info buttons remain visible in dark mode (don't look disabled) */
@media (prefers-color-scheme: dark) {
    .btn-warning {
        background-color: #d39e00; /* darker amber */
        border-color: #a97800;
        color: #212529;
    }
    .btn-warning:hover, .btn-warning:focus {
        background-color: #b88600;
        border-color: #8f6500;
    }

    .btn-info {
        background-color: #0d6efd; /* bootstrap info blue */
        border-color: #0a58ca;
        color: #fff;
    }
    .btn-info:hover, .btn-info:focus {
        background-color: #0b5ed7;
        border-color: #0a58ca;
    }

    /* Dark mode support for jQuery UI Dialogs */
    .ui-dialog {
        background-color: #3d3d3d !important;
        color: #e8e8e8 !important;
        border: 1px solid #555 !important;
        border-radius: 4px !important;
    }
    .ui-dialog-titlebar {
        background-color: #2d2d2d !important;
        color: #e8e8e8 !important;
        border-bottom: 1px solid #555 !important;
        border-radius: 4px 4px 0 0 !important;
        padding: 0.75rem 1rem !important;
    }
    .ui-dialog-titlebar .ui-dialog-titlebar-close {
        background-color: transparent !important;
        border-color: transparent !important;
        color: #e8e8e8 !important;
    }
    .ui-dialog-titlebar .ui-dialog-titlebar-close:hover {
        background-color: #444 !important;
        color: #ffffff !important;
    }
    .ui-dialog-titlebar .ui-icon {
        background-color: transparent !important;
    }
    .ui-dialog-title {
        color: #e8e8e8 !important;
        font-weight: 600 !important;
        font-size: 1.1rem !important;
    }
    .ui-dialog-content {
        background-color: #3d3d3d !important;
        color: #e8e8e8 !important;
    }
    .ui-dialog-content label {
        color: #c0c8d1 !important;
    }
    .ui-dialog-content .form-control {
        background-color: #4a4a4a !important;
        border-color: #666 !important;
        color: #e8e8e8 !important;
    }
    .ui-dialog-content .form-control:focus {
        background-color: #555 !important;
        color: #ffffff !important;
        border-color: #0d6efd !important;
    }
    /* Fix links in dark mode dialogs */
    .ui-dialog-content a,
    .ui-dialog-content a:link {
        color: #64b5f6 !important;
    }
    .ui-dialog-content a:visited {
        color: #9575cd !important;
    }
    .ui-dialog-content a:hover {
        color: #90caf9 !important;
    }
    /* Fix dialog buttons in dark mode */
    .ui-dialog-buttonpane {
        background-color: #3d3d3d !important;
        border-top: 1px solid #555 !important;
    }
    .ui-dialog-buttonpane .ui-button {
        background-color: #0d6efd !important;
        border-color: #0d6efd !important;
        color: #fff !important;
    }
    .ui-dialog-buttonpane .ui-button:hover,
    .ui-dialog-buttonpane .ui-button:focus {
        background-color: #0b5ed7 !important;
        border-color: #0a58ca !important;
    }
    /* Dark mode for tables in dialogs */
    .ui-dialog .table {
        color: #e8e8e8 !important;
        background-color: transparent !important;
    }
    .ui-dialog .table thead {
        background-color: #2d2d2d !important;
        color: #e8e8e8 !important;
    }
    .ui-dialog .table thead th {
        background-color: #2d2d2d !important;
        color: #e8e8e8 !important;
        border-color: #555 !important;
    }
    .ui-dialog .table tbody {
        background-color: #3d3d3d !important;
    }
    .ui-dialog .table tbody td {
        background-color: #3d3d3d !important;
        color: #e8e8e8 !important;
        border-color: #555 !important;
    }
    .ui-dialog .table tbody tr {
        background-color: #3d3d3d !important;
    }
    .ui-dialog .table-hover tbody tr:hover,
    .ui-dialog .table tbody tr:hover {
        background-color: #7a7a7a !important;
        box-shadow: inset 0 0 15px rgba(100, 181, 246, 0.4) !important;
        cursor: pointer;
    }
    .ui-dialog .table tbody tr:hover td {
        background-color: #7a7a7a !important;
        color: #ffffff !important;
    }
    /* Dark mode for alerts in dialogs */
    .ui-dialog .alert-info {
        background-color: #1e3a5f !important;
        border-color: #2a5a8f !important;
        color: #b3d9ff !important;
    }
    .ui-dialog .alert-warning {
        background-color: #5f4a1e !important;
        border-color: #8f6a2a !important;
        color: #ffd9b3 !important;
    }
    /* Dark mode for textareas in dialogs */
    .ui-dialog textarea {
        background-color: #4a4a4a !important;
        border-color: #666 !important;
        color: #e8e8e8 !important;
    }
    .ui-dialog textarea:focus {
        background-color: #555 !important;
        color: #ffffff !important;
        border-color: #0d6efd !important;
    }
    /* Dialog overlay */
    .ui-widget-overlay {
        background-color: #000 !important;
        opacity: 0.5 !important;
    }
    
    /* Scrollbar styling for dialogs */
    .ui-dialog ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    .ui-dialog ::-webkit-scrollbar-track {
        background: #3d3d3d !important;
    }
    .ui-dialog ::-webkit-scrollbar-thumb {
        background: #666 !important;
        border-radius: 4px;
    }
    .ui-dialog ::-webkit-scrollbar-thumb:hover {
        background: #777 !important;
    }
}

/* Light mode styles - using data-theme attribute set by theme-toggle.js */
[data-theme="light"] {
    /* Fix outline buttons - force dark text/borders in light mode */
    .btn-outline-primary {
        color: #0056b3 !important;
        border-color: #0056b3 !important;
        background-color: transparent !important;
    }
    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: #0056b3 !important;
        border-color: #004494 !important;
        color: #fff !important;
    }
    .btn-outline-secondary {
        color: #495057 !important;
        border-color: #6c757d !important;
        background-color: transparent !important;
    }
    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus {
        background-color: #6c757d !important;
        border-color: #545b62 !important;
        color: #fff !important;
    }
    
    /* Fix form controls */
    .form-control,
    .custom-select {
        color: #495057 !important;
        background-color: #fff !important;
        border-color: #ced4da !important;
    }
    
    /* Fix table text */
    .table {
        color: #212529 !important;
    }
    
    /* Fix card styling */
    .card {
        background-color: #fff !important;
        color: #212529 !important;
    }
    .card-header {
        background-color: #f8f9fa !important;
        color: #212529 !important;
    }
    
    /* Fix text utilities */
    .text-muted {
        color: #6c757d !important;
    }
    
    /* Fix badges */
    .badge-primary {
        background-color: #007bff !important;
        color: #fff !important;
    }
    .badge-secondary {
        background-color: #6c757d !important;
        color: #fff !important;
    }
    
    /* Fix nav tabs */
    .nav-tabs .nav-link {
        color: #495057 !important;
    }
    .nav-tabs .nav-link.active {
        color: #495057 !important;
        background-color: #fff !important;
    }
    
    /* Fix modal */
    .modal-content {
        background-color: #fff !important;
        color: #212529 !important;
    }
    .modal-header,
    .modal-footer {
        background-color: #f8f9fa !important;
        border-color: #dee2e6 !important;
    }
}

@media (prefers-color-scheme: light) {
    /* Fallback for when data-theme hasn't loaded yet */
    body {
        background-color: initial;
        color: initial;
    }
}

.body-content {
    padding-top: 85px;
    padding-left: 15px;
    padding-right: 15px;
}


.container {
    max-width: 85%;
}

label, span, li {
    white-space: nowrap;
}

/* Add minimal separation for button groups to avoid icons and buttons appearing squished */
.btn-group .btn + .btn {
    margin-left: 0.25rem;
}

/* Ensure input groups and small control rows wrap nicely on narrow screens */
.row.g-2 > .col-auto, .row.g-2 > .col {
    min-width: 0; /* allow flex children to shrink */
}

/* Slightly darker danger variant for Delete buttons */
.btn-danger-darker {
    background-color: #b02a37; /* darker red */
    border-color: #8f1e28;
    color: #ffffff;
}
.btn-danger-darker:hover, .btn-danger-darker:focus {
    background-color: #9a2129;
    border-color: #7a171f;
}

/* Muted admin card styling to reduce visual harshness */
.card-admin-muted {
    border-color: #d6d8db; /* soft gray border */
    background-color: #fbfbfc; /* very light background */
}
.card-admin-muted .card-header {
    background-color: #f3f4f6; /* slight contrast */
    color: #2f2f2f;
    border-bottom: 1px solid #e0e0e0;
}

@media (prefers-color-scheme: dark) {
    .card-admin-muted {
        border-color: #444;
        background-color: #2a2a2a;
    }
    .card-admin-muted .card-header {
        background-color: #232323;
        color: #dfefff;
        border-bottom: 1px solid #3a3a3a;
    }
}

* {
    font-size: 14px;
    xline-height: 1.5;
}

fieldset {
    margin: 8px;
    border: 1px solid silver;
    padding: 8px;
    border-radius: 4px;
}

legend {
    padding: 2px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}


.table-fixed thead {
    width: 97%;
}

.table-fixed tbody {
    height: 230px;
    overflow-y: auto;
    width: 100%;
}

.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
    display: block;
}

.heading {
    font-family: Times,Arial, serif;
    font-size: 2.5em;
    font-weight: bold;
}
/*.table-fixed tbody td, .table-fixed thead > tr > th {
        float: left;
        border-bottom-width: 0;
    }*/

.frot:hover {
    background: #dde1e6;
}

tbody.clickable_row tr:hover {
    background: #F0F0F0;
    cursor: pointer;
}

.headingAdd { /* this is the "Add..." button */
    padding: 5px;
    background: #90EE90;
    color: black;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
}

    .headingAdd:hover {
        background: #5ee25e;
        text-decoration: none;
        color: black;
        cursor: pointer;
    }

.headingAddSmall { /* this is the "Add..." button */
    padding: 3px;
    background: #90EE90;
    color: black;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
}

    .headingAddSmall:hover {
        background: #5ee25e;
        text-decoration: none;
        color: black;
    }

#AllocationTable {
    width: 97%;
}

    #AllocationTable th, #AllocationTable td {
        padding-bottom: 3px;
        padding-right: 10px;
        xmin-width: 75px;
        xborder: dashed 1px gray;
    }


.center {
    display: block;
    margin: auto;
}

.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.allocationRate {
    text-align: center;
    width: 90%;
}

.allocationRateTDcell {
    width: 100px;
}

.handles, .dragIcon, #handlesSpan {
    cursor: grab;
}



/****************/
a.selected {
    background-color: #1F75CC;
    color: white;
    z-index: 100;
}

.messagepop {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    cursor: default;
    display: none;
    margin-top: 15px;
    position: absolute;
    text-align: left;
    width: 394px;
    z-index: 50;
    padding: 25px 25px 20px;
}

    /*label {
    display: block;
    margin-bottom: 3px;
    padding-left: 15px;
    text-indent: -15px;
}*/

    .messagepop p, .messagepop.div {
        border-bottom: 1px solid #EFEFEF;
        margin: 8px 0;
        padding-bottom: 8px;
    }

.DeleteIcon {
    width: 20px;
    height: 20px;
    content: url('../images/delete-gray-x.png');
    cursor: pointer;
    display: inline-block;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.DeleteIcon:hover {
    opacity: 1;
    transform: scale(1.2);
    filter: brightness(1.2);
}

.DeleteIcon:active {
    transform: scale(1.0);
}

.NoteIcon-None {
    width: 20px;
    height: 20px;
    content: url('../images/note-grey.png');
    margin-left: 5px;
    margin-right: 8px;
    cursor: pointer;
    display: inline-block;
    transition: opacity 0.2s ease;
}

.NoteIcon-None:hover {
    opacity: 0.8;
}

.NoteIcon-Active {
    width: 20px;
    height: 20px;
    content: url('../images/note-orange.png');
    margin-left: 5px;
    margin-right: 8px;
    cursor: pointer;
    display: inline-block;
    animation: gentle-pulse 2s ease-in-out infinite;
}

@keyframes gentle-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.08);
        filter: brightness(1.3);
    }
}

.CenterSpan {
    display: flex;
    align-items: center;
    float: left;
}

.WarningIcon {
    width: 18px;
    height: 18px;
    content: url('../images/warning-24.png');
}

.CommentsArea {
    height: 100px; /* set the desired height */
}

.OptionsIcon {
    width: 50px;
    height: 50px;
    content: url('../images/options.png');
}


.ReportIcon {
    width: 20px;
    height: 20px;
    content: url('../images/report-gray.png');
}

.CopyIcon {
    width: 20px;
    height: 20px;
    content: url('../images/copy.png');
    margin-right: 8px;
}

.selected {
    background-color: #F0F0F0;
    font-weight: bolder;
}

.MaxRateHigh {
    background-color: #ffcccc;
}

.NBASED {
    color: #28a745;
    font-weight: bold;
}

.PBASED {
    color: #fd7e14;
    font-weight: bold;
}

.ZBASED {
    color: #dc3545;
    font-weight: bold;
}

/* Dark mode support for NBASED/PBASED/ZBASED */
[data-theme="dark"] .NBASED {
    color: #5cb85c;
}

[data-theme="dark"] .PBASED {
    color: #f0ad4e;
}

[data-theme="dark"] .ZBASED {
    color: #ff6b6b;
}

/* Allocation Requirements and Balance input styling */
.allocation-requirement,
.allocation-requirement:disabled,
.allocation-requirement[readonly] {
    background-color: #e8f4f8 !important;
    border-color: #5bc0de !important;
}

.allocation-balance,
.allocation-balance:disabled,
.allocation-balance[readonly] {
    background-color: #f0e6f6 !important;
    border-color: #9b59b6 !important;
}

[data-theme="dark"] .allocation-requirement,
[data-theme="dark"] .allocation-requirement:disabled,
[data-theme="dark"] .allocation-requirement[readonly] {
    background-color: #1a3a4a !important;
    border-color: #5bc0de !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .allocation-balance,
[data-theme="dark"] .allocation-balance:disabled,
[data-theme="dark"] .allocation-balance[readonly] {
    background-color: #2d1a3d !important;
    border-color: #9b59b6 !important;
    color: #e0e0e0 !important;
}

/* Also handle @media prefers-color-scheme for allocation styles */
@media (prefers-color-scheme: dark) {
    .allocation-requirement,
    .allocation-requirement:disabled,
    .allocation-requirement[readonly] {
        background-color: #1a3a4a !important;
        border-color: #5bc0de !important;
        color: #e0e0e0 !important;
    }

    .allocation-balance,
    .allocation-balance:disabled,
    .allocation-balance[readonly] {
        background-color: #2d1a3d !important;
        border-color: #9b59b6 !important;
        color: #e0e0e0 !important;
    }
}

.AlignRight {
    margin-right: 0;
    margin-left: auto;
    display: block;
    text-align: right;
}

.ManureStorageInput {
    width: 50px;
    text-align: center;
}

legend {
    width: auto;
}

select {
    padding: 3px;
}

#SystemStatus {
    background-color: lightcoral;
    xborder: 1px solid black;
}

.navbarNoWrap > li {
    display: unset;
    white-space: nowrap !important;
    background-color: black;
}

#AllocationHeader tr th {
    font-size: larger;
}

#FieldQuickInfoDialog {
    padding: 0px;
    margin: 0px;
}

    #FieldQuickInfoDialog table {
        width: 98%;
    }

    #FieldQuickInfoDialog td {
        padding: 10px;
    }

    #FieldQuickInfoDialog select, #FieldQuickInfoDialog input {
        pointer-events: none;
        user-select: none;
        background-color: #E8E8E8;
    }

    #FieldQuickInfoDialog label {
        margin: 2px;
    }

/* --- NEW FIELDS INDEX STYLES --- */

/* High Contrast Selection - UPDATED */
.table tr.selected td,
.table tr.ui-selected td,
.table tr.active td {
    background-color: #e9ecef !important; /* Light Gray for contrast with blue text */
    font-weight: bold !important; /* Bold text */
    border-color: #dee2e6;
}

/* Hover state for selected rows */
.table tr.selected:hover td,
.table tr.ui-selected:hover td,
.table tr.active:hover td {
    background-color: #d6d8db !important; /* Slightly darker gray on hover */
}

/* Update Acres column alignment */
.acres-column {
    text-align: center !important;
}

.report-cell {
    width: 50px;
    text-align: center;
    vertical-align: middle;
    padding: 4px;
}

/* Column checkboxes layout */
.column-checkbox-grid {
    column-count: 3;
    column-gap: 20px;
}

/* Modal Fieldset Styling */
.options-fieldset {
    border: 1px solid #dee2e6;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    height: 100%;
}

    .options-fieldset legend {
        width: auto;
        padding: 0 5px;
        font-size: 1rem;
        font-weight: bold;
    }

/* Field Options Modal - Better contrast and visual separation */
[data-theme="dark"] .options-fieldset {
    background: linear-gradient(135deg, #2d3238 0%, #1e2228 100%) !important;
    border: 1px solid #495057 !important;
}

[data-theme="dark"] .options-fieldset legend {
    color: #17a2b8 !important;
}

[data-theme="dark"] #FieldOptionsModal .modal-content {
    background-color: #212529 !important;
}

[data-theme="dark"] #FieldOptionsModal .modal-header {
    background: linear-gradient(135deg, #343a40 0%, #23272b 100%) !important;
    border-bottom: 2px solid #17a2b8 !important;
    cursor: move !important;
}

[data-theme="dark"] #FieldOptionsModal .nav-tabs {
    background-color: #2b3035 !important;
    border-bottom: 2px solid #17a2b8 !important;
}

[data-theme="dark"] #FieldOptionsModal .nav-tabs .nav-link {
    color: #adb5bd !important;
    border: 1px solid transparent !important;
}

[data-theme="dark"] #FieldOptionsModal .nav-tabs .nav-link:hover {
    color: #17a2b8 !important;
    background-color: #2d3238 !important;
}

[data-theme="dark"] #FieldOptionsModal .nav-tabs .nav-link.active {
    background-color: #212529 !important;
    color: #17a2b8 !important;
    border-color: #495057 #495057 transparent !important;
    border-bottom-color: transparent !important;
}

[data-theme="dark"] #FieldOptionsModal .tab-content {
    background-color: #1a1d21 !important;
}

[data-theme="light"] .options-fieldset {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    border: 1px solid #cbd5e0 !important;
}

[data-theme="light"] .options-fieldset legend {
    color: #0056b3 !important;
}

[data-theme="light"] #FieldOptionsModal .modal-header {
    cursor: move !important;
}

[data-theme="light"] #FieldOptionsModal .nav-tabs .nav-link.active {
    background-color: #fff !important;
    color: #0056b3 !important;
    border-color: #dee2e6 #dee2e6 #fff !important;
}

/* RUSLE2 Template Browser Styling */
.rusle2-template-browser {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.rusle2-template-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #dee2e6;
    transition: background-color 0.15s;
    text-align: left !important;
}

.rusle2-template-item * {
    text-align: left !important;
}

.rusle2-template-item:last-child {
    border-bottom: none;
}

.rusle2-template-item:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

.rusle2-template-item.selected {
    background-color: rgba(0, 123, 255, 0.2);
    border-left: 3px solid #007bff;
}

[data-theme="dark"] .rusle2-template-browser {
    border-color: #495057;
    background-color: #1a1d21;
}

[data-theme="dark"] .rusle2-template-item {
    border-bottom-color: #343a40;
}

[data-theme="dark"] .rusle2-template-item:hover {
    background-color: rgba(23, 162, 184, 0.15);
}

[data-theme="dark"] .rusle2-template-item.selected {
    background-color: rgba(23, 162, 184, 0.25);
    border-left: 3px solid #17a2b8;
}

/* Template Favorite Star Styling */
.template-favorite-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 1rem;
    color: #ccc;
    transition: color 0.2s, transform 0.2s;
}
.template-favorite-btn:hover {
    transform: scale(1.2);
}
.template-favorite-btn .fa-star {
    color: #ffc107; /* Yellow star for favorites */
}
.template-favorite-btn .far.fa-star {
    color: #999; /* Empty star */
}
[data-theme="dark"] .template-favorite-btn .far.fa-star {
    color: #666;
}
.rusle2-template-item.is-favorite {
    background-color: rgba(255, 193, 7, 0.08);
}
[data-theme="dark"] .rusle2-template-item.is-favorite {
    background-color: rgba(255, 193, 7, 0.12);
}

/* Selected favorite gets a gold/amber highlight */
.rusle2-template-item.is-favorite.selected {
    background-color: rgba(255, 193, 7, 0.25);
    border-left: 3px solid #ffc107;
}
[data-theme="dark"] .rusle2-template-item.is-favorite.selected {
    background-color: rgba(255, 193, 7, 0.3);
    border-left: 3px solid #ffc107;
}

/* RUSLE2 Search wrapper and clear button */
.rusle2-search-wrapper {
    position: relative;
}
.rusle2-search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
}
.rusle2-search-clear-btn:hover {
    color: #666;
}
[data-theme="dark"] .rusle2-search-clear-btn {
    color: #666;
}
[data-theme="dark"] .rusle2-search-clear-btn:hover {
    color: #999;
}

/* Remove focus box-shadow/outline when buttons are clicked */
.btn:focus, .btn.focus, .btn:active:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Stop row hover effect when interacting with the Sod Dropdown */
.table-hover tbody tr.no-hover:hover {
    background-color: transparent !important;
}

/* Force table columns to stay on one line and trigger horizontal scroll */
#fieldsTable th,
#fieldsTable td {
    white-space: nowrap;
}

/* Ensure the Sod dropdown is wide enough to read the text */
#fieldsTable {
    width: max-content;
    min-width: 100%;
}

.table-wrapper.expand-to-data,
.table-wrapper.expand-to-data #scrollableTableContainer {
    width: max-content;
    max-width: none;
    overflow-x: visible;
}

/* Fatter page scrollbars while the Fields table is in "Expand to data" mode.
   In that mode the table spills past the viewport, so the bar being dragged is
   the browser's own document scrollbar (window scroll), not the container's.
   fields_index.js toggles .fields-expand-scroll on <html>. Chromium/Edge only:
   Firefox cannot make a scrollbar thicker than its default. Do NOT add
   scrollbar-width/scrollbar-color here - Chromium then ignores these rules. */
html.fields-expand-scroll::-webkit-scrollbar {
    width: 17px;  /* vertical bar: about native size */
    height: 22px; /* horizontal bar: fatter, easier to see and grab */
}

html.fields-expand-scroll::-webkit-scrollbar-track,
html.fields-expand-scroll::-webkit-scrollbar-corner {
    background: #e9ecef;
}

html.fields-expand-scroll::-webkit-scrollbar-thumb {
    background-color: #adb5bd;
    background-clip: content-box;
    border: 4px solid transparent; /* inset so the thumb has breathing room */
    border-radius: 11px;
}

html.fields-expand-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #868e96;
}

#fieldsTable.fit-to-screen {
    table-layout: fixed;
    width: 100%;
}

#fieldsTable.fit-to-screen th,
#fieldsTable.fit-to-screen td {
    white-space: normal;
    overflow-wrap: anywhere;
    padding: .4rem .2rem;
}

#fieldsTable.fit-to-screen .sod-mix-dropdown {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.sod-mix-dropdown {
    width: auto; /* Allow the box to grow to fit the text */
    min-width: 100px; /* Force a minimum width so it's never too small */
    display: inline-block;
}

/*  EDGE scrolling start  */

/* Wrapper to position the hints relative to the table */
.table-wrapper {
    position: relative;
    overflow: hidden; /* Keeps the hints inside the box */
}

/* The Hint Overlay Base Style */
.scroll-hint {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 10;
    pointer-events: none; /* CRITICAL: Allows mouse to pass through to trigger your Edge Scroll logic */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out;
    font-size: 24px;
    color: rgba(0,0,0,0.4);
}

/* Left Hint Styling */
.scroll-hint.left-hint {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.1), transparent);
    border-left: 4px solid rgba(0,0,0,0.2);
}

/* Right Hint Styling */
.scroll-hint.right-hint {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.1), transparent);
    border-right: 4px solid rgba(0,0,0,0.2);
}

/* Class to make them visible */
.scroll-hint.visible {
    opacity: 1;
}

/* Optional: Text instruction */
.scroll-instruction {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 5px;
    display: block;
    text-align: right;
}

/*  EDGE scrolling end  */

/* --- THEMEING FOR SOD DROPDOWN --- */
/* --- BLEND DROPDOWN WITH ROW TEXT --- */
.sod-mix-dropdown {
    /* Match the Text Style */
    font-family: inherit; /* Use the same font as the rest of the table */
    font-size: inherit; /* Use the same text size (14px) */
    font-weight: inherit; /* Use the same thickness */
    line-height: inherit; /* Match the line spacing */
    color: inherit; /* Use the row's text color (Black/White/Blue) */
    /* Remove Box Styling */
    background-color: transparent;
    border: 1px solid transparent;
    /* Reset Bootstrap Form Sizing */
    height: auto; /* Remove fixed height so it fits the row naturally */
    padding: 0 5px; /* Minimal padding just to breathe, matches cell text */
    margin: 0;
    cursor: pointer;
    box-shadow: none !important; /* Remove any Bootstrap glow */
}

    /* Visual Feedback: Add a faint border only when hovering the specific dropdown */
    .sod-mix-dropdown:hover {
        border: 1px solid rgba(150, 150, 150, 0.5);
    }

/* DARK MODE: Popup Options */
@media (prefers-color-scheme: dark) {
    .sod-mix-dropdown option {
        background-color: #333333;
        color: #ffffff;
        font-size: 14px; /* Ensure the popup list is also legible */
    }

    /* Dim text when saving */
    .sod-mix-dropdown:disabled {
        color: #888;
    }
}

/* LIGHT MODE: Popup Options */
@media (prefers-color-scheme: light) {
    .sod-mix-dropdown option {
        background-color: #ffffff;
        color: #000000;
        font-size: 14px;
    }
}

/* Vertically center all content in the Fields table */
#fieldsTable td {
    vertical-align: middle;
}

/* --- KEYBOARD NAVIGATION FOCUS STATE --- */

/* When tabbing into a cell, light it up so the user sees it */
.sod-mix-dropdown:focus {
    background-color: #ffffff !important;
    border: 2px solid #80bdff !important; /* Bright Blue Border */
    outline: none;
    box-shadow: 0 0 5px rgba(128, 189, 255, 0.5) !important;
    color: #000 !important;
    border-radius: 3px;
}

/* Dark Mode Focus adjustments */
@media (prefers-color-scheme: dark) {
    .sod-mix-dropdown:focus {
        background-color: #333 !important;
        color: #fff !important;
        border-color: #4da3ff !important;
    }
}

/* --- ROW OUTLINE EFFECT --- */

/* This class will be added to the TR via JavaScript */
.row-outline-highlight {
    /* 1. Create a Blue Border around the entire row */
    outline: 3px solid #007bff;
    /* 2. Pull it "inside" slightly so it doesn't get cut off */
    outline-offset: -3px;
    /* 3. Force it to sit on top of neighboring rows */
    position: relative;
    z-index: 10;
    /* 4. Optional: Make the background slightly darker/white to pop */
    background-color: #ffffff !important;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .row-outline-highlight {
        outline-color: #66b0ff;
        background-color: #3b3b3b !important;
    }
}

/* ============================================
   Bootstrap 4 Gap Utilities (BS5 backport)
   ============================================ */
/* These replicate Bootstrap 5's gap utilities for flexbox */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* d-grid utility for Bootstrap 4 */
.d-grid {
    display: grid !important;
}

/* font-weight-bold alias for consistency */
.font-weight-bold {
    font-weight: 700 !important;
}

/* Dark mode: SystemStatus banner */
@media (prefers-color-scheme: dark) {
    #SystemStatus {
        background-color: #5c2020;
        color: #f0b0b0;
    }
}

/* Dark mode: custom crop dropdown */
@media (prefers-color-scheme: dark) {
    .crop-dropdown-container {
        background: #2b2b2b;
        border-color: #555;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    }
    .crop-dropdown-search {
        border-bottom-color: #555;
    }
    .crop-dropdown-group {
        background-color: #333;
        color: #b0b8c1;
        border-top-color: #555;
    }
    .crop-dropdown-item {
        color: #e6eef8;
        border-bottom-color: #444;
    }
    .crop-dropdown-item:hover {
        background-color: #3b3b3b;
    }
    .crop-dropdown-item .star-icon:not(.favorite) {
        color: #666;
    }
}