/* Shared toolbar presentation for Network and Telecom Labs.
 * Fiber Lab is the visual and interaction reference. */
.network-lab-app {
    --lab-toolbar-panel: var(--labs-panel);
    --lab-toolbar-bg: var(--labs-bg);
    --lab-toolbar-text: var(--labs-ink);
    --lab-toolbar-muted: var(--labs-muted);
    --lab-toolbar-border: var(--labs-border);
    --lab-toolbar-accent: var(--labs-blue);
}

.nl-header {
    min-height: 64px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: visible;
    background: var(--lab-toolbar-panel);
    border-bottom: 1px solid var(--lab-toolbar-border);
    box-shadow: 0 2px 10px rgb(15 23 42 / 4%);
}

.nl-header-left,
.nl-header-right,
.nl-toolbar-group {
    display: flex;
    align-items: center;
}

.nl-header-left { flex: 0 0 auto; min-width: 0; }
.nl-header-center { flex: 1 1 auto; min-width: 0; overflow: visible; justify-content: flex-end; }
.nl-header-right { flex: 0 0 auto; min-width: 0; gap: 8px; padding: 0; }
.nl-brand { min-width: 0; gap: 10px; }
.nl-brand-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 19px; }
.nl-brand-text { min-width: 0; }
.nl-brand-title { font-size: 14px; }
.nl-brand-subtitle { margin-top: 0; font-size: 10px; letter-spacing: .08em; }
.nl-workspace-selector .btn { width: 34px; height: 34px; border-radius: 8px; }

.nl-main-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.nl-toolbar-group { gap: 3px; }
.nl-toolbar-separator {
    width: 1px;
    height: 25px;
    margin: 0 5px;
    flex: 0 0 auto;
    background: var(--lab-toolbar-border);
}

.nl-main-toolbar .nl-toolbar-button,
.lab-toolbar-menu > summary,
.lab-toolbar-menu-panel button,
.lab-toolbar-menu-panel a,
.nl-header-icon-btn,
.nl-account-action,
.nl-account-trigger {
    min-width: 0;
    height: auto !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--lab-toolbar-muted) !important;
    font: 600 13px/1.4 Inter, system-ui, sans-serif !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none !important;
}

.nl-main-toolbar .nl-toolbar-button i,
.lab-toolbar-menu > summary i,
.nl-header-icon-btn i,
.nl-account-action i,
.nl-account-trigger i { font-size: 16px !important; }

.nl-main-toolbar .nl-toolbar-button:hover,
.nl-main-toolbar .nl-toolbar-button:focus-visible,
.lab-toolbar-menu > summary:hover,
.lab-toolbar-menu > summary:focus-visible,
.lab-toolbar-menu[open] > summary,
.lab-toolbar-menu-panel button:hover,
.lab-toolbar-menu-panel button:focus-visible,
.lab-toolbar-menu-panel a:hover,
.lab-toolbar-menu-panel a:focus-visible,
.nl-header-icon-btn:hover,
.nl-account-action:hover,
.nl-account-trigger:hover {
    outline: 0;
    color: var(--lab-toolbar-accent) !important;
    background: var(--lab-toolbar-bg) !important;
}

.nl-main-toolbar .nl-toolbar-button:disabled {
    opacity: .38;
    cursor: not-allowed;
}
.nl-main-toolbar .nl-toolbar-button:disabled:hover {
    color: var(--lab-toolbar-muted) !important;
    background: transparent !important;
}

