/*
 * UI5 — produktowy viewer mapy, projektów, zdjęć i panoram 360°.
 * Warstwa nadpisuje starsze style bez zmiany kontraktów backendu.
 */

:root {
    --viewer-panel: 430px;
    --viewer-shell-gap: 12px;
    --viewer-map-radius: 24px;
    --viewer-green: #14845b;
    --viewer-green-soft: #e9f8f1;
    --viewer-purple: #7350bc;
    --viewer-purple-soft: #f1eafd;
    --viewer-gray: #738095;
    --viewer-dark: #0b1220;
    --viewer-dark-soft: #111a2a;
}

/* ===== Topbar ===== */
.map-page {
    min-width: 1180px;
    overflow: hidden;
    background:
        radial-gradient(circle at 5% 10%, rgba(31, 111, 178, .08), transparent 28%),
        linear-gradient(180deg, #F1F6FA 0%, #EAF2F7 100%);
}

.map-topbar {
    height: 68px;
    padding-inline: 22px 24px;
    border-bottom: 0;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 1px 0 rgba(142, 156, 176, .24), 0 12px 40px rgba(26, 42, 68, .05);
}

.map-brand {
    min-width: 280px;
}

.map-brand__mark {
    position: relative;
    overflow: hidden;
    border: 0;
    background: linear-gradient(145deg, #1F6FB2, #0F3B66);
    box-shadow: 0 10px 24px rgba(31, 111, 178, .24);
}

.map-brand__mark::before,
.map-brand__mark::after,
.map-brand__mark span {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
}

.map-brand__mark::before { width: 7px; height: 7px; left: 9px; top: 20px; }
.map-brand__mark::after { width: 7px; height: 7px; right: 8px; top: 10px; }
.map-brand__mark span { width: 18px; height: 3px; left: 11px; top: 17px; transform: rotate(-28deg); }

.map-topbar__center {
    position: absolute;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 9px;
    transform: translateX(-50%);
    color: #718096;
    font-size: 12px;
    font-weight: 650;
}

.map-topbar__pulse,
.map-public-caption i,
.photo-project-panel__live i {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 999px;
    background: #24a86f;
    box-shadow: 0 0 0 4px rgba(36, 168, 111, .12);
}

.map-public-caption {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid #dce5ee;
    border-radius: 999px;
    color: #526177;
    background: #f7f9fc;
    font-size: 12px;
    font-weight: 700;
}

.map-topbar__account .map-action-icon {
    color: var(--ui-primary);
    font-size: 12px;
}

.map-signed-user {
    padding: 5px 10px 5px 6px;
    border: 1px solid #e1e7ef;
    border-radius: 14px;
    background: #f8fafc;
}

.map-logout-button {
    min-height: 38px;
    padding-inline: 12px;
}

/* ===== Main shell ===== */
.map-workspace {
    height: calc(100vh - 68px);
    grid-template-columns: var(--viewer-panel) minmax(0, 1fr);
    gap: var(--viewer-shell-gap);
    padding: var(--viewer-shell-gap);
    transition: grid-template-columns 240ms cubic-bezier(.2, .8, .2, 1);
}

.map-sidebar {
    border: 1px solid rgba(208, 218, 231, .88);
    border-radius: var(--viewer-map-radius);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 22px 62px rgba(27, 43, 67, .11);
    transform: translateX(0);
    transition: opacity 220ms ease, transform 240ms cubic-bezier(.2, .8, .2, 1);
}

.map-sidebar-collapsed .map-workspace {
    grid-template-columns: 0 minmax(0, 1fr);
}

.map-sidebar-collapsed .map-sidebar {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-24px);
}

.map-sidebar__scroll {
    padding: 22px 20px 28px;
    scrollbar-width: thin;
    scrollbar-color: #c7d2e0 transparent;
}

.map-sidebar__scroll::-webkit-scrollbar,
.photo-project-panel::-webkit-scrollbar,
.photo-viewer__metadata::-webkit-scrollbar { width: 8px; }
.map-sidebar__scroll::-webkit-scrollbar-thumb,
.photo-project-panel::-webkit-scrollbar-thumb,
.photo-viewer__metadata::-webkit-scrollbar-thumb { border-radius: 999px; background: #c7d2e0; }

.map-browser-hero {
    position: relative;
    margin: -2px -2px 18px;
    padding: 22px 22px 21px;
    overflow: hidden;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0%, rgba(125, 151, 255, .35), transparent 42%),
        linear-gradient(145deg, #0F3B66, #1F6FB2 58%, #1F6FB2 140%);
    box-shadow: 0 18px 38px rgba(25, 49, 95, .20);
}

.map-browser-hero::before,
.map-browser-hero::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
}
.map-browser-hero::before { width: 170px; height: 170px; right: -70px; bottom: -105px; }
.map-browser-hero::after { width: 94px; height: 94px; right: 16px; bottom: -64px; }

.map-browser-hero__badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #b9caff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
}

