/* ui2-shell.css — workstream 4: the app shell (sidebar, topbar, notification centre).
 *
 * The shell lives OUTSIDE every view, so it is reached by putting the ui2 class on
 * the .page wrapper in index.html. Rules here are normal descendant selectors.
 *
 * TOKEN GOTCHA: the sidebar carries its own data-bs-theme="dark". Our dark tokens are
 * defined as [data-bs-theme="dark"] .ui2 — i.e. .ui2 must be a DESCENDANT of the dark
 * element. With .ui2 on .page (an ANCESTOR of the sidebar) that never matches, so
 * inside the sidebar the tokens still resolve to their light values. The sidebar block
 * below therefore redefines the tokens on itself rather than relying on inheritance.
 *
 * Spec §11 workstream 4.
 */

/* ============================ 21. sidebar ============================
   LIGHT rail, like Futu. The old sidebar was a dark slab next to light panels, which
   made the loudest thing on screen the navigation rather than the data.
   sidebar.js hard-codes data-bs-theme="dark" on this element, so Tabler still paints
   its dark treatment underneath; these rules override the surface, text and links
   explicitly rather than relying on the theme attribute. In dark mode the block at
   the bottom of this section swaps it back to a dark surface. */
.ui2 .navbar-vertical{
  /* A soft grey rail, NOT white: the content panels are white, so a tinted rail
     separates itself and needs no hard divider. White-on-white needed a border,
     and that border sat right next to the sidebar scrollbar track — the two
     vertical grey lines that looked like a seam. */
  --u2-panel:#f3f5f8;
  --u2-line:#e4e8ee;
  --u2-line-soft:#e9edf2;
  --u2-ink:#1b2430;
  --u2-ink-2:#525c6b;
  --u2-muted:#858e9c;
  --u2-accent:#2563eb;
  --u2-accent-soft:#e5edff;
  background:var(--u2-panel) !important;
  border-right:0;                    /* the tint IS the separation */
  color:var(--u2-ink);
  /* kill the native scrollbar gutter — it rendered as a grey strip against the rail.
     The rail still scrolls by wheel/trackpad. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.ui2 .navbar-vertical::-webkit-scrollbar{width:0;height:0;display:none;}
/* dark mode: the rail follows the app instead of staying white */
[data-bs-theme="dark"] .ui2 .navbar-vertical{
  --u2-panel:#151b23;
  --u2-line:#242c37;
  --u2-line-soft:#1c232c;
  --u2-ink:#e6edf3;
  --u2-ink-2:#aeb9c6;
  --u2-muted:#7d8794;
  --u2-accent:#5b8dff;
  --u2-accent-soft:#182338;
}
.ui2 .navbar-vertical .navbar-brand{
  font-size:var(--u2-fs-md);font-weight:700;letter-spacing:.01em;color:var(--u2-ink);
  padding:14px 16px;
}
/* group headers become quiet micro-labels, like every other section header in ui2 */
.ui2 .navbar-vertical .navHeader{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--u2-muted);padding:14px 16px 5px;
}
.ui2 .navbar-vertical .nav-link{
  font-size:var(--u2-fs-sm);font-weight:500;color:var(--u2-ink-2);
  padding:7px 14px;border-radius:var(--u2-radius);margin:1px 8px;gap:9px;
}
.ui2 .navbar-vertical .nav-link:hover{background:var(--u2-line-soft);color:var(--u2-ink);}
.ui2 .navbar-vertical .nav-link.active{
  /* Simplest highlight: the tinted pill alone. styles.css:2347 also paints a 3px
     left indicator via `box-shadow: inset 3px 0 0` - a Tabler-era accent that the
     ui2 rail does not need, and which sat half-clipped against the rail edge. The
     pseudo-element indicators are already killed further down; this kills the
     box-shadow variant, which is what actually still showed. */
  background:var(--u2-accent-soft);color:var(--u2-accent);font-weight:600;
  box-shadow:none !important;
}
.ui2 .navbar-vertical .nav-link-icon{font-size:16px;opacity:.9;}
.ui2 .navbar-vertical .nav-link.active .nav-link-icon{opacity:1;}

/* ============================ 22. topbar ============================
   Follows the app theme (unlike the sidebar), so it uses the inherited tokens. */
