/* FrontSea protected-area banner — fixed top bar */

.protected-area-banner {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    z-index: 1200;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.protected-area-banner[hidden] {
    display: none !important;
}

body.has-protected-area-banner.skipper-page .cockpit,
body.has-protected-area-banner.crew-chat-page .cc-app {
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--protected-banner-offset, 3.5rem));
}

.protected-area-banner__main {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.85rem;
    border: none;
    text-align: left;
    cursor: pointer;
    background: linear-gradient(90deg, #0d4f4f 0%, #0f766e 55%, #115e59 100%);
    color: #ecfdf5;
    font-family: Inter, system-ui, sans-serif;
}

.protected-area-banner__main:hover {
    filter: brightness(1.05);
}

.protected-area-banner__icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1.35;
}

.protected-area-banner__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.protected-area-banner__title {
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.25;
}

.protected-area-banner__message {
    font-size: 0.78rem;
    line-height: 1.35;
    opacity: 0.92;
}

.protected-area-banner__offline {
    flex-shrink: 0;
    font-size: 0.65rem;
    opacity: 0.85;
    align-self: center;
}

.protected-area-banner__chev {
    flex-shrink: 0;
    opacity: 0.75;
    font-size: 0.75rem;
    align-self: center;
}

.protected-area-banner__detail {
    background: #0f172a;
    color: #e2e8f0;
    padding: 0.65rem 0.85rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.45;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.protected-area-banner__detail[hidden] {
    display: none !important;
}

.protected-area-banner__contacts {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
}

.protected-area-banner__contacts li {
    margin-bottom: 0.35rem;
}

.protected-area-banner__loading {
    opacity: 0.75;
}

/* High / very_high sensitivity — more urgent tone */
.protected-area-banner--urgent .protected-area-banner__main {
    background: linear-gradient(90deg, #7c2d12 0%, #c2410c 45%, #9a3412 100%);
    color: #fff7ed;
}

/* Outside protected area — low-priority coastal monitoring line */
.protected-area-banner--soft .protected-area-banner__main--soft {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: #1e293b;
    color: #94a3b8;
    font-size: 0.72rem;
    cursor: default;
}

.protected-area-banner--soft .protected-area-banner__message {
    font-size: 0.72rem;
    opacity: 1;
}

body.has-protected-area-banner--soft.crew-chat-page .cc-app,
body.has-protected-area-banner--soft.skipper-page .cockpit {
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--protected-banner-offset, 2rem));
}

.protected-area-banner__restrictions {
    margin-top: 0.5rem;
}

.protected-area-banner__authority {
    margin-top: 0.35rem;
    opacity: 0.85;
    font-size: 0.75rem;
}

/* Dev: ?gis_debug=1 or localStorage azure_gis_debug=1 */
.gis-debug-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 28vh;
    overflow: auto;
    z-index: 9999;
    padding: 0.5rem;
    font-size: 0.65rem;
    background: rgba(15, 23, 42, 0.95);
    color: #94a3b8;
    border-top: 1px solid #334155;
    white-space: pre-wrap;
    word-break: break-all;
}

@media (max-width: 640px) {
    /* Collapsed: title only — full message in expand panel (keeps nav tappable) */
    .protected-area-banner__main[aria-expanded="false"] .protected-area-banner__message {
        display: none;
    }

    .protected-area-banner__main {
        padding: 0.45rem 0.7rem;
    }

    .protected-area-banner__title {
        font-size: 0.82rem;
    }

    body.has-protected-area-banner.skipper-page .cockpit,
    body.has-protected-area-banner.crew-chat-page .cc-app {
        padding-top: calc(env(safe-area-inset-top, 0px) + var(--protected-banner-offset, 3rem));
    }
}

@media (min-width: 768px) {
    body.has-protected-area-banner.skipper-page .cockpit,
    body.has-protected-area-banner.crew-chat-page .cc-app {
        padding-top: calc(env(safe-area-inset-top, 0px) + var(--protected-banner-offset, 3rem));
    }
}