/**
 * Bestand : diplan.css
 * Doel    : DiPlan CAD-schil (ribbon, docking, splitters)
 */

html.diplan-html,
html.diplan-html body
{
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: #2a2e32;
    color: #d8dde2;
    line-height: 1.3;
    font-family: Segoe UI, Arial, Helvetica, sans-serif;
}

.diplan-app
{
    display: grid;
    grid-template-rows: 36px 28px 72px minmax(0, 1fr);
    height: 100vh;
    min-height: 100vh;
}

.diplan-top-ribbon,
.diplan-ribbon,
.diplan-ribbon-cms,
.diplan-controls,
.diplan-status
{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    background: #32363b;
    border-bottom: 1px solid #1c1f22;
    min-width: 0;
}

.diplan-ribbon
{
    height: 28px;
    background: #3a3f45;
    font-size: 13px;
}

.diplan-ribbon-cms
{
    height: 72px;
    background: #2f3338;
    align-items: stretch;
}

.diplan-controls
{
    border-top: 1px solid #1c1f22;
    border-bottom: 0;
}

.diplan-controls-close
{
    margin-left: auto;
    font-size: 16px;
    line-height: 1;
}

.diplan-status
{
    justify-content: space-between;
    font-size: 11px;
    background: #25282c;
    border-bottom: 0;
}

.diplan-brand
{
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-right: 8px;
    color: #f3f5f7;
}

.diplan-iconbtn,
.diplan-ribbon button,
.diplan-pin
{
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    border-radius: 3px;
    cursor: pointer;
    font: inherit;
}

.diplan-iconbtn:hover,
.diplan-ribbon button:hover,
.diplan-pin:hover,
.diplan-tab:hover
{
    background: #4a5058;
}

.diplan-iconbtn.is-on,
.diplan-ribbon button.is-on
{
    background: #1f5f82;
}

.diplan-ribbon-cms-group
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    border-right: 1px solid #1c1f22;
    min-width: 88px;
}

.diplan-ribbon-cms-group span
{
    font-size: 11px;
    color: #9aa3ab;
}

.diplan-ribbon-cms-icons
{
    display: flex;
    gap: 4px;
}

.diplan-workspace
{
    display: grid;
    grid-template-columns:
        40px
        var(--diplan-left, 220px)
        4px
        minmax(0, 1fr);
    min-height: 0;
    background: #1c1f22;
}

.diplan-workspace.is-left-collapsed
{
    grid-template-columns:
        40px
        0px
        4px
        minmax(0, 1fr);
}

.diplan-main
{
    display: grid;
    grid-template-rows: minmax(0, 1fr) 32px 24px;
    min-width: 0;
    min-height: 0;
}

.diplan-main.is-controls-collapsed
{
    grid-template-rows: minmax(0, 1fr) 0 24px;
}

.diplan-main.is-controls-collapsed .diplan-controls
{
    display: none;
}

.diplan-controls-restore
{
    display: none;
}

.diplan-main.is-controls-collapsed .diplan-controls-restore
{
    display: inline-flex;
}

.diplan-drawing
{
    display: grid;
    grid-template-columns:
        minmax(160px, 1fr)
        4px
        40px
        var(--diplan-insert, 200px)
        4px
        40px
        var(--diplan-props, 220px);
    min-width: 0;
    min-height: 0;
}

.diplan-workspace.is-insert-collapsed
{
    --diplan-insert: 0px;
}

.diplan-workspace.is-props-collapsed
{
    --diplan-props: 0px;
}

.diplan-strip,
.diplan-panel
{
    min-width: 0;
    min-height: 0;
    background: #2a2e32;
    overflow: hidden;
}

.diplan-strip
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    background: #32363b;
    border-right: 1px solid #1c1f22;
}

.diplan-strip.is-right
{
    border-right: 0;
    border-left: 1px solid #1c1f22;
}

.diplan-strip button
{
    width: 32px;
    height: 32px;
    padding: 0;
}

.diplan-panel
{
    display: flex;
    flex-direction: column;
    border-right: 1px solid #1c1f22;
}

.diplan-panel-head
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    background: #3a3f45;
    flex: 0 0 auto;
}

