/*
 * Meteolab 2027 – meteorološki modeli V2
 * Ohranja obstoječi React viewer, vendar ga umesti v običajno širino Meteolab strani.
 */

.ml-models-page,
.ml-models-page #root,
.ml-models-page .ml-model-viewer-card {
    color-scheme: light;
}

.ml-model-viewer-section {
    padding-top: 0;
}

.ml-model-viewer-card {
    overflow: hidden;
    padding: 18px;
    background: #fff;
}

.ml-models-page #root {
    width: 100%;
    min-width: 0;
    background: #fff !important;
    color: #0f172a !important;
    font-family: inherit !important;
}

/* Viewer ostane znotraj standardne širine strani. */
.ml-models-page #root .max-w-3xl,
.ml-models-page #root .max-w-\[1000px\] {
    width: 100% !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ml-models-page #root .max-h-\[80\%\] {
    max-height: none !important;
}

/* Glavni elementi viewerja so centrirani. */
.ml-models-page #root > div,
.ml-models-page #root section {
    margin-left: auto;
    margin-right: auto;
}

.ml-models-page #root .flex.flex-wrap {
    justify-content: center !important;
}

.ml-models-page #root .justify-start,
.ml-models-page #root .sm\:justify-start {
    justify-content: center !important;
}

/* Dropdown kontrole. */
.ml-models-page #root select,
.ml-models-page #root .select {
    color-scheme: light !important;
    min-height: 42px;
    border: 1px solid rgba(15, 23, 42, .16) !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    color: #0f172a !important;
    box-shadow: none !important;
}

.ml-models-page #root select option,
.ml-models-page #root select optgroup {
    background: #fff !important;
    color: #0f172a !important;
}

.ml-models-page #root .label,
.ml-models-page #root .label-text,
.ml-models-page #root .text-slate-900 {
    color: #0f172a !important;
}

.ml-models-page #root .text-slate-500 {
    color: #64748b !important;
}

.ml-models-page #root button,
.ml-models-page #root .btn {
    border: 1px solid rgba(21, 130, 199, .22) !important;
    border-radius: 10px !important;
    background: #eaf5fc !important;
    color: #0d5f9c !important;
    box-shadow: none !important;
}

.ml-models-page #root button:hover,
.ml-models-page #root .btn:hover {
    border-color: #002050 !important;
    background: #dceffc !important;
}

/* Slika naj lepo zapolni viewer, vendar nikoli ne štrli iz strani. */
.ml-models-page #root .ml-model-image-viewport {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    background: #fff !important;
    text-align: center;
}

.ml-models-page #root img[src*="/model/"] {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: pan-y;
}

/* Odstranimo sivo ozadje levo in desno ob karti. */
.ml-models-page #root .bg-slate-100,
.ml-models-page #root .bg-slate-200,
.ml-models-page #root [class*="bg-slate"] {
    background-color: #fff !important;
}

/* Drsnik in časovni koraki naj bodo centrirani. */
.ml-models-page #root .range-slider {
    width: min(980px, calc(100% - 24px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ml-models-page #root .steps,
.ml-models-page #root .steps-horizontal {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}

.ml-models-page #root .scale-values {
    color: #64748b !important;
}

/* Sporočilo o nalaganju ostane diskretno. */
.ml-models-page #root .ml-model-image-viewport.is-loading::after {
    content: "Nalagam karto …";
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
    padding: 7px 11px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #475569;
    font-size: .72rem;
    font-weight: 750;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
}

.ml-models-page #root .ml-model-swipe-hint {
    display: none;
}

/* Sistemskega dark moda ne prenesemo v viewer. */
@media (prefers-color-scheme: dark) {
    .ml-models-page #root,
    .ml-models-page #root section,
    .ml-models-page #root div,
    .ml-models-page #root label {
        --fallback-b1: #ffffff;
        --fallback-b2: #f1f5f9;
        --fallback-b3: #e2e8f0;
        --fallback-bc: #0f172a;
        --b1: 100% 0 0;
        --b2: 96% 0 0;
        --b3: 92% 0 0;
        --bc: 22% .03 256;
    }

    .ml-models-page #root,
    .ml-models-page #root section,
    .ml-models-page #root .ml-model-image-viewport {
        background-color: #fff !important;
        color: #0f172a !important;
    }

    .ml-models-page #root select,
    .ml-models-page #root .select,
    .ml-models-page #root select option,
    .ml-models-page #root select optgroup {
        color-scheme: light !important;
        background-color: #fff !important;
        color: #0f172a !important;
    }
}

@media (max-width: 900px) {
    .ml-model-viewer-card {
        padding: 12px;
    }

    .ml-models-page #root .flex.flex-wrap {
        gap: 8px !important;
    }

    .ml-models-page #root select,
    .ml-models-page #root .select {
        min-width: min(100%, 210px);
    }
}

@media (max-width: 700px) {
    .ml-model-viewer-card {
        padding: 8px;
    }

    .ml-models-page #root img[src*="/model/"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ml-models-page #root .ml-model-image-viewport {
        overflow: hidden;
        border-radius: 9px;
    }

    .ml-models-page #root select,
    .ml-models-page #root .select {
        width: 100% !important;
        min-width: 0 !important;
    }

    .ml-models-page #root .range-slider {
        width: calc(100% - 12px) !important;
    }
}

/* ---------------------------------------------------------
   Natančno centriranje dropdown menijev
   Dejanska React struktura:
   <div class="flex items-center gap-3 top pt-2 asoverflowx">...</div>
   --------------------------------------------------------- */

.ml-models-page #root .flex.items-center.gap-3.top.pt-2.asoverflowx {
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

.ml-models-page #root .flex.items-center.gap-3.top.pt-2.asoverflowx > .form-control {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Širine posameznih kontrol */
.ml-models-page #root .flex.items-center.gap-3.top.pt-2.asoverflowx > .form-control:nth-child(1) {
    width: 120px !important;
}

.ml-models-page #root .flex.items-center.gap-3.top.pt-2.asoverflowx > .form-control:nth-child(2) {
    width: 78px !important;
}

.ml-models-page #root .flex.items-center.gap-3.top.pt-2.asoverflowx > .form-control:nth-child(3) {
    width: 250px !important;
}

.ml-models-page #root .flex.items-center.gap-3.top.pt-2.asoverflowx > .form-control:nth-child(4) {
    width: 120px !important;
}

.ml-models-page #root .flex.items-center.gap-3.top.pt-2.asoverflowx select {
    width: 100% !important;
}

/* Mobilni prikaz – urejen enoten blok kontrol */
@media (max-width: 700px) {
    .ml-models-page #root .flex.items-center.gap-3.top.pt-2.asoverflowx {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: min(320px, 100%) !important;
        max-width: 320px !important;
        margin: 18px auto 22px !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        overflow: visible !important;
    }

    .ml-models-page #root .flex.items-center.gap-3.top.pt-2.asoverflowx > label.form-control {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .ml-models-page #root .flex.items-center.gap-3.top.pt-2.asoverflowx > label.form-control .label {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 2px 6px !important;
        text-align: left !important;
    }

    .ml-models-page #root .flex.items-center.gap-3.top.pt-2.asoverflowx > label.form-control .label-text {
        display: block !important;
        width: 100% !important;
        color: #0f172a !important;
        font-size: .82rem !important;
        font-weight: 750 !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    .ml-models-page #root .flex.items-center.gap-3.top.pt-2.asoverflowx > label.form-control select {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
        padding-left: 14px !important;
        padding-right: 38px !important;
        border-radius: 10px !important;
        font-size: .9rem !important;
    }
}