.map-browser-hero__badge > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #55e2a4;
    box-shadow: 0 0 0 4px rgba(85, 226, 164, .14);
}

.map-browser-hero h1 {
    position: relative;
    z-index: 1;
    margin: 12px 0 8px;
    color: #fff;
    font-size: 27px;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.map-browser-hero p {
    position: relative;
    z-index: 1;
    max-width: 340px;
    margin: 0;
    color: #c4d1e7;
    font-size: 12.5px;
    line-height: 1.6;
}

.map-account-alert {
    border-radius: 16px;
}

.map-control-card {
    margin-bottom: 14px;
    padding: 15px;
    border: 1px solid #e1e7ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfcfe, #f7f9fc);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.map-search {
    margin-bottom: 12px;
}

.map-search--prominent > span,
.map-search > span,
.field--compact .field__label {
    color: #536176;
    font-size: 10px;
    letter-spacing: .09em;
}

.map-search__control {
    position: relative;
}

.map-search__control i {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 15px;
    top: 50%;
    z-index: 2;
    transform: translateY(-54%);
    border: 2px solid #8a99ad;
    border-radius: 50%;
    pointer-events: none;
}

.map-search__control i::after {
    content: "";
    width: 6px;
    height: 2px;
    position: absolute;
    right: -5px;
    bottom: -2px;
    transform: rotate(45deg);
    border-radius: 999px;
    background: #8a99ad;
}

.map-search input {
    min-height: 48px;
    padding: 0 14px 0 43px;
    border-color: #d9e1eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(28, 45, 72, .035);
}

.map-filter-grid {
    gap: 10px;
}

.field--compact select {
    min-height: 43px;
    border-color: #d9e1eb;
    border-radius: 12px;
    background: #fff;
}

.map-visibility-box {
    gap: 8px;
    margin: 0 0 18px;
    padding: 14px;
    border-color: #e1e7ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(28, 45, 72, .045);
}

.map-section-label {
    display: grid;
    gap: 2px;
    margin-bottom: 3px;
}
.map-section-label span { color: #26364c; font-size: 13px; font-weight: 800; }
.map-section-label small { color: #8794a7; font-size: 10px; }

.map-visibility-option {
    min-height: 48px;
    display: grid !important;
    grid-template-columns: 18px 12px minmax(0, 1fr);
    gap: 9px !important;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: #f8fafc;
}

.map-visibility-option:hover { border-color: #d9e2ed; background: #fff; }
.map-visibility-option input { width: 16px; height: 16px; }
.map-visibility-option__dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.map-visibility-option--assigned .map-visibility-option__dot { background: var(--viewer-green); }
.map-visibility-option--portfolio .map-visibility-option__dot { background: var(--viewer-purple); }
.map-visibility-option--private .map-visibility-option__dot { background: var(--viewer-gray); }
.map-visibility-option > span:last-child { display: grid; gap: 1px; }
.map-visibility-option strong { color: #344359; font-size: 12px; }
.map-visibility-option small { color: #8995a6; font-size: 10px; }

.map-list-heading--projects {
    margin-top: 2px;
    padding-inline: 2px;
}

.map-list-heading strong { color: #243349; }
.map-list-heading > small { color: #909bad; font-size: 10px; }
.map-list-heading span { background: #eaf0f8; }
.text-button { display: inline-flex; align-items: center; gap: 5px; }

/* ===== Project list ===== */
.map-project-list { gap: 10px; padding-bottom: 4px; }

.map-project-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 13px;
    min-height: 88px;
    padding: 8px;
    border-color: #e0e7ef;
    border-radius: 17px;
    background: linear-gradient(180deg, #fff, #fbfcfe);
    box-shadow: 0 5px 16px rgba(28, 45, 72, .035);
}

.map-project-card:hover {
    transform: translateY(-2px);
    border-color: #c6d3e5;
    box-shadow: 0 15px 30px rgba(28, 45, 72, .10);
}

.map-project-card--selected {
    border-color: #6f8af2;
    background: #f5f7ff;
    box-shadow: 0 0 0 3px rgba(31, 111, 178, .10), 0 14px 28px rgba(31, 111, 178, .11);
}

.map-project-card__thumb {
    width: 72px;
    height: 72px;
    position: relative;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.map-project-card__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 -24px 35px rgba(13, 26, 49, .18);
    pointer-events: none;
}

.map-project-card__content { gap: 6px; }
.map-project-card__topline { font-size: 9px; }
.map-project-card__visibility { padding: 4px 7px; }
.map-project-card__content > strong { font-size: 14px; letter-spacing: -.015em; }
.map-project-card__content > small { color: #748198; font-size: 10.5px; }

.map-list-empty {
    padding: 28px 18px;
    border-color: #cfd9e6;
    border-radius: 17px;
    background: linear-gradient(180deg, #fbfcfe, #f7f9fc);
}

/* ===== Private project sheet ===== */
.map-detail-panel {
    max-height: 66%;
    padding: 0 22px 24px;
    border-top: 0;
    background: #fff;
    box-shadow: 0 -18px 46px rgba(24, 39, 61, .12);
}

.map-detail-panel__accent {
    height: 7px;
    margin: 0 -22px 20px;
    background: linear-gradient(90deg, #728096, #a7b2c1);
}

.map-detail-panel__close {
    top: 16px;
    right: 16px;
    border-radius: 11px;
    box-shadow: var(--ui-shadow-xs);
}

.map-detail-panel__heading h2 {
    margin: 12px 42px 7px 0;
    font-size: 24px;
    letter-spacing: -.035em;
}
.map-detail-panel__heading p { margin: 0 0 16px; color: #6d7a8d; line-height: 1.55; }

.map-detail-list {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}
.map-detail-list div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 12px;
    border: 1px solid #e4eaf1;
    border-radius: 12px;
    background: #f8fafc;
}
.map-detail-list dt { font-size: 9px; }
.map-detail-list dd { font-size: 12px; font-weight: 650; }
.map-private-notice { display: flex; gap: 9px; border-color: #d9e0e8; border-radius: 13px; }

/* ===== Open project panel ===== */
.photo-project-panel { background: #f8fafc; }

.photo-project-panel__header {
    gap: 10px;
    padding: 22px 22px 20px;
    border-bottom-color: #dfe6ef;
    background:
        radial-gradient(circle at 100% 0%, rgba(96, 125, 238, .13), transparent 42%),
        linear-gradient(180deg, #fff, #f7f9fd);
}

.photo-project-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #dce4ee;
    border-radius: 10px;
    background: #fff;
}

.photo-project-panel__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.photo-project-panel__live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #748198;
    font-size: 10px;
    font-weight: 700;
}

.photo-project-panel__header h1 { font-size: 27px; }
.photo-project-meta { text-transform: none; letter-spacing: 0; }
.map-fit-project-button { margin-top: 3px; }

.photo-project-panel__content {
    gap: 12px;
    padding: 14px;
    border-bottom-color: #dde5ef;
    background: #F7FAFC;
}

.project-resource-section {
    padding: 14px;
    border: 1px solid #e0e7ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(28, 45, 72, .035);
}

.resource-icon {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 900;
}
.resource-icon--3d { color: #6745a4; background: #efe8fb; }
.resource-icon--file { color: #176aa3; background: #e9f5fd; }
.resource-icon--download { color: #147a52; background: #e8f7ef; }

.viewer-material-card {
    grid-template-columns: 68px minmax(0, 1fr);
    min-height: 72px;
    border-color: #e1e7ef;
    border-radius: 14px;
    background: #fbfcfe;
}
.viewer-material-card:hover { transform: translateY(-1px); border-color: #c9d5e5; background: #fff; box-shadow: 0 10px 22px rgba(27, 43, 67, .08); }
.viewer-material-card img { width: 68px; height: 58px; border-radius: 10px; }
.viewer-content-row { border-color: #e1e7ef; border-radius: 14px; background: #fbfcfe; }

.archive-downloads { border-top: 0; padding-top: 14px; }
.archive-downloads__actions { grid-template-columns: 1fr 1fr; }
.archive-downloads__actions .button { min-height: 40px; padding-inline: 11px; font-size: 11px; }

.photo-project-panel__photos {
    padding: 18px 18px 30px;
    background: #fff;
}

.photo-list-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: -18px -18px 13px;
    padding: 16px 18px 10px;
    border-bottom: 1px solid #e3e9f0;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
}
.photo-list-toolbar .map-search { margin-bottom: 8px; }

.photo-list { gap: 9px; }
.photo-list-item {
    grid-template-columns: 74px minmax(0, 1fr);
    min-height: 65px;
    padding: 7px;
    border-color: #e0e7ef;
    border-radius: 14px;
    background: #fbfcfe;
}
.photo-list-item:hover { border-color: #c5d2e4; background: #fff; box-shadow: 0 10px 22px rgba(28, 45, 72, .075); }
.photo-list-item--selected { border-color: #6e89ed; background: #f2f5ff; }
.photo-list-item img { width: 74px; height: 51px; border-radius: 10px; }
.photo-list-item strong { font-size: 11.5px; }
.photo-list-item small { display: inline-flex; width: fit-content; padding: 3px 7px; border-radius: 999px; color: #5e6d82; background: #edf1f6; font-size: 9px; font-weight: 750; }
.photo-download-selector { top: 5px; left: 5px; }

/* ===== Map canvas and controls ===== */
.map-stage {
    border: 1px solid rgba(205, 216, 229, .9);
    border-radius: var(--viewer-map-radius);
    background: #dfe6ee;
    box-shadow: 0 22px 62px rgba(27, 43, 67, .12);
}

.map-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.46);
    pointer-events: none;
}

.map-stage__top-controls {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
}

.map-layer-switcher {
    position: static;
    gap: 3px;
    padding: 5px;
    border-color: rgba(205, 216, 229, .82);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 38px rgba(17, 32, 53, .14);
    pointer-events: auto;
}
.map-layer-switcher button { min-height: 37px; display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; }
.map-layer-switcher button.is-active { background: linear-gradient(135deg, #2A82C4, #1F6FB2); box-shadow: 0 8px 18px rgba(31,111,178,.22); }

.map-floating-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(205, 216, 229, .85);
    border-radius: 14px;
    color: #46556b;
    background: rgba(255,255,255,.95);
    box-shadow: 0 14px 38px rgba(17, 32, 53, .14);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(12px);
}
.map-floating-button:hover { transform: translateY(-1px); color: var(--ui-primary); }
.map-sidebar-collapsed .map-sidebar-toggle > span:first-child { transform: rotate(180deg); }

.map-help-chip {
    position: absolute;
    top: 74px;
    left: 16px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(211, 221, 233, .8);
    border-radius: 999px;
    color: #5e6c7f;
    background: rgba(255,255,255,.89);
    box-shadow: 0 10px 28px rgba(17,32,53,.10);
    font-size: 10px;
    font-weight: 700;
    backdrop-filter: blur(10px);
}
.map-help-chip > span:first-child { color: var(--ui-primary); }

.map-legend {
    left: 16px;
    bottom: 16px;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 15px;
    background: rgba(255,255,255,.95);
}

.map-legend__toggle {
    width: 100%;
    min-height: 41px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px;
    border: 0;
    color: #334258;
    background: transparent;
    cursor: pointer;
}
.map-legend__toggle strong { font-size: 10px; letter-spacing: .07em; }
.map-legend__toggle > span { color: #8a97aa; font-size: 16px; }
.map-legend__items { display: grid; gap: 9px; max-height: 140px; padding: 0 14px 13px; opacity: 1; transition: max-height 180ms ease, opacity 150ms ease, padding 180ms ease; }
.map-legend.is-collapsed .map-legend__items { max-height: 0; padding-bottom: 0; opacity: 0; }
.map-legend span { font-size: 10.5px; }

.map-bottom-bar {
    right: 16px;
    bottom: 16px;
    height: 40px;
    gap: 10px;
    padding: 0 14px;
    border-radius: 13px;
    color: #526075;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 30px rgba(17,32,53,.12);
    backdrop-filter: blur(12px);
}
.map-bottom-bar__divider { width: 1px; height: 17px; background: #d9e1eb; }

.map-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border: 1px solid rgba(216,225,235,.9);
    border-radius: 15px;
    background: rgba(255,255,255,.97);
}
.map-loading__spinner {
    width: 16px;
    height: 16px;
    display: inline-block;
    border: 2px solid #d7dfeb;
    border-top-color: var(--ui-primary);
    border-radius: 50%;
    animation: viewer-spin .8s linear infinite;
}
@keyframes viewer-spin { to { transform: rotate(360deg); } }

.maplibregl-ctrl-top-right { top: 72px; right: 16px; }
.maplibregl-ctrl-group { overflow: hidden; border: 1px solid rgba(205,216,229,.8); border-radius: 13px !important; box-shadow: 0 12px 28px rgba(17,32,53,.12) !important; }
.maplibregl-ctrl button { width: 38px; height: 38px; }
.maplibregl-ctrl-attrib { border-radius: 8px 0 0 0; }
.maplibregl-ctrl-scale { margin-right: 16px !important; margin-bottom: 64px !important; border-color: #536176; color: #435168; background: rgba(255,255,255,.75); }

/* ===== Project and photo pins ===== */
.project-pin {
    width: 66px;
    height: 78px;
    filter: drop-shadow(0 11px 10px rgba(20, 32, 49, .30));
}
.project-pin::before {
    width: 58px;
    height: 58px;
    left: 4px;
    border: 3px solid rgba(255,255,255,.96);
    border-radius: 50% 50% 50% 10px;
    background: var(--viewer-green);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.project-pin--portfolio::before { background: var(--viewer-purple); }
.project-pin--private::before { background: var(--viewer-gray); }
.project-pin__image {
    width: 44px;
    height: 44px;
    top: 8px;
    left: 11px;
    border-width: 2px;
    box-shadow: 0 3px 9px rgba(18,31,50,.20);
}
.project-pin:hover,
.project-pin--selected { transform: scale(1.13) translateY(-4px); }
.project-pin--selected::after {
    width: 69px;
    height: 69px;
    top: -6px;
    left: -2px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 4px rgba(31,111,178,.26);
}

.photo-pin {
    width: 58px;
    height: 68px;
    padding: 4px 4px 10px;
    border: 3px solid rgba(255,255,255,.96);
    border-radius: 50% 50% 50% 10px;
    background: #1F6FB2;
    box-shadow: 0 10px 22px rgba(25, 39, 59, .30);
}
.photo-pin img {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
}
.photo-pin > span {
    top: -10px;
    right: -15px;
    padding: 4px 7px;
    border-width: 2px;
    box-shadow: 0 4px 10px rgba(44,29,75,.25);
}
.photo-pin:hover,
.photo-pin--selected { box-shadow: 0 15px 30px rgba(24,36,55,.42), 0 0 0 5px rgba(255,255,255,.92); }

/* ===== Photo viewer ===== */
.photo-viewer {
    z-index: 1300;
    grid-template-columns: minmax(0, 1fr) 370px;
    grid-template-rows: 70px minmax(0, 1fr);
    background: #070b12;
    transition: grid-template-columns 200ms ease;
}
.photo-viewer.photo-viewer--metadata-hidden { grid-template-columns: minmax(0, 1fr) 0; }

.photo-viewer__header {
    padding: 0 16px 0 20px;
    border-bottom-color: rgba(255,255,255,.09);
    background: rgba(15, 23, 37, .98);
    box-shadow: 0 8px 30px rgba(0,0,0,.16);
}

.photo-viewer__identity { display: flex !important; align-items: center !important; gap: 11px !important; }
.photo-viewer__identity > div { min-width: 0; display: grid; gap: 3px; }
.photo-viewer__file-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;
    color: #9db2ff !important;
    background: rgba(85,110,220,.18);
    font-size: 17px !important;
}
.photo-viewer__header strong { font-size: 13px; }
.photo-viewer__header span { font-size: 10px; }

.photo-viewer__tools button {
    min-width: 40px;
    height: 40px;
    border-color: rgba(255,255,255,.11);
    border-radius: 11px;
    background: rgba(255,255,255,.055);
}
.photo-viewer__metadata-toggle { min-width: 84px !important; }
.photo-viewer__tools button:hover { transform: translateY(-1px); background: rgba(255,255,255,.11); }

.photo-viewer__stage {
    background:
        radial-gradient(circle at center, rgba(41, 55, 78, .25), transparent 45%),
        #05080d;
}
.photo-image-viewport { padding: 24px; }
.photo-image-viewport img { border-radius: 3px; box-shadow: 0 28px 80px rgba(0,0,0,.38); }

.photo-viewer__navigation {
    width: 48px;
    height: 62px;
    border-color: rgba(255,255,255,.12);
    border-radius: 16px !important;
    background: rgba(15, 23, 36, .68);
    font-size: 38px;
}
.photo-viewer__navigation:hover:not(:disabled) { transform: translateY(-50%) scale(1.04); background: rgba(37,52,75,.86); }

.photo-viewer__loading {
    top: 19px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
}
.photo-viewer__loading .map-loading__spinner { width: 13px; height: 13px; border-color: rgba(255,255,255,.25); border-top-color: #fff; }

.photo-viewer__shortcut-hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 4;
    transform: translateX(-50%);
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    color: #76869c;
    background: rgba(9,14,22,.66);
    font-size: 9px;
    white-space: nowrap;
    backdrop-filter: blur(9px);
}

.photo-viewer__metadata {
    padding: 22px;
    border-left-color: rgba(255,255,255,.08);
    background: linear-gradient(180deg, #111a2a, #0e1624);
    transition: opacity 160ms ease, transform 200ms ease;
}
.photo-viewer--metadata-hidden .photo-viewer__metadata { opacity: 0; pointer-events: none; transform: translateX(30px); }
.photo-viewer__metadata-heading { padding: 2px 0 18px; }
.photo-viewer__metadata-heading > .status-pill { margin: 0 0 14px; }
.photo-viewer__metadata-heading h2 { margin: 0 0 5px; color: #f1f5fb; font-size: 19px; }
.photo-viewer__metadata-heading p { margin: 0; color: #7f8da1; font-size: 10.5px; line-height: 1.5; }
.photo-viewer__metadata dl { gap: 8px; }
.photo-viewer__metadata dl > div {
    gap: 6px;
    padding: 12px 13px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}
.photo-viewer__metadata dt { color: #77889f; }
.photo-viewer__metadata dd { color: #d9e1ed; }

.photo-panorama .pnlm-container { font-family: inherit; }
.photo-panorama .pnlm-controls-container { margin: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.20); }
.photo-panorama .pnlm-control { border-bottom-color: rgba(255,255,255,.10); background-color: rgba(18,27,41,.88); }

/* ===== Material viewer ===== */
.material-viewer { grid-template-rows: 70px 1fr; background: #080d16; }
.material-viewer header { padding: 0 17px 0 20px; border-bottom: 1px solid rgba(255,255,255,.09); background: #101827; }
.material-viewer__title { display: flex; align-items: center; gap: 11px; }
.material-viewer__title > div { display: grid !important; gap: 2px !important; }
.material-viewer__title small { color: #7f8ea3; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.material-viewer__title strong { color: #f0f4fa; }

/* ===== Legacy project details page ===== */
.client-workspace--project-details { max-width: 1380px; }
.client-project-detail-hero { border-radius: 24px; box-shadow: 0 20px 55px rgba(24,39,61,.10); }
.client-project-detail-hero__cover { border-radius: 18px; }

/* ===== Responsiveness for supported desktop widths ===== */
@media (max-width: 1380px) {
    :root { --viewer-panel: 390px; }
    .map-topbar__center { display: none; }
    .map-floating-button__label { display: none; }
    .photo-viewer { grid-template-columns: minmax(0, 1fr) 330px; }
}

@media (max-height: 760px) {
    .map-browser-hero { padding: 17px 18px; }
    .map-browser-hero h1 { font-size: 23px; }
    .map-browser-hero p { display: none; }
    .map-control-card { padding: 12px; }
    .map-visibility-option { min-height: 41px; }
    .map-visibility-option small { display: none; }
}


/* MVP20.6 — rozdzielenie panoram 360° od projektów portfolio */
.photo-pin:not(.photo-pin--360) {
    background: var(--viewer-green, #2d9b63);
}
.photo-pin--360 {
    background: #FF6900;
    box-shadow: 0 10px 24px rgba(230,126,34,.34), 0 0 0 3px rgba(255,255,255,.92);
}
.photo-pin--360 > span {
    color: #fff;
    background: #E65F00;
    border-color: #fff7ed;
}


/* MVP20.13 — pewna i czytelna nawigacja pomiędzy zdjęciami */
.photo-viewer__navigation {
    z-index: 60 !important;
    display: grid !important;
    place-items: center;
    width: 58px;
    height: 72px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    color: #fff;
    background: rgba(17, 27, 43, .88);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(255,255,255,.05);
    transition: transform 150ms ease, background 150ms ease, opacity 150ms ease;
}
.photo-viewer__navigation--previous { left: 22px !important; }
.photo-viewer__navigation--next { right: 22px !important; }
.photo-viewer__navigation:hover:not(:disabled) {
    background: rgba(55, 76, 112, .96);
    transform: translateY(-50%) scale(1.06);
}
.photo-viewer__navigation:focus-visible {
    outline: 3px solid rgba(99, 124, 255, .95);
    outline-offset: 3px;
}
.photo-viewer__navigation.is-loading {
    cursor: wait;
    opacity: .65;
}
.photo-viewer__navigation[hidden] { display: none !important; }
.photo-panorama,
.photo-image-viewport { position: relative; z-index: 1; }


/* MVP20.39 — widoczna nawigacja zdjęć i jaśniejsze kontrolki panoramy. */
.photo-viewer__navigation {
    z-index: 120 !important;
    color: #15243b !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid rgba(207, 217, 229, .95) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .20), 0 2px 8px rgba(18, 31, 50, .08) !important;
}

.photo-viewer__navigation--previous { left: 18px !important; }
.photo-viewer__navigation--next { right: 18px !important; }

.photo-viewer__navigation:hover:not(:disabled) {
    background: #ffffff !important;
    color: #0f1f37 !important;
}

.photo-viewer__navigation:disabled,
.photo-viewer__navigation.is-disabled {
    opacity: .45 !important;
    cursor: default;
}

.photo-panorama .pnlm-controls-container {
    margin: 14px;
    overflow: hidden;
    border: 1px solid rgba(214, 222, 232, .95);
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 16px 32px rgba(15, 23, 37, .16);
}

.photo-panorama .pnlm-control {
    border-bottom-color: rgba(224, 230, 238, .95);
    background-color: rgba(255,255,255,.98);
}

.photo-panorama .pnlm-control:hover {
    background-color: #f3f6fa;
}


/* MVP20.41 — strzałki są pozycjonowane względem całego viewera, poza canvasem panoramy. */
.photo-viewer {
    --photo-viewer-metadata-width: 370px;
}

.photo-viewer__navigation,
.photo-viewer__navigation[hidden] {
    position: fixed !important;
    top: 50% !important;
    z-index: 5000 !important;
    display: grid !important;
    place-items: center;
    transform: translateY(-50%) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.photo-viewer__navigation--previous {
    left: 18px !important;
    right: auto !important;
}

.photo-viewer__navigation--next {
    left: auto !important;
    right: calc(var(--photo-viewer-metadata-width) + 18px) !important;
}

.photo-viewer--metadata-hidden .photo-viewer__navigation--next {
    right: 18px !important;
}

.photo-viewer__navigation:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.06) !important;
}

@media (max-width: 1380px) {
    .photo-viewer {
        --photo-viewer-metadata-width: 330px;
    }
}

/* MVP20.42 — przełączalne warstwy DXF w panelu mapy. */
.resource-icon--map {
    color: #b04438;
    background: #fff0ed;
}

.viewer-dxf-list {
    display: grid;
    gap: 8px;
}

.viewer-dxf-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid #e0e7f0;
    border-radius: 13px;
    background: #fbfcfe;
}

.viewer-dxf-item__toggle {
    min-width: 0;
    display: grid;
    grid-template-columns: 18px 18px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    flex: 1;
    cursor: pointer;
}

.viewer-dxf-item__toggle input {
    width: 17px;
    height: 17px;
    accent-color: var(--ui-primary, #1F6FB2);
}

.viewer-dxf-item__swatch {
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--dxf-color, #e04f3f);
    box-shadow: 0 0 0 1px #ccd6e3;
}

.viewer-dxf-item__toggle > span:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.viewer-dxf-item strong,
.viewer-dxf-item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewer-dxf-item strong { color: #27374f; font-size: 12px; }
.viewer-dxf-item small { color: #77869a; font-size: 9.5px; }
.viewer-dxf-item__fit { flex: none; }


/* MVP20.50 — dopracowany podkład i kontrolki OpenLayers w EPSG:2180. */
#map .ol-viewport {
    background: #e8edf4;
}

#map .ol-control {
    position: absolute;
    padding: 0;
    border: 1px solid rgba(205, 216, 229, .9);
    border-radius: 13px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 28px rgba(17, 32, 53, .14);
    backdrop-filter: blur(10px);
}

#map .ol-zoom {
    top: 72px;
    right: 16px;
    left: auto;
    overflow: hidden;
}

#map .ol-zoom button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0;
    border: 0;
    border-radius: 0;
    color: #33425a;
    background: transparent;
    font: 500 22px/1 system-ui, sans-serif;
    cursor: pointer;
    transition: color .14s ease, background .14s ease;
}

#map .ol-zoom button + button {
    border-top: 1px solid #e0e7f0;
}

#map .ol-zoom button:hover,
#map .ol-zoom button:focus-visible {
    color: #1F6FB2;
    background: #EAF4FB;
    outline: none;
}

#map .ol-scale-line {
    right: 16px;
    bottom: 64px;
    left: auto;
    padding: 4px 8px;
    border: 1px solid rgba(205, 216, 229, .9);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 8px 18px rgba(17, 32, 53, .08);
    backdrop-filter: blur(8px);
}

#map .ol-scale-line-inner {
    margin: 0;
    border-color: #536176;
    color: #435168;
    font-size: 10px;
}

#map .ol-attribution {
    right: 8px;
    bottom: 8px;
    max-width: min(70%, 620px);
    padding: 3px 7px;
    border-radius: 8px;
    color: #5d6b7e;
    background: rgba(255, 255, 255, .78);
    box-shadow: none;
    font-size: 10px;
}

#map .ol-attribution ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#map .ol-attribution button {
    display: none;
}

#map canvas {
    image-rendering: auto;
}

/* MVP20.54 — odzyskiwanie brakujących kafelków podkładu mapowego. */
#map .map-tile-recovery {
    top: 164px;
    right: 16px;
    left: auto;
    display: flex;
    align-items: center;
    overflow: visible;
}

#map .map-tile-recovery__button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0;
    border: 0;
    border-radius: 12px;
    color: #33425a;
    background: transparent;
    font: 700 21px/1 system-ui, sans-serif;
    cursor: pointer;
    transition: color .14s ease, background .14s ease, transform .14s ease;
}

#map .map-tile-recovery__button:hover,
#map .map-tile-recovery__button:focus-visible {
    color: #1F6FB2;
    background: #EAF4FB;
    outline: none;
}

#map .map-tile-recovery__button:disabled {
    cursor: wait;
    opacity: .72;
}

#map .map-tile-recovery__status {
    position: absolute;
    top: 50%;
    right: 46px;
    width: max-content;
    max-width: min(300px, calc(100vw - 120px));
    padding: 8px 11px;
    border: 1px solid rgba(205, 216, 229, .95);
    border-radius: 10px;
    color: #46556b;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 10px 24px rgba(17, 32, 53, .14);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    transform: translateY(-50%);
    pointer-events: none;
}

#map .map-tile-recovery.has-warning .map-tile-recovery__button {
    color: #a64b18;
    background: #fff3e8;
}

#map .map-tile-recovery.has-warning .map-tile-recovery__status {
    border-color: #f2c49f;
    color: #87401a;
    background: #fff8f1;
}

#map .map-tile-recovery.is-success .map-tile-recovery__button {
    color: #26745a;
    background: #eaf8f2;
}

#map .map-tile-recovery.is-loading .map-tile-recovery__button > span {
    animation: map-tile-recovery-spin .8s linear infinite;
}

@keyframes map-tile-recovery-spin {
    to { transform: rotate(360deg); }
}


/* MVP20.71.5 — czytelne warstwy referencyjne trybu Hybryda */
.hybrid-transport-layer canvas {
    filter: contrast(1.45) saturate(.72) brightness(.82)
        drop-shadow(0 0 1px rgba(255, 255, 255, .82));
}

.hybrid-physical-names-layer canvas {
    filter: contrast(1.5) saturate(.8)
        drop-shadow(0 0 1px rgba(255, 255, 255, .92));
}

.hybrid-locality-names-layer canvas {
    filter: contrast(1.75) saturate(.72)
        drop-shadow(0 0 1px rgba(255, 255, 255, 1))
        drop-shadow(0 0 2px rgba(255, 255, 255, .96));
}