/* ============================================================
   Tendi HEADER reskin: the top bar (product mark, org chip, user chip).
   Pairs the rail/sub-pane nav (tendi-nav.css) with the dashboard-redesign
   mockup's topbar, but ONLY for elements wired to real functionality:
     · logo cell      → the Tendi wordmark, sized to the 88px rail column
     · org chip        → the ORG's own site logo (initials when it has none)
                         + SITE_NAME, links home; not a switcher
     · History Log     → existing audit-modal pill (styled by tendi-shell.css)
     · alerts bell     → existing #alerts_notification slide-out (shell-styled)
     · user chip       → avatar + FIRST NAME + role, and the account menu, which
                         now opens with an identity header (name, email, role)

   Deliberately NOT added (no endpoint / redundant): org switcher chevron,
   branch pill, a separate "messages" icon (the bell IS the alerts panel here),
   a settings/sliders icon (Settings lives in the user menu), breadcrumb.

   Loaded globally from inc/head.php AFTER tendi-shell.css so it owns the bar.
   Tokens come from tendi-tokens.css. Markup: common/template.php (.navbar).
   ============================================================ */

/* ------------------------------------------------------------
   1. LOGO CELL → the TENDI wordmark (88px rail-aligned column)

   The mark is the full "Tendi." wordmark (viewBox 0 0 1860 494, about 3.77:1),
   not a square glyph, so the cell hands it the RAIL'S WIDTH and lets the height
   fall out of the ratio: 68px wide → ~18px tall, which keeps the letterforms
   legible. Sizing it to a square would have to squash or crop it, and boxing it
   inside the old 40px monogram tile would letterbox it down to unreadable.
   ------------------------------------------------------------ */
/* Every rule here is scoped to .navbar on purpose: the Groups form has an
   `<input type="file" id="logo">`, which a bare `#logo` selector would style as
   well once the SPA has that page loaded. See tendi-shell.css section 3. */

/* #logo is a Bootstrap column, so it carries the grid's 15px side padding. On an
   88px rail that leaves the mark 58px, and a wordmark shrinks with its width.
   Zero it here and let the link below own the inset instead. The border-right
   seam is unaffected: padding sits inside the border. */
.navbar #logo {
  padding-left: 0;
  padding-right: 0;
}

.navbar #logo a.tnd-logo-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 56px;
  /* 10px each side: the same inset .tnd-rail gives the rail items directly below
     (tendi-nav.css `padding: 14px 10px 18px`), so the mark lines up with the nav
     column. Also overrides the shell's `.navbar #logo a { padding-left: 4px }`. */
  padding: 0 10px !important;
  background: none !important;
}

/* The artwork on disk is violet (#5941BE, the file the owner supplied). The cell
   under it is now the violet rail, so it is painted WHITE here instead of being
   shipped a second time as a white copy of the same file.
     · brightness(0) crushes every colour channel to black, keeping the alpha
     · invert(1) then flips that black to #ffffff
   The mark is a single flat colour with a transparent ground, so the result is
   exactly white with the letterforms and antialiasing intact, not an approximation.
   Doing it this way keeps ONE Tendi asset in the repo: a second white .svg would
   silently drift the day the mark is redrawn, and would break every page if it
   were ever missed at commit time. */
.navbar #logo .tnd-logo-img {
  display: block;
  width: 100%;
  max-width: 68px;      /* the cap; the cell's 1px right border leaves 67px -> ~17.8px tall */
  height: auto;         /* the wordmark's own ratio, never a fixed height */
  filter: brightness(0) invert(1);
}

/* mobile: #logo is a full-width stacked row (col-xs-12), not rail-bound, so the
   mark can breathe a little more without crowding anything. */
@media (max-width: 767px) {
  .navbar #logo .tnd-logo-img { max-width: 96px; }
}

