/* The profile strip at the bottom of the side menu and its small menu (web/src/profile.ts). The side menu is dark navy
   in both the light and the dark theme, so one set of colours serves both; all pass WCAG AA contrast on it.
   Type scale: name 13px, second line 12px grey, menu items 13px and at least 32px high. */
:root{
  --pf-bg:#0b1a30;            /* menu background (a shade darker than the side menu) */
  --pf-line:#2b4363;          /* borders, dividers */
  --pf-text:#e5edf7;          /* 13.9 : 1 on the menu */
  --pf-muted:#a9b8cb;         /* 7.9 : 1 */
  --pf-hover:#183455;
  --pf-focus:#8ec5ff;
  --pf-gold:#f2b84b;          /* the Falcon owner: border, initials, badge (9.6 : 1 on the navy) */
  --pf-gold-ink:#241800;      /* text on gold (10.5 : 1) */
}
.sidebar .sidebar-footer{position:relative}
.sidebar #settings-nav-holder[hidden]{display:none!important}
.sidebar .falcon-profile{display:block!important;width:100%;margin:0;padding:0;grid-column:1/-1}
.sidebar .falcon-profile-strip{display:flex!important;align-items:center;gap:9px;width:100%;min-height:44px;padding:6px 8px;margin:0;
  border:1px solid var(--pf-line);border-radius:10px;background:transparent;color:var(--pf-text);cursor:pointer;text-align:left;position:relative;font:inherit}
.sidebar .falcon-profile-strip:hover{background:var(--pf-hover)}
.sidebar .falcon-profile-strip:focus-visible,.falcon-profile-menu .falcon-profile-item:focus-visible{outline:2px solid var(--pf-focus);outline-offset:2px}
.sidebar .falcon-profile-strip[aria-expanded="true"]{background:var(--pf-hover)}
.falcon-profile-avatar{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#2d4a6e;color:#fff;font-size:12px;font-weight:600;letter-spacing:.3px}
.falcon-profile-text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.25}
.falcon-profile-name{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;font-weight:600;color:var(--pf-text)}
.falcon-profile-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.falcon-profile-sub{font-size:12px;color:var(--pf-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.falcon-profile-chevron{flex:0 0 16px;display:inline-flex;color:var(--pf-muted)}
.falcon-profile-chevron svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* The What's new count on the strip (on the initials, so it shows in the narrow menu too). */
.sidebar .falcon-profile-badge{position:absolute;left:20px;top:1px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;font-size:10px;line-height:16px;text-align:center;background:#e11d48;color:#fff}
.sidebar .falcon-profile-badge[hidden]{display:none!important}

/* The menu (placed on screen by profile.ts, above the strip). */
.falcon-profile-menu{position:fixed;z-index:1200;background:var(--pf-bg);border:1px solid var(--pf-line);border-radius:10px;padding:6px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);color:var(--pf-text);max-height:calc(100vh - 24px);overflow:auto}
.falcon-profile-menu[hidden]{display:none!important}
.falcon-profile-menu .falcon-profile-item{display:flex!important;align-items:center;gap:8px;width:100%;min-height:32px;padding:6px 10px;border:0;border-radius:7px;
  background:transparent;color:var(--pf-text)!important;font-size:13px!important;font-weight:500;text-decoration:none!important;text-align:left;cursor:pointer;box-sizing:border-box}
.falcon-profile-menu .falcon-profile-item:hover{background:var(--pf-hover)}
.falcon-profile-heading{font-size:12px;color:var(--pf-muted);padding:4px 10px 2px;text-transform:none}
.falcon-profile-org{display:grid!important;grid-template-columns:18px 1fr auto;align-items:center}
.falcon-profile-org small{font-size:12px;color:var(--pf-muted)}
.falcon-profile-org-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.falcon-profile-org.current{font-weight:600}
.falcon-profile-tick{display:inline-flex;width:16px;color:#7dd3a8}
.falcon-profile-tick svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.falcon-profile-divider{height:1px;background:var(--pf-line);margin:5px 4px}
.falcon-profile-count{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e11d48;color:#fff;font-size:11px;line-height:18px;text-align:center}
.falcon-profile-count[hidden]{display:none!important}

/* The Falcon owner: gold border and initials, "Falcon owner" badge, and a gold line above the strip in an organisation. */
.sidebar .falcon-profile.owner .falcon-profile-strip{border-color:var(--pf-gold);border-width:1.5px}
.sidebar .falcon-profile.owner .falcon-profile-avatar{background:var(--pf-gold);color:var(--pf-gold-ink)}
.falcon-owner-badge{flex:0 0 auto;font-size:10px;font-weight:700;line-height:16px;padding:0 6px;border-radius:8px;background:var(--pf-gold);color:var(--pf-gold-ink);white-space:nowrap}
.sidebar .falcon-profile-support{font-size:12px;color:var(--pf-gold);margin:0 2px 6px;display:flex;align-items:center;gap:6px}
.sidebar .falcon-profile-support::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pf-gold);flex:0 0 7px}

/* Narrow (icons only) side menu: the strip is just the initials circle; the menu opens beside it. */
body.sidebar-collapsed .sidebar .falcon-profile-strip{justify-content:center;padding:6px 0;border-color:transparent;min-height:42px}
body.sidebar-collapsed .sidebar .falcon-profile.owner .falcon-profile-strip{border-color:var(--pf-gold)}
body.sidebar-collapsed .sidebar .falcon-profile-text,body.sidebar-collapsed .sidebar .falcon-profile-chevron{display:none!important}
body.sidebar-collapsed .sidebar .falcon-profile-support{font-size:0;justify-content:center;margin-bottom:4px}
body.sidebar-collapsed .sidebar .falcon-profile-badge{left:auto;right:4px}

/* Phones (upright): the side menu is a block at the top, so the strip is full width there too. */
@media(max-width:720px){
  body.sidebar-collapsed .sidebar .falcon-profile-text,body.sidebar-collapsed .sidebar .falcon-profile-chevron{display:flex!important}
  body.sidebar-collapsed .sidebar .falcon-profile-strip{justify-content:flex-start;padding:6px 8px;border-color:var(--pf-line)}
  body.sidebar-collapsed .sidebar .falcon-profile-support{font-size:12px;justify-content:flex-start}
  body.sidebar-collapsed .sidebar .falcon-profile-badge{left:20px;right:auto}
}

/* The owner's strip has more to say: the badge wraps under the name when there isn't room, and "Viewing <organisation>
   (support access)" may take two lines, so nothing is cut off. */
.sidebar .falcon-profile.owner .falcon-profile-name{flex-wrap:wrap;row-gap:2px}
.sidebar .falcon-profile.owner .falcon-profile-name-text{max-width:100%;white-space:normal}
.sidebar .falcon-profile.owner .falcon-profile-sub{white-space:normal;overflow:visible}