/* ── Ported live-map styles ─────────────────────────────────────────────────
   Concatenated from the Dashboard's per-component .razor.css files.

   WHY NOT SCOPED CSS: these components live in VoyagePortal.Client, whose
   scoped bundle (VoyagePortal.Client.styles.css, ~49KB) is NOT served by the
   host app (404), while the host's own bundle stays at 60 bytes. Rather than
   depend on that pipeline, the styles are emitted as one plain stylesheet.
   Class names come from the Dashboard and are map-specific, so global scope
   is low risk — but they are no longer isolated, which is the trade made here.
   Regenerate by re-concatenating Map/Components/*.razor.css.
   ──────────────────────────────────────────────────────────────────────── */

/* ---- ChatPanel.razor.css ---- */
.chat-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 330px);
    background-color: #f5f7f9;
    border-radius: 8px;
    overflow: hidden;
}

.chat-messages {
    position: relative;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 70px; /* Space for input */
    height: 100%;
}


    .chat-messages::after {
        display: none;
    }

.chat-message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    position: relative;
    animation: fadeIn 0.3s ease;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    margin-bottom: 8px; /* Add space between messages */
}

    .chat-message:last-child {
        margin-bottom: 20px; /* Add extra space after the last message */
    }

    .chat-message.sent {
        align-self: flex-end !important; /* Added !important to override any conflicts */
        background-color: #0084ff;
        color: white;
        border-bottom-right-radius: 4px;
        margin-left: 20%; /* Push sent messages to the right */
    }

    .chat-message.received {
        align-self: flex-start !important; /* Added !important to override any conflicts */
        background-color: #e4e6eb;
        color: #050505;
        border-bottom-left-radius: 4px;
        margin-right: 20%; /* Push received messages to the left */
    }

.message-header {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.sent .message-header {
    color: rgba(255, 255, 255, 0.9);
    text-align: right;
}

.received .message-header {
    color: #65676b;
    text-align: left;
}

.message-content {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 4px;
}

.message-footer {
    display: block;
    font-size: 0.6875rem;
    opacity: 0.7;
}

.sent .message-footer {
    text-align: right;
    color: rgba(255, 255, 255, 0.7);
}

.received .message-footer {
    text-align: left;
    color: #65676b;
}

textarea {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e4e6eb;
    border-radius: 20px;
    resize: none;
    font-family: inherit;
    font-size: 0.875rem;
    background-color: #f0f2f5;
    transition: all 0.2s ease;
}

    textarea:focus {
        outline: none;
        border-color: #0084ff;
        background-color: white;
    }

.send-button {
    width: 36px;
    height: 36px;
    margin-left: 8px;
    border: none;
    border-radius: 50%;
    background-color: #0084ff;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    transition: all 0.2s ease;
}

    .send-button:hover {
        background-color: #0070e0;
    }

    .send-button:disabled {
        background-color: #e4e6eb;
        color: #bcc0c4;
        cursor: not-allowed;
    }

.send-icon {
    font-size: 0.875rem;
    transform: rotate(90deg);
}

/* Add these positioning properties to your existing classes */
.no-messages {
    margin-top: 20px;
    margin-bottom: auto;
}

.loading-indicator {
    margin-top: 20px;
    margin-bottom: auto;
}

.spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #e4e6eb;
    border-top: 3px solid #0084ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Webkit scrollbar styling */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

/* Change the scroll-to-bottom class */
.scroll-to-bottom {
    display: flex;
    flex-direction: column-reverse; /* Keep this to show newest at top */
    min-height: 100%;
}

.error-message {
    background-color: #ffcccc;
    border: 1px solid #ff8888;
    border-radius: 8px;
    padding: 16px;
    margin: 16px;
    color: #cc0000;
}

/* Add space between consecutive messages from the same sender */
.chat-message + .chat-message.sent {
    margin-top: 4px;
}

.chat-message + .chat-message.received {
    margin-top: 4px;
}

/* Add more space between messages from different senders */
.chat-message.sent + .chat-message.received,
.chat-message.received + .chat-message.sent {
    margin-top: 12px;
}

.chat-input-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    border-top: 1px solid #e1e1e1;
    padding: 8px 10px;
    width: 100%;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
    z-index: 10;
}

.chat-input {
    display: flex;
    padding: 0;
    margin-bottom: 0;
    background-color: white;
    border-top: none;
    position: relative;
    bottom: 0;
    z-index: 5;
}
/* ---- GeofenceManagerComponent.razor.css ---- */
/* Geofence Manager Component Styles */

/* Main container */
.geofence-manager {
    position: absolute;
    width: 320px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: width 0.3s, height 0.3s;
    max-height: 80vh; /* Limit to 80% of viewport height */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide overflow at the container level */
}

    .geofence-manager.collapsed {
        height: 48px;
    }

    .geofence-manager.expanded {
        height: auto;
        max-height: calc(100vh - 160px);
        display: flex;
        flex-direction: column;
    }

.manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #3B82F6;
    color: white;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0; /* Prevent header from shrinking */
}

    .manager-header h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 500;
    }


