/* ===========================================================
   Virtual Computer Hardware Explorer
   style.css
=========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{

    width:100%;
    height:100%;
    overflow:hidden;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background:#111;
    color:white;
}

/*============================================================
HEADER
============================================================*/

header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    height:60px;

    background:#1d1d1d;

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

    padding:0 25px;

    z-index:1000;

    border-bottom:1px solid #333;
}

.title{

    font-size:24px;
    font-weight:bold;
    color:#3ea6ff;
}

#developerStatus{

    color:#ddd;
    font-size:15px;
}

/*============================================================
VIEWER
============================================================*/

#viewer{

    position:absolute;

    top:60px;
    left:0;
    right:0;
    bottom:0;

    overflow:hidden;

    background:#000;
}

/*============================================================
IMAGE
============================================================*/

#computerImage{

    position:absolute;

    width:100%;
    height:100%;

    object-fit:contain;

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

/*============================================================
SVG
============================================================*/

#svgLayer{

    position:absolute;

    width:100%;
    height:100%;

    top:0;
    left:0;

    pointer-events:all;
}

/*============================================================
HOTSPOTS
============================================================*/

.hotspot{

    fill:rgba(0,180,255,.28);

    stroke:#00BFFF;

    stroke-width:2;

    cursor:pointer;

    transition:
        fill .25s,
        stroke .25s,
        filter .25s,
        opacity .25s;
}

/* Hover */

.hotspot:hover{

    fill:rgba(255,255,0,.35);

    stroke:#ff9800;

    stroke-width:3;

    filter:
        drop-shadow(0 0 8px yellow)
        drop-shadow(0 0 15px orange);
}

/* Developer Selected */

.hotspot.selected{

    fill:rgba(255,0,0,.35);

    stroke:red;

    stroke-width:4;
}

/* Hide tint */

.hideTint .hotspot{

    fill:transparent;
}

/*============================================================
TOOLTIP
============================================================*/

#tooltip{

    position:absolute;

    display:none;

    padding:8px 14px;

    background:#111;

    color:white;

    border-radius:8px;

    border:1px solid #3ea6ff;

    box-shadow:0 0 12px rgba(0,0,0,.6);

    pointer-events:none;

    font-size:15px;

    z-index:999;
}

/*============================================================
INFO PANEL
============================================================*/

#infoPanel{

    position:fixed;

    top:60px;

    right:-430px;

    width:430px;

    height:calc(100% - 60px);

    background:white;

    color:#222;

    overflow:auto;

    transition:.35s;

    padding:25px;

    box-shadow:-6px 0 20px rgba(0,0,0,.45);

    z-index:999;
}

#infoPanel.show{

    right:0;
}

#closePanel{

    float:right;

    border:none;

    background:#d32f2f;

    color:white;

    width:38px;

    height:38px;

    border-radius:50%;

    cursor:pointer;

    font-size:20px;
}

#closePanel:hover{

    background:#b71c1c;
}

#partTitle{

    margin-top:10px;

    color:#005bbb;

    font-size:28px;
}

#partImage{

    width:100%;

    margin:18px 0;

    border-radius:12px;

    border:1px solid #ccc;
}

section{

    margin-bottom:25px;
}

section h2{

    color:#1565c0;

    margin-bottom:8px;

    border-bottom:1px solid #ddd;

    padding-bottom:5px;
}

section p{

    line-height:1.7;
}

/*============================================================
DEVELOPER PANEL
============================================================*/

#developerPanel{

    position:fixed;

    left:15px;

    top:80px;

    width:260px;

    background:rgba(0,0,0,.88);

    color:white;

    border:1px solid #555;

    border-radius:12px;

    padding:15px;

    display:none;

    z-index:2000;
}

#developerPanel.show{

    display:block;
}

#developerPanel h3{

    color:#3ea6ff;

    margin-bottom:10px;
}

#developerPanel hr{

    border:none;

    border-top:1px solid #444;

    margin:12px 0;
}

#developerPanel label{

    cursor:pointer;
}

/*============================================================
GRID
============================================================*/

#gridCanvas{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    display:none;

    pointer-events:none;

    z-index:150;
}

#gridCanvas.show{

    display:block;
}

/*============================================================
LABELS
============================================================*/

.hotspotLabel{

    font-size:12px;

    fill:white;

    pointer-events:none;
}

/*============================================================
SCROLLBAR
============================================================*/

#infoPanel::-webkit-scrollbar{

    width:10px;
}

#infoPanel::-webkit-scrollbar-track{

    background:#eee;
}

#infoPanel::-webkit-scrollbar-thumb{

    background:#999;

    border-radius:8px;
}

/*============================================================
RESPONSIVE
============================================================*/

@media(max-width:900px){

    #infoPanel{

        width:100%;

        right:-100%;
    }

    .title{

        font-size:18px;
    }

    #developerPanel{

        width:220px;
    }
}

@media(max-width:600px){

    header{

        height:50px;
    }

    #viewer{

        top:50px;
    }

    #infoPanel{

        top:50px;

        height:calc(100% - 50px);
    }

    #partTitle{

        font-size:22px;
    }

    .title{

        font-size:16px;
    }

    #developerStatus{

        display:none;
    }
}