/*
 * Shell styles shared by the Secutix Hub SPAs.
 *
 * index.html, the Data Studio shell and productivity.html each render the same rail,
 * the same main column and the same mobile bar, and each used to carry its own
 * copy of the CSS for them. Three copies means a change to the sidebar is three
 * edits, and the third one gets forgotten — which is how the three had already
 * drifted by the time this file was written.
 *
 * Only the rules that were byte-identical in all three pages live here. Eleven
 * were not, and they deliberately stay in their pages: .sidebar-item,
 * .sidebar-brand, .sidebar-nav, .sidebar-sub, .sidebar-switch, .sidebar-wordmark,
 * .content-header, .content-title, .content-body, .mobile-brand and
 * .mobile-hamburger. Moving those would have meant choosing which page's version
 * wins, and that is a design decision with a visible result, not a refactor.
 * Reconcile them and they can come here too.
 *
 * This file is linked before each page's own <style>, so a page rule still wins
 * on equal specificity. Per-page overrides keep working.
 */

.sidebar-switch:hover {
      border-color: rgb(255 255 255/.55);
      color: #fff;
      background: rgb(255 255 255/.18);
    }

.app-layout { display: flex; min-height: 100vh; }

/* The rail is one solid brand panel — the mark, the labels and the identity
       all sit white on brand, the way the cockpit does it. Because there is no
       second surface, every state below is an alpha of white or black over that
       one fill rather than a new colour: hover lightens, selection darkens. */
    .sidebar {
      width: 232px;
      flex-shrink: 0;
      background: var(--brand-mid);
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0; left: 0; bottom: 0;
      z-index: 40;
      overflow-y: auto;
    }

/* The mark inverts: a white tile carrying a brand glyph (stroke=currentColor),
       which is the only way it stays visible on the brand fill. */
    .sidebar-logo-box {
      width: 30px; height: 30px;
      background: #fff;
      color: var(--brand-mid);
      border-radius: 5px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

.sidebar-item:hover:not(.active) { background: rgb(255 255 255/.13); color: #fff; }

.sidebar-item.active { background: rgb(0 0 0/.2); color: #fff; font-weight: 700; }

.sidebar-item.active:hover { background: rgb(0 0 0/.26); }

.sidebar-item svg { flex-shrink: 0; opacity: .88; }

.sidebar-item.active svg { opacity: 1; }

.sidebar-footer {
      position: relative;
      padding: .5rem .6rem .65rem;
      border-top: 1px solid rgb(255 255 255/.18);
      flex-shrink: 0;
    }

/* ── User button ─────────────────────────────────────── */
    .sidebar-user-btn {
      display: flex; align-items: center; gap: .6rem;
      width: 100%; padding: .55rem .7rem;
      border: none; background: transparent; border-radius: 8px;
      cursor: pointer; font-family: inherit; text-align: left;
      transition: background .12s;
    }

.sidebar-user-btn:hover { background: rgb(255 255 255/.14); }

/* White disc, brand initials — the chip the launcher band already asked for,
       now the base rather than an override. */
    .sidebar-avatar {
      width: 30px; height: 30px; border-radius: 50%;
      background: #fff;
      color: var(--brand); font-size: .7rem; font-weight: 700; letter-spacing: .03em;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

.sidebar-user-info { flex: 1; min-width: 0; }

.sidebar-user-name {
      font-size: .8rem; font-weight: 600; color: #fff;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

.sidebar-user-email {
      font-size: .68rem; color: rgb(255 255 255/.65);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

.user-menu-chevron { color: rgb(255 255 255/.75); flex-shrink: 0; transition: transform .15s; }

.user-menu-chevron.open { transform: rotate(180deg); }

/* ── User dropdown popup ─────────────────────────────── */
    .user-menu {
      position: absolute; bottom: calc(100% + 4px);
      left: .55rem; right: .55rem;
      background: #fff; border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 8px 24px rgb(0 0 0/.12), 0 2px 6px rgb(0 0 0/.06);
      padding: .3rem 0; z-index: 200;
    }

.user-menu-hdr {
      padding: .7rem 1rem .55rem;
      border-bottom: 1px solid var(--border);
    }

.user-menu-hdr-name { font-size: .85rem; font-weight: 600; color: var(--text); }

.user-menu-hdr-email { font-size: .72rem; color: var(--muted); margin-top: .08rem; word-break: break-all; }

.user-menu-item {
      display: flex; align-items: center; gap: .55rem;
      width: 100%; padding: .55rem 1rem;
      background: transparent; border: none;
      font-size: .83rem; font-weight: 500; color: var(--text);
      font-family: inherit; cursor: pointer; text-align: left;
      transition: background .1s;
    }

.user-menu-item:hover { background: var(--bg); }

.user-menu-item.danger { color: var(--danger); }

.user-menu-item.danger:hover { background: var(--danger-bg); }

.main-content {
      margin-left: 232px; flex: 1;
      min-height: 100vh; background: var(--bg);
    }

/* ── Mobile ──────────────────────────────────────────── */
    .mobile-bar {
      display: none; position: sticky; top: 0; z-index: 30;
      height: 52px;
      background: linear-gradient(135deg, var(--brand), var(--brand-mid));
      padding: 0 1rem; align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 8px rgb(0 0 0/.18);
    }

.sidebar-scrim {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.4); z-index: 39;
    }