.manager-content {
    display: flex;
    flex-direction: column;
    height: calc(80vh - 48px);
    padding: 16px;
    overflow: hidden; /* No scrolling for the content container */
}

/* Create section */
.create-section-header {
    flex-shrink: 0;
    margin-bottom: 12px;
}

.section-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f9ff;
    padding: 8px 12px;
    border-radius: 6px;
}

    .section-header-content h3 {
        margin: 0;
        font-size: 0.875rem;
        color: #3B82F6;
    }

.create-section {
    flex-shrink: 0;
    transition: max-height 0.3s, opacity 0.3s;
    overflow: hidden;
}

    .create-section.collapsed {
        max-height: 0;
        opacity: 0;
    }

    .create-section.expanded {
        max-height: 550px; /* Increased from 410px to accommodate more rules */
        overflow-y: visible; /* Allow content to be visible even if it exceeds max-height */
    }

.create-content {
    background-color: #f9fafb;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 10px;
}

.input-row {
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
}

    .input-row input, .input-row select {
        padding: 8px;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        font-size: 0.875rem;
    }

    .input-row input {
        flex: 1;
    }

    .input-row.radius-row input[type="number"] {
        width: 120px;
    }

/* Rules section */
.rules-section {
    margin-top: 16px;
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
    margin-bottom: 16px;
    max-height: none; /* Remove any height constraints */
}

    .rules-section h5 {
        margin-top: 0;
        margin-bottom: 12px;
        font-size: 0.875rem;
        color: #4b5563;
    }

.rule-item {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}

    .rule-item input[type="text"] {
        padding: 8px 12px;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        font-size: 0.875rem;
        width: 100%;
        margin-bottom: 10px;
        box-sizing: border-box; /* Ensure padding is included in width */
    }


.rule-options {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}


.rule-enabled {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    margin-left: auto;
    margin-right: 10px;
    white-space: nowrap; /* Prevent text wrapping */
}

    .rule-enabled input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0;
        padding: 0;
        visibility: visible; /* Explicitly make visible */
        opacity: 1;
    }

    .rule-enabled label {
        display: inline-block;
        margin: 0;
        padding: 0;
    }

.rule-options select {
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.875rem;
    min-width: 100px;
    height: 38px;
    flex-shrink: 0; /* Prevent the select from shrinking */
}

.btn-remove-rule {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1rem;
    padding: 6px 10px;
    border-radius: 4px;
    flex-shrink: 0; /* Prevent the button from shrinking */
    display: flex; /* Ensure the content is centered */
    align-items: center;
    justify-content: center;
}

    .btn-remove-rule:hover {
        background-color: #fee2e2; /* Light red background on hover */
    }

.btn-add-rule {
    background-color: #f3f4f6;
    border: 1px dashed #9ca3af;
    color: #4b5563;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 16px;
}

    .btn-add-rule:hover {
        background-color: #e5e7eb;
    }

.buttons-row {
    position: relative; /* Remove sticky positioning */
    background-color: white;
    padding: 10px 0;
    margin-top: 10px;
    z-index: 2;
}

.btn-create, .btn-cancel {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    border: none;
}

.btn-create {
    background-color: #3B82F6;
    color: white;
    flex: 1;
}

.btn-cancel {
    background-color: #f3f4f6;
    color: #4b5563;
}

.creation-instructions {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 12px;
    padding: 8px;
    background-color: #FFFBEB;
    border-left: 3px solid #FBBF24;
    border-radius: 0 4px 4px 0;
}

/* Active geofences list - Make only this section scrollable */
.active-geofences {
    margin-top: 16px;
    flex: 1; /* Take remaining space */
    overflow-y: auto; /* This is the ONLY section that scrolls */
    padding-right: 4px; /* Add padding for scrollbar */
    max-height: none; /* Remove max-height constraint */
}

    .active-geofences h4 {
        font-size: 0.875rem; /* Keep the same size as other section headers */
        color: #111827;
        margin-top: 0;
        margin-bottom: 12px;
    }

.empty-message {
    padding: 12px;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
    background-color: #f9fafb;
    border-radius: 4px;
}

.geofence-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Updated geofence item with horizontal actions */
.geofence-item {
    display: flex;
    flex-direction: column;
    background-color: #f9fafb;
    border-radius: 6px;
    padding: 12px;
    border-left: 3px solid #3B82F6;
}

.geofence-info {
    flex: 1;
}

.geofence-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: #1f2937;
    margin-bottom: 4px;
}

.geofence-details {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.geofence-shape {
    background-color: #e5e7eb;
    border-radius: 4px;
    padding: 2px 6px;
}

.geofence-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.75rem;
}

    .geofence-rules strong {
        margin-right: 4px;
    }

.rule-tag {
    background-color: #e5e7eb;
    border-radius: 4px;
    padding: 2px 6px;
    color: #4b5563;
}

    .rule-tag.enabled {
        background-color: #dcfce7;
        color: #166534;
    }

    .rule-tag.disabled {
        background-color: #fee2e2;
        color: #991b1b;
    }

/* Horizontal action bar */
.geofence-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
}

