/* TradeForm Portal — PWA bell & notification centre. Dark-mode aware via existing tokens. */

.qsp-bell {
  position: relative;
  background: transparent;
  border: 0;
  color: inherit;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
  margin-right: 8px;
}
.qsp-bell:hover { background: rgba(0,0,0,0.06); }
.qsp-theme-dark .qsp-bell:hover { background: rgba(255,255,255,0.08); }
.qsp-bell:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

.qsp-bell-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.qsp-theme-dark .qsp-bell-badge { box-shadow: 0 0 0 2px #0b1220; }

.qsp-notif-panel {
  position: absolute;
  top: 62px;
  right: 12px;
  width: min(380px, calc(100vw - 24px));
  max-height: 70vh;
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(15,23,42,0.15), 0 4px 12px rgba(15,23,42,0.08);
  z-index: 9500;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.qsp-theme-dark .qsp-notif-panel {
  background: #131a2b;
  color: #e6edf7;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 20px 40px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.3);
}
.qsp-notif-panel[hidden] { display: none; }

.qsp-notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(15,23,42,0.06);
  font-weight: 700; font-size: 14px;
}
.qsp-theme-dark .qsp-notif-head { border-color: rgba(255,255,255,0.06); }

.qsp-notif-readall {
  background: transparent; border: 0; color: #3b82f6;
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.qsp-notif-readall:hover { background: rgba(59,130,246,0.08); }

.qsp-notif-list { overflow-y: auto; max-height: calc(70vh - 52px); }

.qsp-notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(15,23,42,0.04);
  text-decoration: none; color: inherit;
  transition: background .15s ease;
}
.qsp-notif-item:hover { background: rgba(15,23,42,0.03); }
.qsp-theme-dark .qsp-notif-item { border-color: rgba(255,255,255,0.04); }
.qsp-theme-dark .qsp-notif-item:hover { background: rgba(255,255,255,0.04); }

.qsp-notif-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent;
  margin-top: 6px; flex: 0 0 auto;
}
.qsp-notif-item.unread .qsp-notif-dot { background: #3b82f6; }
.qsp-notif-item.unread .qsp-notif-title { font-weight: 700; }

.qsp-notif-body { flex: 1; min-width: 0; }
.qsp-notif-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.qsp-notif-sub { font-size: 12px; opacity: .78; line-height: 1.35; }
.qsp-notif-time { font-size: 11px; opacity: .55; margin-top: 4px; }

.qsp-notif-empty { padding: 28px 16px; text-align: center; font-size: 13px; opacity: .6; }

@media (max-width: 640px) {
  .qsp-notif-panel { right: 8px; left: 8px; width: auto; top: 58px; }
}

/* =========================================================================
   TradeForm Portal — Mobile viewport / PWA layout hardening (v3.7.0)
   Fixes horizontal overflow on iPhone Safari + Home Screen standalone mode.
   ========================================================================= */

html, body.qsp-body {
  max-width: 100%;
  overflow-x: hidden;
}
body.qsp-body {
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }

/* App shell must never exceed the viewport width. */
.qsp-app {
  max-width: 100vw;
  width: 100%;
  overflow-x: hidden;
}

/* Main content area: constrain to viewport and honour iOS safe areas. */
.qsp-main {
  max-width: 100%;
  min-width: 0;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
}

/* Topbar hardening — never overflow, keep icons visible, truncate name. */
.qsp-topbar {
  max-width: 100vw;
  min-width: 0;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);
  flex-wrap: nowrap;
}
.qsp-topbar > * { min-width: 0; }
.qsp-topbar .qsp-brand {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qsp-topbar img,
.qsp-topbar .qsp-hamburger,
.qsp-topbar .qsp-theme-toggle,
.qsp-topbar .qsp-bell,
.qsp-topbar .qsp-user .qsp-avatar { flex: 0 0 auto; }
.qsp-topbar .qsp-user {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.qsp-topbar .qsp-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

/* Drawer overlay respects safe areas. */
.qsp-drawer-overlay {
  right: env(safe-area-inset-right);
  left: env(safe-area-inset-left);
}

/* Any grid/flex row: allow children to shrink. */
.qsp-hero,
.qsp-overview,
.qsp-fieldgrid,
.qsp-kpi,
.qsp-dash-row,
.qsp-dash-card,
.qsp-modal-box {
  max-width: 100%;
  min-width: 0;
}

/* Tablet / mobile refinements. */
@media (max-width: 1023px) {
  .qsp-topbar .qsp-brand { font-size: 14px; }
  .qsp-topbar { gap: 10px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .qsp-topbar .qsp-user-name { max-width: 120px; }
  .qsp-notif-panel { top: calc(58px + env(safe-area-inset-top)); }
}

@media (max-width: 640px) {
  .qsp-topbar .qsp-brand { display: none; }        /* keep logo + title only where space allows */
  .qsp-topbar .qsp-user-name { display: none; }    /* keep avatar visible; hide name */
  .qsp-topbar .qsp-user-logout { display: none; }  /* logout stays reachable via sidebar */
  .qsp-topbar .qsp-user { gap: 6px; }
  .qsp-topbar { gap: 8px; }
  .qsp-topbar .qsp-bell { margin-right: 2px; }
  .qsp-main { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}

/* Standalone (Home Screen app) — extra top padding for the status bar. */
@media (display-mode: standalone) {
  .qsp-topbar { padding-top: max(env(safe-area-inset-top), 6px); }
}

/* =========================================================================
   iOS "Add to Home Screen" install banner
   ========================================================================= */
.qsp-ios-install {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 9600;
  background: #0b1431;
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.4;
}
.qsp-ios-install[hidden] { display: none; }
.qsp-ios-install .qsp-ios-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  background: #14B8A6; display: inline-flex; align-items: center; justify-content: center;
}
.qsp-ios-install .qsp-ios-body { flex: 1; min-width: 0; }
.qsp-ios-install .qsp-ios-title { font-weight: 700; margin-bottom: 2px; font-size: 14px; }
.qsp-ios-install .qsp-ios-text { color: #c8d0e7; font-size: 13px; }
.qsp-ios-install .qsp-ios-actions {
  display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.qsp-ios-install .qsp-ios-btn {
  border: 0; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer; background: #fff; color: #0b1431;
}
.qsp-ios-install .qsp-ios-btn.secondary {
  background: transparent; color: #c8d0e7; border: 1px solid rgba(255,255,255,.2);
}
.qsp-ios-install .qsp-ios-close {
  position: absolute; top: 6px; right: 8px; background: transparent; border: 0;
  color: #94a3b8; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 6px;
}

/* Android "Install App" button (appears when beforeinstallprompt fires). */
.qsp-install-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff;
  border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; margin-right: 6px; flex: 0 0 auto;
}
.qsp-install-btn[hidden] { display: none; }

/* =========================================================================
   TradeForm Portal — v3.8.1 Mobile App Bar + Account Drawer
   Applies at mobile widths only. Desktop layout is untouched.
   ========================================================================= */

/* Default: hide mobile-only chrome on desktop */
.qsp-mobile-title { display: none; }
.qsp-bottomnav { display: none; }

/* Sidebar structural bits used by the mobile Account drawer — hidden on
   desktop so they don't disturb the existing desktop sidebar. */
.qsp-sd-scroll,
.qsp-sd-group,
.qsp-sd-heading,
.qsp-sd-item,
.qsp-sd-row,
.qsp-sd-footer,
.qsp-appearance { }

@media (min-width: 901px) {
  /* Desktop: keep the original flat list look. Hide new groupings/headings
     since desktop sidebar was already fine. */
  .qsp-sidebar .qsp-sd-heading,
  .qsp-sidebar .qsp-sd-footer,
  .qsp-sidebar .qsp-sd-appearance-row .qsp-appearance { display: none; }
  .qsp-sidebar .qsp-sd-item { display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 10px; color: #475569;
    font-weight: 500; font-size: 14px; }
  .qsp-sidebar .qsp-sd-item:hover { background: #F1F5F9; color: #0B1220; }
  .qsp-sidebar .qsp-sd-item.active { background: var(--qsp-teal-50);
    color: var(--qsp-teal-700); font-weight: 600; }
  .qsp-sidebar .qsp-sd-ic { display: inline-flex; }
  body.qsp-theme-dark .qsp-sidebar .qsp-sd-item { color: #CBD5E1; }
  body.qsp-theme-dark .qsp-sidebar .qsp-sd-item:hover { background: #172236; color: #fff; }
  body.qsp-theme-dark .qsp-sidebar .qsp-sd-item.active { background: rgba(45,212,191,.12); color: var(--qsp-teal-700); }
}

@media (max-width: 900px) {
  /* -- Top app bar --------------------------------------------------------
     Solid navy. Safe-area padding at the top. A stable ~58px content row
     below the status bar. Grid rows are updated so the main area starts
     BELOW the full bar height (safe area + row). */
  .qsp-topbar {
    height: auto;
    min-height: calc(58px + env(safe-area-inset-top));
    gap: 10px;
    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    display: flex;
    align-items: stretch;
    background: var(--qsp-ink);
    box-sizing: border-box;
  }
  .qsp-app {
    grid-template-columns: 1fr;
    grid-template-rows: calc(58px + env(safe-area-inset-top)) 1fr;
  }
  /* Inner row lives beneath the safe area and holds all controls centred. */
  .qsp-topbar > * { align-self: center; }

  /* Hide crowded desktop bits from the mobile bar */
  .qsp-topbar .qsp-hamburger,
  .qsp-topbar .qsp-brand,
  .qsp-topbar .qsp-theme-toggle,
  .qsp-topbar .qsp-user-name,
  .qsp-topbar .qsp-user-logout,
  .qsp-topbar .qsp-install-btn { display: none !important; }

  /* Left group: logo + current page title */
  .qsp-topbar img {
    height: 26px; width: auto; border-radius: 6px;
    flex: 0 0 auto;
  }
  .qsp-topbar .qsp-mobile-title {
    display: block;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: .1px;
    color: #fff;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
  }
  .qsp-topbar .qsp-spacer { display: none; }

  /* Right group: bell + avatar, aligned on the same centre line */
  .qsp-topbar .qsp-bell {
    width: 40px; height: 40px; margin: 0 2px 0 0;
    flex: 0 0 auto;
    color: #fff;
  }
  .qsp-topbar .qsp-bell:hover { background: rgba(255,255,255,.08); }
  .qsp-topbar .qsp-user { gap: 6px; min-width: 0; overflow: visible; }
  .qsp-topbar .qsp-user-toggle,
  .qsp-topbar .qsp-user .qsp-avatar {
    width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer;
    flex: 0 0 auto;
  }
  .qsp-bell-badge { box-shadow: 0 0 0 2px var(--qsp-ink); }
  body.qsp-theme-dark .qsp-bell-badge { box-shadow: 0 0 0 2px #070B14; }

  /* Notification panel drops from just under the bar */
  .qsp-notif-panel { top: calc(58px + env(safe-area-inset-top) + 4px); }

  /* -- Account drawer ----------------------------------------------------
     Compact side sheet: ~84% of viewport, capped at 340px. The dimmed
     backdrop remains visible to the right. */
  .qsp-sidebar {
    top: calc(58px + env(safe-area-inset-top));
    bottom: 0;
    left: 0;
    width: min(84vw, 340px);
    max-width: 340px;
    padding: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 8px 0 30px rgba(0,0,0,.22);
    overflow: hidden;
  }
  .qsp-drawer-overlay { top: calc(58px + env(safe-area-inset-top)); }

  .qsp-sd-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 10px calc(16px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .qsp-sd-group {
    display: flex; flex-direction: column; gap: 2px;
    padding: 4px 0;
  }
  .qsp-sd-group + .qsp-sd-group {
    border-top: 1px solid var(--qsp-border);
    padding-top: 10px;
  }
  .qsp-sd-heading {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--qsp-muted);
    padding: 4px 12px 6px;
  }
  .qsp-sd-item, .qsp-sd-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--qsp-text);
    font-size: 14px; font-weight: 500;
    text-decoration: none;
    min-height: 44px;
    background: transparent; border: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .qsp-sd-item .qsp-sd-ic, .qsp-sd-row .qsp-sd-ic {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--qsp-teal-50); color: var(--qsp-teal-700);
    flex: 0 0 auto;
  }
  .qsp-sd-item .qsp-sd-label, .qsp-sd-row .qsp-sd-label {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .qsp-sd-item:hover { background: #F1F5F9; }
  .qsp-sd-item.active { background: var(--qsp-teal-50); color: var(--qsp-teal-700); font-weight: 600; }
  .qsp-sd-item.active .qsp-sd-ic { background: var(--qsp-teal); color: #fff; }
  .qsp-sd-item:active { background: rgba(20,184,166,.14); }

  .qsp-sd-logout { color: var(--qsp-red); }
  .qsp-sd-logout .qsp-sd-ic { background: rgba(239,68,68,.10); color: var(--qsp-red); }

  .qsp-sd-footer {
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    font-weight: 600; color: var(--qsp-subtle);
    border-top: 1px solid var(--qsp-border);
    text-align: center;
  }

  /* Hide legacy sidebar bits (dots, old theme button, old version footer,
     old logout link) if they still render for any reason. */
  .qsp-sidebar .dot,
  .qsp-sidebar > .qsp-sidebar-theme,
  .qsp-sidebar > .qsp-sidebar-logout,
  .qsp-sidebar > .qsp-sidebar-version { display: none !important; }

  /* Dark theme drawer surfaces */
  body.qsp-theme-dark .qsp-sd-item:hover { background: #172236; }
  body.qsp-theme-dark .qsp-sd-item.active { background: rgba(45,212,191,.12); color: var(--qsp-teal-700); }
  body.qsp-theme-dark .qsp-sd-item.active .qsp-sd-ic { background: var(--qsp-teal); color: #0B1220; }

  /* -- Bottom nav (unchanged from v3.8.0, kept intact) ------------------- */
  .qsp-bottomnav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #0B1220;
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    z-index: 45;
    box-shadow: 0 -6px 20px rgba(0,0,0,.18);
  }
  body:not(.qsp-theme-dark) .qsp-bottomnav {
    background: #ffffff;
    border-top-color: rgba(15,23,42,.08);
    box-shadow: 0 -4px 18px rgba(15,23,42,.08);
  }
  .qsp-bn-item {
    appearance: none; background: transparent; border: 0;
    padding: 6px 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; text-decoration: none;
    color: #94A3B8;
    font-size: 11px; font-weight: 600; letter-spacing: .1px;
    min-height: 52px; cursor: pointer; border-radius: 10px;
  }
  .qsp-bn-item svg { display: block; }
  .qsp-bn-item.active { color: #14B8A6; }
  body:not(.qsp-theme-dark) .qsp-bn-item { color: #64748B; }
  body:not(.qsp-theme-dark) .qsp-bn-item.active { color: #0F766E; }
  .qsp-bn-item:focus-visible { outline: 2px solid #14B8A6; outline-offset: 2px; }

  /* Reserve room so fixed nav never covers content */
  .qsp-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Hide the bottom nav when a full-screen modal / workspace is open */
  body.qsp-modal-open .qsp-bottomnav { display: none; }
}

/* -- Appearance segmented control (shared) --------------------------------- */
.qsp-appearance {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 999px;
  background: var(--qsp-border);
  gap: 2px;
}
.qsp-appearance-btn {
  appearance: none; border: 0; cursor: pointer;
  background: transparent;
  color: var(--qsp-muted);
  font-size: 12.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
  min-width: 56px;
}
.qsp-appearance-btn.is-active {
  background: #fff; color: var(--qsp-ink);
  box-shadow: 0 1px 2px rgba(15,23,42,.12);
}
body.qsp-theme-dark .qsp-appearance { background: #152135; }
body.qsp-theme-dark .qsp-appearance-btn.is-active {
  background: var(--qsp-teal); color: #0B1220;
}


/* ============================================================
   v5.18.11 — Reliable mobile theme toggle + single-state icon
   ============================================================ */
/* Light mode shows only the moon. Dark mode shows only the sun. */
.qsp-topbar .qsp-theme-toggle .qsp-theme-icon-sun{
  display:none!important;
  visibility:hidden!important;
}
.qsp-topbar .qsp-theme-toggle .qsp-theme-icon-moon{
  display:block!important;
  visibility:visible!important;
}
body.qsp-theme-dark .qsp-topbar .qsp-theme-toggle .qsp-theme-icon-sun{
  display:block!important;
  visibility:visible!important;
}
body.qsp-theme-dark .qsp-topbar .qsp-theme-toggle .qsp-theme-icon-moon{
  display:none!important;
  visibility:hidden!important;
}

@media (max-width:900px){
  /* Override the older mobile rule that hid the theme control. */
  .qsp-topbar .qsp-theme-toggle{
    display:inline-flex!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    flex:0 0 40px!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:center!important;
    margin:0!important;
    padding:0!important;
    border-radius:12px!important;
    line-height:0!important;
    box-sizing:border-box!important;
  }
  .qsp-topbar .qsp-theme-toggle svg{
    width:18px!important;
    height:18px!important;
    margin:0!important;
    flex:0 0 18px!important;
  }
}