.lab-toolbar-menu { position: relative; flex: 0 0 auto; }
.lab-toolbar-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.lab-toolbar-menu > summary::-webkit-details-marker { display: none; }
.lab-toolbar-chevron { font-size: 9px !important; transition: transform .15s ease; }
.lab-toolbar-menu[open] .lab-toolbar-chevron { transform: rotate(180deg); }
.lab-toolbar-menu-panel {
    position: absolute;
    z-index: 1100;
    top: calc(100% + 7px);
    left: 0;
    display: grid;
    min-width: 220px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--lab-toolbar-border);
    border-radius: 11px;
    background: var(--lab-toolbar-panel);
    box-shadow: 0 16px 40px rgb(15 23 42 / 18%);
}
.lab-toolbar-menu:not([open]) > .lab-toolbar-menu-panel { display: none; }
.lab-toolbar-menu-panel button,
.lab-toolbar-menu-panel a { width: 100%; justify-content: flex-start; text-align: left; }
.lab-toolbar-menu-panel hr { width: 100%; margin: 5px 0; border: 0; border-top: 1px solid var(--lab-toolbar-border); opacity: 1; }
.lab-toolbar-tools > .lab-toolbar-menu-panel { right: 0; left: auto; min-width: 235px; }
.lab-toolbar-account > .lab-toolbar-menu-panel { right: 0; left: auto; min-width: 170px; }
.lab-toolbar-menu-panel [aria-pressed="true"] { color: var(--lab-toolbar-accent) !important; background: var(--lab-toolbar-bg) !important; }

.nl-role-badge {
    border-radius: 20px;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--lab-toolbar-accent) 12%, transparent);
    color: var(--lab-toolbar-accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
}
.network-lab-app[data-auth-role="guest"] .nl-role-badge { display: none !important; }
.tl-map-move-toggle strong { font-size: inherit; }

/* Fiber-style contextual canvas bar. Only this region may scroll horizontally. */
.nl-canvas-tools {
    border: 1px solid var(--lab-toolbar-border);
    border-radius: 12px;
    padding: 5px;
    gap: 0;
    background: var(--lab-toolbar-panel);
    box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}
.nl-canvas-tools-scroll,
.nl-canvas-tools-tail { gap: 0; }
.nl-secondary-group { gap: 2px; }
.nl-canvas-tools-scroll > .nl-secondary-group + .nl-secondary-group,
.nl-canvas-tools-tail > .nl-secondary-group + .nl-secondary-group,
.nl-canvas-tools-tail { border-left: 1px solid var(--lab-toolbar-border); margin-left: 5px; padding-left: 5px; }
.nl-secondary-button {
    min-height: 34px;
    padding: 7px 9px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--lab-toolbar-muted) !important;
    box-shadow: none !important;
}
.nl-secondary-button:hover,
.nl-secondary-button:focus-visible { color: var(--lab-toolbar-accent) !important; background: var(--lab-toolbar-bg) !important; }
.nl-secondary-button[aria-pressed="true"],
.nl-secondary-button.is-active { color: #fff !important; background: var(--lab-toolbar-accent) !important; }
.nl-port-label-control select { border: 0; background-color: transparent; color: var(--lab-toolbar-text); box-shadow: none; }
[data-telecom-lab][data-workspace-mode="live"] [data-tool-group="layout"] { display: none; }
[data-telecom-live-tools] { display: none; }
[data-telecom-lab][data-workspace-mode="live"] [data-telecom-live-tools] { display: flex; }

@media (max-width: 1100px) {
    .nl-header { gap: 8px; }
    .nl-brand-subtitle { display: none; }
    .nl-main-toolbar .nl-toolbar-button span,
    .lab-toolbar-menu > summary > span { display: none; }
    .lab-toolbar-menu-panel span { display: inline; }
    .nl-auth-actions .nl-account-action span { display: none; }
}

@media (max-width: 780px) {
    .nl-header { min-height: 56px; padding: 0 9px; overflow: visible; }
    .nl-brand-title { font-size: 12px; }
    .nl-brand-icon { width: 34px; height: 34px; }
    .nl-workspace-selector { display: none; }
    .nl-toolbar-separator { display: none; }
    .nl-main-toolbar .nl-toolbar-button { padding: 8px !important; }
    .lab-toolbar-menu > summary,
    .nl-header-icon-btn,
    .nl-account-action,
    .nl-account-trigger { padding: 8px !important; }
    .lab-toolbar-menu-panel { position: fixed; top: 58px; right: 8px; left: 8px; min-width: 0; }
    .nl-header-right { gap: 2px; }
    .nl-role-badge { display: none !important; }
    .nl-canvas-tools { max-width: calc(100% - 16px); }
    .nl-canvas-tools-scroll { overflow-x: auto; scrollbar-width: thin; }
}