/* ============================================
   FOMS BMS Demo — Mapa Mediów (media meters map)
   Widok mapy licznikow mediow — strefa RH5/RH6
   Koordynaty z Liczniki_O111_WS1_DEMO.px (1762×955)
   ============================================ */

/* Breadcrumb musi byc nad kanwa mapy */
#breadcrumb.bc-pomiar { z-index: 30; position: relative; }

/* Kanwa mapy — pelny PX CanvasPane (1762×955), lekko zmniejszona */
.mm-map-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 1762px;
    height: 955px;
    overflow: hidden;
    background: #141414;
    transform: scale(0.93);
    transform-origin: left top;
}

/* Tlo — plan hali (PX: layout 110,70,1130,875 fitRatio) */
.mm-floor-img {
    position: absolute;
    left: 110px;
    top: 70px;
    width: 1130px;
    height: 875px;
    object-fit: contain;
    opacity: 0.85;
    pointer-events: none;
}

/* ============================================
   SVG OVERLAY — linie polaczen i punkty
   ============================================ */
.mm-connections-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.mm-conn-line {
    stroke: rgba(105, 254, 95, 0.2);   /* PX: #3369fe5f (AARRGGBB) */
    stroke-width: 4;
    fill: none;
}

.mm-conn-point {
    fill: rgba(38, 38, 38, 0.8);       /* PX: #cc262626 */
    stroke: #69fe5f;
    stroke-width: 2;
}

/* Linie i punkty przylaczeniowe wody (PX: #4d5fc1fe = skyblue 30% alpha) */
.mm-conn-line-water {
    stroke: rgba(95, 193, 254, 0.3);
    stroke-width: 4;
    fill: none;
}

.mm-conn-point-water {
    fill: rgba(38, 38, 38, 0.8);
    stroke: #5fc1fe;
    stroke-width: 2;
}

/* ============================================
   TABLICE ROZDZIELCZE (RH5, RH6)
   ============================================ */
.mm-board {
    position: absolute;
    z-index: 10;
}

/* --- Naglowek tablicy (ikona blyskawicy + nazwa) --- */
.mm-board-header {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 25px;
}

.mm-bolt-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

.mm-board-name {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: white;
    height: 25px;
    line-height: 25px;
    padding: 0 5px;
}

/* ============================================
   RH5 — rozdzielnica lewa (PX: 240,700)
   Include: OSW.px / HVAC.px (130×45, 2-liniowy uklad)
   ============================================ */
#board-rh3,
#board-rh5 {
    left: 240px;
    top: 700px;
}

.mm-rh5-name {
    background: rgba(38, 38, 38, 0.8);   /* PX: #cc262626 */
}

/* Wiersz RH5 — 130×45, dwie linie */
.mm-rh5-row {
    width: 130px;
    height: 45px;
    background: rgba(38, 38, 38, 0.8);   /* PX: #cc262626 */
    margin-top: 5px;
}

.mm-board-header + .mm-rh5-row {
    margin-top: 2px;
}

/* Gorna linia: etykieta (50px) + moc kW (75px) = 125px */
.mm-rh5-top {
    display: flex;
    align-items: baseline;
    height: 23px;
    line-height: 23px;
}

.mm-rh5-top .mm-meter-label {
    width: 50px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #b0aeae;
    text-align: left;
    padding-left: 3px;
}

.mm-rh5-top .mm-meter-kw {
    width: 75px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: white;
    text-align: right;
    padding-right: 5px;
}

/* Dolna linia: energia kWh (90px, przesunieta w prawo) */
.mm-rh5-bottom {
    height: 22px;
    line-height: 22px;
    padding-left: 35px;
}

.mm-rh5-bottom .mm-meter-kwh {
    display: block;
    width: 90px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 15px;            /* PX: adaptacyjny 15-16px dla wartosci >1000 */
    color: white;
    text-align: right;
    padding-right: 5px;
}

/* ============================================
   RH6 — rozdzielnica prawa (PX: 800,690)
   Include: LICZNIK_RG.px (250×25, 1-liniowy grid)
   ============================================ */
#board-rh4,
#board-rh6 {
    left: 800px;
    top: 690px;
}

.mm-rh6-name {
    background: rgba(38, 38, 38, 0.6);   /* PX: #99262626 */
}

/* Wiersz RH6 — 250×25, grid: etykieta|moc|energia */
.mm-rh6-row {
    display: grid;
    grid-template-columns: 80px 75px 95px;    /* PX: label 0-60, kW 80-155, kWh 150-240 */
    width: 250px;
    height: 25px;
    align-items: center;
    background: rgba(38, 38, 38, 0.8);   /* PX: #cc262626 */
    margin-top: 5px;
}

.mm-board-header + .mm-rh6-row {
    margin-top: 2px;
}

