/**
 * Global map info window (infoview) constraints.
 * Rescuer-dashboard-style: compact box, single scroll, one close button, subtle animation.
 * Applied to all pages that use map_infowindow.css.
 */

/* Show and style Google's default close button (top-right) so users can close infoviews to see other markers */
.gm-style-iw + button,
button.gm-ui-hover-effect {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 50% !important;
    color: #374151 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 1001 !important;
    transition: background 0.2s, color 0.2s !important;
}
.gm-style-iw + button:hover,
button.gm-ui-hover-effect:hover {
    background: rgba(0, 0, 0, 0.14) !important;
    color: #111827 !important;
}

/* InfoWindow outer wrapper – visible next to marker; do not override position (Google anchors to marker) */
.gm-style-iw {
    max-width: min(340px, 90vw) !important;
    max-height: 420px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: opacity 0.2s ease !important;
    background: #ffffff !important;
    color: #1e293b !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.08) !important;
    border-radius: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Keep InfoWindow pane/tip visible so bubble stays anchored next to marker */
.gm-style-iw-tc,
.gm-style-iw-cc {
    overflow: visible !important;
}
.gm-style-iw-t {
    visibility: visible !important;
}
.gm-style-iw.gm-style-iw-open {
    opacity: 1;
}

/* Content container – always visible, readable; avoid position so anchor is preserved */
.gm-style-iw-c {
    max-width: min(340px, 90vw) !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    opacity: 1 !important;
    min-height: 1px !important;
    visibility: visible !important;
    display: block !important;
    z-index: 1 !important;
}
/* All content inside infoview visible and dark text on light bg */
.gm-style-iw-c,
.gm-style-iw-c * {
    visibility: visible !important;
}
.gm-style-iw-c div,
.gm-style-iw-c p,
.gm-style-iw-c span,
.gm-style-iw-c strong,
.gm-style-iw-c a:not(.ma-iw-actions a),
.gm-style-iw-c h3,
.gm-style-iw-c h4,
.gm-style-iw-c label,
.gm-style-iw-c button {
    color: inherit !important;
}
.gm-style-iw-c a {
    color: #1d4ed8 !important;
}

/* ----- Compact content classes used inside InfoWindows ----- */

/* .info-window (emergency_map, dashboard, etc.) – readable size */
.gm-style-iw-c .info-window,
.info-window {
    max-width: 320px !important;
    min-width: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    padding: 8px 10px !important;
    background: #ffffff !important;
    color: #1e293b !important;
}

.gm-style-iw-c .info-window .info-header,
.info-window .info-header {
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    gap: 6px !important;
}

.gm-style-iw-c .info-window .info-type,
.info-window .info-type {
    font-size: 0.7rem !important;
}

.gm-style-iw-c .info-window .info-id,
.gm-style-iw-c .info-window .info-date,
.gm-style-iw-c .info-window .info-updated,
.info-window .info-id,
.info-window .info-date,
.info-window .info-updated {
    font-size: 0.7rem !important;
}

.gm-style-iw-c .info-window .info-category,
.info-window .info-category {
    font-size: 0.7rem !important;
}

.gm-style-iw-c .info-window .info-transcription-block,
.info-window .info-transcription-block {
    margin: 8px 0 !important;
}

.gm-style-iw-c .info-window .info-transcription-block .info-transcription-label,
.info-window .info-transcription-block .info-transcription-label {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #64748b !important;
    margin-bottom: 6px !important;
}

.gm-style-iw-c .info-window .info-message,
.info-window .info-message {
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 12px 14px !important;
    max-height: 180px !important;
    overflow-y: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

.gm-style-iw-c .info-window .voice-not-transcribed-note,
.info-window .voice-not-transcribed-note {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
    margin-top: 8px !important;
}

.gm-style-iw-c .info-window .info-transcription,
.info-window .info-transcription {
    margin: 6px 0 !important;
    padding: 6px 8px !important;
}

.gm-style-iw-c .info-window .info-transcription-text,
.info-window .info-transcription-text {
    font-size: 12px !important;
    line-height: 1.5 !important;
    max-height: 120px !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

.gm-style-iw-c .info-window .info-actions,
.info-window .info-actions {
    gap: 4px !important;
    margin: 6px 0 !important;
}

/* Buttons in map infoviews – readable size */
.gm-style-iw-c .infoview-btn,
.gm-style-iw-c .info-window .btn-chat-alert,
.gm-style-iw-c .info-window .btn-link-maps,
.gm-style-iw-c .info-window .btn-zoom,
.gm-style-iw-c .info-window button:not([style*="position: absolute"]),
.gm-style-iw-c .ma-infowindow button,
.gm-style-iw-c [onclick*="close"] {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 32px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}
.infoview-btn,
.info-window .btn-chat-alert,
.info-window .btn-link-maps,
.info-window .btn-zoom,
.info-window .info-actions-top .btn-link-maps {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 32px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}
.info-window .info-actions-top .btn-link-maps {
    text-decoration: none !important;
    color: #fff !important;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
}
.info-window .info-actions-top .btn-link-maps:hover {
    opacity: 0.95;
}
.infoview-btn-sm {
    padding: 4px 6px !important;
    font-size: 10px !important;
    min-height: 20px !important;
}
.infoview-btn-sm.infoview-btn,
a.infoview-btn.infoview-btn-sm {
    padding: 4px 6px !important;
    font-size: 10px !important;
    min-height: 20px !important;
    text-decoration: none !important;
    color: #fff !important;
    background: #4285F4 !important;
}
.dashboard-infoview-actions-top {
    margin-bottom: 6px;
}
.dashboard-infoview .dashboard-infoview-urgency {
    margin: 0 0 4px 0 !important;
}
.info-window .info-actions-top {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.info-window .info-urgency-top {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 11px;
}

.gm-style-iw-c .info-window .info-tags-label,
.info-window .info-tags-label {
    font-size: 0.65rem !important;
}

.gm-style-iw-c .info-window .info-tag,
.info-window .info-tag {
    padding: 4px 8px !important;
    font-size: 10px !important;
}

.gm-style-iw-c .info-window .info-submitter,
.info-window .info-submitter {
    font-size: 10px !important;
}

.gm-style-iw-c .info-window .rate-card,
.info-window .rate-card {
    padding: 6px !important;
    min-height: 40px !important;
}

.gm-style-iw-c .info-window .rate-card-value,
.info-window .rate-card-value {
    font-size: 0.9rem !important;
}

.gm-style-iw-c .info-window .responder-status,
.info-window .responder-status {
    margin-top: 6px !important;
    padding: 8px !important;
}

.gm-style-iw-c .info-window .badge,
.info-window .badge {
    padding: 3px 6px !important;
    font-size: 0.65rem !important;
}

/* Mutual Aid .ma-infowindow – readable size */
.gm-style-iw-c .ma-infowindow,
.ma-infowindow {
    max-width: 320px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    padding: 10px 12px !important;
    background: #ffffff !important;
    color: #1e293b !important;
}

.gm-style-iw-c .ma-infowindow h4,
.ma-infowindow h4 {
    font-size: 16px !important;
    margin: 6px 0 8px 0 !important;
}

.gm-style-iw-c .ma-infowindow .ma-iw-desc,
.ma-infowindow .ma-iw-desc {
    margin: 6px 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.gm-style-iw-c .ma-infowindow .ma-iw-meta,
.gm-style-iw-c .ma-infowindow .ma-iw-viewed,
.gm-style-iw-c .ma-infowindow .ma-iw-match,
.ma-infowindow .ma-iw-meta,
.ma-infowindow .ma-iw-viewed,
.ma-infowindow .ma-iw-match {
    font-size: 13px !important;
    margin-bottom: 8px !important;
}

.gm-style-iw-c .ma-infowindow .ma-iw-actions button,
.ma-infowindow .ma-iw-actions button {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 32px !important;
}
.ma-infowindow .ma-iw-urgency-top {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 11px;
}
.ma-infowindow .ma-iw-actions-top {
    margin-bottom: 8px;
}

/* Lifeline / Healthcare responder infoview – compact */
.gm-style-iw-c .lifeline-infoview,
.lifeline-infoview {
    max-width: 260px !important;
    min-width: 0 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    background: #ffffff !important;
    color: #1e293b !important;
}

.gm-style-iw-c .lifeline-infoview h4,
.lifeline-infoview h4 {
    font-size: 12px !important;
    margin: 0 0 6px 0 !important;
    padding-bottom: 4px !important;
}

.gm-style-iw-c .lifeline-infoview .row,
.lifeline-infoview .row {
    margin: 2px 0 !important;
}

/* Maritime center infoview – compact */
.gm-style-iw-c .maritime-center-infoview,
.maritime-center-infoview {
    max-width: 260px !important;
    min-width: 0 !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
    background: #ffffff !important;
    color: #1e293b !important;
}

.gm-style-iw-c .maritime-center-infoview-title,
.maritime-center-infoview-title {
    font-size: 11px !important;
    margin-bottom: 4px !important;
}

.gm-style-iw-c .maritime-center-row,
.maritime-center-row {
    margin: 2px 0 !important;
}

/* ----- Dashboard page: infoview sizes like rescuer/emergency map – readable without scroll ----- */
.dashboard-page .gm-style-iw {
    max-width: min(280px, 90vw) !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.dashboard-page .gm-style-iw-c {
    max-width: min(280px, 90vw) !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    padding: 8px 10px !important;
}
.dashboard-page .dashboard-infoview {
    padding: 6px 8px !important;
    min-width: 0 !important;
    max-width: 260px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    background: #ffffff !important;
    color: #1e293b !important;
}
.dashboard-page .dashboard-infoview .dashboard-infoview-title {
    font-size: 13px !important;
    margin: 0 0 6px 0 !important;
    font-weight: 600;
}
.dashboard-page .dashboard-infoview p,
.dashboard-page .dashboard-infoview .dashboard-infoview-meta {
    margin: 3px 0 !important;
    font-size: 11px !important;
}
.dashboard-page .dashboard-infoview .dashboard-infoview-more {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    color: #4285F4;
    cursor: pointer;
    text-decoration: none;
}
.dashboard-page .dashboard-infoview .dashboard-infoview-more:hover {
    text-decoration: underline;
}
.dashboard-page .dashboard-infoview .dashboard-infoview-less {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    color: #64748b;
    cursor: pointer;
    text-decoration: none;
}
.dashboard-page .dashboard-infoview .dashboard-infoview-less:hover {
    text-decoration: underline;
}
/* When "More" is clicked, expanded view still fits without scroll (same cap as compact) */
.dashboard-page .gm-style-iw.dashboard-infoview-expanded {
    max-height: 320px !important;
    max-width: min(280px, 90vw) !important;
}
.dashboard-page .gm-style-iw.dashboard-infoview-expanded .gm-style-iw-c {
    max-height: none !important;
    max-width: min(280px, 90vw) !important;
    overflow: visible !important;
}

/* Mobile: readable size, single scroll on outer */
@media (max-width: 768px) {
    .gm-style-iw {
        max-width: min(320px, 90vw) !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    .gm-style-iw-c {
        max-height: none !important;
        overflow: visible !important;
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
    .gm-style-iw-c .info-window,
    .info-window {
        max-width: 300px !important;
        font-size: 13px !important;
    }
    .gm-style-iw-c .ma-infowindow,
    .ma-infowindow {
        max-width: 300px !important;
        font-size: 14px !important;
    }
    .dashboard-page .gm-style-iw {
        max-width: min(280px, 90vw) !important;
        max-height: 320px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    .dashboard-page .gm-style-iw-c {
        max-height: none !important;
        overflow: visible !important;
        font-size: 9px !important;
    }
}