/* --- Flight notifications: offset below the 8vh header so they appear inside the map --- */
.mantine-Notifications-root {
    top: calc(8vh + 12px) !important;
}

/* --- sidebar-container: the div wraps a fixed sidebar but is itself block-level and
       can intercept pointer events across the full page width. Make it non-interactive
       while keeping the actual sidebar links clickable. --- */
#sidebar-container {
    pointer-events: none;
    height: 0;
    overflow: visible;
}
#sidebar-container * {
    pointer-events: auto;
}

/* dmc.NotificationContainer renders an inline placeholder div in the DOM
   even when withinPortal=True — ensure it never blocks clicks.
   This covers both the global container and the home-page flight container. */
#notification-container,
#flight-notification-container {
    pointer-events: none;
    height: 0;
    overflow: visible;
}

/* login-page background layers (login-bg-gradient etc.) are absolutely
   positioned within a fixed full-viewport parent.  Ensure they never
   block clicks on any other page that may transiently share the DOM. */
.login-page, .login-page * {
    pointer-events: none !important;
}
/* Re-enable only the interactive form elements on the login page itself */
.login-page .login-card input,
.login-page .login-card button {
    pointer-events: auto !important;
}

/* --- Logout icon in sidebar: subtle red tint on hover --- */
.sidebar-icon--logout {
    color: rgba(255, 100, 100, 0.55) !important;
}
.sidebar-icon--logout:hover {
    color: #ff6464 !important;
    text-shadow: 0 0 8px rgba(255, 100, 100, 0.5) !important;
}

/* --- Global scrollbar: thicker for easier interaction --- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: #b0b8c4;
    border-radius: 4px;
    border: 2px solid #f1f1f1;
}
::-webkit-scrollbar-thumb:hover {
    background: #7a8899;
}
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #b0b8c4 #f1f1f1;
}

/* --- dcc.Dropdown: menu matches control width, long options truncated --- */

/* --- Explorer Map: dark tooltip with white text --- */
.explorer-tooltip {
    background-color: rgba(26, 27, 30, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-family: Inter, sans-serif;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    border-radius: 6px;
}
.explorer-tooltip::before {
    border-top-color: rgba(26, 27, 30, 0.92) !important;
}


/* --- Settings Page Inputs --- */
.gotham-input {
    background-color: #0f1114 !important;
    border: 1px solid #2f363d !important;
    color: var(--text-primary) !important;
    font-family: var(--font-mono);
    border-radius: 0 !important;
}

.gotham-input:focus {
    background-color: #161b22 !important;
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 5px rgba(45, 156, 219, 0.3) !important;
}

/* --- The Table --- */
.gotham-table {
    color: var(--text-secondary);
    font-size: 0.9rem;
    border-color: #2f363d;
}

.gotham-table thead th {
    background-color: #161b22;
    color: var(--accent-blue);
    border-bottom: 2px solid var(--accent-blue);
    text-transform: uppercase;
    font-family: var(--font-mono);
    font-weight: normal;
}

.gotham-table tbody tr:hover {
    background-color: rgba(45, 156, 219, 0.05); /* Subtle blue hover */
}

.gotham-table td {
    vertical-align: middle;
    border-color: #2f363d;
}

/* --- The Modal (Pop-up) --- */
.modal-content {
    background-color: #161b22 !important;
    border: 1px solid var(--accent-alert) !important; /* Red border for danger */
    border-radius: 0 !important;
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.modal-header {
    border-bottom: 1px solid #2f363d !important;
}

.modal-footer {
    border-top: 1px solid #2f363d !important;
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Make close 'x' white */
}

/* --- File Upload --- */
.upload-box {
    border: 1px dashed #2f363d;
    background-color: rgba(255,255,255,0.02);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    transition: all 0.3s;
}
.upload-box:hover {
    border-color: var(--accent-blue);
    color: var(--text-primary);
    background-color: rgba(45, 156, 219, 0.1);
}

/* ------- INFO CARD BOTTOM-LEFT ON MAP --------- */
/* Specific styling for the Info Card to be larger and distinct */
.bottom-left-card {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 1000; /* Above map tiles */
    width: 300px;
    background: rgba(11, 12, 14, 0.90); /* Highly opaque dark background */
    border: 1px solid var(--accent-blue); /* Blue border for active selection */
    border-left: 4px solid var(--accent-blue); /* Thicker left accent */
    padding: 15px;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    font-family: var(--font-mono);
    color: var(--text-primary);
    transition: all 0.3s ease-in-out;
}

.info-label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── Unified dark map popup ────────────────────────────────────────────────── */
.map-popup .leaflet-popup-content-wrapper {
    background: #12151e !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.65) !important;
    padding: 0 !important;
    overflow: hidden;
}
.map-popup .leaflet-popup-content {
    margin: 0 !important;
    color: #e8eaf0 !important;
    line-height: 1.5 !important;
}
.map-popup .leaflet-popup-tip-container {
    margin-top: -1px;
}
.map-popup .leaflet-popup-tip {
    background: #12151e !important;
    box-shadow: none !important;
}
.map-popup .leaflet-popup-close-button {
    color: rgba(255,255,255,0.45) !important;
    font-size: 18px !important;
    top: 8px !important;
    right: 10px !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
}
.map-popup .leaflet-popup-close-button:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 50% !important;
}

/* --- Right Drawer: thick, visible scrollbar --- */
#right-drawer ::-webkit-scrollbar {
    width: 10px;
}
#right-drawer ::-webkit-scrollbar-track {
    background: #1a1f2e;
    border-radius: 4px;
}
#right-drawer ::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 4px;
    border: 2px solid #1a1f2e;
}
#right-drawer ::-webkit-scrollbar-thumb:hover {
    background: #718096;
}
/* Firefox */
#right-drawer * {
    scrollbar-width: auto;
    scrollbar-color: #4a5568 #1a1f2e;
}

.info-value {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: bold;
}