/* The "<app> by Niyyasoft" strip at the foot of every app (gate.php
   appbar(), gate.js appbar()). Its own element, <niyya-bar>, so no rule an
   app has for div, span or footer reaches it. It takes the app's own page
   colour: no background, the app's text colour softened, a faint rule on
   top. The dots are the site's pink / amber / green. */

:root { --niyya-bar: 36px; }

niyya-bar {
  display: flex; align-items: center; gap: 10px;
  box-sizing: border-box; height: var(--niyya-bar); margin: 0; padding: 0 24px;
  flex: none; grid-column: 1 / -1; align-self: stretch; justify-self: stretch;
  position: relative; z-index: 1;
  background: transparent; border-top: 1px solid rgba(128, 128, 128, .2); color: inherit;
  font: 500 12.8px/1 Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  letter-spacing: normal; text-align: start; text-transform: none; white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}
niyya-bar > span:first-child { display: inline-flex; gap: 5px; flex: none; }
niyya-bar > span:first-child > span {
  display: block; width: 8px; height: 8px; margin: 0; padding: 0; border-radius: 50%;
}
niyya-bar > span:first-child > span:nth-child(1) { background: #F06FA8; }
niyya-bar > span:first-child > span:nth-child(2) { background: #EDC22E; }
niyya-bar > span:first-child > span:nth-child(3) { background: #3ECF8E; }
niyya-bar > span:nth-child(2) { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: .62; }
niyya-bar > span:nth-child(2) > a,
niyya-bar > span:nth-child(2) > a:link,
niyya-bar > span:nth-child(2) > a:visited {
  color: inherit; font: inherit; text-decoration: none; background: none;
  border: 0; padding: 0; margin: 0; box-shadow: none;
}
niyya-bar > span:nth-child(2) > a:hover,
niyya-bar > span:nth-child(2) > a:focus-visible {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
}

/* "Help" (gate.php help_link()): the app's manual in the Support centre,
   at the far end of the strip, before the language picker when there is one. */
niyya-bar > a.nb-help,
niyya-bar > a.nb-help:link,
niyya-bar > a.nb-help:visited {
  display: inline-flex; align-items: center; gap: 5px; flex: none; height: 26px; margin: 0; margin-inline-start: auto; padding: 0 8px;
  border: 0; border-radius: 6px; background: none; box-shadow: none; opacity: .72;
  color: inherit; font: inherit; text-decoration: none;
}
niyya-bar > a.nb-help:hover,
niyya-bar > a.nb-help:focus-visible { opacity: 1; background: rgba(128, 128, 128, .14); color: inherit; text-decoration: none; outline: none; }
niyya-bar > a.nb-help > svg { display: block; flex: none; }
niyya-bar > a.nb-help ~ details.nb-lang { margin: 0; margin-inline-start: 4px; }

/* The language picker (gate.php picker()), at the far end of the strip.
   Its list opens upwards, on white whatever the app's page colour. */
niyya-bar > details.nb-lang { position: relative; margin: 0 0 0 auto; margin-inline-start: auto; margin-inline-end: 0; padding: 0; flex: none; }
niyya-bar > details.nb-lang > summary {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; margin: 0;
  list-style: none; cursor: pointer; border-radius: 6px; opacity: .72;
  font: inherit; color: inherit; background: none; border: 0; user-select: none;
}
niyya-bar > details.nb-lang > summary::-webkit-details-marker { display: none; }
niyya-bar > details.nb-lang > summary::marker { content: ''; }
niyya-bar > details.nb-lang > summary:hover,
niyya-bar > details.nb-lang > summary:focus-visible,
niyya-bar > details.nb-lang[open] > summary { opacity: 1; background: rgba(128, 128, 128, .14); outline: none; }
niyya-bar > details.nb-lang > summary > svg { display: block; flex: none; }
niyya-bar .nb-lang-list {
  position: absolute; bottom: calc(100% + 6px); right: 0; inset-inline-end: 0; inset-inline-start: auto; z-index: 2147483000;
  display: flex; flex-direction: column; min-width: 140px; padding: 6px; margin: 0;
  background: #fff; color: #16161D; border: 1px solid rgba(22, 22, 29, .12); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(22, 22, 29, .18); opacity: 1;
}
niyya-bar .nb-lang-list > a,
niyya-bar .nb-lang-list > a:link,
niyya-bar .nb-lang-list > a:visited {
  display: block; padding: 8px 10px; margin: 0; border-radius: 6px; border: 0;
  color: #16161D; background: none; text-decoration: none; font: 500 13px/1.2 Inter, "Segoe UI", system-ui, sans-serif; text-align: start;
}
niyya-bar .nb-lang-list > a:hover,
niyya-bar .nb-lang-list > a:focus-visible { background: #F2F0EA; color: #16161D; outline: none; }
niyya-bar .nb-lang-list > a[aria-current] { font-weight: 700; }
niyya-bar .nb-lang-list > a[aria-current]::after { content: ' ✓'; }

@media (max-width: 640px) { niyya-bar { padding: 0 16px; } }
@media print { niyya-bar { display: none !important; } }

/* Room for what floats over the foot of the page, so the strip is not
   hidden under it: the gate's guest / trial reminder (gone once
   dismissed) and HCI Hero's Compare bar. */
body:has(> .ng-banner) > niyya-bar { margin-bottom: 64px; }
@media (max-width: 640px) { body:has(> .ng-banner) > niyya-bar { margin-bottom: 104px; } }
body:has(.submit-bar) > niyya-bar[data-app="hci-hero"] { margin-bottom: 72px; }
@media (max-width: 640px) { body:has(> .ng-banner):has(.submit-bar) > niyya-bar[data-app="hci-hero"] { margin-bottom: 104px; } }

/* Apps that fill the window: hand the strip's height back to them, or
   the strip would sit below the fold. */
body:has(> niyya-bar[data-app="magic-image"]) > .app,
body:has(> niyya-bar[data-app="cisco-switch-selector"]) > .app { height: calc(100vh - var(--niyya-bar)); }
body:has(> niyya-bar[data-app="magic-image"]) > .login-page { min-height: calc(100vh - var(--niyya-bar)); }
body:has(> niyya-bar[data-app="cisco-switch-selector"]) .canvas-shell { height: calc(100vh - var(--top) - 190px - var(--niyya-bar)); }
body:has(> niyya-bar[data-app="wifi-site-survey"]) .view { height: calc(100vh - 52px - 41px - var(--niyya-bar)); }
body.auth-page:has(> niyya-bar[data-app="wifi-site-survey"]) { grid-template-rows: 1fr auto; }
body.auth-page > niyya-bar[data-app="wifi-site-survey"] { color: #fff; }   /* dark page, dark ink */