/* Styles for the HTML map rendered through Compose's web interop layer. */
.portal-sites-map-host {
    --amalyn-sky: #34aeeb;
    --amalyn-sky-deep: #0a5d84;
    --amalyn-sky-soft: #eff7fd;
    --amalyn-ink: #17314e;
    --amalyn-section-label: #5d7388;
    --amalyn-surface: #f8fcfe;
    --amalyn-border: #d5e9f1;
    --amalyn-button-radius: 8px;
    --amalyn-font-family: "Segoe UI", Arial, sans-serif;
    position: relative;
    container-type: inline-size;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--amalyn-surface);
    color: var(--amalyn-ink);
    font-family: var(--amalyn-font-family);
}

.portal-sites-map-host > .portal-sites-map-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.portal-sites-map-status {
    position: absolute;
    z-index: 2;
    padding: 8px 10px;
    color: var(--amalyn-section-label);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--amalyn-border);
    border-radius: var(--amalyn-button-radius);
    box-shadow: 0 2px 8px rgba(28, 48, 61, 0.14);
    font: 12px/1.25 var(--amalyn-font-family);
}

.portal-sites-map-status {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

.portal-sites-map-view-switch {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    min-height: 34px;
    padding: 8px 12px;
    color: var(--amalyn-sky-deep);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--amalyn-border);
    border-radius: var(--amalyn-button-radius);
    box-shadow: 0 2px 8px rgba(28, 48, 61, 0.14);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 13px/1 var(--amalyn-font-family);
}

.portal-sites-map-view-switch__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: currentColor;
}

.portal-sites-map-view-switch:hover,
.portal-sites-map-view-switch:focus-visible {
    background: var(--amalyn-sky-soft);
}

.portal-sites-map-view-switch:focus-visible {
    outline: 2px solid var(--amalyn-sky);
    outline-offset: 2px;
}

.portal-sites-map-host .maplibregl-ctrl-top-right {
    top: 46px;
}

.portal-sites-map-status--visible {
    display: block;
}

.portal-sites-map-status--failed {
    color: #b3261e;
}

.portal-sites-map-details {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    display: none;
    box-sizing: border-box;
    width: min(364px, calc(100% - 24px));
    padding: 14px;
    color: var(--amalyn-ink);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--amalyn-border);
    border-radius: var(--amalyn-button-radius);
    box-shadow: 0 4px 16px rgba(23, 49, 78, 0.18);
    font: 12px/1.35 var(--amalyn-font-family);
}

.portal-sites-map-details--visible {
    display: grid;
    gap: 12px;
}