.btn-center, .btn-view, .btn-delete, .btn-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

    .btn-center:hover, .btn-view:hover, .btn-delete:hover, .btn-toggle:hover {
        background-color: #f0f0f0;
    }

.btn-delete {
    color: #ef4444;
}

/* Alert notifications */
.geofence-alerts {
    margin-top: 16px;
    flex-shrink: 0;
    max-height: 160px;
    overflow: hidden;
}

    .geofence-alerts h4 {
        font-size: 0.875rem;
        color: #111827;
        margin-bottom: 12px;
    }

.alert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert-item {
    display: flex;
    justify-content: space-between;
    background-color: #f9fafb;
    border-radius: 6px;
    padding: 12px;
}

    .alert-item.exclusion-alert {
        border-left: 3px solid #ef4444;
    }

    .alert-item.inclusion-alert {
        border-left: 3px solid #f97316;
    }

.alert-info {
    flex: 1;
}

.alert-title {
    font-weight: 500;
    font-size: 0.875rem;
    color: #1f2937;
    margin-bottom: 4px;
}

.alert-details {
    font-size: 0.75rem;
    color: #6b7280;
}

.violation-type, .geofence-name {
    margin-right: 8px;
}

.alert-time {
    font-size: 0.6875rem;
    color: #9ca3af;
}

.btn-locate {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    align-self: center;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

    .btn-locate:hover {
        background-color: #f0f0f0;
    }

/* Details modal - no scrolling */
.geofence-details-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
}

.modal-content {
    background-color: white;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0; /* Prevent header from shrinking */
}

    .modal-header h3 {
        margin: 0;
        font-size: 1.125rem;
        color: #111827;
    }

.close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
}

.modal-body {
    padding: 16px;
    overflow-y: auto; /* Only the modal body should scroll if needed */
}

.detail-row {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
}

    .detail-row label {
        font-size: 0.75rem;
        color: #6b7280;
        margin-bottom: 4px;
    }

    .detail-row span {
        font-size: 0.875rem;
        color: #111827;
    }

.rules-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rule-detail {
    background-color: #f9fafb;
    border-radius: 6px;
    padding: 12px;
    font-size: 0.875rem;
}

    .rule-detail.enabled {
        border-left: 3px solid #22c55e;
    }

    .rule-detail.disabled {
        border-left: 3px solid #ef4444;
        opacity: 0.7;
    }

