/* 3D Mimic sahnesi — /scada/mimic3d sayfasina ozel.
   Eski 2B Mimic sayfasinin stillerine dokunmaz. */

/* Sayfa dikey flex kolon: filtre satiri dogal yuksekligini alir,
   sahne kalan tum alani kaplar. Boylece yukseklik tahmin edilmez. */
/* MudMainContent zaten appbar yuksekligi kadar padding veriyor, MudContainer'da mt-2 (8px) var.
   Kalan yuksekligin tamami bu sayfaya ayrilir; sadece kucuk bir tasma payi birakilir. */
.mimic3d-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--mud-appbar-height, 64px) - 1.25rem);
    min-height: 32rem;
}

.mimic3d-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.mimic3d-body-scroll {
    overflow-y: auto;
}

.mimic3d-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 1px solid var(--mud-palette-lines-default, #cbd5e1);
    border-radius: 8px;
    overflow: hidden;
    background: #f6f8fb;
}

/* --- Acilir panel: cizim alaninin UZERINDE, sagda sabit ---
   Yalnizca acik olan panel DOM'a basildigi icin acik/kapali durum stili gerekmez;
   MudBlazor'un drawer ic sinif adlarina da bagimlilik yoktur. */
.mimic3d-drawer {
    position: fixed;
    top: var(--mud-appbar-height, 64px);
    right: 0;
    bottom: 0;
    height: calc(100vh - var(--mud-appbar-height, 64px));
    width: 400px;
    max-width: 92vw;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0;
    box-shadow: -6px 0 22px rgba(15, 23, 42, 0.22);
}

.mimic3d-drawer-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default, #cbd5e1);
}

.topology-host {
    cursor: grab;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    touch-action: none;
}

.topology-host:active {
    cursor: grabbing;
}

.topology-host.is-connecting {
    cursor: crosshair;
}

.topology-host.is-panning {
    cursor: move;
}

.topology-host.is-orbiting {
    cursor: grab;
}

.topology-host canvas {
    display: block;
    height: 100%;
    width: 100%;
}

.topology-label-layer {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 3;
}

.topology-label {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #0f172a;
    font-size: 0.75rem;
    font-weight: 700;
    left: 0;
    padding: 0.2rem 0.45rem;
    position: absolute;
    top: 0;
    white-space: nowrap;
}

/* Cift tiklamayla yerinde duzenlenen etiket */
.topology-label-editing {
    outline: 2px solid var(--mud-palette-primary, #594ae2);
    outline-offset: 1px;
    background: #ffffff;
    color: #0f172a;
    cursor: text;
    min-width: 3rem;
    z-index: 5;
}

/* WarningLabel: cihaz adinin altinda kirmizi uyari aciklamasi (hover'da gorunur) */
.topology-label.has-warning {
    white-space: normal;
    max-width: 16rem;
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
}

.topology-label-name {
    display: block;
    font-weight: 700;
}

.topology-label-warning {
    display: block;
    margin-top: 0.15rem;
    padding-top: 0.15rem;
    border-top: 1px dashed rgba(239, 68, 68, 0.5);
    color: #b91c1c;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Veri etiketi (DataWatcher) yerinde ad/birim duzenleme alanlari */
.runtime-data-editing {
    pointer-events: auto;
    z-index: 5;
}

.runtime-data-edit-title,
.runtime-data-edit-unit {
    border: none;
    outline: 1px solid var(--mud-palette-primary, #594ae2);
    border-radius: 3px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    padding: 1px 3px;
    text-align: center;
    min-width: 2.5rem;
    max-width: 8rem;
}

.runtime-data-edit-unit {
    max-width: 4rem;
    color: #475569;
}

.runtime-data-label {
    align-items: center;
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.9);
    border-width: 2px;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.2), 0 0 18px rgba(148, 163, 184, 0.38), 0 10px 28px rgba(15, 23, 42, 0.18);
    color: #ffffff;
    display: grid;
    gap: 0.08rem;
    min-width: 7.2rem;
    padding: 0.48rem 0.6rem;
    transform-origin: 50% 100%;
}

.runtime-data-title,
.runtime-data-unit {
    color: #cbd5e1;
    font-size: 0.66rem;
    font-weight: 700;
}

.runtime-data-value {
    font-size: 1rem;
    font-weight: 800;
}

.runtime-data-label.ok {
    border-color: rgba(34, 197, 94, 0.8);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.22), 0 0 22px rgba(34, 197, 94, 0.45), 0 10px 28px rgba(15, 23, 42, 0.18);
}

.runtime-data-label.warn {
    border-color: rgba(245, 158, 11, 0.9);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.24), 0 0 24px rgba(245, 158, 11, 0.5), 0 10px 28px rgba(15, 23, 42, 0.18);
}

.runtime-data-label.alarm {
    border-color: rgba(239, 68, 68, 0.95);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.28), 0 0 28px rgba(239, 68, 68, 0.58), 0 10px 28px rgba(15, 23, 42, 0.18);
}