.ui2 .appTopbar{
  background:var(--u2-panel);
  border-bottom:1px solid var(--u2-line);
  box-shadow:none;
  min-height:52px;
}
.ui2 .appTopbar .page-title{
  font-size:var(--u2-fs-lg);font-weight:700;color:var(--u2-ink);letter-spacing:.01em;
}
.ui2 .appTopbar .btn,
.ui2 .appTopbar .btn-icon{
  box-sizing:border-box;height:32px;min-width:32px;
  border:1px solid transparent;background:transparent;color:var(--u2-ink-2);
  border-radius:var(--u2-radius);
}
.ui2 .appTopbar .btn:hover,
.ui2 .appTopbar .btn-icon:hover{background:var(--u2-line-soft);color:var(--u2-ink);border-color:var(--u2-line);}
.ui2 .appTopbar #topbarStatus{font-size:var(--u2-fs-xs);color:var(--u2-muted);}

/* user chip */
.ui2 .userChipBtn{
  box-sizing:border-box;height:32px;
  border:1px solid var(--u2-line);background:var(--u2-panel);color:var(--u2-ink);
  border-radius:var(--u2-radius);font:600 var(--u2-fs-sm)/1 inherit;padding:0 9px;gap:7px;
}
.ui2 .userChipBtn:hover{border-color:var(--u2-muted);}
.ui2 .userChip .userMeta{font-size:var(--u2-fs-sm);}
.ui2 .userChipCaret{color:var(--u2-muted);}

/* ============================ 23. notification centre ============================ */
.ui2 .notifBadge{
  background:var(--u2-down);color:#fff;font:700 10px/1 inherit;
  border-radius:999px;padding:2px 5px;font-variant-numeric:tabular-nums;
}
.ui2 .notifPanel{
  background:var(--u2-panel);border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);box-shadow:0 12px 34px rgba(10,16,26,.20);
}
.ui2 .notifPanelHead{
  padding:10px var(--u2-s4);border-bottom:1px solid var(--u2-line-soft);
}
.ui2 .notifPanelTitle{font-size:var(--u2-fs-md);font-weight:600;color:var(--u2-ink);}
.ui2 .notifMarkAll{
  background:transparent;border:0;color:var(--u2-accent);
  font:600 var(--u2-fs-sm)/1 inherit;cursor:pointer;
}
.ui2 .notifMarkAll:hover{text-decoration:underline;}
.ui2 .notifList{font-size:var(--u2-fs-sm);}

/* ============================ 24. daterangepicker ============================
   Third-party widget (its CSS comes from a CDN); this only re-skins its chrome. */