/* FORCED COLOURS (Windows High Contrast): the user's own background replaces the
   cell's violet, but a `filter` is NOT reverted by forced-colors, so the mark would
   stay white and vanish on the forced light canvas. Dropping the filter hands the
   artwork back its own violet, and images are exempt from forced-color-adjust, so
   it survives and stays visible whichever canvas the user has chosen.
   (No @media print counterpart: bootstrap.css hides .navbar entirely when printing,
   so nothing in this section reaches paper and a print block here would be dead.) */
@media (forced-colors: active) {
  .navbar #logo .tnd-logo-img { filter: none; }
}

/* Retained: the org-monogram tile the logo cell used before the wordmark landed.
   Nothing emits .tnd-logo-mark now, the rule is kept so the class contract is
   unchanged and a revert is a markup-only change. */
.navbar #logo .tnd-logo-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.navbar #logo a.tnd-logo-link:hover .tnd-logo-mark {
  background: var(--primary-hover);
}

/* ------------------------------------------------------------
   2. TOPBAR LEFT: hamburger + org chip
   ------------------------------------------------------------ */
.tnd-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
}

/* org identity chip: pill with the org's own mark + its name */
.tnd-org {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 14px 4px 5px;
  border: 1px solid var(--shell-hairline, #ebe4f3);
  border-radius: var(--radius-full);
  background: var(--paper-2);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  max-width: 280px;
}

.tnd-org:hover,
.tnd-org:focus {
  border-color: var(--shell-hairline-strong, #d8cce8);
  background: var(--cream-2);
  text-decoration: none;
}

/* The org MARK. ONE box, and NOTHING about it changes between the two states:
     · no logo   → violet-tint circle carrying the initials monogram
     · .has-logo → the very same violet-tint circle, carrying the site logo
   Only the CONTENT differs, which is what the card asked for: "it should be looking
   the same it looks with the initials but with an image instead". The logo state
   used to swap this circle for a larger rounded tile, so the org mark changed shape
   AND size depending on whether a tenant had uploaded anything.

   The fill in particular has to stay --primary-tint. A white fill was tried and is
   wrong: the chip behind it is also --paper-2, so a white disc on a white pill has
   no visible edge at all and the container disappears instead of matching the
   initials. Flat fills, no gradient: chrome here is flat (the rail is the exception). */
.tnd-org-avatar {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* .has-logo deliberately carries NO box styling of its own. It used to re-declare
   width, height, border-radius, background and a ring, and every one of those was a
   way for the two states to end up looking different. The class now does exactly one
   job, the rule below: hide the initials so the image shows in their place.

   the monogram stays in the DOM under the logo: if the image fails at request
   time its onerror drops .has-logo and this reveals the initials again */
.tnd-org-avatar.has-logo .tnd-org-initials { display: none; }

/* The artwork sits INSIDE the circle the way the initials do, and is never cropped.
   `contain` is kept deliberately: the card asked for the CONTAINER's shape, which
   the rule above now settles, so making the image fill the circle as well would be
   an extra unrequested change that costs a tenant its brand. A real example is in
   this repo: the legacy org's own mark (assets/admin/img/cards/logo.png) is 208x54,
   and filling a 30px circle with that shows about a quarter of one word.

   70%, and the number is geometry rather than taste: a square inscribed in a circle
   can only reach diameter/sqrt(2), about 70.7%, before its corners push past the
   curve. The parent clips to a 50% radius, so a square logo any larger than this
   would have its four corners visibly sliced. 70% is the largest box in which NO
   aspect ratio can touch the edge. The cost is that a very wide lockup lands small:
   the 208x54 mark above renders about 21px wide and 5px tall. It is legible as a
   shape next to the org NAME, which is spelled out in text right beside it, and the
   alternative is either a cropped brand or a clipped one.

   Centred with a transform rather than a matching `top/left: 15%`, so the size can
   be changed without silently decentring the image. Explicit width/height, not four
   offsets: an absolutely positioned REPLACED element with `width:auto` resolves to
   the image's INTRINSIC width and the `right` offset is dropped, so a big upload
   would overflow the circle. */
.tnd-org-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  max-width: none;
  object-fit: contain;      /* the org's mark is never cropped or stretched */
  object-position: center;
}

.tnd-org-logo.is-broken { display: none !important; }

.tnd-org-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

/* Retained: the "ORGANIZATION" label the chip carried above the name. The label
   is gone from the markup (an uppercase letterspaced eyebrow above a heading is
   out of the design system), the rule is kept so the class contract is unchanged. */
.tnd-org-eyebrow {
  font-family: var(--font-sans);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-4);
}

/* single-line now, so the name carries the chip on its own and can take a step up */
.tnd-org-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* mobile: the logo cell above already carries the branding, drop the chip text */
@media (max-width: 767px) {
  .tnd-org-text { display: none; }
  .tnd-org { padding: 4px; border: none; background: none; }
}

/* ------------------------------------------------------------
   3. USER CHIP: first name + ROLE (two-line).
   The chip shell / dropdown / hover come from tendi-shell.css; this restyles
   the avatar and the text block. The name line holds the person's FIRST NAME
   (login name only when there is no first name), and the role line is a plain
   readable label, not the tiny uppercase micro-caps it used to be: it names the
   access the account has, so it has to be readable at a glance.
   ------------------------------------------------------------ */
.panel-menu a.account .user-mini {
  text-align: left;
  line-height: 1.25 !important;
}

.user-mini .name {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  margin: 0 !important;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-mini .role {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;   /* was uppercase micro-caps + an inline style */
  font-weight: 500 !important;
  color: var(--ink-4) !important;
  margin: 0 !important;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* avatar = circular initials monogram; real photo overlays it when it loads.
   Flat violet tint + violet initials: the same icon-tile language as the rest of
   the skin, replacing the lavender→plum gradient (chrome here is flat). */
.account .avatar.tnd-user-avatar {
  position: relative;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--primary-tint);
  box-shadow: inset 0 0 0 1px var(--paper-edge);
  display: grid;
  place-items: center;
}

.tnd-user-initials {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--primary);
}

.account .avatar.tnd-user-avatar > img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 50% !important;
  object-fit: cover;
  background: var(--paper-2);
}

