/* ===========================================================================
   app.css — application shell: sidebar, topbar, layout, login, module chrome
   =========================================================================== */

.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.app.collapsed { grid-template-columns: var(--sidebar-collapsed) 1fr; }

/* Sidebar ---------------------------------------------------------------- */
.sidebar { background: var(--rayyan-maroon-deep); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; }
.sidebar-logo { padding: var(--sp-4); border-bottom: 1px solid rgba(255,255,255,.12); height: 72px; display: flex; align-items: center; }
.sidebar-logo svg, .sidebar-logo img { width: 148px; height: auto; }
.app.collapsed .sidebar-logo svg, .app.collapsed .sidebar-logo img { display: none; }
.app.collapsed .sidebar-logo::after { content: "R"; font-family: var(--font-display); font-size: 28px; color: #fff; }
.nav { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-2);
  /* The sidebar's scrollbar is left the same colour as the sidebar itself. A
     pale system scrollbar cuts a bright stripe down a dark panel and reads as a
     seam between two things rather than one panel that happens to scroll. It
     still scrolls by wheel, trackpad, keyboard and drag — it is invisible, not
     absent. `scrollbar-color` covers Firefox; the ::-webkit rules cover the
     rest, and both name the sidebar's own background rather than transparent,
     so nothing shows through from behind. */
  scrollbar-width: thin;
  scrollbar-color: var(--rayyan-maroon-deep) var(--rayyan-maroon-deep); }
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-track { background: var(--rayyan-maroon-deep); }
.nav::-webkit-scrollbar-thumb { background: var(--rayyan-maroon-deep); border-radius: 4px; }
/* A faint lift on hover, so somebody looking for the scrollbar can still find
   it without it being visible the rest of the time. */
.nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
.nav-group { margin-bottom: var(--sp-4); }
.nav-group .grp-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.45); padding: var(--sp-2) var(--sp-3); font-weight: 700; }
.app.collapsed .grp-label { text-align: center; font-size: 8px; }
.nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r); color: rgba(255,255,255,.82); font-size: var(--fs-14); font-weight: 500; cursor: pointer; transition: background var(--t-fast); margin-bottom: 2px; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--rayyan-maroon); color: #fff; }
.nav-item .plate { width: 26px; height: 30px; border-radius: var(--arch-radius); background: rgba(255,255,255,.12); display: grid; place-items: center; flex: none; }
.nav-item.active .plate { background: rgba(255,255,255,.22); }
.nav-item .plate svg { width: 15px; height: 15px; stroke: #fff; }
.nav-item .txt { flex: 1; white-space: nowrap; overflow: hidden; }
.nav-item .badge-num { background: var(--gold); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-pill); }
.app.collapsed .nav-item .txt, .app.collapsed .nav-item .badge-num { display: none; }
.app.collapsed .nav-item { justify-content: center; }

/* Topbar ----------------------------------------------------------------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5); }
.topbar .search { flex: 1; max-width: 460px; position: relative; }
.topbar .search input { height: 36px; padding: 0 var(--sp-3) 0 34px; border: 1px solid var(--hairline); border-radius: var(--r); background: var(--parchment); width: 100%; font-size: var(--fs-13); }
.topbar .search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--graphite-mid); }
.topbar .search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; font-family: var(--font-mono); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 1px 5px; color: var(--graphite-mid); }
.topbar-select { height: 34px; border: 1px solid var(--hairline); border-radius: var(--r); padding: 0 26px 0 var(--sp-3); font-size: var(--fs-13); font-weight: 500; background: var(--surface); }
.bell { position: relative; }
.bell .pill-count { position: absolute; top: -4px; right: -4px; }
/* A button now, so it is reachable by keyboard and reads as clickable —
   the reset keeps it looking exactly as it did as a div. */
.userchip { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--r); cursor: pointer;
  border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.userchip:hover { background: var(--parchment); }
.userchip .who { text-align: left; line-height: 1.2; }
.userchip .who .n { font-size: var(--fs-13); font-weight: 600; }
.userchip .who .r { font-size: 11px; color: var(--graphite-mid); }

/* Content ---------------------------------------------------------------- */
.content { padding: var(--sp-6); max-width: var(--content-max); width: 100%; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-34); }
.page-head .sub { color: var(--graphite-mid); font-size: var(--fs-14); margin-top: 2px; }
.breadcrumb { font-size: var(--fs-13); color: var(--graphite-mid); margin-bottom: var(--sp-2); }
.breadcrumb a { color: var(--graphite-mid); }

.grid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-12 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); }
.section-title { font-family: var(--font-display); font-size: var(--fs-20); margin: var(--sp-6) 0 var(--sp-3); }