.mm-rh6-row .mm-meter-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #b0aeae;
    text-align: left;
    padding-left: 8px;         /* PX: padding 0 5 0 8 */
}

.mm-rh6-row .mm-meter-kw {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: white;
    text-align: right;
    padding-right: 5px;
}

.mm-rh6-row .mm-meter-kwh {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 15px;            /* PX: adaptacyjny 15px dla wartosci >1000 */
    color: white;
    text-align: right;
    padding-right: 5px;
}

/* ============================================
   LICZNIKI WODY I GAZU (ikony + wartosci)
   ============================================ */
.mm-water-meter,
.mm-gas-meter {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 10;
    pointer-events: none;
}

.mm-media-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

.mm-media-val {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: white;
    white-space: nowrap;
    padding: 0 5px;
    line-height: 25px;
    height: 25px;
}

.mm-water-val {
    background: rgba(38, 38, 38, 0.9);   /* PX: #e6262626 */
}

.mm-gas-val {
    background: rgba(38, 38, 38, 0.8);   /* PX: #cc262626 */
}

/* ============================================
   MINIMAPA — poza skalowanym kontenerem,
   przypieta do prawego-gornego rogu main-content
   ============================================ */
.mm-minimap {
    position: absolute;
    right: 10px;
    top: 5px;
    width: 460px;
    height: 322px;              /* ratio 1120/785 = 1.427 */
    background: #141414;
    border: 5px solid #2f2f2f;
    box-sizing: border-box;
    z-index: 20;
    overflow: hidden;
}

.mm-minimap-svg {
    width: 100%;
    height: 100%;
}

/* Strefy — niewidoczne, biala obramowka po najechaniu (jak pomiar.html) */
.mm-zone {
    fill: transparent;
    stroke: transparent;
    stroke-width: 2;
    cursor: pointer;
    transition: stroke 0.15s ease;
}

.mm-zone:hover {
    stroke: rgba(255, 255, 255, 0.5);
}

/* Aktywna strefa — zielone wypelnienie jak w pomiar.html */
.mm-zone-active {
    fill: rgba(105, 254, 95, 0.22);
    stroke: rgba(105, 254, 95, 0.4);
    stroke-width: 2;
    stroke-dasharray: 8 2;
    stroke-linecap: square;
    pointer-events: none;
}

/* ============================================
   WIDOK PRAWY DOLNY — Liczniki_O11_WS1_DEMO.px
   Nadpisanie pozycji dla .mm-pd
   ============================================ */
.mm-pd .mm-floor-img {
    left: 120px;          /* PX: 120 (vs 110 w O111) */
}

.mm-pd #board-rh5 {
    left: 410px;
    top: 700px;
}

.mm-pd #board-rh6 {
    left: 855px;
    top: 630px;
}

/* ============================================
   WIDOK LEWY DOLNY — Liczniki_O1_WS1_DEMO.px
   Nadpisanie pozycji dla .mm-ld
   ============================================ */
.mm-ld #board-rh1 {
    left: 400px;          /* PX: bolt 400,560 */
    top: 560px;
}

.mm-ld #board-rh2 {
    left: 980px;          /* PX: bolt 980,500 */
    top: 500px;
}

/* ============================================
   WIDOK LEWY GORNY — Liczniki_K1_WS_DEMO.px
   Tablica RG2: bolt(360,130), 15 wierszy od y=165
   ============================================ */
.mm-gl #board-rg2 {
    left: 360px;
    top: 130px;
}

.mm-rg2-name {
    background: rgba(38, 38, 38, 0.6);
}

/* RG2 ma dluzsze etykiety (OSW ZEWN) — poszerzona kolumna label */
#board-rg2 .mm-rh6-row {
    grid-template-columns: 100px 75px 95px;
    width: 270px;
}

/* ============================================
   WIDOK PRAWY GORNY — Liczniki_K111_WS_DEMO.px
   Inny offset podkladu: left=195 (vs 110)
   ============================================ */
.mm-gp .mm-floor-img {
    left: 195px;
}

/* ============================================
   WIDOK DOLNY SRODEK — Liczniki_O11_WS1_DEMO.px
   Nadpisanie pozycji dla .mm-ds
   ============================================ */
.mm-ds #board-rh3 {
    left: 400px;
    top: 700px;
}

.mm-ds #board-rh4 {
    left: 960px;
    top: 700px;
}

/* Linie i punkty przylaczeniowe gazu (PX: #4dfef95f = yellow 30% alpha) */
.mm-conn-line-gas {
    stroke: rgba(254, 249, 95, 0.3);
    stroke-width: 4;
    fill: none;
}

.mm-conn-point-gas {
    fill: rgba(38, 38, 38, 0.8);
    stroke: #fef95f;
    stroke-width: 2;
}