/* SkyEye HF12 OBJECT EDITOR V5 */

.hf12-object-workspace{
    display:grid;
    grid-template-columns:minmax(520px,1.65fr) minmax(560px,1fr);
    gap:12px;
    align-items:start;
    margin-top:8px;
}

.hf12-object-map-column{
    min-width:0;
}

.hf12-object-map-column #courseMap{
    width:100%;
    height:560px;
    margin:0;
}

.hf12-object-side{
    min-width:0;
    max-height:560px;
    display:flex;
    flex-direction:column;
    border:1px solid #dce1e6;
    border-radius:12px;
    background:#fff;
    overflow:hidden;
}

.hf12-object-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    background:#f8f9fa;
    border-bottom:1px solid #e5e8eb;
}

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

.hf12-object-head span{
    display:block;
    margin-top:1px;
    color:#667085;
    font-size:9px;
}

.hf12-object-count{
    min-width:48px;
    padding:4px 7px;
    border-radius:999px;
    background:#eef1f4;
    color:#475467!important;
    text-align:center;
    font-weight:900;
}

.hf12-poi-section{
    padding:9px 10px;
    border-bottom:1px solid #eceef1;
}

.hf12-poi-title{
    margin-bottom:6px;
    color:#667085;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.hf12-poi-palette{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
}

.hf12-poi-palette button{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    min-height:34px;
    padding:4px 6px;
    border:1px solid #dde1e6;
    border-radius:7px;
    background:#fff;
    color:#344054;
    cursor:pointer;
}

.hf12-poi-palette button:hover,
.hf12-poi-palette button.active{
    border-color:#278dcc;
    background:#f0f8fc;
}

.hf12-poi-palette button>span{
    display:grid;
    place-items:center;
    flex:none;
    width:20px;
    height:20px;
    border-radius:5px;
    background:#f2f4f7;
    font-size:12px;
    font-weight:900;
}

.hf12-poi-palette button small{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8px;
    font-weight:800;
}

.hf12-object-tools{
    display:grid;
    grid-template-columns:1fr 150px;
    gap:6px;
    padding:8px 10px;
    border-bottom:1px solid #eceef1;
}

.hf12-object-tools input,
.hf12-object-tools select{
    height:32px;
    min-width:0;
    font-size:9px;
}

.hf12-object-column-head{
    display:grid;
    grid-template-columns:
        50px
        minmax(130px,1.2fr)
        minmax(145px,1.05fr)
        minmax(125px,.9fr)
        minmax(110px,.9fr)
        62px
        48px
        116px;
    gap:5px;
    align-items:center;
    padding:6px 8px;
    background:#fafafa;
    border-bottom:1px solid #e7e9ec;
    color:#667085;
    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
}

.hf12-object-rows{
    flex:1;
    min-height:0;
    overflow:auto;
}

.hf12-object-row{
    display:grid;
    grid-template-columns:
        50px
        minmax(130px,1.2fr)
        minmax(145px,1.05fr)
        minmax(125px,.9fr)
        minmax(110px,.9fr)
        62px
        48px
        116px;
    gap:5px;
    align-items:center;
    min-height:55px;
    padding:6px 8px;
    border-bottom:1px solid #eceef1;
    background:#fff;
}

.hf12-object-row:hover{
    background:#fcfdfe;
}

.hf12-object-row input,
.hf12-object-row select{
    width:100%;
    min-width:0;
    height:29px;
    padding:0 5px;
    font-size:9px;
    box-sizing:border-box;
}

.hf12-type-cell{
    display:grid;
    justify-items:start;
    gap:3px;
}

.hf12-type-chip,
.hf12-source-chip,
.hf12-route-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:20px;
    padding:2px 5px;
    border-radius:5px;
    background:#eef1f4;
    color:#475467;
    font-size:8px;
    font-weight:900;
}

.hf12-source-chip{
    background:#f5eefa;
    color:#7a2e87;
}

.hf12-route-tag{
    background:#e9f4fb;
    color:#126b9c;
}

.hf12-name-cell{
    display:grid;
    gap:3px;
}

.hf12-name-cell
input[data-field="description"]{
    color:#667085;
    font-size:8px;
}