.ui2 .daterangepicker,
body > .daterangepicker{
  border:1px solid #e8ebef;border-radius:4px;box-shadow:0 12px 34px rgba(10,16,26,.18);
  font-family:"Noto Sans",system-ui,sans-serif;font-size:12px;
}
body > .daterangepicker td,
body > .daterangepicker th{font-variant-numeric:tabular-nums;}
body > .daterangepicker td.active,
body > .daterangepicker td.active:hover{background:#2563eb;}
body > .daterangepicker .drp-buttons .btn{
  border-radius:4px;font:600 12px/1 "Noto Sans",system-ui,sans-serif;padding:7px 13px;
}

/* Tabler paints the dark navbar via data-bs-theme on the element itself, so the
   brand text, nav labels and icons need explicit colour to survive on a light rail. */
.ui2 .navbar-vertical .navbar-brand,
.ui2 .navbar-vertical .navbar-brand a{color:var(--u2-ink) !important;}
.ui2 .navbar-vertical .nav-link{color:var(--u2-ink-2) !important;}
.ui2 .navbar-vertical .nav-link:hover{color:var(--u2-ink) !important;background:var(--u2-line-soft);}
.ui2 .navbar-vertical .nav-link.active{color:var(--u2-accent) !important;background:var(--u2-accent-soft);}
.ui2 .navbar-vertical .navHeader{color:var(--u2-muted) !important;}
.ui2 .navbar-vertical hr,
.ui2 .navbar-vertical .dropdown-divider{border-color:var(--u2-line);}

/* No second divider between rail and content: Tabler/the app can also paint a
   border or shadow on the sidebar and on the page wrapper. With a tinted rail both
   are redundant, and together they read as the grey seam. */
.ui2 .navbar-vertical,
.ui2 .navbar-vertical.navbar-expand-lg{box-shadow:none;}
.ui2 .page-wrapper{border-left:0;}
/* the rail sits flush; content keeps the app background */
.ui2 .page-body{background:transparent;}

/* ============================ 25. user chip + its dropdown ============================
   The chip was a hard pill (999px radius, full border) which read as the heaviest
   object in the topbar - a black box around a name. In ui2 it is a quiet control the
   same height as everything else beside it, and only gains a background on hover.
   The dropdown is Bootstrap/Tabler default, so it needs the panel treatment. */
.ui2 .userChip{
  border:0;border-radius:var(--u2-radius);background:transparent;
}
.ui2 .userChipBtn{
  box-sizing:border-box;height:32px;
  display:inline-flex;align-items:center;gap:8px;
  padding:0 8px 0 3px;
  border:1px solid transparent;border-radius:var(--u2-radius);
  background:transparent;text-decoration:none;
}
.ui2 .userChipBtn:hover{background:var(--u2-line-soft);border-color:var(--u2-line);}
.ui2 .userAvatar{
  width:24px;height:24px;border-radius:var(--u2-radius);
  font-size:11px;font-weight:700;
}
.ui2 .userName{font-size:var(--u2-fs-sm);font-weight:600;color:var(--u2-ink);line-height:1.15;}
.ui2 .userRole{font-size:9.5px;letter-spacing:.07em;color:var(--u2-muted);line-height:1.15;}
.ui2 .userChipCaret{font-size:13px;color:var(--u2-muted);}

/* dropdown: same panel language as every other popover in the app */
.ui2 .dropdown-menu{
  background:var(--u2-panel);
  border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);
  box-shadow:0 12px 34px rgba(10,16,26,.18);
  padding:5px;
  min-width:210px;
  font-size:var(--u2-fs-sm);
}
.ui2 .dropdown-menu .dropdown-header{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--u2-muted);padding:7px 10px 5px;
}
.ui2 .dropdown-menu .dropdown-item{
  border-radius:4px;
  padding:8px 10px;
  color:var(--u2-ink);
  font-size:var(--u2-fs-sm);
  display:flex;align-items:center;gap:8px;
}
.ui2 .dropdown-menu .dropdown-item:hover,
.ui2 .dropdown-menu .dropdown-item:focus{
  background:var(--u2-line-soft);color:var(--u2-ink);
}
.ui2 .dropdown-menu .dropdown-item i{color:var(--u2-muted);font-size:15px;}
.ui2 .dropdown-menu .dropdown-item:hover i{color:var(--u2-ink-2);}
.ui2 .dropdown-menu .dropdown-divider{border-color:var(--u2-line);margin:5px 2px;}
/* destructive action stays red, but as text - not a shouty block */
.ui2 .dropdown-menu .dropdown-item.text-danger,
.ui2 .dropdown-menu .dropdown-item[href*="logout"],
.ui2 .dropdown-menu #logoutBtn{color:var(--u2-down);}
.ui2 .dropdown-menu .dropdown-item.text-danger i,
.ui2 .dropdown-menu #logoutBtn i{color:var(--u2-down);}
.ui2 .dropdown-menu .dropdown-item.text-danger:hover,
.ui2 .dropdown-menu #logoutBtn:hover{background:rgba(224,69,58,.08);color:var(--u2-down);}

/* notification bell + dark-mode toggle: same quiet icon-button shape */
.ui2 .notifBell,
.ui2 .themeToggle{
  box-sizing:border-box;width:32px;height:32px;
  border:1px solid transparent;border-radius:var(--u2-radius);
  background:transparent;color:var(--u2-ink-2);
}
.ui2 .notifBell:hover,
.ui2 .themeToggle:hover{background:var(--u2-line-soft);border-color:var(--u2-line);color:var(--u2-ink);}
.ui2 .notifBadge{
  top:-3px;right:-3px;min-width:16px;height:16px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;padding:0 4px;
}
html.mobileLayout .ui2 .userChipBtn,
html.mobileLayout .ui2 .notifBell,
html.mobileLayout .ui2 .themeToggle{height:var(--u2-ctl);}
html.mobileLayout .ui2 .notifBell,
html.mobileLayout .ui2 .themeToggle{width:var(--u2-ctl);}

