/* SkyEye HF12 ROUTE EDITOR V7 */

.hf12-v7-panel{
    margin:0 0 10px;
}

.hf12-v7-grid{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);
    gap:10px;
}

.hf12-v7-card{
    min-width:0;
    overflow:hidden;
    border:1px solid #dce1e6;
    border-radius:11px;
    background:#fff;
}

.hf12-v7-head{
    padding:10px 11px;
    border-bottom:1px solid #eceef1;
    background:#fafbfc;
}

.hf12-v7-head strong{
    display:block;
    color:#202327;
    font-size:12px;
}

.hf12-v7-head span{
    display:block;
    margin-top:2px;
    color:#667085;
    font-size:9px;
    line-height:1.35;
}

.hf12-v7-select-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px;
    padding:9px 10px 6px;
}

.hf12-v7-select-row select{
    min-width:0;
    height:34px;
    font-size:10px;
}

.hf12-v7-info{
    min-height:20px;
    padding:2px 10px 7px;
    color:#475467;
    font-size:9px;
}

.hf12-v7-info strong{
    color:#1f2937;
}

.hf12-v7-actions{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    padding:7px 10px;
    border-top:1px solid #f0f1f3;
    background:#fcfcfd;
}

.hf12-v7-actions button{
    min-height:29px;
    font-size:8px;
}

.hf12-v7-save-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:48px;
    padding:8px 10px;
    border-top:1px solid #eceef1;
    background:#fafbfc;
}

.hf12-v7-save-row>div{
    display:flex;
    flex:none;
    gap:5px;
}

.hf12-v7-state{
    min-width:0;
    color:#667085;
    font-size:9px;
    line-height:1.35;
}

.hf12-v7-state.error{
    color:#b42318;
}


/* import */

.hf12-v7-import-form{
    display:grid;
    grid-template-columns:
        minmax(160px,.8fr)
        minmax(160px,1fr)
        minmax(140px,.8fr);
    gap:7px;
    padding:9px 10px;
    align-items:end;
}

.hf12-v7-import-form label{
    margin:0!important;
    color:#667085;
    font-size:9px!important;
    font-weight:800!important;
}

.hf12-v7-import-form input[type="text"],
.hf12-v7-import-form select{
    width:100%;
    height:34px;
    margin-top:4px;
    font-size:10px;
}

.hf12-v7-file-button{
    position:relative;
    display:flex!important;
    align-items:center;
    justify-content:center;
    height:34px;
    margin-top:0!important;
    overflow:hidden;
    border:1px solid #ccd2d8;
    border-radius:7px;
    background:#fff;
    color:#344054!important;
    cursor:pointer;
}

.hf12-v7-file-button:hover{
    border-color:#278dcc;
    background:#f6fbfe;
}

.hf12-v7-file-button input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.hf12-v7-replace{
    grid-column:1/-1;
    align-items:center;
    margin-top:2px!important;
}


/* route vertex editor */

.hf12-v7-vertex-icon{
    background:transparent!important;
    border:0!important;
}

.hf12-v7-vertex-icon span{
    display:block;
    width:12px;
    height:12px;
    box-sizing:border-box;
    border:2px solid #fff;
    border-radius:50%;
    background:#2183ba;
    box-shadow:
        0 1px 4px rgba(0,0,0,.45),
        0 0 0 1px rgba(15,65,95,.75);
    cursor:grab;
}

.hf12-v7-vertex-icon.selected span{
    width:14px;
    height:14px;
    margin:-1px;
    border:3px solid #fff;
    background:#bd2934;
    box-shadow:
        0 1px 5px rgba(0,0,0,.45),
        0 0 0 2px rgba(168,29,41,.65);
}

.hf12-v7-vertex-icon span:active{
    cursor:grabbing;
}


/*
 * Old generic GPX/GeoJSON import is replaced by V7,
 * while the separate OCAD/IOF import remains visible.
 */
.hf12-v7-legacy-import{
    display:none!important;
}


@media(max-width:1100px){
    .hf12-v7-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:760px){
    .hf12-v7-select-row{
        grid-template-columns:1fr;
    }

    .hf12-v7-import-form{
        grid-template-columns:1fr;
    }

    .hf12-v7-replace{
        grid-column:auto;
    }

    .hf12-v7-save-row{
        align-items:stretch;
        flex-direction:column;
    }

    .hf12-v7-save-row>div{
        justify-content:flex-end;
    }
}