/* ==================================================
   Högerpanel
   ================================================== */

#infoPopup {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 42vw;
    box-sizing: border-box;
    padding: 0 24px 30px 24px;
    background: rgba(255, 255, 255, 0.98);
    border-left: 1px solid var(--ru-border);
    box-shadow: var(--ru-shadow-right);
    color: var(--ru-text);
    z-index: 1000;
    overflow-y: auto;
}


/* ==================================================
   Popup-rubrik
   ================================================== */

#popupTitle {
    margin: 0 -24px 24px -24px;
    padding: 22px 60px 18px 24px;
    background: var(--ru-primary);
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}


/* ==================================================
   Popup stängknapp
   ================================================== */

#popupClose {
    position: absolute;
    top: 11px;
    right: 13px;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 28px;
    font-weight: 300;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
}


    #popupClose:hover {
        background: rgba(255, 255, 255, 0.14);
    }


/* ==================================================
   Popup metadata
   ================================================== */

.popupRow {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ru-border-light);
}


    .popupRow:last-child {
        border-bottom: none;
    }


/* ==================================================
   Metadata-label
   ================================================== */

.popupLabel {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ru-primary);
}


/* ==================================================
   Metadata-värde
   ================================================== */

.popupValue {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ru-text);
    word-break: break-word;
}


/* ==================================================
   GUID / ID
   ================================================== */

.popupId {
    display: block;
    margin-top: 4px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ru-text-secondary);
    word-break: break-all;
}


/* ==================================================
   Saknad metadata
   ================================================== */

.popupEmpty {
    font-size: 14px;
    font-style: italic;
    color: var(--ru-text-muted);
}


/* ==================================================
   Scrollbars
   ================================================== */

#modelPanel::-webkit-scrollbar,
#infoPopup::-webkit-scrollbar {
    width: 10px;
}


#modelPanel::-webkit-scrollbar-track,
#infoPopup::-webkit-scrollbar-track {
    background: transparent;
}


#modelPanel::-webkit-scrollbar-thumb,
#infoPopup::-webkit-scrollbar-thumb {
    background: #c9cdcf;
    border: 3px solid transparent;
    background-clip: padding-box;
}


    #modelPanel::-webkit-scrollbar-thumb:hover,
    #infoPopup::-webkit-scrollbar-thumb:hover {
        background: #aeb4b7;
        border: 3px solid transparent;
        background-clip: padding-box;
    }

.popupGroupTitle {
    margin-top: 26px;
    margin-bottom: 14px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--ru-primary);
    color: var(--ru-primary);
    font-size: 14px;
    font-weight: 600;
}


    .popupGroupTitle:first-child {
        margin-top: 0;
    }


.popupDescription {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ru-text-muted);
}

/* ==================================================
   Responsivitet
   ================================================== */

@media (max-width: 900px) {
    #infoPopup {
        width: 320px;
        max-width: 45vw;
    }
}

@media (max-width: 650px) {
    #infoPopup {
        width: 280px;
        max-width: 50vw;
    }

    #popupTitle {
        font-size: 18px;
    }
}

/* ==================================================
   Property-panel expanders
   Samma visuella språk som selection tree:
   - inga kort/rundade ramar
   - platta rader
   - tunna avdelare
   - liten caret
   - magenta rubrik
   ================================================== */

.popupSection {
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--ru-border-light);
    border-radius: 0;
    background: transparent;
    overflow: visible;
}


.popupSection:first-child {
    border-top: 1px solid var(--ru-border-light);
}


.popupSectionHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 0;
    background: transparent;
    color: var(--ru-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    list-style: none;
    user-select: none;
}


.popupSectionHeader:hover {
    background: transparent;
}


.popupSectionHeader::-webkit-details-marker {
    display: none;
}


.popupSectionHeader::before {
    content: "▸";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex: 0 0 14px;
    color: var(--ru-text-muted);
    font-size: 10px;
    line-height: 1;
    transform-origin: center;
    transition: transform 0.12s ease;
}


.popupSection[open] > .popupSectionHeader::before {
    transform: rotate(90deg);
}


.popupSectionTitle {
    min-width: 0;
    flex: 1;
}


.popupSectionCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    box-sizing: border-box;
    padding: 0 6px;
    border: none;
    border-radius: 10px;
    background: var(--ru-border-light);
    color: var(--ru-text-secondary);
    font-size: 11px;
    font-weight: 600;
}