.diplan-panel-body
{
    flex: 1;
    overflow: auto;
    padding: 8px;
    font-size: 12px;
}

.diplan-splitter
{
    background: #4d5156;
    cursor: col-resize;
    z-index: 3;
}

.diplan-splitter.is-row
{
    cursor: row-resize;
}

.diplan-splitter:hover,
.diplan-splitter.is-drag
{
    background: #8a8368;
}

.diplan-center
{
    display: grid;
    grid-template-rows: 28px minmax(80px, 1fr) 4px var(--diplan-bottom, 120px);
    min-width: 0;
    min-height: 0;
}

.diplan-center.is-bottom-collapsed
{
    --diplan-bottom: 0px;
}

.diplan-cms-tabs
{
    display: flex;
    align-items: stretch;
    gap: 2px;
    background: #32363b;
    padding: 2px 4px 0;
}

.diplan-tab
{
    border: 0;
    background: #3a3f45;
    color: inherit;
    padding: 0 12px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.diplan-tab.is-on
{
    background: #454b52;
}

.diplan-cms
{
    position: relative;
    background: #3d4248;
    min-height: 0;
}

.diplan-cms canvas
{
    display: block;
    width: 100%;
    height: 100%;
}

.diplan-cms-hint
{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b949c;
    pointer-events: none;
    font-size: 13px;
}

.diplan-overviews
{
    background: #2a2e32;
    overflow: auto;
    font-size: 12px;
    padding: 6px 8px;
}

.diplan-workspace-tools
{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.diplan-workspace-tools label
{
    color: #9aa3ab;
}

.diplan-workspace-tools select
{
    height: 26px;
    min-width: 140px;
    max-width: 220px;
    border: 1px solid #1c1f22;
    background: #1c1f22;
    color: inherit;
    padding: 0 6px;
}

.diplan-auth
{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.diplan-auth a
{
    color: #9ad0ef;
    text-decoration: none;
}

.diplan-item
{
    padding: 4px 6px;
    border-radius: 3px;
    cursor: pointer;
}

.diplan-item:hover,
.diplan-item.is-on
{
    background: #1f5f82;
}

.diplan-search
{
    width: 100%;
    margin-bottom: 8px;
    height: 26px;
    border: 1px solid #1c1f22;
    background: #1c1f22;
    color: inherit;
    padding: 0 8px;
}

.diplan-app.is-slave
{
    grid-template-rows: minmax(0, 1fr);
}

.diplan-app.is-slave .diplan-top-ribbon,
.diplan-app.is-slave .diplan-ribbon,
.diplan-app.is-slave .diplan-ribbon-cms,
.diplan-app.is-slave [data-diplan-region="list-tabs"],
.diplan-app.is-slave [data-diplan-region="list-cms"],
.diplan-app.is-slave [data-diplan-split="left"]
{
    display: none;
}

.diplan-app.is-slave .diplan-workspace
{
    grid-template-columns: minmax(0, 1fr);
}

.diplan-tab-caret
{
    width: 2px;
    align-self: stretch;
    background: #8a8368;
    flex: 0 0 2px;
}

.diplan-prop-row
{
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #1c1f22;
}

.diplan-cms-tabs.is-drop
{
    outline: 1px dashed #8a8368;
    outline-offset: -2px;
    background: #35332c;
}

.diplan-tabs-empty
{
    align-self: center;
    padding: 0 10px;
    font-size: 12px;
    color: #8b949c;
}

.diplan-tab
{
    user-select: none;
    cursor: grab;
}

body.is-tab-dragging,
body.is-tab-dragging .diplan-tab
{
    cursor: grabbing;
}

.diplan-tab-ghost
{
    position: fixed;
    z-index: 40;
    pointer-events: none;
    background: #1f5f82;
    color: #f3f5f7;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

@media (max-width: 1100px)
{
    .diplan-workspace
    {
        grid-template-columns:
            40px
            minmax(0, var(--diplan-left, 180px))
            4px
            minmax(0, 1fr);
    }

    .diplan-drawing
    {
        grid-template-columns:
            minmax(120px, 1fr)
            4px
            36px
            minmax(0, var(--diplan-insert, 160px))
            4px
            36px
            minmax(0, var(--diplan-props, 180px));
    }
}