/* ============================================================
   KEEYNET dashboard — header, sidebar and footer
   ------------------------------------------------------------
   What this fixes, measured on the live page:

   HEADER   72px tall with a border-bottom drawn in a
            colour-mix at 82% opacity, over --header-bg, while
            the console panel below it is --surface. The edge
            read as a smudge rather than a line, and its three
            controls were three different shapes and heights.

   SIDEBAR  nav items had no settled resting, hover, active or
            focus state, and the two group labels were styled
            like body text.

   FOOTER   carried two links — Support and a copyright — where
            the user wants four, and sat on a 44px grid row with
            no top border, so it floated inside the panel.

   The console panel itself (#dashboard-view: 1360px, 12px
   radius, border, shadow) is DELIBERATE and left alone. The
   sidebar spans both grid rows by design, so the footer stays
   in column 2 and its top border meets the sidebar's right
   border at a corner.

   Everything is written in the existing design tokens, so the
   Green / Black / Dull White themes all follow.

   Pairs with chrome-polish.js, which adds the footer links.

   To remove: delete the <link> and <script> tags.
   ============================================================ */


/* ---------- header -------------------------------------------- */

.site-header {
  box-sizing: border-box !important;
  min-height: 60px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;

  /* 23px lines the brand up with the sidebar's nav labels
     (13px sidebar padding + 10px nav-item padding). */
  padding: 0 clamp(16px, 2vw, 28px) !important;

  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;

  flex: none !important;
  text-decoration: none !important;
  color: var(--text) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .05em !important;
}

.site-header .brand-mark {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 25px !important;
  height: 25px !important;

  border-radius: 7px !important;
  box-shadow: none !important;

  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* Everything else to the right. */
.site-header .header-actions {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* One shape for all three controls.

   These have to be addressed by ID. app.css:13002 styles them
   as borderless text links through a bare-ID selector list —
   #theme-toggle, #support-link, #account-menu-button,
   #logout-button — with !important throughout, which outranks
   any class selector no matter how long. */
.site-header #theme-toggle,
.site-header #support-link,
.site-header #account-menu-button,
.site-header #logout-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;

  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 11px !important;

  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;

  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.site-header #theme-toggle:hover,
.site-header #support-link:hover,
.site-header #account-menu-button:hover,
.site-header #logout-button:hover {
  border-color: var(--border-strong) !important;
  background: var(--surface-soft) !important;
  color: var(--text) !important;
}

.site-header #theme-toggle:focus-visible,
.site-header #support-link:focus-visible,
.site-header #account-menu-button:focus-visible,
.site-header #logout-button:focus-visible {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* The theme dot carries the current theme's colour rather than
   the label's, so the swatch reads as a swatch. */
.site-header #theme-icon {
  font-size: 10px !important;
  color: var(--accent) !important;
  line-height: 1 !important;
}

/* Earlier header experiments insert an interpunct between
   adjacent controls. With borders that reads as clutter. */
.header-actions > *::before {
  content: none !important;
}

.site-header #account-menu-button-name {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* ---------- sidebar ------------------------------------------- */

/* Everything structural below is scoped to the two-column
   layout. Under 900px app.css collapses the console to one
   column and three rows — sidebar strip, workspace, footer —
   and an unscoped grid or sidebar rule here tears that apart
   (it blew the footer up to 1857px tall at 700px wide). */
@media (min-width: 901px) {

/* The sidebar was 'position: sticky; height: calc(100vh - 4.5rem)'
   — but #dashboard-view sets overflow: hidden, which makes it a
   scroll container that never scrolls, so the sidebar never
   actually stuck. All the viewport height did was stop the column
   short: on the Overview it ended 386px above the panel floor and
   its right border stopped with it, leaving the lower half of the
   console with no divider between the nav and the content.

   Made a plain full-height column instead, so the border runs the
   whole way down and meets the footer's top border at a corner. */
#dashboard-view > .sidebar {
  box-sizing: border-box !important;
  position: static !important;
  top: auto !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;

  padding: 18px 13px !important;

  background: var(--surface) !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
}