/* broken/empty photo → hide it so the monogram shows through */
.account .avatar.tnd-user-avatar > img.is-broken {
  display: none !important;
}

/* The caret is an inline SVG now, not an <i> glyph, so no font-size, and NO !important on the
   colour: tendi-shell.css turns it violet while the menu is open, and an !important here would
   silently win over that. (The rest of the chip's hover/open styling lives in tendi-shell.css,
   per §3 above.) */
.tnd-account-caret {
  color: var(--ink-4);
  margin-left: 2px;
  background: none !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------
   3b. ACCOUNT MENU HEADER: the identity block at the top of the dropdown.

   The chip in the bar is a first name and a role, which is the right amount of
   information to carry permanently. Opening the menu is the moment someone
   actually asks "which account am I in?", so the menu answers it in full: photo
   or monogram, full name, the account email, and the role as a pill. The rows
   below (Edit Account / Settings / Logout) are styled by tendi-shell.css section 7 and
   are untouched; this only adds the header above them.
   ------------------------------------------------------------ */
.panel-menu .tnd-account-menu > li.tnd-acct-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px 12px;
  margin: 0 0 6px;
  border-bottom: 1px solid var(--shell-hairline, #ebe4f3);
  cursor: default;
}

.tnd-acct-head-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--primary-tint);
  box-shadow: inset 0 0 0 1px var(--paper-edge);
  display: grid;
  place-items: center;
}

.tnd-acct-head-avatar .tnd-user-initials { font-size: 13px; }

.tnd-acct-head-avatar > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-2);
}

/* broken / empty photo → hide it so the monogram underneath shows */
.tnd-acct-head-avatar > img.is-broken { display: none !important; }

