/*
 * The page frame shared by every 3Dtracking application. A copy of centralised_admin/client/chrome.css:
 * keep every copy the same. Uses each app's own colour tokens (--surface, --line, --muted, ...). The title
 * bar is the same width in every app, so nothing in it moves when switching apps; the page under it is the
 * app's own width.
 *
 * Title bar:  [logo | name / description (10 words at most) | Apps]  ...  [View as | name / email | Sign out]
 * Under it, in this order, each only when the page has one:
 *   .periodbar  what is shown on the left (timeframe or the date written out), ‹ picker › on the right
 *   .tabs       the pages or sections
 *   ...the page...
 *   .pagefoot   how fresh the data is, and the refresh button
 */

/* Title bar: always the website's dark teal, in both themes, so the reversed logo reads. */
.brandbar { background: var(--brand-teal, #00444E); color: #FFFFFF; border-bottom: 3px solid var(--brand-blue, #00A0BE) }
.brandbar-inner { max-width: 1180px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0 }
.brand img { height: 40px; width: auto; display: block }
.brand .appname { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .3); line-height: 1.2; min-width: 0 }
.brand h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF }
.brand p { margin: 2px 0 0; color: rgba(255, 255, 255, .72); font-size: 12.5px }
.brand .appswitch { margin-left: 4px }

.who { display: flex; align-items: center; justify-content: flex-end; gap: 10px 16px; margin-left: auto; font-size: 13px; color: rgba(255, 255, 255, .78); flex-wrap: wrap }
.who .me { display: grid; line-height: 1.25; text-align: right; min-width: 0 }
.who .me b { color: #FFFFFF; font-weight: 600 }
.who .me small { font-size: 12px; color: rgba(255, 255, 255, .72); overflow-wrap: anywhere }
.who .linkbtn { background: none; border: 0; padding: 0; font: inherit; color: #FFFFFF; opacity: .85; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.who .linkbtn:hover { opacity: 1 }

/* View as (administrators): orange while viewing the site as someone else. */
.viewas-pick { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .78) }
.viewas-pick select { background: rgba(255, 255, 255, .1); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .3); border-radius: 8px; padding: 5px 8px;
  font: inherit; font-size: 13px; font-weight: 600; max-width: 220px; cursor: pointer }
.viewas-pick select option, .viewas-pick select optgroup { color: #171B25; background: #FFFFFF }
.viewas-pick.on select { background: var(--brand-orange, #F49600); border-color: var(--brand-orange, #F49600); color: #171B25 }

/* Period bar: directly under the title bar. */
.periodbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 16px }
.periodbar-what { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0 }
.periodbar-what h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em }
.periodnav { display: inline-flex; align-items: center; gap: 6px; margin-left: auto }
.periodnav .periodstep { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 18px; line-height: 1; cursor: pointer }
.periodnav .periodstep:hover { border-color: var(--muted) }
.periodnav .periodstep:disabled { opacity: .4; cursor: default; border-color: var(--line) }
.periodnav select, .periodnav input { height: 34px; border: 1px solid var(--field-line, var(--line)); border-radius: 8px; background: var(--field, var(--surface));
  color: var(--ink); font: inherit; font-size: 14px; padding: 0 10px }

/* Pages and sections. The line under the tabs is a shadow, so the open tab's underline sits on it. */
.tabs { display: flex; align-items: center; gap: 4px; box-shadow: inset 0 -1px var(--line); margin: 0 0 20px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none }
.tabs::-webkit-scrollbar { display: none }
.tab { display: inline-flex; align-items: center; gap: 8px; flex: none; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px;
  font: inherit; font-weight: 600; color: var(--muted); text-decoration: none; cursor: pointer; white-space: nowrap }
.tab:hover { color: var(--ink) }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--accent-text); border-bottom-color: var(--accent-text) }
.tab[hidden] { display: none }
.tabs-end { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0 0 4px 12px; flex: none }
.tabcount { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--sunken); color: var(--muted); font-variant-numeric: tabular-nums }
.tabcount.red { background: var(--red-soft, var(--sunken)); color: var(--red, var(--muted)) }

/* Page footer: how fresh the data is, and the refresh button. */
.pagefoot { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted) }
.pagefoot b { color: var(--ink); font-weight: 600 }

@media (max-width: 640px) {
  .who { margin-left: 0; justify-content: flex-start }
  .who .me { text-align: left }
  .periodnav { margin-left: 0 }
}