/* The black theme pins the sidebar to #0a0a0a while the panel
   around it is #0d0d0d, so the two read as slightly different
   blacks. Matched to the panel; the right border still draws
   the edge. */
:root[data-theme="black"] #dashboard-view > .sidebar {
  background: var(--surface) !important;
}

.sidebar .sidebar-label {
  margin: 0 0 8px !important;
  padding: 0 10px !important;

  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: var(--subtle) !important;
}

.sidebar nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.sidebar .nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;

  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* The glyph column, so the labels line up whatever the icon. */
.sidebar .nav-item > span[aria-hidden="true"] {
  flex: none !important;
  width: 15px !important;
  text-align: center !important;
  font-size: 12.5px !important;
  color: var(--subtle) !important;
}

.sidebar .nav-item:hover {
  background: var(--surface-soft) !important;
  color: var(--text) !important;
}

.sidebar .nav-item.active,
.sidebar .nav-item[aria-current="page"] {
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 26%, transparent) !important;
  color: var(--success) !important;
  font-weight: 700 !important;
}

.sidebar .nav-item.active > span[aria-hidden="true"],
.sidebar .nav-item[aria-current="page"] > span[aria-hidden="true"] {
  color: var(--accent) !important;
}

.sidebar .nav-item:focus-visible {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

.sidebar .nav-item.disabled,
.sidebar .nav-item[aria-disabled="true"] {
  color: var(--subtle) !important;
  font-weight: 600 !important;
  cursor: default !important;
  background: transparent !important;
}

.sidebar .nav-item.disabled:hover,
.sidebar .nav-item[aria-disabled="true"]:hover {
  background: transparent !important;
  color: var(--subtle) !important;
}

/* The second group needs air, not another rule. */
.sidebar .sidebar-account-label {
  margin-top: 20px !important;
}


/* The footer row was pinned to 44px; four links plus padding
   need to set their own height. */
#dashboard-view.dashboard {
  grid-template-rows: minmax(calc(100vh - 168px), auto) auto !important;
}

/* Column 2 by design: the sidebar spans both rows, so the
   footer's top border meets its right border at a corner. */
.dashboard-footer {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

} /* end min-width: 901px */


/* ---------- footer --------------------------------------------- */

.dashboard-footer {
  box-sizing: border-box !important;

  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px 20px !important;

  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 22px !important;

  border-top: 1px solid var(--line) !important;
  background: var(--surface) !important;
}

.dashboard-footer-product {
  flex: 0 1 auto !important;
  min-width: 0 !important;

  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}

.dashboard-footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 18px !important;
}

.dashboard-footer a,
.dashboard-footer-links a {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  border-radius: 4px !important;
}

.dashboard-footer-links a:hover {
  color: var(--accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.dashboard-footer-links a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* The interpunct belonged to the old two-item footer; with four
   links the gap does that work. */
.dashboard-footer-links > span[aria-hidden="true"] {
  display: none !important;
}

.dashboard-footer-links .cp-copy {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--subtle) !important;
  white-space: nowrap !important;
}


/* ---------- the signed-out footer, same treatment --------------- */

.signin-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px 20px !important;

  margin-top: 26px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--line) !important;
}

.signin-footer p {
  margin: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--subtle) !important;
}

.signin-footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 18px !important;
}

.signin-footer-links a {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
}