.topology-label.ok {
    border-color: rgba(34, 197, 94, 0.55);
}

.topology-label.warn {
    border-color: rgba(245, 158, 11, 0.65);
}

.topology-label.alarm {
    border-color: rgba(239, 68, 68, 0.72);
}

/* Acilir cekmece icindeki ekipman paleti — eski Mimic'teki ikon + isim duzeni */
.mimic3d-palette {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.5rem;
    overflow-y: auto;
}

.mimic3d-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 0.5rem 0.3rem;
    border: 1px solid var(--mud-palette-lines-default, #cbd5e1);
    border-radius: 6px;
    background: var(--mud-palette-surface, #ffffff);
    color: var(--mud-palette-text-primary, #0f172a);
    cursor: grab;
    font-size: 0.68rem;
    line-height: 1.15;
    text-align: center;
}

.mimic3d-tile:hover {
    border-color: var(--mud-palette-primary, #594ae2);
    box-shadow: 0 0 0 2px rgba(89, 74, 226, 0.14);
}

.mimic3d-tile:active {
    cursor: grabbing;
}

/* Eski mimic'teki .nodeStyle ile ayni olcu */
.mimic3d-tile img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    pointer-events: none;
}

.mimic3d-tile span {
    font-size: 0.66rem;
    word-break: break-word;
}

/* Cekmece govdesi kalan alani kaplasin ve kendi icinde kaysin */
.mimic3d-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Sol dikey ikon rayi (eski Mimic ile ayni mantik) */
.mimic3d-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.mimic3d-readout {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
    padding: 0.45rem 0.65rem;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.72rem;
    color: #0f172a;
    z-index: 4;
}

.mimic3d-toolbar {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    right: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    z-index: 4;
    padding: 0.25rem 0.4rem;
    border-radius: 8px;
    /* Aciik temada da butonlar tuval uzerinde okunur kalsin */
    background: rgba(248, 250, 252, 0.86);
    border: 1px solid rgba(203, 213, 225, 0.9);
}

/* Toolbar icindeki modul (servis) radio grubu: ikon butonlarin yaninda kompakt, tek satir */
.mimic3d-module-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
}

.mimic3d-module-group .mud-radio {
    margin-right: 0.15rem;
}

.mimic3d-module-option {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Modul renkleri (ikon + yazi): dogal gaz kirmizi, elektrik sari, su mavi */
.mimic3d-module-option.gas,
.mimic3d-module-option.gas .mud-icon-root {
    color: #e53935 !important;
}

.mimic3d-module-option.electric,
.mimic3d-module-option.electric .mud-icon-root {
    color: #eab308 !important;
}

.mimic3d-module-option.water,
.mimic3d-module-option.water .mud-icon-root {
    color: #1e88e5 !important;
}

/* Koyu temada okunur tonlar; .mimic3d-toolbar.dark'in genel beyaz zorlamasini gecersiz kilar */
.mimic3d-toolbar.dark .mimic3d-module-option.gas,
.mimic3d-toolbar.dark .mimic3d-module-option.gas .mud-icon-root {
    color: #f87171 !important;
}

.mimic3d-toolbar.dark .mimic3d-module-option.electric,
.mimic3d-toolbar.dark .mimic3d-module-option.electric .mud-icon-root {
    color: #facc15 !important;
}

.mimic3d-toolbar.dark .mimic3d-module-option.water,
.mimic3d-toolbar.dark .mimic3d-module-option.water .mud-icon-root {
    color: #60a5fa !important;
}

/* --- KOYU TEMA ---
   Sahne koyuya gecince tuval uzerindeki ikon butonlar siyah kaldigi icin
   goruunmez oluyordu; burada acik renge cevriliyor. */
.mimic3d-stage.dark {
    background: #050505;
}

.mimic3d-toolbar.dark {
    background: rgba(17, 24, 32, 0.82);
    border-color: rgba(148, 163, 184, 0.35);
}

.mimic3d-toolbar.dark .mud-icon-button,
.mimic3d-toolbar.dark .mud-button-root,
.mimic3d-toolbar.dark .mud-icon-root,
.mimic3d-toolbar.dark .mud-button-label {
    color: #e6ebef !important;
}

.mimic3d-toolbar.dark .mud-icon-button svg,
.mimic3d-toolbar.dark .mud-button-root svg {
    fill: currentColor !important;
}

.mimic3d-toolbar.dark .mud-icon-button:hover,
.mimic3d-toolbar.dark .mud-button-root:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
}

/* Secili arac butonu koyu temada da belirgin kalsin */
.mimic3d-toolbar.dark .mud-button-root.mud-button-filled-primary,
.mimic3d-toolbar.dark .mud-button-root.mud-primary-text {
    color: #7fb2ff !important;
}

.mimic3d-readout.dark {
    background: rgba(17, 24, 32, 0.85);
    border-color: rgba(148, 163, 184, 0.35);
    color: #e6ebef;
}