:root {
    --pin-color: red;
    --pin-background: LemonChiffon;
    --bs-body-color: #4e3b2c;
}

/* Essential non-Bootstrap styles */

/* Map-specific styles */
#map2Container {
    position: relative;
    width: 100%;
    min-width: 290px;
    height: 800px;
}

/* Map marker styles */
.pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: var(--pin-color, #00cae9);
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
    animation-name: bounce;
    animation-fill-mode: both;
    animation-duration: 1s;
}

.pin:after {
    content: '';
    width: 14px;
    height: 14px;
    margin: 8px 0 0 8px;
    background: #e6e6e6;
    position: absolute;
    border-radius: 50%;
}

/* Map animations */
@keyframes bounce {
    0% {
        opacity: 0;
        transform: translateY(-2000px) rotate(-45deg);
    }
    60% {
        opacity: 1;
        transform: translateY(30px) rotate(-45deg);
    }
    80% {
        transform: translateY(-10px) rotate(-45deg);
    }
    100% {
        transform: translateY(0) rotate(-45deg);
    }
}

/* Map popup styles */
.map-popup {
    max-width: 280px;
    padding: 10px;
}

.map-popup h6 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #0d6efd;
}

.map-popup p {
    margin-bottom: 5px;
    font-size: 14px;
}

/* Pulse effect for markers */
.pulse {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    height: 14px;
    width: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 11px 0px 0px -12px;
    transform: rotateX(55deg);
    z-index: -2;
}

.pulse:after {
    content: "";
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    margin: -13px 0 0 -13px;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    box-shadow: 0 0 1px 2px #00cae9;
    animation-delay: 1.1s;
}

@keyframes pulsate {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
    }
}

/* Table edit styles */
input.tableedit,
select.tableedit {
    font-size: 0.875em;
    border-color: cadetblue;
    border-radius: 0;
}

input.tableeditsm,
select.tableeditsm {
    font-size: 0.75em;
    border-color: cadetblue;
    border-radius: 0;
}

button.tableedit {
    margin: 0 !important;
    padding: 0 !important;
}

/* Field operation popup */
.fieldop-popup {
    min-width: 200px;
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    padding: 5px;
}

/* Console messages */
#console-messages p {
    font-size: 0.7rem;
}

/* Form field styles */
#div_id_start, #div_id_end {
    display: inline-block;
}

/* Aid coordinates styles */
div.aid-coords legend {
    font-size: 14px;
    padding: 2px;
    margin-bottom: 2px;
}

div.aid-coords label {
    display: block;
    font-size: 12px;
}

/* Responsive map adjustments */
@media (max-width: 768px) {
    #map2Container {
        min-height: 300px;
    }
}

/* Larger, more visible checkboxes */
.form-check-input-lg {
    width: 1.4rem;
    height: 1.4rem;
    border-width: 2px;
    margin-top: 0.15rem;
}

.form-check-input-lg:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input-lg:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.4);
}

/* Custom background color for status badges */
.bg-orange {
    background-color: #fd7e14 !important;
}

/* Status icon spacing */
.status-badge i {
    margin-right: 0.25rem;
}

/* Status text styling */
.status-text {
    font-size: 0.875rem;
    font-weight: 500;
}

.status-text i {
    margin-right: 0.25rem;
}

/* Status colors */
.status-closed {
    color: #0d6efd; /* Bootstrap primary blue */
}

.status-rejected {
    color: #dc3545; /* Bootstrap danger red */
}

.status-other {
    color: #6c757d; /* Bootstrap secondary grey */
}

/* Status filter icons */
.form-check-label i {
    margin-right: 0.25rem;
    width: 1rem;
    text-align: center;
}

/* SendCOT status message container */
.tak-message-status {
    z-index: 1000;
}

.tak-message-status.show {
    opacity: 1 !important;
}

/* Transition effect for status messages */
.transition-opacity {
    transition: opacity 0.3s ease-in-out;
}

.tak-server-icon {
    color: var(--bs-purple);
}

.map-container-shared {
    min-width: 290px;
    height: 600px;
}

.map-container-full-width {
    height: 600px;
    width: 100%;
}

.btn-danger-no-underline {
    color: white;
    text-decoration: none;
}

.font-monospace-small {
    font-size: 0.75rem;
}

.pre-wrap-normal {
    font-weight: normal;
    white-space: pre-wrap;
}

