/* NEXTWORK UI SYSTEM — navigation-row geometry, single owner.
   Both customer and application tabs opt in to these classes.
   Individual components may style their CONTENT, not height/padding/gap/dividers.
   Decisions: UI_VISUAL_PARITY_PROTOCOL_20261103.md / Issue #667. */

/* Exactly one source for shared header-navigation layout. */
.nw-record-nav {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: var(--nw-record-row-height);
}

/* Application tabs live under the context header, outside the scroll canvas. */
.nw-record-nav--application {
    justify-content: space-between;
    gap: var(--nw-space-3);
    padding: var(--nw-record-row-vertical-pad) var(--nw-record-row-gutter);
    border-top: 0;
    border-bottom: 1px solid var(--nw-record-divider-color);
    background: var(--nw-ui-surface-inset);
}

/* Customer tabs live *inside* the popup's already padded content canvas. */
.nw-record-nav--customer {
    /* Existing .tabs overflow behavior is now owned by the shared navigation. */
    /* Application buttons stay on the second (and final) header row.
       The action popovers remain visible rather than being clipped by scroll. */
    overflow: visible;
    justify-content: flex-start;
    gap: var(--nw-space-1);
    padding: var(--nw-record-row-vertical-pad) 0;
    margin-bottom: var(--nw-space-2);
}

/* The application row starts directly below the shared context header.
   The customer row is inside a padded scroll body: remove only its TOP
   inset, instead of collapsing negative first-child margins through
   CustomerDetails / ApiCustomerDetails and adding 12px of blank space.
   Keep normal horizontal canvas padding for every content section. */
.live-customer-viewer.in-application-context .live-customer-viewer-body{
    padding-top:0;
}
.live-customer-viewer.in-application-context .customer-main{
    display:flow-root; /* prevent first nav margin collapsing into the canvas */
}
.live-customer-viewer.in-application-context .nw-record-nav--customer{
    box-sizing:border-box;
    position:sticky;
    top:0;
    z-index:3;
    margin:0 calc(-1 * var(--nw-popup-content-inset))
           var(--nw-popup-content-inset);
    padding:var(--nw-record-row-vertical-pad) var(--nw-record-row-gutter);
    min-height:var(--nw-record-row-height);
    border-top:0;
    border-bottom:1px solid var(--nw-record-divider-color);
    background:var(--nw-ui-surface-inset);
}
@media(max-width:760px){
    .live-customer-viewer.in-application-context .nw-record-nav--customer{
        margin:0 calc(-1 * var(--nw-popup-content-inset-compact))
               var(--nw-popup-content-inset-compact);
        padding:var(--nw-space-1) var(--nw-space-2);
    }
}

/* Second header row: customer navigation on the left, live tools on the right.
   Ordinary customer pages keep their unmodified nav DOM and geometry. */
.nw-record-nav--customer > button { flex:0 0 auto; }
.nw-record-nav--customer > .nw-record-nav-tools {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin-left:auto;
    flex:0 1 auto;
    gap:var(--nw-space-2);
    min-width:0;
    position:relative;
}
.nw-record-nav--customer > .nw-record-nav-tools .proclamation-popup-header-tools{
    min-width:0;
}
@media (max-width:1350px) {
    .nw-record-nav--customer {flex-wrap:wrap;}
    .nw-record-nav--customer > .nw-record-nav-tools{
        flex:1 1 100%;
        justify-content:flex-end;
    }
}

/* ROW 3 / customer popup only: the tab buttons, including active state,
   are owned here instead of the ordinary customer page or popup CSS.
   Preserve the existing compact 34px visual, palette and event handlers. */
.nw-record-nav--customer > button {
    white-space: nowrap;
    background: var(--nw-ui-surface);
    border: 1px solid var(--nw-ui-border);
    color: var(--nw-ui-tab-text);
    border-radius: var(--nw-radius-md);
    padding: var(--nw-space-2) var(--nw-space-2);
    font-family: var(--nw-font-family);
    font-size: var(--nw-font-sm);
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
}
.nw-record-nav--customer > button.active {
    background: var(--nw-ui-accent);
    border-color: var(--nw-ui-accent);
    color: var(--nw-ui-on-accent);
}

/* Light theme background follows the same owner as the navigation geometry. */
.theme-light .nw-record-nav--customer {
    background: var(--nw-theme-modal-head-bg);
}

/* Application modal's mobile layout wraps actions above tabs as before. */
@media (max-width: 760px) {
    .nw-record-nav--application {
        flex-wrap: wrap;
        gap: var(--nw-space-1);
        padding: var(--nw-space-1) var(--nw-space-2);
    }
}

/* V1 retains a dedicated 700px phone layout. It now shares the same owner. */
@media (max-width: 700px) {
    .nw-record-nav--application { max-width: 100%; }
    .nw-record-nav--customer {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .nw-record-nav--customer > button { flex: 0 0 auto; }
}

/* SECOND RECORD ROW / customer identity + tools. One owner for the popup shell.
   CustomerDetails retains ownership of its CONTENT and ordinary full-page card.
   No style inversion or !important: the popup-only class is deliberately more
   specific than the legacy .customer-header definitions. */
.customer-header.nw-record-info {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nw-space-4);
    min-width: 0;
    max-width: 100%;
    width: 100%;
    min-height: var(--nw-record-row-height);
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--nw-record-divider-color);
}
/* The shared top header is the only name owner in the proclamation popup.
   Keep the status/quality badge and contact tools, but do not reserve width
   for a second large customer name in the next row. Ordinary cards unchanged. */
.customer-header.nw-record-info .customer-title {
    min-width: 0;
}
@media (min-width: 1200px) {
    .customer-header.nw-record-info { position: relative; overflow: visible; }
}
@media (max-width: 1350px) {
    .customer-header.nw-record-info {
        flex-direction: column;
        align-items: stretch;
    }
}
@media (max-width: 700px) {
    .customer-header.nw-record-info {
        flex-direction: column;
        align-items: stretch;
        gap: var(--nw-space-3);
        padding-top: var(--nw-space-2);
    }
}