.rule-toggle {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Notification */
.geofence-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #3B82F6;
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 1100;
    animation: fadeIn 0.3s, fadeOut 0.3s 2.7s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Disabled geofence styling */
.disabled-geofence {
    opacity: 0.7;
    background-color: #f5f5f5;
    border-left: 3px solid #9e9e9e !important;
}

/* Enabled/Disabled status indicators */
.geofence-status {
    font-size: 0.875rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

    .geofence-status.disabled {
        background-color: #fce8e6;
        color: #c5221f;
    }

    .geofence-status.enabled {
        background-color: #e6f4ea;
        color: #137333;
    }

/* Toggle button in the geofence details modal */
.enabled-toggle {
    margin-bottom: 16px;
    padding: 8px;
    background-color: #f5f7fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 28px;
}

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-switch label {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
        font-size: 0.75rem;
        color: white;
    }

        .toggle-switch label.disabled {
            background-color: #F44336;
        }

        .toggle-switch label.enabled {
            background-color: #4CAF50;
        }

        .toggle-switch label:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        .toggle-switch label.enabled:after {
            content: "Yes";
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
        }

        .toggle-switch label.disabled:after {
            content: "No";
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
        }

    .toggle-switch input:checked + label:before {
        transform: translateX(36px);
    }

/* Styles for affected people count badges */
.violation-count, .affected-count {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 6px;
}

.violation-count {
    background-color: rgba(254, 202, 202, 0.7);
    color: #b91c1c;
}

.affected-count {
    background-color: rgba(219, 234, 254, 0.7);
    color: #1e40af;
}

/* Affected people list styling */
.affected-people-list {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

.affected-person-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .affected-person-item:last-child {
        border-bottom: none;
    }

    .affected-person-item.violating {
        background-color: rgba(254, 202, 202, 0.5); /* Light red background */
    }

.person-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.person-name {
    font-weight: 500;
    color: #334155;
}

.person-status {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
}

.violation-badge {
    color: #dc2626; /* Red color */
    font-size: 0.875rem;
    margin-top: 2px;
}

.count-badge {
    background-color: #3b82f6;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 500;
}

.no-people-message {
    padding: 12px;
    color: #64748b;
    font-style: italic;
    text-align: center;
    background-color: #f8fafc;
    border-radius: 4px;
    margin-top: 8px;
}

.inside-count, .outside-count {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 6px;
}

.inside-count {
    background-color: rgba(219, 234, 254, 0.7); /* Light blue background */
    color: #1e40af; /* Dark blue text */
}   

.outside-count {
    background-color: rgba(254, 226, 226, 0.7); /* Light red background */
    color: #b91c1c; /* Dark red text */
}

/* People list styling */
.people-list {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

.person-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

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


.toggle-button {
    background: none;
    border: none;
    padding: 5px;
    margin: 0;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .toggle-button:hover {
        background-color: rgba(255, 255, 255, 0.2); /* Light background on hover */
    }

.toggle-icon-container {
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

    .toggle-icon-container:hover {
        background-color: rgba(59, 130, 246, 0.1);
    }

.toggle-icon {
    font-size: 0.875rem;
    pointer-events: none; /* This prevents the span from receiving click events */
}





.btn-edit {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

    .btn-edit:hover {
        background-color: #f0f0f0;
    }

.icon-edit {
    color: #3B82F6; /* Blue color for edit */
}

/* Additional styles for edit mode */
.edit-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #4b5563;
    margin-right: 12px;
}

.edit-note {
    font-size: 0.75rem;
    color: #6b7280;
    font-style: italic;
    margin-left: 8px;
}

/* Highlight the form when in edit mode */
.create-content.edit-mode {
    border-left: 3px solid #FF9800; /* Orange border to indicate edit mode */
}

/* Style for the edit mode header */
.create-section-header h3.edit-mode {
    color: #FF9800; /* Orange text for edit mode */
}

/* Make the disabled input fields look different */
.input-row input:disabled,
.input-row select:disabled {
    background-color: #f3f4f6;
    color: #6b7280;
    border: 1px dashed #d1d5db;
}

/* Enhance the save changes button */
.btn-create.edit-mode {
    background-color: #FF9800; /* Orange for edit mode */
}

    .btn-create.edit-mode:hover {
        background-color: #F57C00; /* Darker orange on hover */
    }

/* Add a visual cue for the geofence being edited */
.geofence-item.editing {
    box-shadow: 0 0 0 2px #FF9800; /* Orange highlight */
    transform: scale(1.01);
    transition: all 0.3s ease;
}
/* ---- MapBoundsListingComponent.razor.css ---- */
.map-bounds-listing {
    position: absolute;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: hidden;
    width: 300px;
    max-height: calc(100vh - 200px);
}

    .map-bounds-listing.people-listing {
        top: 70px;
        right: 10px;
    }

    .map-bounds-listing.alerts-listing {
        top: 70px;
        left: 10px;
    }

    .map-bounds-listing.collapsed {
        height: 48px;
    }

    .map-bounds-listing.expanded {
        height: auto;
    }

.listing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #f5f5f5;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}

    .listing-header h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 500;
    }

.toggle-icon {
    font-size: 0.75rem;
    color: #555;
}

.listing-content {
    padding: 16px;
    overflow-y: auto;
    max-height: calc(100vh - 250px);
}

.filter-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.filter-dropdown select {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}

.search-box input {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 160px;
}

.listing-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.listing-item {
    display: flex;
    padding: 12px;
    border-radius: 6px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .listing-item:hover {
        background-color: #f0f0f0;
    }

.item-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.item-details {
    flex: 1;
    min-width: 0; /* Important for text truncation to work */
}

.item-name {
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-description {
    font-size: 0.875rem;
    color: #555;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #777;
}

/* Status classes for people */
.status-normal .item-icon {
    background-color: #4CAF50;
    color: white;
}

.status-stale .item-icon {
    background-color: #FFC107;
    color: white;
}

.status-sos .item-icon {
    background-color: #F44336;
    color: white;
    animation: pulse 1.5s infinite;
}

/* Severity classes for alerts */
.severity-low {
    border-left: 4px solid #4CAF50;
}

.severity-medium {
    border-left: 4px solid #FFC107;
}

.severity-high {
    border-left: 4px solid #FF9800;
}

.severity-critical {
    border-left: 4px solid #F44336;
}

.severity-unknown {
    border-left: 4px solid #9E9E9E;
}

.listing-empty {
    text-align: center;
    padding: 24px 0;
    color: #777;
}

/* Icon placeholders - replace with actual icons in your project */
.icon-person::before {
    content: "👤";
}

.icon-alert::before {
    content: "⚠️";
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

/* Make component responsive on smaller screens */
@media (max-width: 768px) {
    .map-bounds-listing {
        width: calc(100% - 20px);
        max-width: none;
    }

        .map-bounds-listing.people-listing,
        .map-bounds-listing.alerts-listing {
            top: auto;
            left: 10px;
            right: 10px;
        }

        .map-bounds-listing.people-listing {
            bottom: 140px;
        }

        .map-bounds-listing.alerts-listing {
            bottom: 70px;
        }
}

/* ---- SidePanel.razor.css ---- */
/* Add these styles to your existing style section in the SidePanel component */

.status-card {
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.status-ok {
    background-color: #e6f7e9;
    border-left: 4px solid #22c55e;
}

.status-attention {
    background-color: #fef9c3;
    border-left: 4px solid #facc15;
}

.status-late {
    background-color: #fee2e2;
    border-left: 4px solid #ef4444;
}

.time-remaining {
    font-size: 0.75rem;
    font-style: italic;
    color: #666;
    margin-left: 5px;
}

.check-in-history {
    margin-top: 15px;
}

.history-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
}

.history-list {
    max-height: 150px;
    overflow-y: auto;
    border-radius: 4px;
    background-color: #f9f9f9;
    padding: 8px;
}

.history-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #e0e0e0;
}

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

.history-date {
    font-weight: 500;
}

.view-all-button {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #374151;
    font-size: 0.75rem;
    cursor: pointer;
    text-align: center;
}

    .view-all-button:hover {
        background-color: #e5e7eb;
    }



.detail-multi-value {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .detail-contact-item a {
        color: #0078d7;
        text-decoration: none;
    }

        .detail-contact-item a:hover {
            text-decoration: underline;
        }

.phone-type {
    color: #666;
    font-size: 0.85em;
}

.loading-contact {
    font-style: italic;
    color: #666;
    padding: 8px 0;
}
/* ---- TravelMap.razor.css ---- */
/* Connection status indicators */
.connection-status-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    position: absolute;
    top: 10px;
    right: 20px;
}

.connection-status {
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 0.6875rem;
    display: flex;
    gap: 4px;
    align-items: center;
}

    .connection-status .indicator {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

    .connection-status.connected {
        background-color: rgba(76, 175, 80, 0.8);
        color: white;
    }

        .connection-status.connected .indicator {
            background-color: #fff;
        }

    .connection-status.disconnected {
        background-color: rgba(244, 67, 54, 0.8);
        color: white;
    }

        .connection-status.disconnected .indicator {
            background-color: #fff;
        }

/* Chat notification button */
.chat-notification {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff4081;
    color: white;
    border-radius: 50%;
    height: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0 4px;
}

/* Chat notifications popup */
.chat-notifications-popup {
    position: absolute;
    top: 60px;
    right: 20px;
    width: 300px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

    .popup-header h3 {
        margin: 0;
        font-size: 1rem;
    }

.close-button {
    background: none;
    border: none;
    font-size: 1.125rem;
    cursor: pointer;
    color: #666;
}

.notifications-list {
    max-height: 300px;
    overflow-y: auto;
}

.notification-item {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .notification-item:hover {
        background-color: #f5f5f5;
    }

.person-name {
    font-weight: 500;
}

.message-count {
    font-size: 0.875rem;
    color: #666;
}

/* Alert notification button */
.alert-notification {
    position: relative;
}

/* Alert notifications popup */
.alert-notifications-popup {
    position: absolute;
    top: 60px;
    right: 20px;
    width: 300px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
}

.alert-name {
    font-weight: 500;
}

.alert-description {
    font-size: 0.875rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.button-with-indicator {
    position: relative;
    display: inline-block;
}

.alert-count-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    cursor: pointer;
}

/* SOS Button Styles */
.sos-button {
    position: relative;
    background-color: #ffebee; /* Light red background */
    border: 1px solid #f44336; /* Red border */
    animation: pulse 2s infinite; /* Pulsing animation for urgency */
}

.sos-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #f44336;
    color: white;
    border-radius: 50%;
    height: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0 4px;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
    }
}

/* Make sure the notification badge on SOS button is positioned correctly */
.sos-button .notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
}

.notification-badge.sos {
    background-color: #f44336; /* Red for SOS */
}

/* SOS notifications popup */
.sos-notifications-popup {
    position: absolute;
    top: 60px;
    right: 20px;
    width: 300px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
}

.sos-timestamp {
    font-size: 0.875rem;
    color: #f44336;
    font-weight: bold;
}

.icon-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.geofence-manager-container {
    position: absolute;
    z-index: 100;
    pointer-events: auto;
}

.custom-info-window {
    padding: 12px;
    max-width: 350px;
    font-family: Arial, sans-serif;
}

    .custom-info-window h3 {
        margin-top: 0;
        margin-bottom: 8px;
        color: #333;
        font-size: 1rem;
    }

    .custom-info-window .metadata-item {
        margin-bottom: 8px;
        font-size: 0.75rem;
    }

    .custom-info-window .label {
        font-weight: 500;
        color: #666;
    }

    .custom-info-window .value {
        font-weight: 500;
        color: #333;
    }

        .custom-info-window .value.status-sos {
            color: #dc3545;
            font-weight: 700;
        }

    .custom-info-window .view-details-button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        margin-top: 10px;
        display: block;
        width: 100%;
        text-align: center;
    }

        .custom-info-window .view-details-button:hover {
            background-color: #0069d9;
        }
/* ---- TripDetailsPanel.razor.css ---- */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    width: 100%;
    min-height: 200px; /* Ensure enough height to see the animation */
}

.loading-indicator-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.loading-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #1976d2;
    border-radius: 50%;
}

    .loading-dot:nth-child(1) {
        animation: loading-bounce 1.4s ease-in-out 0s infinite both;
    }

    .loading-dot:nth-child(2) {
        animation: loading-bounce 1.4s ease-in-out 0.2s infinite both;
    }

    .loading-dot:nth-child(3) {
        animation: loading-bounce 1.4s ease-in-out 0.4s infinite both;
    }

@keyframes loading-bounce {
    0%, 100% {
        transform: scale(0.5);
        opacity: 0.5;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}



/* Trip Details Panel */
.trip-details-panel {
    padding: 12px;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Loading animation - directly copied from AlertWidget */
.alert-widget-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}

.loading-dots {
    display: flex;
}

.dot {
    width: 6px;
    height: 6px;
    background: #9c27b0;
    border-radius: 50%;
    margin: 0 3px;
    animation: pulse 1.5s infinite ease-in-out;
}

    .dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .dot:nth-child(3) {
        animation-delay: 0.4s;
    }

@keyframes pulse {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Trip Header with back button */
.trip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e1e1;
}

.trip-header-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.back-button {
    background: none;
    border: none;
    color: #666;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f0f0f0;
}

    .back-button:hover {
        background-color: #e0e0e0;
    }

.trip-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

/* Trip status - fixed to ensure proper display with hyphenated class names */
.trip-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    margin-left: 10px;
    white-space: nowrap;
    line-height: 1.2;
    vertical-align: middle;
    height: auto;
    box-sizing: border-box;
}

    /* Handle hyphenated status classes */
    .trip-status.in-progress {
        background-color: #e3f2fd;
        color: #1976d2;
    }

    .trip-status.not-started {
        background-color: #e8f5e9;
        color: #388e3c;
    }

    .trip-status.completed {
        background-color: #eeeeee;
        color: #616161;
    }

/* Trip Summary */
.trip-summary {
    background-color: #f9f9f9;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
}

.trip-dates-locations {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.trip-point {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.trip-date {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 5px;
}

.trip-location {
    font-size: 0.75rem;
    color: #666;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-arrow {
    padding: 0 10px;
    color: #999;
    font-size: 1rem;
}

.trip-duration {
    text-align: right;
    font-size: 0.75rem;
    color: #666;
    margin-top: 10px;
}

/* Trip Timeline */
.trip-timeline {
    margin-bottom: 20px;
}

    .trip-timeline h4 {
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 1rem;
        font-weight: 600;
    }

.timeline {
    position: relative;
    margin-left: 20px;
}

    .timeline:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 2px;
        background-color: #e0e0e0;
    }

.timeline-item {
    position: relative;
    padding-left: 30px;
    padding-bottom: 20px;
}

    .timeline-item:last-child {
        padding-bottom: 0;
    }

.timeline-icon {
    position: absolute;
    left: -11px;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid #999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.6875rem;
    z-index: 1;
}

    .timeline-icon.tripleg {
        border-color: #2196f3;
        color: #2196f3;
    }

    .timeline-icon.tripaccommodation {
        border-color: #ff9800;
        color: #ff9800;
    }

    .timeline-icon.tripactivity {
        border-color: #4caf50;
        color: #4caf50;
    }

    .timeline-icon.tripvehicle {
        border-color: #9c27b0;
        color: #9c27b0;
    }

.timeline-content {
    background-color: #fff;
    padding: 12px 15px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.timeline-date {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 5px;
}

.timeline-title {
    font-weight: 500;
    margin-bottom: 10px;
}

.timeline-details {
    font-size: 0.75rem;
    color: #666;
}

/* Compact leg details */
.compact-leg-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leg-departure, .leg-arrival {
    display: flex;
    gap: 10px;
}

.leg-time {
    font-weight: 500;
    min-width: 45px;
}

.leg-location {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.segment-confirmation {
    margin-top: 5px;
    padding-top: 5px;
    font-size: 0.75rem;
    color: #777;
    border-top: 1px dotted #e0e0e0;
}

/* Panel Actions */
.panel-actions {
    display: flex;
    gap: 10px;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #e0e0e0;
}

.action-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

    .action-button.primary {
        background-color: #2196f3;
        color: white;
    }

        .action-button.primary:hover {
            background-color: #1976d2;
        }

    .action-button.secondary {
        background-color: #f5f5f5;
        color: #333;
        border: 1px solid #e0e0e0;
    }

        .action-button.secondary:hover {
            background-color: #eeeeee;
        }

/* No trip data message */
.no-trip-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50%;
    gap: 15px;
    color: #666;
    text-align: center;
}

/* ── Portal-native map toolbar ──────────────────────────────────────────────
   The Dashboard styled .icon-button in its GLOBAL app.css (hardcoded #e5e7eb
   greys), which was never ported — so the buttons rendered as bare text. These
   rules restore them using the portal's own tokens, so the toolbar matches the
   rest of the shell in both light and dark themes instead of importing the
   Dashboard's palette.
   ──────────────────────────────────────────────────────────────────────── */

.icon-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;                 /* even spacing between buttons */
  padding: 0.6rem 0.9rem;      /* equal breathing room above and below … */
  margin: 0;                   /* … and no stray margin, so the gap to the
                                  map is the same as the gap to the header */
  background: var(--vx-surface);
  border-bottom: 1px solid var(--vx-border);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2rem;                /* fixed height => every button aligns, whatever
                                  its label or emoji height */
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--vx-text);
  background: var(--vx-bg);
  border: 1px solid var(--vx-border);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.icon-button:hover:not(:disabled) { background: var(--vx-hover-bg); }

.icon-button.active {
  background: var(--vx-active-bg);
  color: var(--vx-active-text);
  border-color: var(--color-brand-600);
}

.icon-button:disabled { opacity: 0.55; cursor: not-allowed; }

.icon-button:focus-visible {
  outline: 2px solid var(--color-brand-600);
  outline-offset: 2px;
}

/* Counts sit inside the button rather than pushing its height around. */
.icon-button .notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  background: var(--color-brand-600);
  color: #fff;
}

.icon-button .notification-badge.sos { background: #c0392b; }

/* ── Map layout: why the map was invisible ─────────────────────────────────
   The Dashboard's GLOBAL app.css (never ported) supplies the layout chain that
   gives the map its height. Without it .mapCanvas computed to height:0, and
   because .GoogleMap is position:absolute it escaped the collapsed parent and
   Google Maps initialised into a zero-height box — "Map initialization
   completed successfully" in the console, no .gm-style node in the DOM, and a
   grey rectangle on screen.

   ⚠ The Dashboard writes `.mapCanvas { flex-group: 1 }` — NOT a real CSS
   property; it is a typo for flex-grow and does nothing. It survives there only
   because .GoogleMap is absolutely positioned against .main-content. The
   correct property is used here so the canvas actually claims its space.
   ──────────────────────────────────────────────────────────────────────── */

.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;          /* the portal shell owns the viewport, not this page */
  width: 100%;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;    /* the containing block for the absolute .GoogleMap */
  overflow: hidden;
  min-height: 0;         /* without this a flex child refuses to shrink */
}

.mapCanvas {
  flex: 1 1 auto;        /* the fix: 'flex-group' was never a property */
  position: relative;
  min-height: 0;
}

.GoogleMap {
  height: 100% !important;
  width: 100%;
  position: absolute !important;
  top: 0;
  left: 0;
}

/* ── Risk legend: overlay, not a page element ──────────────────────────────
   The legend markup sits inside .main-content but is only positioned by the
   Dashboard's global app.css, which was never ported. Without these rules it
   falls into normal flow and pushes the map down, eating the canvas area.
   position:absolute puts it back over the map, anchored bottom-left.
   ──────────────────────────────────────────────────────────────────────── */

.map-legend {
  position: absolute;
  bottom: 1.5rem;
  left: 0.75rem;
  z-index: 5;                 /* above the canvas, below the toolbar (z-index 5+) */
  pointer-events: none;       /* never steal a map drag that starts over it */
}

.legend-box {
  pointer-events: auto;       /* but the box itself stays interactive */
  background: var(--vx-surface);
  color: var(--vx-text);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--vx-border);
  border-radius: 0.5rem;
  box-shadow: var(--vx-card-shadow);
  min-width: 12rem;
  font-size: 0.75rem;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
}

.legend-item:last-child { margin-bottom: 0; }

/* The risk swatches are drawn at the same opacity the map polygons use, so the
   legend reads as a key to what is actually on screen rather than a brighter
   version of it. */
.color-box {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  border: 1px solid var(--vx-border);
  border-radius: 2px;
  opacity: 0.3;
  flex: none;
}

/* ================================================================
   Dashboard GLOBAL app.css rules used by the ported map components.
   These were NOT in any .razor.css — the Dashboard styled them in its
   site-wide stylesheet, so the component port missed them entirely.
   .side-panel is the reason the details panel rendered below the map
   instead of docked right: it had no positioning at all.
   .panel-title / .section-title are scoped to .side-panel here because
   other portal pages (AdminImmigration, Contacts, ...) use those names.
   ================================================================ */
/* Header styles */
.main-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
}
.status-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* This spreads the content */
    z-index: 10;
}
.status-left {
    display: flex;
    align-items: center;
}
/* Side Panel Styles - Add to your site.css file */

.side-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 360px;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
    z-index: 900;
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
    .side-panel.hidden {
        transform: translateX(100%);
    }
    .side-panel.visible {
        transform: translateX(0);
    }
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}
.side-panel .panel-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
}
.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}
.detail-section {
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 16px;
}
    .detail-section:last-child {
        border-bottom: none;
    }