.table-font-small {
    font-size: 0.75rem;
}

.icon-size-1-25 {
    font-size: 1.25rem;
}

/* Aid Request Form C Styles */
.no-asterisk .asteriskField {
    display: none;
}

.is-required.is-invalid {
    box-shadow: 0 0 .25rem .1rem rgba(220, 53, 69, 0.25) !important;
    border-color: #dc3545 !important;
}
#form-c-container .form-control,
#form-c-container .form-select {
    border-color: #888;
}
input.is-invalid ~ .form-text {
    color: #dc3545 !important;
}
.form-step {
    transition: opacity 0.3s ease-in-out;
}

.progress-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #adb5bd; /* Dim/inactive gray */
    transition: all 0.3s ease;
}

.progress-dots .dot.completed {
    background-color: #198754; /* Green */
}

.progress-dots .dot.active {
    background-color: #0d6efd; /* Blue */
    transform: scale(1.5);
}

#div_id_aid_type .form-check-label {
    color: #212529;
    opacity: 1.0;
}

#div_id_aid_type .form-check-input {
    border-color: #888;
    border-width: 2px;
}

.custom-checkbox-column .form-check {
    padding: 0.375rem 0.75rem;
    padding-left: 1.75em;
    cursor: pointer;
}

.custom-checkbox-column .form-check-input {
    width: 1.75rem; /* Larger checkbox */
    height: 1.75rem;
    border-width: 2px;
    margin-top: 0;
    border: 2px solid #555 !important;
}

.custom-checkbox-column .form-check-input:checked {
    border-color: #0d6efd;
    background-color: #0d6efd;
}

.custom-checkbox-column .form-check-label {
    padding-left: 0.5em; /* Adjust padding as needed */
    font-size: 0.9em;
}

.card-header .btn {
    line-height: 1;
}

@keyframes flash-warning {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); }
}

.btn-flashing {
    animation: flash-warning 1s infinite;
}

/* Allow resizing on textareas that are not disabled */
textarea:not([disabled]) {
    resize: vertical;
}

.location-card-divider {
    border-bottom: 3px solid var(--bs-secondary-bg) !important;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Navbar custom styling */
.navbar-light,
.navbar-dark {
  background-color: var(--banner-color, #4e3b2c) !important;
}

.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
  color: #f8f9fa;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-brand:hover {
  color: #ffffff;
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Coordinates Input Group on Map Overlay */
.coordinates-input-group {
    width: auto;
}

.coordinates-input-group .form-control {
    flex: 1 1 auto; /* Allow shrinking but prefer max-width */
    min-width: 10ch;
    padding: 4px;
}

.coordinates-input-group .input-group-text {
    background-color: #fff;
    border-left: none;
    border-right: none;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    padding-top: 4px;
    padding-bottom: 4px;
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
    font-weight: bold;
    font-size: 1.1rem;
}

.coordinates-input-group #id_latitude {
    border-right: none;
}

.coordinates-input-group #id_longitude {
    border-left: none;
}

/* Hide number input spinners */
.coordinates-input-group input[type=number]::-webkit-outer-spin-button,
.coordinates-input-group input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.coordinates-input-group input[type=number] {
    -moz-appearance: textfield;
}

.coordinates-input-group .form-control::placeholder {
    font-size: 0.8rem;
    color: #999;
    opacity: 1; /* Override Bootstrap's default */
}

.coordinates-title {
    font-family: var(--bs-font-monospace);
    font-size: 0.65rem;
    font-weight: bold;
    line-height: 1.2;
    margin-top: 2px;
}

.field-highlight {
    /* A subtle blue inner glow to indicate the field was populated by the map */
    box-shadow: inset 0 0 4px 1px rgba(13, 110, 253, 0.35);
    transition: box-shadow ease-in-out .15s;
}

/* Seamless Coordinates Input Group */
.seamless-input-group > .form-control.seamless-start {
    flex: 0 1 auto;
    width: 10ch;
    border-right: none;
}
.seamless-input-group > .seamless-comma {
    background-color: var(--bs-body-bg) !important;
    border-color: #888 !important;
    border-style: solid;
    border-width: var(--bs-border-width, 1px) 0; /* top/bottom, 0 left/right */
}
.seamless-input-group > .form-control.seamless-end {
    flex: 0 1 auto;
    width: 11ch;
    border-left: none;
}

