/* The top ribbon shared by the Service Desk and the Tenant Manager (src/views/partials/ribbon.ejs).
   Fixed Techn22 colours so it looks identical in both apps and in light or dark mode. */
.t22-ribbon { --t22-bg: #1E1E1B; --t22-ink: #F0F0EC; --t22-muted: #B9B9B2; --t22-orange: #FF4A14; --t22-line: #ffffff1f;
  position: sticky; top: 0; z-index: 50; height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: var(--t22-bg); color: var(--t22-ink); border-bottom: 1px solid #000; font: 500 14px/1.2 "Montserrat", "Segoe UI", system-ui, sans-serif; box-sizing: border-box; }
.t22-ribbon * { box-sizing: border-box; }
.t22-switch { position: relative; }
.t22-switch > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px 10px 6px 0; border-radius: 4px; user-select: none; }
.t22-switch > summary::-webkit-details-marker { display: none; }
.t22-switch > summary:hover .t22-app, .t22-switch[open] > summary .t22-app { color: #fff; }
.t22-switch > summary:focus-visible { outline: 2px solid var(--t22-orange); outline-offset: 2px; }
.t22-word { color: var(--t22-orange); font-weight: 600; letter-spacing: .5em; font-size: 15px; padding-left: 12px; border-left: 2px solid var(--t22-orange); line-height: 24px; }
.t22-app { color: var(--t22-muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding-left: 14px; border-left: 1px solid var(--t22-line); line-height: 24px; }
.t22-chev { width: 12px; height: 12px; color: var(--t22-muted); transition: transform .15s; }
.t22-switch[open] .t22-chev { transform: rotate(180deg); }
.t22-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px; background: #2A2A26; border: 1px solid #ffffff24; border-radius: 6px;
  box-shadow: 0 12px 32px #0008; padding: 6px; display: grid; gap: 2px; z-index: 60; }
.t22-menu a { display: block; padding: 10px 12px; border-radius: 4px; color: var(--t22-ink); text-decoration: none; border-left: 3px solid transparent; }
.t22-menu a:hover, .t22-menu a:focus-visible { background: #ffffff12; outline: none; }
.t22-menu a.is-active { border-left-color: var(--t22-orange); background: #ffffff0d; }
.t22-menu strong { display: block; font-weight: 600; font-size: 14px; }
.t22-menu small { display: block; color: var(--t22-muted); font-size: 12px; margin-top: 2px; }
.t22-spacer { flex: 1; }
.t22-user { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--t22-ink); font-size: 13px; }
.t22-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--t22-orange); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.t22-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.t22-out { margin: 0; }
.t22-out button { all: unset; cursor: pointer; color: var(--t22-muted); font-size: 12px; padding: 6px 8px; border-radius: 4px; }
.t22-out button:hover, .t22-out button:focus-visible { color: #fff; background: #ffffff14; }
@media (max-width: 640px) { .t22-ribbon { padding: 0 12px; gap: 8px; } .t22-word { letter-spacing: .3em; font-size: 13px; } .t22-name { display: none; } .t22-menu { min-width: 250px; } }