/* ==========================================================================
   GPTfy Datasheet Contextual Navigation Bar
   Scoped with .datasheet-nav prefix — no conflicts with datasheet styles
   ========================================================================== */

/* -------------------------------------------------------------------------
   Custom properties scoped to the nav element
   ------------------------------------------------------------------------- */
.datasheet-nav {
    --dn-bg:             #fafafa;
    --dn-border-bottom:  #e8e5f0;
    --dn-logo-color:     #3b1d6e;
    --dn-back-color:     #6B21A8;
    --dn-back-hover:     #4a1d6a;
    --dn-cta-bg:         transparent;
    --dn-cta-bg-hover:   #f3eeff;
    --dn-cta-border:     #c4b5e8;
    --dn-cta-color:      #6B21A8;
    --dn-height:         38px;
    --dn-font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --dn-font-size:      13px;
    --dn-z:              99999;
}

/* -------------------------------------------------------------------------
   The bar itself
   ------------------------------------------------------------------------- */
.datasheet-nav {
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    height:          var(--dn-height);
    background:      var(--dn-bg);
    border-bottom:   1px solid var(--dn-border-bottom);
    z-index:         var(--dn-z);
    font-family:     var(--dn-font);
    font-size:       var(--dn-font-size);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------------------------
   Inner layout container
   ------------------------------------------------------------------------- */
.datasheet-nav__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
    max-width:       1200px;
    margin:          0 auto;
    padding:         0 20px;
    gap:             16px;
}

/* -------------------------------------------------------------------------
   Left group: logo + back link
   ------------------------------------------------------------------------- */
.datasheet-nav__left {
    display:     flex;
    align-items: center;
    gap:         20px;
    min-width:   0;        /* allow shrink */
    flex:        1;
}

/* Logo / brand name */
.datasheet-nav__logo {
    display:         inline-flex;
    align-items:     center;
    text-decoration: none;
    color:           var(--dn-logo-color);
    white-space:     nowrap;
    flex-shrink:     0;
    line-height:     1;
    transition:      opacity 0.15s ease;
}

.datasheet-nav__logo img {
    height:    24px;
    width:     auto;
    display:   block;
}

.datasheet-nav__logo:hover,
.datasheet-nav__logo:focus {
    opacity: 0.80;
    outline: none;
}

.datasheet-nav__logo:focus-visible {
    outline:        2px solid #c4b5e8;
    outline-offset: 2px;
    border-radius:  2px;
}

/* Divider between logo and back link — hidden (removed for minimal look) */
.datasheet-nav__divider {
    display: none;
}

/* Back link */
.datasheet-nav__back {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    text-decoration: none;
    color:           var(--dn-back-color);
    font-size:       12px;
    font-weight:     400;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
    transition:      color 0.15s ease;
    line-height:     1;
}

.datasheet-nav__back:hover,
.datasheet-nav__back:focus {
    color:   var(--dn-back-hover);
    outline: none;
}

.datasheet-nav__back:focus-visible {
    outline:        2px solid #c4b5e8;
    outline-offset: 2px;
    border-radius:  2px;
}

.datasheet-nav__back-arrow {
    font-style: normal;
    flex-shrink: 0;
    font-size:   14px;
    line-height: 1;
}

.datasheet-nav__back-label {
    /* hidden on mobile, shown on desktop */
}

/* -------------------------------------------------------------------------
   Right group: CTA button
   ------------------------------------------------------------------------- */
.datasheet-nav__right {
    flex-shrink: 0;
}

.datasheet-nav__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    text-decoration: none;
    color:           var(--dn-cta-color);
    background:      var(--dn-cta-bg);
    border:          1px solid var(--dn-cta-border);
    border-radius:   5px;
    padding:         0 12px;
    height:          26px;
    font-size:       12px;
    font-weight:     500;
    white-space:     nowrap;
    line-height:     1;
    transition:      background 0.15s ease, border-color 0.15s ease;
}

.datasheet-nav__cta:hover,
.datasheet-nav__cta:focus {
    background:    var(--dn-cta-bg-hover);
    border-color:  #a78bcc;
    outline:       none;
}

.datasheet-nav__cta:focus-visible {
    outline:        2px solid #c4b5e8;
    outline-offset: 2px;
}

.datasheet-nav__cta-arrow {
    font-style: normal;
    font-size:  13px;
    line-height: 1;
}

/* -------------------------------------------------------------------------
   Mobile layout  (<768px)
   — Hide back label, show only back arrow
   — Keep CTA visible
   -------------------------------------------------------------------------  */
@media (max-width: 767px) {
    .datasheet-nav {
        --dn-height: 42px;  /* slightly taller for touch targets */
    }

    .datasheet-nav__inner {
        padding: 0 16px;
        gap: 12px;
    }

    /* Hide text label on mobile */
    .datasheet-nav__back-label {
        display: none;
    }

    .datasheet-nav__logo img {
        height: 20px;
    }

    /* Taller CTA for easier tapping */
    .datasheet-nav__cta {
        height:  30px;
        padding: 0 10px;
    }
}

/* -------------------------------------------------------------------------
   Very small screens  (<380px)
   — Shrink CTA text slightly
   ------------------------------------------------------------------------- */
@media (max-width: 379px) {
    .datasheet-nav__cta-text {
        display: none;
    }

    .datasheet-nav__cta {
        padding: 0 10px;
    }
}

/* -------------------------------------------------------------------------
   Print — hide the bar entirely
   ------------------------------------------------------------------------- */
@media print {
    .datasheet-nav {
        display: none !important;
    }

    /* The JS-applied body padding-top should also be cleared when printing */
    .datasheet-nav-body-offset {
        padding-top: 0 !important;
    }

    /* Ensure .page elements print at natural size — no scaling */
    .page {
        transform: none !important;
        margin-bottom: 0 !important;
    }
}

/* -------------------------------------------------------------------------
   Mobile viewport scaling for print-optimized datasheets
   Datasheets use fixed-width .page containers designed for US Legal paper.
   On narrow screens we scale them down via JS; this provides the
   transform-origin anchor so the JS scale() lands correctly.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
    body {
        overflow-x: auto;
    }

    .page {
        transform-origin: top center;
    }
}