.popupSectionContent {
    margin: 0;
    padding: 6px 0 18px 22px;
    border: none;
    background: transparent;
}


.popupSectionContent > .popupRow:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}


/* ==================================================
   Dokument
   ================================================== */

.popupDocuments {
    display: flex;
    flex-direction: column;
    gap: 0;
}


.popupDocumentItem {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    gap: 9px;
    align-items: center;
    padding: 9px 0;
    border: none;
    border-bottom: 1px solid var(--ru-border-light);
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
}


.popupDocumentItem:last-child {
    border-bottom: none;
}


.popupDocumentItem:hover .popupDocumentName {
    color: var(--ru-primary);
    text-decoration: underline;
}


.popupDocumentIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 2px;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}


.popupDocumentIcon--pdf {
    background: #d93a32;
}


.popupDocumentIcon--word {
    background: #2b579a;
}


.popupDocumentIcon--excel {
    background: #217346;
}


.popupDocumentIcon--file {
    background: #6f777b;
}


.popupDocumentText {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


.popupDocumentName {
    overflow: hidden;
    color: var(--ru-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.popupDocumentDescription {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 2px;
    color: var(--ru-text-muted);
    font-size: 11px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.popupDocumentOpen {
    color: var(--ru-text-muted);
    font-size: 14px;
}


/* ==================================================
   Återställd färghierarki i properties-panelen

   Svart   = huvudsektioner / expanders
   Magenta = metadata-grupper och property-labels
   Blått   = prov-/borrhålsrubriker och aktiv teknisk detalj
   ================================================== */

#infoPopup .popupSectionHeader {
    color: var(--ru-text);
}


#infoPopup .popupSectionHeader::before {
    color: var(--ru-text-muted);
}


/* Metadata: gruppnivån behåller Bjerking-magenta */
#infoPopup .popupGroupTitle {
    color: var(--ru-primary);
    border-bottom-color: var(--ru-primary);
}


#infoPopup .popupLabel {
    color: var(--ru-primary);
}


/* Provprofil: samma mörkblå ton som före dokumentstödet */
#infoPopup .boreholeSectionTitle,
#infoPopup .boreholeDetailsTitle {
    color: #1e3a5f;
}


/* Provrubriken får lite tydligare hierarki utan att bli skrikig */
#infoPopup .boreholeDetailsTitle {
    font-weight: 600;
}


/* Vanliga texter och dokumentnamn förblir svarta */
#infoPopup .popupValue,
#infoPopup .popupDocumentName,
#infoPopup .boreholeSampleMeta {
    color: var(--ru-text);
}


/* Dokumentlänken får endast magenta på hover, inte som grundfärg */
#infoPopup .popupDocumentItem:hover .popupDocumentName {
    color: var(--ru-primary);
}


/* ==================================================
   Properties-panel: linjera med selection tree
   ==================================================

   Samma grundprincip som vänsterpanelen:
   - ingen extra yttre 24 px-marginal runt trädet
   - 44 px höga expander-rader
   - 14 px horisontell padding på huvudrader
   - lättgrå bakgrund på expanderat innehåll
   - innehållet indraget likt modelTreeChildren
   ================================================== */


/* Högerpanelen ska använda hela bredden, precis som modellträdet */
#infoPopup {
    padding:
        0
        0
        30px
        0;
}


/* Headern behåller samma visuella höjd men behöver inte längre
   kompensera för 24 px yttre padding */
#popupTitle {
    margin:
        0
        0
        10px
        0;

    padding:
        22px
        60px
        18px
        22px;
}


/* Huvudsektion = samma typ av platt rad som modelTreeHeader */
#infoPopup .popupSection {
    margin: 0;
    border-bottom:
        1px solid
        var(--ru-border-light);
}


#infoPopup .popupSection:first-child {
    border-top: none;
}


#infoPopup .popupSectionHeader {
    min-height: 44px;

    padding:
        0
        14px;

    box-sizing: border-box;

    background:
        var(--ru-surface);

    color:
        var(--ru-text);
}


#infoPopup .popupSectionHeader:hover {
    background:
        var(--ru-surface-soft);
}