.side-panel .section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #444;
}
.detail-label {
    font-weight: 500;
    color: #666;
}
.detail-value {
    text-align: right;
    overflow-wrap: break-word;
    max-width: 60%;
}
.scrollable-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 4px;
}
.item-detail {
    font-size: 0.75rem;
    color: #666;
}
.no-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: #999;
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .side-panel {
        width: 280px;
    }
}
.popup-content {
    padding: 10px;
}
.tab-button {
    padding: 10px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 500;
    color: #666;
    position: relative;
}
    .tab-button:hover {
        color: #4285F4;
    }
    .tab-button.active {
        color: #4285F4;
    }
        .tab-button.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background-color: #4285F4;
        }
/* Notes styling */
.notes-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.note-item {
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 8px;
    background-color: #f9f9f9;
    border-left: 4px solid #ddd;
}
    .note-item.note-important {
        background-color: #fff8e1;
        border-left-color: #ffc107;
    }
.note-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.note-timestamp {
    color: #666;
    font-size: 0.75rem;
}
.note-content {
    margin-bottom: 8px;
    white-space: pre-wrap;
}
.no-notes {
    color: #666;
    text-align: center;
    padding: 24px 0;
}
/* Items In View styles */
.items-in-view-container {
    padding: 0 16px;
}
.list-header {
    margin-bottom: 16px;
}
    .list-header h3 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 500;
        color: #333;
    }