.portal-sites-map-details__header {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.portal-sites-map-details__identity {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    color: var(--amalyn-ink);
    background: #fff;
    border: 1px solid var(--amalyn-border);
    border-radius: var(--amalyn-button-radius);
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
}

.portal-sites-map-details__identity-image {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    object-fit: cover;
}

.portal-sites-map-details__identity--loaded {
    background: transparent;
    border-color: transparent;
}

.portal-sites-map-details__copy {
    display: grid;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

.portal-sites-map-details__title-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.portal-sites-map-details__title {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--amalyn-ink);
    font-size: 17px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-sites-map-details__care-model-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    color: var(--amalyn-sky-deep);
    line-height: 0;
}

.portal-sites-map-details__care-model-icon > svg {
    display: block;
}

.portal-sites-map-details__care-model {
    color: var(--amalyn-sky-deep);
    font-size: 13px;
}

.portal-sites-map-details__address {
    color: var(--amalyn-section-label);
    font-size: 13px;
}

.portal-sites-map-details__staff {
    display: grid;
    gap: 8px;
}

.portal-sites-map-details__field {
    display: grid;
    gap: 2px;
}

.portal-sites-map-details__field-label {
    color: var(--amalyn-section-label);
    font-size: 11px;
    font-weight: 600;
}

.portal-sites-map-details__field-value {
    color: var(--amalyn-ink);
    font-size: 13px;
}

.portal-sites-map-details__reference-link {
    justify-self: start;
    padding: 0;
    color: var(--amalyn-sky-deep);
    background: transparent;
    border: 0;
    cursor: pointer;
    font: 700 13px/1.35 var(--amalyn-font-family);
    text-align: left;
}

.portal-sites-map-details__reference-link:hover,
.portal-sites-map-details__reference-link:focus-visible {
    text-decoration: underline;
}

.portal-sites-map-details__reference-link--disabled {
    color: var(--amalyn-ink);
    cursor: default;
    font-weight: 400;
}

.portal-sites-map-details__reference-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.portal-sites-map-details__reference-chip {
    padding: 6px 10px;
    color: var(--amalyn-sky-deep);
    background: var(--amalyn-sky-soft);
    border: 1px solid var(--amalyn-border);
    border-radius: var(--amalyn-button-radius);
    cursor: pointer;
    font: 600 12px/1.35 var(--amalyn-font-family);
}

.portal-sites-map-details__reference-chip:hover,
.portal-sites-map-details__reference-chip:focus-visible {
    font-weight: 700;
}

.portal-sites-map-details__reference-chip--disabled {
    color: var(--amalyn-ink);
    background: var(--amalyn-surface);
    border-color: var(--amalyn-border);
    cursor: default;
}

.portal-sites-map-details__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.portal-sites-map-details__action {
    min-height: 34px;
    padding: 8px 12px;
    color: #fff;
    background: var(--amalyn-sky);
    border: 1px solid var(--amalyn-sky);
    border-radius: var(--amalyn-button-radius);
    cursor: pointer;
    font: 600 13px/1 var(--amalyn-font-family);
}

.portal-sites-map-details__action--secondary {
    color: var(--amalyn-sky-deep);
    background: #fff;
    border-color: var(--amalyn-border);
}

.portal-sites-map-details__action--secondary:hover,
.portal-sites-map-details__action--secondary:focus-visible {
    background: var(--amalyn-sky-soft);
    border-color: var(--amalyn-border);
}

.portal-sites-map-details__action:not(.portal-sites-map-details__action--secondary):hover,
.portal-sites-map-details__action:not(.portal-sites-map-details__action--secondary):focus-visible {
    background: var(--amalyn-sky-deep);
    border-color: var(--amalyn-sky-deep);
}

.portal-sites-map-details__action:focus-visible,
.portal-sites-map-details__reference-link:focus-visible,
.portal-sites-map-details__reference-chip:focus-visible {
    outline: 2px solid var(--amalyn-sky);
    outline-offset: 2px;
}

.portal-sites-map-host .maplibregl-ctrl-bottom-left {
    top: 0;
    bottom: auto;
}

.portal-sites-map-host .maplibregl-ctrl-bottom-left .maplibregl-ctrl {
    margin: 10px 0 0 10px;
}

@container (min-width: 900px) {
    .portal-sites-map-details {
        width: 50%;
        max-width: calc(100% - 24px);
    }
}

.amalyncare-map-marker {
    width: 34px;
    height: 44px;
    overflow: visible;
    cursor: default;
}

.amalyncare-map-marker[role="button"] {
    cursor: pointer;
}

.portal-map-marker-pin {
    display: block;
    width: 34px;
    height: 44px;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 2px 2px rgba(32, 33, 36, 0.34));
    transition: transform 140ms ease;
}

.portal-map-marker-pin__surface {
    transition: fill 140ms ease;
}

.amalyncare-map-marker--overview .portal-map-marker-pin {
    transform: scale(0.8);
}

.amalyncare-map-marker:hover,
.amalyncare-map-marker:focus-visible {
    z-index: 2 !important;
}

.amalyncare-map-marker--selected .portal-map-marker-pin {
    filter:
        drop-shadow(0 2px 2px rgba(32, 33, 36, 0.34))
        drop-shadow(0 0 4px #0b6f93);
}

.amalyncare-map-marker--selected .portal-map-marker-pin__surface {
    fill: var(--amalyn-sky-deep);
}

.amalyncare-map-marker:focus-visible {
    outline: none;
}

.portal-sites-map-host .maplibregl-popup-content {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.portal-sites-map-host .maplibregl-popup {
    z-index: 3;
}

.portal-sites-map-host .maplibregl-popup-tip {
    display: none;
}

.portal-map-marker-popup {
    width: max-content;
    max-width: 220px;
    padding: 10px 12px;
    color: var(--amalyn-ink);
    background: #fff;
    border-radius: var(--amalyn-button-radius);
    box-shadow: 0 3px 12px rgba(28, 48, 61, 0.2);
    font: 12px/1.35 var(--amalyn-font-family);
}