/* Caret får samma magenta accent som expand-knappen i vänsterträdet */
#infoPopup .popupSectionHeader::before {
    width: 22px;
    flex-basis: 22px;

    color:
        var(--ru-primary);

    font-size: 11px;
}


/* Expanderat innehåll motsvarar .modelTreeChildren */
#infoPopup .popupSection[open]
> .popupSectionContent {
    margin: 0;

    padding:
        12px
        14px
        18px
        38px;

    background:
        var(--ru-surface-soft);

    border-top:
        1px solid
        var(--ru-border-light);
}


/* Håll själva summary-raden vit även när innehållet är öppet */
#infoPopup .popupSection[open]
> .popupSectionHeader {
    background:
        var(--ru-surface);
}


/* Metadata-rader behöver inte den gamla stora kort-liknande luften */
#infoPopup .popupRow {
    margin-bottom: 14px;
    padding-bottom: 10px;
}


#infoPopup .popupRow:last-child {
    margin-bottom: 0;
}


/* När borrhålsvyn ligger inne i en expander ska den inte skapa
   ytterligare ett eget sektionsavstånd eller en extra linje */
#infoPopup .popupSectionContent
> .boreholePanel {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}


/* Provprofilen ska kunna använda den större tillgängliga bredden */
#infoPopup .boreholeProfileLayout,
#infoPopup .boreholeVisualAndDetails,
#infoPopup .boreholeDetails {
    max-width: 100%;
}


/* Dokumentdelen följer samma indrag som övrigt expanderinnehåll */
#infoPopup .popupDocuments {
    margin: 0;
}


/* Lite kompaktare dokumentrader, i nivå med feature-raderna */
#infoPopup .popupDocumentItem {
    padding:
        8px
        0;
}


/* På smalare skärmar behåller vi tree-layouten */
@media (max-width: 650px) {

    #infoPopup .popupSection[open]
    > .popupSectionContent {
        padding-left: 30px;
    }
}


/* ==================================================
   Platsfoton
   ================================================== */

#infoPopup .popupPhoto {
    padding:
        0
        14px
        14px
        14px;

    background:
        var(--ru-surface);
}


#infoPopup .popupPhoto a {
    display: block;
}


#infoPopup .popupPhotoImage {
    display: block;

    width: 100%;
    max-height: 300px;

    object-fit: contain;

    background: #111111;

    border:
        1px solid
        var(--ru-border);

    box-sizing: border-box;
}


/* ==================================================
   Panorama-popup
   ================================================== */

.panoramaOverlay {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(3px);
}


.panoramaDialog {
    width: min(1400px, 96vw);
    height: min(860px, 92vh);

    display: grid;
    grid-template-rows: auto 1fr auto;

    overflow: hidden;

    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}


.panoramaHeader {
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 0 12px 0 18px;

    background: #0F3B5A;
    color: #FFFFFF;
}


.panoramaTitleWrap {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 10px;
}


.panoramaTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 16px;
    font-weight: 650;
}


.panoramaBadge {
    flex: 0 0 auto;

    padding: 3px 8px;

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}


.panoramaClose {
    width: 40px;
    height: 40px;

    flex: 0 0 auto;

    border: 0;
    background: transparent;
    color: #FFFFFF;

    font-size: 31px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
}


.panoramaClose:hover {
    background: rgba(255, 255, 255, 0.12);
}


.panoramaViewport {
    position: relative;
    min-height: 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #252525 0%,
            #111111 70%
        );

    cursor: grab;
    touch-action: none;
    user-select: none;
}


.panoramaViewport.isDragging {
    cursor: grabbing;
}


.panoramaStage {
    position: absolute;
    left: 50%;
    top: 50%;

    display: flex;
    align-items: center;

    transform-origin: center center;
    will-change: transform;
}


.panoramaImage {
    display: block;
    flex: 0 0 auto;

    max-width: none;
    max-height: none;

    pointer-events: none;
    user-select: none;

    transform-origin: center center;
    will-change: transform;
}


.panoramaFooter {
    min-height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 6px 14px;

    background: #171717;
    color: rgba(255, 255, 255, 0.72);

    font-size: 12px;
    text-align: center;
}


@media (max-width: 700px) {

    .panoramaOverlay {
        padding: 0;
    }


    .panoramaDialog {
        width: 100vw;
        height: 100vh;
    }
}


.panoramaThreeCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.panoramaLoading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: #111111;
    font-size: 14px;
}