/* Login ------------------------------------------------------------------ */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--rayyan-maroon-deep); padding: var(--sp-4); }
.login-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: min(880px, 100%); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.login-brand { background: var(--rayyan-maroon); color: #fff; padding: var(--sp-10) var(--sp-8); display: flex; flex-direction: column; justify-content: space-between; }
.login-brand .arch { width: 84px; height: 96px; background: rgba(255,255,255,.14); margin-bottom: var(--sp-6); }
.login-brand h2 { font-family: var(--font-display); font-size: var(--fs-34); }
.login-form { padding: var(--sp-10) var(--sp-8); }
.role-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.role-opt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--hairline); border-radius: var(--r); cursor: pointer; text-align: left; }
.role-opt:hover { border-color: var(--rayyan-maroon); background: var(--parchment); }
.role-opt .avatar { background: var(--rayyan-maroon-tint); color: var(--rayyan-maroon-deep); }
.role-opt .rn { font-weight: 600; font-size: var(--fs-14); }
.role-opt .rd { font-size: var(--fs-12); color: var(--graphite-mid); }

/* Command palette -------------------------------------------------------- */
.cmdk { width: min(600px, 100%); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.cmdk input { height: 52px; border: none; border-bottom: 1px solid var(--hairline); padding: 0 var(--sp-5); font-size: var(--fs-16); width: 100%; }
.cmdk-list { max-height: 360px; overflow-y: auto; padding: var(--sp-2); }
.cmdk-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r); cursor: pointer; font-size: var(--fs-14); }
.cmdk-item.active, .cmdk-item:hover { background: var(--rayyan-maroon-tint); }
.cmdk-item .k-cat { margin-left: auto; font-size: var(--fs-12); color: var(--graphite-mid); }

/* Guided tour ------------------------------------------------------------ */
.tour-overlay { position: fixed; inset: 0; z-index: var(--z-tour); pointer-events: none; }
.tour-scrim { position: fixed; inset: 0; background: rgba(51,54,59,.55); z-index: var(--z-tour); }
.tour-pop { position: fixed; z-index: calc(var(--z-tour) + 1); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 340px; padding: var(--sp-5);
  /* The step texts are paragraphs now, not captions. The card itself is capped
     to the viewport and the TEXT scrolls inside it, so Next and End tour are on
     screen no matter how much a step has to say or how small the screen is. */
  max-width: calc(100vw - 24px); max-height: calc(100vh - 24px);
  display: flex; flex-direction: column; }
.tour-pop .tour-text { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.tour-pop .tour-foot { flex: none; }
/* A phone gets a bottom sheet: full width, thumb-reachable buttons, and the
   spotlight still visible above it. */
@media (max-width: 640px) {
  .tour-pop { left: 10px !important; right: 10px; bottom: 10px; top: auto !important;
    width: auto; transform: none !important; max-height: 55vh; }
}
.tour-pop .step-n { font-size: var(--fs-12); color: var(--gold); font-weight: 700; letter-spacing: .04em; }
.tour-pop h4 { font-family: var(--font-display); font-size: var(--fs-20); margin: var(--sp-1) 0 var(--sp-2); }
.tour-spot { position: fixed; z-index: var(--z-tour); border-radius: var(--r-lg); box-shadow: 0 0 0 9999px rgba(51,54,59,.55); pointer-events: none; transition: all var(--t-route) var(--ease); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: var(--z-drawer); width: var(--sidebar-w); transform: translateX(-100%); transition: transform var(--t-route) var(--ease); }
  .app.nav-open .sidebar { transform: none; }
  .grid-stats, .grid-2, .grid-3, .grid-12 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .login-card { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .menu-toggle { display: inline-flex !important; }
}
@media (min-width: 901px) { .menu-toggle { display: none; } }
@media (max-width: 560px) {
  .content { padding: var(--sp-4); }
  .page-head h1 { font-size: var(--fs-26); }
  .topbar .search { display: none; }
}

/* ---- parked forms ---------------------------------------------------------
   A minimised form waits here instead of being destroyed. The bar only exists
   while something is parked, so it costs nothing on a clean screen. */
.parkbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 12px;
  background: var(--surface); border-top: 1px solid var(--hairline);
  box-shadow: 0 -2px 12px rgba(0,0,0,.06); }
.parkwrap { display: inline-flex; align-items: stretch; border: 1px solid var(--rayyan-maroon);
  border-radius: var(--r); overflow: hidden; background: var(--rayyan-maroon-tint); }
.parkchip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 0; background: none; font: inherit; color: var(--rayyan-maroon-deep);
  cursor: pointer; font-size: var(--fs-13); }
.parkchip:hover { background: rgba(138,21,56,.08); }
.parkchip .pk-t { font-weight: 600; }
.parkchip .pk-n { color: var(--graphite-mid); font-size: 11px; }
.parkchip-x { border: 0; border-left: 1px solid var(--rayyan-maroon); background: none;
  padding: 0 9px; cursor: pointer; color: var(--rayyan-maroon-deep); display: grid; place-items: center; }
.parkchip-x:hover { background: var(--clay-tint); color: var(--clay); }
@media (max-width: 640px) { .parkbar { padding: 6px 8px; } .parkchip .pk-n { display: none; } }