/* ============================================================
   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.
   ------------------------------------------------------------ */
/* #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. */
#logo {
  padding-left: 0;
  padding-right: 0;
}

#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 `#logo a { padding-left: 4px }`. */
  padding: 0 10px !important;
  background: none !important;
}

#logo .tnd-logo-img {
  display: block;
  width: 100%;
  max-width: 68px;      /* 88px rail width minus 2x 10px inset -> 18px tall */
  height: auto;         /* the wordmark's own ratio, never a fixed height */
}

/* 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) {
  #logo .tnd-logo-img { max-width: 96px; }
}

/* 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. */
#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;
}

#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. Two states, same box:
     · no logo  → flat violet-tint circle carrying the initials monogram
     · .has-logo → light rounded tile carrying the tenant's site logo
   A logo is a wide or padded artwork, so a circle would crop it; the tile gives
   it a neutral card to sit on and `object-fit: contain` keeps it whole. Flat
   fills, no gradient: chrome in this system 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;
}

.tnd-org-avatar.has-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--paper-edge);
}

/* 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; }

/* 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 tile. */
.tnd-org-logo {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  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}}