/* ===========================================================================
   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); }
.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; }
.userchip { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--r); cursor: pointer; }
.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); }
.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; }
}