/* ==========================================================================
   Has.Pet console — design tokens, local Manrope, and the top bar.
   Source of truth: expert_console_2026-08-05.html (PET-924 stage 2).

   This file is loaded by BOTH shells:
     - base.html          (pico.css pages; only the top bar of a console-only
                           expert uses these rules, the rest stays on pico)
     - console_base.html  (the three-panel console; pico is NOT loaded there)

   Keeping the tokens and the top bar in one file is deliberate: the bar is
   the single element the two shells share, so it must not be styled twice
   with two sets of numbers that drift apart.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Manrope, served from /static/fonts — never from Google Fonts. The admin
   runs behind auth on our own origin; a third-party font request would leak
   a request per page load and break when the CDN is unreachable.
   One variable file per unicode subset, same split Google Fonts uses.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens — values copied verbatim from the mockup's :root block.
   Prefixed with --hp- so they can sit next to pico's --pico-* variables in
   base.html without either set shadowing the other.
   -------------------------------------------------------------------------- */
:root {
  --hp-bg: #f5f6f3;
  --hp-surface: #ffffff;
  --hp-surface-soft: #f0f2ed;
  --hp-surface-hover: #e9ece5;
  --hp-text: #20251f;
  --hp-text-2: #485147;
  --hp-muted: #687166;
  --hp-quiet: #6f7768;
  --hp-line: #dde2da;
  --hp-line-strong: #cbd2c7;
  --hp-brand: #4c6844;
  --hp-brand-dark: #365030;
  --hp-brand-soft: #e9efe6;
  --hp-danger: #9e4242;
  --hp-danger-soft: #f8eeee;
  --hp-danger-line: #e6c7c7;
  --hp-warn: #8a6d14;
  --hp-warn-soft: #f7f1e0;
  --hp-warn-line: #e2d2a4;
  --hp-slate: #4b6b80; /* owner block only */
  --hp-shadow: 0 12px 36px rgb(32 37 31 / 9%);
  --hp-radius-sm: 8px;
  --hp-radius-md: 12px;
  --hp-radius-lg: 16px;
  --hp-header-h: 58px;
  --hp-queue-w: 268px;
  --hp-context-w: 320px;
  --hp-focus: 0 0 0 3px rgb(76 104 68 / 22%);
  --hp-font: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* At 1320px and below the mockup narrows the two side panels rather than
   reflowing — the console stays a desktop layout, there is no phone mode. */
@media (max-width: 1320px) {
  :root {
    --hp-queue-w: 248px;
    --hp-context-w: 300px;
  }
}

/* --------------------------------------------------------------------------
   Top bar — shipped in stage 1, restyled here onto the tokens above.
   The markup (templates/_console_topbar.html) is unchanged: brand block on
   the left, online pill + account avatar on the right, dropdown with email,
   role and Sign out.
   -------------------------------------------------------------------------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: var(--hp-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 18px;
  background: var(--hp-surface);
  border-bottom: 1px solid var(--hp-line);
  font-family: var(--hp-font);
  color: var(--hp-text);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 790;
  letter-spacing: -0.02em;
}

.topbar-brand-mark {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--hp-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.topbar-product {
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Online/Away — the expert's own manual shift toggle (PET-924 stage 3).
   Only drawn for a caller on the roster (_console_topbar.html checks
   on_roster, same gate as Take/Send); a superadmin who only manages the
   team has nothing here to toggle. */
.topbar-online-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hp-muted);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.topbar-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hp-brand);
}

.topbar-online-btn.off .topbar-online-dot {
  background: var(--hp-quiet);
}

.topbar-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.topbar-avatar-btn:focus-visible {
  outline: none;
  border-radius: 50%;
  box-shadow: var(--hp-focus);
}

.topbar-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hp-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  user-select: none;
}

.topbar-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 12rem;
  padding: 6px;
  border: 1px solid var(--hp-line-strong);
  border-radius: var(--hp-radius-md);
  background: var(--hp-surface);
  box-shadow: var(--hp-shadow);
  z-index: 50;
}

.topbar-menu-email {
  padding: 5px 8px;
  color: var(--hp-text);
  font-size: 12px;
  font-weight: 740;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-menu-role {
  display: inline-block;
  margin: 0 8px 6px;
  padding: 1px 6px;
  border: 1px solid var(--hp-line);
  border-radius: 5px;
  color: var(--hp-muted);
  font-size: 9.5px;
  font-weight: 730;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.topbar-menu-logout {
  display: block;
  padding: 8px 8px 5px;
  border-top: 1px solid var(--hp-line);
  color: var(--hp-brand-dark);
  font-size: 11.5px;
  font-weight: 730;
  text-decoration: none;
}

.topbar-menu-logout:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Navigation rail — PET-1079. Promoted here from console-admin.css when the
   pico pages stopped carrying a sidebar of their own: like the top bar above,
   this is now an element BOTH shells render, so it must not be styled twice
   with two sets of numbers that drift apart.

   Rendered by templates/_console_nav.html, inside:
     - console_admin/base.html -> a .shell grid cell, full height
     - base.html               -> an .sidebar sticky column (style.css puts it
                                  there; pico is loaded on those pages)
   -------------------------------------------------------------------------- */
.console-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--hp-surface);
  border-right: 1px solid var(--hp-line);
  font-family: var(--hp-font);
}

.nav-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 10px;
}

.nav-group-title {
  margin: 14px 0 6px;
  padding: 11px 9px 0;
  border-top: 1px solid var(--hp-line);
  color: var(--hp-quiet);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

/* The first group opens the rail; it needs no rule above it to separate it
   from the top bar, which already draws one. */
.nav-group-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.nav-item {
  width: 100%;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px;
  margin-bottom: 2px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  color: var(--hp-text-2);
  font-size: 12.5px;
  font-weight: 720;
}

.nav-item .console-icon {
  width: 17px;
  height: 17px;
  color: var(--hp-quiet);
}

.nav-item:hover {
  background: var(--hp-surface-soft);
}

.nav-item.on {
  border-left-color: var(--hp-brand);
  background: var(--hp-surface-soft);
  color: var(--hp-text);
}

.nav-item.on .console-icon {
  color: var(--hp-brand);
}

.nav-foot {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--hp-line);
  color: var(--hp-quiet);
  font-size: 10.5px;
  line-height: 1.45;
}