/* Simulate workspace styles */

/* -------------------------------------------------------------------------
 * Workspace root
 * ------------------------------------------------------------------------- */

.workspace-root {
    display:        flex;
    flex-direction: column;
    height:         calc(100vh - var(--topbar-height));
    position:       relative;
    overflow:       hidden;
}

.view-area {
    flex:       1;
    position:   relative;
    overflow:   hidden;
    background: white;
}

/* -------------------------------------------------------------------------
 * Topbar (merged navbar + tab bar)
 * ------------------------------------------------------------------------- */

.topbar {
    width:        100%;
    height:       var(--topbar-height);
    background:   var(--color-brand-blue);
    display:      flex;
    flex-direction: row;
    align-items:  center;
    padding:      0 8px;
    gap:          4px;
}

.topbar-left {
    display:      flex;
    flex-direction: row;
    align-items:  center;
    gap:          4px;
    flex-shrink:  0;
}

.topbar-right {
    display:      flex;
    flex-direction: row;
    align-items:  center;
    gap:          4px;
    flex-shrink:  0;
    margin-left:  auto;
}

.topbar-icon-btn {
    background:      none;
    border:          none;
    color:           white;
    width:           32px;
    height:          32px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   4px;
}

.topbar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.topbar-icon-btn svg {
    stroke: white;
    width:  16px;
    height: 16px;
}

.topbar-separator {
    width:      1px;
    height:     20px;
    background: rgba(255, 255, 255, 0.3);
    margin:     0 4px;
}

/* -------------------------------------------------------------------------
 * Tab bar (inside topbar)
 * ------------------------------------------------------------------------- */

.tab-bar {
    display:      flex;
    flex-direction: row;
    align-items:  center;
    gap:          4px;
    flex:         1;
    height:       100%;
    background:   transparent;
    border:       none;
    padding:      0;
    margin:       0;
}

.tab {
    height:        28px;
    padding:       4px 12px;
    border-radius: 6px;
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-size:     13px;
    background:    transparent;
    border:        none;
    cursor:        pointer;
}

.tab svg {
    stroke: var(--color-brand-green);
    width:  14px;
    height: 14px;
}

.tab span {
    color: white;
}

.tab.active {
    background: rgba(255, 255, 255, 0.2);
}

.tab.active svg {
    stroke: var(--color-brand-green);
}

.tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
}

.tab-add-btn {
    background:      none;
    border:          none;
    color:           white;
    width:           28px;
    height:          28px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   4px;
}

.tab-add-btn svg {
    stroke: white;
    width:  14px;
    height: 14px;
}

.tab-add-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tab-close-btn {
    background:      none;
    border:          none;
    width:           16px;
    height:          16px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   3px;
    cursor:          pointer;
    margin-left:     4px;
}

.tab-close-btn svg {
    stroke: rgba(255, 255, 255, 0.6);
    width:  12px;
    height: 12px;
}

.tab-close-btn:hover svg {
    stroke: white;
}

/* -------------------------------------------------------------------------
 * Map
 * ------------------------------------------------------------------------- */

#map {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    z-index:  0;
}

/* -------------------------------------------------------------------------
 * Layer switcher (bottom-left floating panel)
 * ------------------------------------------------------------------------- */

.layer-switcher {
    position:       absolute;
    bottom:         8px;
    right:          8px;
    left:           auto;
    height:         38px;
    background:     var(--color-surface);
    border:         1px solid var(--color-border);
    border-radius:  8px;
    display:        flex;
    flex-direction: row;
    align-items:    center;
    padding:        0 6px;
    gap:            2px;
    z-index:        10;
}

.layer-btn {
    background:     none;
    border:         none;
    border-radius:  6px;
    padding:        4px 8px;
    font-size:      11px;
    font-weight:    600;
    color:          var(--color-text-muted);
    cursor:         pointer;
    letter-spacing: 0.5px;
}

.layer-btn:hover {
    background: var(--color-bg);
    color:      var(--color-text);
}

.layer-btn.active {
    background: #eef1ff;
    color:      var(--color-brand-blue);
}

/* -------------------------------------------------------------------------
 * Content panel (left floating panel — content type selector)
 * ------------------------------------------------------------------------- */

.content-panel {
    position:       absolute;
    left:           8px;
    top:            8px;
    width:          auto;
    height:         auto;
    background:     var(--color-surface);
    border:         1px solid var(--color-border);
    border-radius:  8px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        8px 0;
    gap:            4px;
    z-index:        10;
}

/* -------------------------------------------------------------------------
 * View panel (bottom floating panel — view mode selector)
 * ------------------------------------------------------------------------- */

.view-panel {
    position:      absolute;
    bottom:        8px;
    left:          50%;
    transform:     translateX(-50%);
    width:         auto;
    height:        auto;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: 8px;
    display:       flex;
    align-items:   center;
    padding:       0 8px;
    gap:           4px;
    z-index:       10;
}

/* -------------------------------------------------------------------------
 * Panel icon button (shared by content-panel and view-panel)
 * ------------------------------------------------------------------------- */

.panel-icon-btn {
    width:           36px;
    height:          36px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   6px;
    cursor:          pointer;
    color:           var(--color-text-muted);
    border:          none;
    background:      none;
}

.panel-icon-btn:hover {
    background: var(--color-bg);
}

.panel-icon-btn.active {
    color:      var(--color-brand-blue);
    background: #eef1ff;
}