.tnd-acct-head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tnd-acct-head-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tnd-acct-head-mail {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tnd-acct-head-role {
  align-self: flex-start;
  max-width: 100%;
  margin-top: 6px;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: var(--primary-tint);
  color: var(--primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* History Log → violet pill button (icon + label).
   The <a> is a full-height (56px) flex box so the pill is reliably centered in
   the bar no matter what line-height the legacy .panel-menu rules force. */
.panel-menu > li > a.change_history_launcher {
  display: flex !important;
  align-items: center;
  height: 56px;
  width: auto !important;
  padding: 0 6px !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: normal !important;
}

.tnd-hist-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  background: var(--primary);
  color: #ffffff;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}

.tnd-hist-pill > i {
  margin: 0 !important;          /* kill legacy .panel-menu i { margin-top:8px; padding:5px } */
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  background: none !important;
  box-shadow: none !important;
}

.tnd-hist-label {
  line-height: 1;
}

.panel-menu > li > a.change_history_launcher:hover .tnd-hist-pill,
.panel-menu > li > a.change_history_launcher:focus .tnd-hist-pill {
  background: var(--primary-hover);
}

.panel-menu > li > a.change_history_launcher:active .tnd-hist-pill {
  transform: translateY(1px);
}

/* Active-Alerts launcher (replaces the bell): idle = quiet icon, active = red blinking button with a counter */
/* The <a> is a full-height (56px) flex box (same trick as History Log) so the pill is reliably
   centered in the bar; the inner .tnd-al-pill is the actual button. */
#alerts_notification.tnd-alert-launch{display:flex !important;align-items:center;height:56px;width:auto !important;padding:0 6px !important;margin:0 !important;background:none !important;border:0 !important;box-shadow:none !important;line-height:normal !important;text-decoration:none !important}
#alerts_notification.tnd-alert-launch .tnd-al-pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius:var(--radius-full);border:1px solid transparent;font-family:var(--font-sans);font-weight:700;font-size:13px;line-height:1;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
#alerts_notification.tnd-alert-launch .tnd-al-ico{display:inline-flex;align-items:center;line-height:0}
#alerts_notification.tnd-alert-launch .tnd-al-ico svg{width:19px;height:19px;display:block}
#alerts_notification.tnd-alert-launch .tnd-al-label{line-height:1}
#alerts_notification.tnd-alert-launch .tnd-al-count{min-width:20px;height:20px;margin:0;padding:0 6px;border-radius:var(--radius-full);display:inline-grid;place-items:center;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
/* idle = outlined "Alerts" button */
#alerts_notification.tnd-alert-launch.is-idle .tnd-al-pill{background:var(--paper-2);border-color:var(--paper-edge-strong);color:var(--ink-3)}
#alerts_notification.tnd-alert-launch.is-idle:hover .tnd-al-pill{background:var(--cream-2);color:var(--ink);border-color:var(--paper-edge-strong)}
#alerts_notification.tnd-alert-launch.is-idle .tnd-al-count{display:none !important}
/* active = red blinking "Active Alerts" + counter */
#alerts_notification.tnd-alert-launch.is-active .tnd-al-pill{background:var(--critical-tint);border-color:rgba(217,69,56,.32);color:#9e2a20;animation:tndAlAttn 1.25s ease-in-out infinite}
#alerts_notification.tnd-alert-launch.is-active:hover .tnd-al-pill{background:#fbe2df}
#alerts_notification.tnd-alert-launch.is-active .tnd-al-count{background:var(--critical) !important;color:#fff !important;display:inline-grid !important}
@keyframes tndAlAttn{0%,100%{box-shadow:0 0 0 0 rgba(217,69,56,0)}45%{box-shadow:0 0 0 4px rgba(217,69,56,.18)}50%{background:#fbdcd8}}
@media (prefers-reduced-motion:reduce){#alerts_notification.tnd-alert-launch.is-active .tnd-al-pill{animation:none}}