/* PRE formatting for geocode JSON results */
.pre-geocode-json {
    font-family: var(--bs-font-monospace);
    font-size: 0.8em;
    white-space: pre-wrap;
    word-break: break-all;
    margin-bottom: 0;
}

.action-alert-container {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  min-width: 300px;
}

.confirm-text-fs {
    font-size: 1.1rem;
}

/* Custom focus style for the modal's change button to prevent 'bleeding' */
#changeAidTypeModal .btn-warning:focus,
#changeAidTypeModal .btn-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(217, 164, 6, 0.5);
}

/* Styles for disabled Choices.js dropdown to look like plain text */
.choices.is-disabled {
    cursor: default;
}

.choices.is-disabled .choices__inner {
    background-color: transparent !important;
    border-color: transparent !important;
    padding-left: 0 !important;
}

.choices.is-disabled .choices__arrow,
.choices.is-disabled .choices__button {
    display: none;
}

.choices__inner {
    background-color: var(--bs-body-bg);
    border: 1px solid #dee2e6;
}

/* Add your custom styles here */

.geocode-details {
    overflow: auto; /* Use auto for both horizontal and vertical scrolling */
    font-size: 0.75rem; /* Smaller font for the dense JSON */
    background-color: var(--bs-light);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.5rem;
}

.border-left {
    border-left: 1px solid #dee2e6; /* Adjust color as needed */
}

/* HTMX indicator styles for buttons */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.btn .btn-content {
    display: none;
}

/* Vertical alignment fix for filter choice items */
.filter-choice-item .form-check-label {
    line-height: 1;
}

/*
Custom CSS for Informs application
*/

/*
Enhances the visibility of the Azure Maps popup pointer.
This is applied via the `className` option in the atlas.Popup constructor.
*/
.popup-with-enhanced-pointer .atlas-popup-pointer-down,
.popup-with-enhanced-pointer .atlas-popup-pointer-up,
.popup-with-enhanced-pointer .atlas-popup-pointer-left,
.popup-with-enhanced-pointer .atlas-popup-pointer-right {
    border-color: transparent !important; /* Override default border */
}

/* Style for the "down" pointer (when popup is above marker) */
.popup-with-enhanced-pointer .atlas-popup-pointer-down::after {
    content: '';
    position: absolute;
    bottom: -12px; /* Position it correctly */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid var(--bs-primary); /* Use Bootstrap primary color */
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.2));
    animation: pulse-pointer 2s infinite;
}

/* Style for the "up" pointer (when popup is below marker) */
.popup-with-enhanced-pointer .atlas-popup-pointer-up::after {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid var(--bs-primary);
    filter: drop-shadow(0 -3px 2px rgba(0, 0, 0, 0.2));
    animation: pulse-pointer 2s infinite;
}


/* Pulsing animation for the pointer */
@keyframes pulse-pointer {
    0% {
        border-top-color: var(--bs-primary);
        border-bottom-color: var(--bs-primary);
        transform: translateX(-50%) scale(1);
    }
    50% {
        border-top-color: var(--bs-info); /* A slightly different shade for the pulse */
        border-bottom-color: var(--bs-info);
        transform: translateX(-50%) scale(1.05);
    }
    100% {
        border-top-color: var(--bs-primary);
        border-bottom-color: var(--bs-primary);
        transform: translateX(-50%) scale(1);
    }
}

/*
  Custom subtle background and border classes to ensure compatibility.
*/
.bg-primary-subtle-custom {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
}
.bg-warning-subtle-custom {
    background-color: rgba(var(--bs-warning-rgb), 0.15) !important;
}
.bg-success-subtle-custom {
    background-color: rgba(var(--bs-success-rgb), 0.15) !important;
}
.border-dark-custom {
    border-color: rgba(0, 0, 0, 0.4) !important;
}


/*
  A simple, reliable class for highlighting the selected aid request row.
  The selector is made more specific to override Bootstrap's default table styles.
*/
tr.aidrequest-selected > td {
    background-color: #d1e7dd !important; /* A hardcoded light green (Bootstrap's bg-success-subtle) */
}

/* Fade out animation for hidden rows */
.fade-out-row {
    transition: opacity 3s ease-out, background-color 3s ease-out;
    opacity: 0;
    /* Optionally, collapse the height too, but opacity is often cleaner for 'fading' visually first */
}