.items-in-view-container .scrollable-list {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.items-in-view-container .list-item {
    padding: 12px;
    border-radius: 6px;
    background-color: #f9f9f9;
    transition: background-color 0.2s;
    cursor: pointer;
}
    .items-in-view-container .list-item:hover {
        background-color: #f0f0f0;
    }
.items-in-view-container .item-name {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 4px;
}
.items-in-view-container .item-details {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.75rem;
    color: #666;
    flex-wrap: wrap;
}
.items-in-view-container .status,
.items-in-view-container .alert-severity,
.items-in-view-container .last-updated {
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #eee;
    white-space: nowrap;
}
    .items-in-view-container .status.sos {
        background-color: #ffebee;
        color: #d32f2f;
    }
    .items-in-view-container .alert-severity.level-1 {
        background-color: #e8f5e9;
        color: #2e7d32;
    }
    .items-in-view-container .alert-severity.level-2 {
        background-color: #fff8e1;
        color: #ff8f00;
    }
    .items-in-view-container .alert-severity.level-3 {
        background-color: #fff3e0;
        color: #e64a19;
    }
    .items-in-view-container .alert-severity.level-4 {
        background-color: #ffebee;
        color: #d32f2f;
    }
.items-in-view-container .item-description {
    margin-top: 8px;
    font-size: 0.75rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.items-in-view-container .empty-message {
    padding: 24px 16px;
    text-align: center;
    color: #777;
    font-style: italic;
    background-color: #f9f9f9;
    border-radius: 6px;
    margin: 16px 0;
}
/* Tab bar for items in view */
.tab-bar {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 16px;
    background-color: #f5f5f5;
}
.tab-button {
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    color: #666;
}
    .tab-button:hover {
        color: #333;
    }
    .tab-button.active {
        border-bottom-color: #2196F3;
        color: #2196F3;
    }
/* Responsive adjustments for items in view */
@media (max-width: 768px) {
    .items-in-view-container .scrollable-list {
        max-height: calc(100vh - 240px);
    }
}
/* Enhanced styles for affected people list in alerts */
.scrollable-list .list-item {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}
    .scrollable-list .list-item:hover {
        background-color: #f5f5f5;
        cursor: pointer;
    }
    .scrollable-list .list-item:last-child {
        border-bottom: none;
    }
.scrollable-list .item-name {
    font-weight: 600;
    margin-bottom: 3px;
}
.scrollable-list .item-details {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: #666;
    align-items: center;
    gap: 8px;
}
.scrollable-list .status-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}
    .scrollable-list .status-badge.traveling {
        background-color: #e3f2fd;
        color: #1976d2;
    }
    .scrollable-list .status-badge.local {
        background-color: #e8f5e9;
        color: #2e7d32;
    }
.scrollable-list .location-time {
    font-style: italic;
    color: #757575;
    margin-left: auto;
}
/* Styling for filtered out people */
.scrollable-list .list-item.filtered-out {
    opacity: 0.6;
    background-color: #f9f9f9;
    cursor: default !important;
}
    .scrollable-list .list-item.filtered-out:hover {
        background-color: #f9f9f9; /* Keep the same background on hover */
    }
.scrollable-list .filter-notice {
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.scrollable-list .filter-icon {
    color: #f57c00;
    font-style: normal;
    font-size: 0.875rem;
}
/* Make the list more compact when there are many items */
.detail-section:has(.scrollable-list .list-item:nth-child(n+6)) .scrollable-list {
    max-height: 250px;
    overflow-y: auto;
}

/* ================================================================
   Portal fit-and-finish. The Dashboard sized these against a
   full-viewport page; in the portal the map sits under the app
   header, so viewport-relative heights overflow the visible area.
   ================================================================ */

/* Risk legend must never run past the bottom of the map. It is anchored to
   .main-content, so cap it against that box and scroll internally. */
.legend-box {
  max-height: calc(100% - 3rem);
  overflow-y: auto;
}
.map-legend {
  max-height: calc(100% - 3rem);
  bottom: 2.5rem;             /* clear the status bar (30px) */
}

/* Geofence manager: the create form was clipped (overflow:hidden on a fixed
   550px max-height), which hid the Save button. Scroll it instead, and cap the
   whole panel to the space actually available under the header + toolbar. */
.geofence-manager {
  max-height: calc(100vh - 14rem);
}
.create-section.expanded {
  max-height: calc(100vh - 24rem);
  overflow-y: auto;
}
.geofence-manager .manager-content,
.geofence-manager .active-geofences {
  overflow-y: auto;
}
/* Keep the action row visible no matter how long the form gets. */
.geofence-manager .btn-create,
.geofence-manager .btn-cancel {
  position: sticky;
  bottom: 0;
}