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

/* mobile: the second header line is ONE row. Below 768px both halves are Bootstrap
   col-xs-8 (template.php), 16 of 12 columns, so the right half wrapped to a third
   line under the fixed 112px header. That box was transparent but on top of the page
   (z-index 2000): it floated "Active Alerts" and the user chip over the content and
   swallowed taps meant for whatever sat under it, the list pages' Add buttons among
   them. Flex instead of the grid here, so the two halves share the 56px line: the
   menu button and org mark on the left, alerts and the user chip on the right. The
   clearfix pseudos go, since in a flex row they become empty items. */
@media (max-width: 767px) {
  .navbar #top-panel > .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    height: 56px;
  }
  .navbar #top-panel > .row::before,
  .navbar #top-panel > .row::after { content: none; }
  .navbar #top-panel > .row > .tnd-topbar-left { flex: 0 0 auto; width: auto; float: none; }
  .navbar #top-panel > .row > .top-panel-right { flex: 0 1 auto; width: auto; min-width: 0; float: none; }
  .navbar #top-panel .top-panel-right > .panel-menu { display: flex; align-items: center; float: none; margin: 0; }
  .navbar #top-panel .top-panel-right > .panel-menu > li { float: 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}}