.hf12-coordinate-pair{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3px;
}

.hf12-coordinate-pair input{
    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;
    font-size:8px;
}

.hf12-route-readonly{
    color:#126b9c;
    font-size:9px;
    font-weight:900;
}

.hf12-public-cell label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    margin:0!important;
    font-size:8px!important;
    white-space:nowrap;
}

.hf12-public-cell input{
    width:auto!important;
    height:auto!important;
}

.hf12-order-cell input{
    text-align:center;
}

.hf12-actions-cell{
    position:relative;
    display:grid;
    grid-template-columns:28px 1fr 28px;
    gap:3px;
    align-items:center;
}

.hf12-actions-cell button{
    min-width:0;
    min-height:28px;
    height:28px;
    padding:0 4px;
    font-size:8px;
}

.hf12-actions-cell .danger-small{
    font-size:14px;
}

.hf12-row-state{
    position:absolute;
    right:0;
    bottom:-10px;
    color:#667085;
    font-size:7px;
}

.hf12-object-empty{
    padding:24px 12px;
    color:#98a2b3;
    text-align:center;
    font-size:10px;
}

/*
 * Preserve legacy list in DOM for HF11 hooks,
 * but remove it from normal layout.
 */
#mapFeaturesList.hf12-native-feature-list{
    position:absolute!important;
    left:-100000px!important;
    top:auto!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
}

/* POI marker preview */

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

.hf12-poi-bubble{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    box-sizing:border-box;
    border:2px solid #fff;
    border-radius:50%;
    background:#202327;
    color:#fff;
    font-size:14px;
    font-weight:900;
    line-height:1;
    box-shadow:
        0 1px 5px rgba(0,0,0,.35),
        0 0 0 1px rgba(0,0,0,.22);
}

.hf12-poi-wc{
    background:#316b9c;
}

.hf12-poi-water{
    background:#2576ad;
}

.hf12-poi-medical{
    background:#b42318;
}

.hf12-poi-parking{
    background:#2d5e91;
}

.hf12-poi-info{
    background:#285f8f;
    font-family:Georgia,serif;
}

.hf12-poi-food{
    background:#8b5e34;
}

.hf12-poi-spectator{
    background:#6d4c86;
}

.hf12-poi-hazard{
    background:#b76e00;
}


/* Existing lower map grid no longer needs to spend half width on feature list. */

.map-editor-grid{
    grid-template-columns:1fr!important;
}


/* Medium widths */

@media(max-width:1500px){
    .hf12-object-workspace{
        grid-template-columns:minmax(450px,1.35fr) minmax(520px,1fr);
    }

    .hf12-object-column-head,
    .hf12-object-row{
        grid-template-columns:
            45px
            minmax(120px,1.2fr)
            minmax(135px,1fr)
            minmax(115px,.9fr)
            minmax(105px,.8fr)
            58px
            44px
            110px;
    }
}


/* Tablet / mobile */

@media(max-width:1150px){
    .hf12-object-workspace{
        grid-template-columns:1fr;
    }

    .hf12-object-map-column #courseMap{
        height:480px;
    }

    .hf12-object-side{
        max-height:none;
    }

    .hf12-object-rows{
        max-height:520px;
    }
}

@media(max-width:760px){
    .hf12-object-map-column #courseMap{
        height:390px;
    }

    .hf12-poi-palette{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .hf12-object-tools{
        grid-template-columns:1fr;
    }

    .hf12-object-column-head{
        display:none;
    }

    .hf12-object-row{
        grid-template-columns:
            52px
            minmax(0,1fr);
        gap:6px 8px;
        padding:9px;
    }

    .hf12-type-cell{
        grid-row:1 / span 4;
        align-self:start;
    }

    .hf12-name-cell,
    .hf12-location-cell,
    .hf12-symbol-cell,
    .hf12-category-cell,
    .hf12-public-cell,
    .hf12-order-cell,
    .hf12-actions-cell{
        grid-column:2;
    }

    .hf12-public-cell label{
        justify-content:flex-start;
    }

    .hf12-actions-cell{
        grid-template-columns:34px 1fr 34px;
    }
}