/* 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 dim overlay
 * Sits between map (z-index 0) and floating panels (z-index 10).
 * Visible only when a non-map view mode is active.
 * ------------------------------------------------------------------------- */

.map-dim-overlay {
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
    background: rgba(255, 255, 255, 0.75);
    z-index:    1;
    display:    none;
}

.map-dim-overlay.visible {
    display: block;
}

/* -------------------------------------------------------------------------
 * Content display panel
 * Appears when a non-map view mode is active.
 * Fills the view area minus space occupied by content panel and view panel.
 * Same visual style as content panel and view panel.
 * ------------------------------------------------------------------------- */

.content-display-panel {
    position:      absolute;
    top:           8px;
    left:          8px;
    right:         8px;
    bottom:        8px;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: 8px;
    z-index:       5;
    display:       none;
}

.content-display-panel.visible {
    display:       block;
}

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

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

/* -------------------------------------------------------------------------
 * Tooltips
 * Custom CSS tooltips using data-tooltip attribute.
 * Content panel: tooltip appears to the right.
 * View panel: tooltip appears above.
 * ------------------------------------------------------------------------- */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content:        attr(data-tooltip);
    position:       absolute;
    background:     var(--color-text);
    color:          white;
    font-size:      11px;
    font-weight:    500;
    white-space:    nowrap;
    padding:        4px 8px;
    border-radius:  4px;
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.15s ease;
    z-index:        100;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Content panel tooltips — appear to the right */
.content-panel [data-tooltip]::after {
    left:      calc(100% + 8px);
    top:       50%;
    transform: translateY(-50%);
}

/* View panel tooltips — appear above */
.view-panel [data-tooltip]::after {
    bottom:    calc(100% + 8px);
    left:      50%;
    transform: translateX(-50%);
}

/* Layer switcher tooltips — appear above */
.layer-switcher [data-tooltip]::after {
    bottom:    calc(100% + 8px);
    left:      50%;
    transform: translateX(-50%);
}

/* -------------------------------------------------------------------------
 * 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;
}

/* -------------------------------------------------------------------------
 * Version dropdown
 * Appears to the right of the content panel when a content type is clicked.
 * ------------------------------------------------------------------------- */

.version-dropdown {
    position:         absolute;
    background:       var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    8px;
    z-index:          20;
    min-width:        180px;
    padding:          4px;
    display:          flex;
    flex-direction:   column;
    gap:              2px;
    box-shadow:       0 2px 8px rgba(0, 0, 0, 0.08);
}

.version-dropdown-item {
    background:       none;
    border:           none;
    border-radius:    6px;
    padding:          6px 10px;
    font-size:        13px;
    color:            var(--color-text);
    cursor:           pointer;
    text-align:       left;
    width:            100%;
}

.version-dropdown-item:hover {
    background:       var(--color-bg);
}

.version-dropdown-empty {
    padding:          6px 10px;
    font-size:        12px;
    color:            var(--color-text-muted);
}

.version-dropdown-add {
    background:       none;
    border:           none;
    border-top:       1px solid var(--color-border);
    border-radius:    0 0 6px 6px;
    padding:          6px 10px;
    font-size:        12px;
    color:            var(--color-brand-blue);
    cursor:           pointer;
    text-align:       left;
    width:            100%;
    margin-top:       2px;
}

.version-dropdown-add:hover {
    background:       var(--color-bg);
}

/* -------------------------------------------------------------------------
 * Project selector dropdown
 * Anchored to top-left below navbar, no margins, blue background.
 * ------------------------------------------------------------------------- */

.topbar-project-name {
    color:       white;
    font-size:   13px;
    font-weight: 500;
}

.project-dropdown {
    position:         fixed;
    top:              var(--topbar-height);
    left:             0;
    background:       var(--color-brand-blue);
    border:           none;
    border-radius:    0 0 8px 0;
    z-index:          100;
    min-width:        200px;
    padding:          4px;
    display:          flex;
    flex-direction:   column;
    gap:              2px;
    box-shadow:       2px 2px 8px rgba(0, 0, 0, 0.15);
}

.project-dropdown-item {
    background:       none;
    border:           none;
    border-radius:    6px;
    padding:          8px 12px;
    font-size:        13px;
    color:            white;
    cursor:           pointer;
    text-align:       left;
    width:            100%;
}

.project-dropdown-item:hover {
    background:       rgba(255, 255, 255, 0.15);
}

.project-dropdown-item.active {
    background:       rgba(255, 255, 255, 0.2);
    font-weight:      500;
}

.project-dropdown-add {
    background:       none;
    border:           none;
    border-top:       1px solid rgba(255, 255, 255, 0.2);
    border-radius:    0 0 6px 0;
    padding:          8px 12px;
    font-size:        12px;
    color:            rgba(255, 255, 255, 0.7);
    cursor:           pointer;
    text-align:       left;
    width:            100%;
    margin-top:       2px;
}

.project-dropdown-add:hover {
    background:       rgba(255, 255, 255, 0.1);
    color:            white;
}