/* Kill the leftover active-indicator bar on the left edge of the active nav item.
   Tabler/Bootstrap draw it with a pseudo-element; with the ui2 rail the active
   state is already carried by the tinted pill, so the sliver is just an artifact
   half-clipped by the rail edge. */
.ui2 .navbar-vertical .nav-link::before,
.ui2 .navbar-vertical .nav-link::after,
.ui2 .navbar-vertical .nav-link.active::before,
.ui2 .navbar-vertical .nav-link.active::after,
.ui2 .navbar-vertical .nav-item::before,
.ui2 .navbar-vertical .nav-item.active::before{
  content:none !important;
  display:none !important;
  border:0 !important;
  background:none !important;
}

/* ============================ brand mark ============================
   The brand was the emoji chart glyph, which rendered as a small multi-coloured
   bitmap - the only piece of colour in the rail and the one thing that could not
   follow the theme. It is now an inline candlestick mark inheriting currentColor,
   so it takes the accent in light mode and the dark-mode ink without a second asset. */
.ui2 .navbar-brand{
  display:flex;align-items:center;gap:9px;
  font-size:var(--u2-fs-md);font-weight:700;letter-spacing:.01em;
  color:var(--u2-ink) !important;
  text-decoration:none;
}
.ui2 .navbar-brand .brandMark{
  /* The sidebar mark carries the brand colour; the TAB icon is a filled blue tile,
     because a favicon has to read at 16px on whatever chrome the browser paints. */
  flex:0 0 auto;color:var(--u2-accent);stroke:currentColor;display:block;
}
.ui2 .navbar-brand .brandName{white-space:nowrap;}
.ui2 .navbar-brand:hover .brandMark{filter:brightness(1.08);}
/* collapsed icon rail: keep the mark, drop the wordmark */
.ui2.sidebar-collapsed .navbar-brand .brandName{display:none;}
.ui2.sidebar-collapsed .navbar-brand{justify-content:center;padding:14px 0;}

/* ============================ sign-in card ============================
   login.html predates ui2 and kept its own look: a 12px card with a soft drop shadow,
   its own blue (#2f6fed, not the app accent) and 8px fields. It is the first screen on
   a phone, so it read as a different product from the app it signs you into. Mapped
   onto the tokens; the page keeps its own centred layout. */
.ui2 .loginCard{
  border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);
  box-shadow:none;
  background:var(--u2-panel);
}
.ui2 .loginCard h1{font-size:var(--u2-fs-lg);font-weight:700;color:var(--u2-ink);}
.ui2 .loginCard p.sub{font-size:var(--u2-fs-sm);color:var(--u2-ink-2);}
.ui2 .loginCard label{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--u2-muted);
}
.ui2 .loginCard input{
  height:var(--u2-ctl);border-radius:var(--u2-radius);
  border:1px solid var(--u2-line);background:var(--u2-panel);color:var(--u2-ink);
}
.ui2 .loginCard input:focus{
  border-color:var(--u2-accent);box-shadow:0 0 0 3px var(--u2-accent-soft);
}
.ui2 .loginCard button{
  height:var(--u2-ctl);border-radius:var(--u2-radius);
  background:var(--u2-accent);color:#fff;font-size:var(--u2-fs-md);font-weight:600;
}
.ui2 .loginCard button:hover{background:var(--u2-accent);filter:brightness(1.06);}
.ui2 .loginCard .guestBtn{
  background:var(--u2-accent-soft) !important;color:var(--u2-accent) !important;
  border:1px solid var(--u2-line) !important;
}
.ui2 .loginCard .guestBtn:hover{background:var(--u2-accent-soft) !important;filter:brightness(.98);}
.ui2 .loginDivider{font-size:var(--u2-fs-xs);color:var(--u2-muted);}
.ui2 .loginCard .hint{font-size:var(--u2-fs-xs);color:var(--u2-muted);}
/* the one primary action on the screen keeps a size the general button rule would
   otherwise shrink to chrome scale */
html.mobileLayout .ui2 .loginCard button{font-size:var(--u2-fs-md) !important;}