/* ==========================================================================
   USER.CSS - PKSS Teeman mukautukset 
   ========================================================================== */

/* 1. YLEISET SÄÄDÖT JA PIILOTUKSET */
table.gsuser td {
    max-width: 220px;
}

/* Piilotetaan näkymäasetukset ja turhat logot */
.network_selector, 
.outage_map .options_icon,
.outage_map .company_info_container .company_logo {
    display: none !important;
}

/* 2. PIENENNÄ IKKUNA -PAINIKKEEN VÄRI */
.outage_map .outage-btn-yellow {
    color: #ffffff !important;
    fill: #ffffff !important;
    background-color: #009483 !important;
    border-color: #009483 !important;
}

/* 3. VÄLILEHDET (Haku ja Tilanne) */

/* Ei-aktiivinen välilehti: Valkoinen tausta, musta teksti */
#tabs .ui-tabs-nav li {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d1d1 !important;
}

#tabs .ui-tabs-nav li a, 
#tabs .ui-tabs-nav li a .tab_header_text span {
    color: #000000 !important;
    background: transparent !important;
}

/* Aktiivinen välilehti: Vihreä tausta, valkoinen teksti */
#tabs .ui-tabs-nav li.ui-state-active {
    background: #009483 !important;
    background-color: #009483 !important;
    border-color: #007a6c !important;
}

#tabs .ui-tabs-nav li.ui-state-active a, 
#tabs .ui-tabs-nav li.ui-state-active a .tab_header_text span {
    color: #ffffff !important;
}

/* 4. HAKUKUVAKE (Material Icon) */
#search-tab .material-icons, 
.tab_search_icon {
    color: #009483 !important;
}

/* 5. TILANNE-IKKUNA: AIKAVÄLIN VALINTA (Ion.RangeSlider) */
.irs-bar {
    background: #009483 !important;
    background-color: #009483 !important;
    border-top: 1px solid #009483 !important;
    border-bottom: 1px solid #009483 !important;
}

.irs-handle {
    background-color: #ffffff !important;
    border: 2px solid #009483 !important;
}

.irs-handle i {
    background-color: #009483 !important;
}

.irs-from, .irs-to, .irs-single {
    background: #009483 !important;
    color: #ffffff !important;
    font-weight: bold;
}

.irs-from:after, .irs-to:after, .irs-single:after {
    border-top-color: #009483 !important;
}

.irs-grid-pol {
    background: #009483 !important;
}

/* 6. HAKU-VÄLILEHDEN MUUT ELEMENTIT
#search-tab .search_container, 
#search-tab .search_input_container,
.area_selection select,
#search-tab .btn-primary {
    background-color: #009483 !important;
    color: #ffffff !important;
    border-color: #007a6c !important;
}
*/

/* 7. TAULUKON IKONIT JA LOGO */
.outage_table img[src$=".svg"] {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

/* Pakotetaan CompanyLogo SVG-muotoon ilman kansiopolkua 
.outage_map .company_logo {
    content: url("CompanyLogo.svg") !important; 
    width: auto;
    max-width: 200px;
    height: 50px;
    display: block !important;
}
*/

/*Alla muutokset 27.3.2026: 'Ilmoita vika'-nappi mobilessa ja keskeytyssymbolien koko kartalla */

/*'Ilmoita vika'- nappi asetukset alkaa*/

/* ==========================================================================
   VAIN MOBIILI (max-width: 768px)
   ========================================================================== */
@media only screen and (max-width: 768px) {
    
    /* 1. Kohdistetaan säiliöön, joka sisältää molemmat napit */
    /* Etsitään elementti, joka on molempien yläpuolella (yleensä .feedback_link tai sen isäntä) */
    .feedback_link {
        display: flex !important;
        flex-direction: row !important; /* Pakottaa riviin */
        flex-wrap: nowrap !important;  /* Estää rivinvaihdon */
        align-items: center !important; /* Tasaa pystysuunnassa keskelle/yläreunaan */
        justify-content: flex-start !important;
        gap: 8px !important;           /* TÄMÄ tekee haluamasi raon nappien väliin */
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* 2. 'Ilmoita vika' -napin säätö */
    img[src*="PKSS_keskeytyskarttapainikeVikailmoitus.svg"] {
        width: 120px !important;   /* Säädä tästä kokoa, jos tuntuu pieneltä */
        height: auto !important;
        flex-shrink: 0 !important; /* Estää kuvaa puristumasta kasaan */
        position: relative !important;
        top: 2px !important;       /* Hienosäädä tästä yläreunan tasaus */
        margin: 0 !important;
    }

    /* 3. 'Pienennä ikkuna' -napin säätö */
    .outage_map .outage-btn-yellow {
        display: inline-block !important;
        white-space: nowrap !important; /* Estää tekstin katkeamisen kahteen riviin */
        padding: 8px 15px !important;
        font-size: 14px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
}
/*'Ilmoita vika'- nappi asetukset loppuu*/

/* Suurennetaan kartalla olevat keskeytysikonit */
.ol-marker, .map-icon-svg {
    width: 128px !important;
    height: 128px !important;
}