.signin-footer-links a:hover {
  color: var(--accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}


/* ---------- phone and tablet ------------------------------------ */

/* app.css WROTE a one-column mobile layout at :7254 — sidebar
   strip on row 1, workspace on row 2, footer on row 3 — and then
   two later unconditional rules quietly undid it:

     :10435  #dashboard-view.dashboard { grid-template-rows:
               minmax(calc(100vh - 168px), auto) 44px !important }
     :10445  .dashboard-footer { grid-row: 2 !important }

   Both sit outside any media query and both come after :7254, so
   below 900px the console kept a TWO-row template and the footer
   landed on row 2 — the same row as the page content. The
   workspace was squeezed to 44px underneath it, which is the
   empty white panel on phones. The 900px block at :11209 only
   restores grid-column, never grid-row, so it never recovered.

   This re-establishes the three rows. The middle one is 1fr,
   whose automatic minimum is its content size, so a long page
   still grows the panel rather than being clipped by its
   overflow: hidden. */
@media (max-width: 900px) {

  #dashboard-view.dashboard {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr auto !important;
  }

  #dashboard-view > .sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .workspace.page-view {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  .dashboard-footer {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }


  /* The nav becomes a strip. Wrapping it is not an option —
     "Guide & Topologies", "Identity & Access" and "Downloads &
     Setup" wrap to four rows on a phone and push the page below
     the fold before it starts. One row that scrolls sideways,
     with a fade on the right so it reads as scrollable. */
  #dashboard-view > .sidebar {
    /* The base .sidebar rule is 'position: sticky; top: 4.5rem'.
       Leaving it positioned here let that 72px offset push the
       strip down out of its own grid row and over the top of the
       page content. */
    position: static !important;
    top: auto !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;

    padding: 8px 12px !important;

    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #dashboard-view > .sidebar::-webkit-scrollbar {
    display: none !important;
  }

  /* The two <nav>s live inside an unnamed wrapper <div> that is
     display: block, so turning the navs into rows was not
     enough — the wrapper still stacked them. It has to become a
     row too, or WORKSPACE and ACCOUNT sit on separate lines. */
  #dashboard-view > .sidebar > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: none !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* WORKSPACE / ACCOUNT are headings for a column, not a row. */
  .sidebar .sidebar-label {
    display: none !important;
  }

  .sidebar nav {
    flex: none !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
  }

  /* The vertical nav gives every item width: 100%. In a row that
     makes each one as wide as the strip, which then widens the
     strip, which widens the items — the nav blew out to 676px
     per item on a 390px screen. */
  .sidebar .nav-item {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    padding: 7px 11px !important;
    font-size: 12.5px !important;
  }

  .sidebar .nav-item > span[aria-hidden="true"] {
    display: none !important;
  }

  /* The "SOON" markers double the width of two items in a strip
     that already scrolls. */
  .sidebar .nav-item.disabled,
  .sidebar .nav-item[aria-disabled="true"] {
    font-size: 12.5px !important;
  }

  .sidebar .sidebar-account-label {
    margin-top: 0 !important;
  }


  /* Footer: product line of its own, links below it. */
  .dashboard-footer {
    justify-content: flex-start !important;
    padding: 13px 16px !important;
  }

  /* flex-basis: 100% alone still let it shrink back onto the
     links' line; min-width is what actually gives it a line. */
  .dashboard-footer-product {
    flex: 0 0 auto !important;
    min-width: 100% !important;
  }

  .dashboard-footer-links {
    gap: 4px 14px !important;
  }
}


@media (max-width: 760px) {
  .site-header {
    min-height: 54px !important;
    padding: 0 12px !important;
    gap: 10px !important;
  }

  .site-header .header-actions {
    gap: 6px !important;
    min-width: 0 !important;
  }

  /* Support is in the footer and in the nav; in a 375px header
     it is the one control that can go. */
  .site-header #support-link {
    display: none !important;
  }

  .site-header #theme-toggle,
  .site-header #support-link,
  .site-header #account-menu-button,
  .site-header #logout-button {
    padding: 0 9px !important;
    font-size: 12px !important;
  }

  .site-header #theme-label {
    display: none !important;
  }

  .site-header #account-menu-button-name {
    max-width: 90px !important;
  }

  #dashboard-view.dashboard {
    width: calc(100vw - 20px) !important;
    margin: 14px auto 20px !important;
  }

  .dashboard-footer {
    padding: 12px 14px !important;
  }
}


/* Smallest phones: the wordmark is the last thing to go, after
   the Support link and the theme label. */
@media (max-width: 380px) {
  .site-header .brand > span:not(.brand-mark) {
    display: none !important;
  }
}