/* ===========================================================================
   Pharma Brain — shared application shell.

   One chrome for every application in the suite: a dark icon rail on the left
   that expands to a drawer, and a light topbar carrying the ResEt mark, the
   product name and the app switcher. Page-level styling lives in each app's
   own stylesheet; nothing but the chrome belongs here.

   Load this BEFORE the per-app stylesheet so an app can still override a
   chrome rule when it genuinely needs to.
   =========================================================================== */

:root {
  /* Brand primitives — the literal values, referenced only in this block. */
  --shell-green-900: #012a1f;
  --shell-green-800: #014531;
  --shell-green-600: #026d4a;
  --shell-green-400: #4a6b5d;
  --shell-lime-600: #c8eb2d;
  --shell-lime-500: #dfff68;
  --shell-cream-50: #fafaf8;
  --shell-cream-100: #f6f4f1;

  /* Chrome surfaces and ink. */
  --shell-bg: var(--shell-cream-50);
  --shell-topbar-bg: rgba(246, 244, 241, 0.86);
  --shell-rail-bg: var(--shell-green-900);
  --shell-ink: var(--shell-green-800);
  --shell-ink-muted: var(--shell-green-400);
  --shell-line: rgba(1, 69, 49, 0.12);
  --shell-line-soft: rgba(1, 69, 49, 0.08);
  --shell-shadow-xs: 0 1px 2px rgba(1, 69, 49, 0.06);

  --shell-rail-w: 64px;
  --shell-drawer-w: 280px;
}

/* This file is the base stylesheet for every page in the suite, so the box model
   is its responsibility. Without it the rail's 64px width gains its 10px padding
   on each side and overhangs the 64px gutter the body reserves for it — and any
   page loading shell.css alone inherits the same fault everywhere else. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   App shell — icon rail + brand topbar

   Matches the Organization Brain shell: the sidebar rests as a 64px rail so the
   workspace is never obstructed, and expands to a drawer over the content when
   asked. The topbar carries the ResEt mark and the product name.
   --------------------------------------------------------------------------- */

.app-body {
  min-height: 100vh;
  background: var(--shell-bg);
  position: relative;
  padding-left: 64px;              /* always leave room for the rail */
}

.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 64px;
  background:
    linear-gradient(180deg, rgba(2, 109, 74, 0.28) 0%, rgba(1, 42, 31, 0) 34%),
    #012a1f;
  color: #e2e8f0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  gap: 14px;
  overflow: visible;               /* let rail tooltips escape */
  z-index: 60;
  transition: width 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.sidebar-open .app-sidebar {
  width: 280px;
  padding: 18px 14px 14px;
  overflow: hidden;
  box-shadow: 26px 0 48px rgba(8, 12, 22, 0.42);
}

.app-sidebar__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 22, 0.36);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  z-index: 55;
  transition: opacity 0.22s ease;
}

body.sidebar-open .app-sidebar__backdrop {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-top {
  display: flex;
  align-items: center;
}

.sidebar-toggle {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 0;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.7);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.16s ease, color 0.16s ease;
}

.sidebar-toggle:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }

.sidebar-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-toggle__close { display: none; }
body.sidebar-open .sidebar-toggle__open { display: none; }
body.sidebar-open .sidebar-toggle__close { display: inline-block; }
body:not(.sidebar-open) .sidebar-toggle { margin-left: 0; }
body:not(.sidebar-open) .sidebar-top { justify-content: center; }

/* Rail mode: icons only. */
body:not(.sidebar-open) .sidebar-nav h4,
body:not(.sidebar-open) .sidebar-nav__label,
body:not(.sidebar-open) .sidebar-status__label,
body:not(.sidebar-open) .sidebar-user__name,
body:not(.sidebar-open) .sidebar-user__signout {
  display: none;
}

body:not(.sidebar-open) .sidebar-nav__link {
  justify-content: center;
  padding: 10px 0;
}

body:not(.sidebar-open) .sidebar-nav__link.is-active::before {
  left: -10px;
  top: 6px;
  bottom: 6px;
}

body:not(.sidebar-open) .sidebar-status {
  padding: 5px;
  border-radius: 999px;
  align-self: center;
}

body:not(.sidebar-open) .sidebar-user {
  padding: 4px;
  justify-content: center;
}

/* Rail tooltip: the label pops out to the right on hover. */
body:not(.sidebar-open) .sidebar-nav__link[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: #012a1f;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 70;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav h4 {
  margin: 0 8px 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.45);
  font-weight: 700;
}

.sidebar-nav__link {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(226, 232, 240, 0.75);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 0.16s ease, color 0.16s ease;
}

/* The launcher's rail lists the applications themselves, which are identified by
   emoji everywhere else they appear — on the cards, in the switcher menu — so the
   rail uses the same mark rather than inventing a second icon for each app. The
   fixed box keeps them on the same optical centre as the SVG icons elsewhere. */
.sidebar-nav__emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

.sidebar-nav__empty {
  margin: 4px 8px;
  color: rgba(226, 232, 240, 0.5);
  font-size: 12px;
  line-height: 1.5;
}

body:not(.sidebar-open) .sidebar-nav__empty {
  display: none;
}

/* The console's rail entries are <button>s (they swap panels in place); every
   other app's are <a>s (they navigate). Both must read identically. */
a.sidebar-nav__link,
a.sidebar-nav__link:hover {
  text-decoration: none;
}

.sidebar-nav__link svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.sidebar-nav__link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.sidebar-nav__link.is-active {
  background: rgba(223, 255, 104, 0.12);
  color: #ffffff;
  font-weight: 600;
}

.sidebar-nav__link.is-active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: linear-gradient(180deg, #c8eb2d, #dfff68);
  border-radius: 0 3px 3px 0;
}

.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11.5px;
  color: rgba(226, 232, 240, 0.65);
  align-self: flex-start;
}

.sidebar-status__label {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.sidebar-status__label strong {
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
}

.sidebar-status__label span {
  color: rgba(226, 232, 240, 0.55);
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.92);
}

.sidebar-user__name {
  font-size: 12.5px;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar .user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(135deg, #c8eb2d, #dfff68);
  color: #012a1f;
}

.sidebar-user__signout { margin: 0; }

.sidebar-user__signout button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(226, 232, 240, 0.7);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.18s ease, background 0.18s ease;
}

.sidebar-user__signout button svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-user__signout button:hover {
  color: #ffffff;
  background: rgba(2, 109, 74, 0.35);
}

/* ---- Topbar ---- */

.app-topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 28px;
  background: rgba(246, 244, 241, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(1, 69, 49, 0.08);
  position: sticky;
  top: 0;
  z-index: 30;
}

.app-topbar a.brand-mark { color: inherit; text-decoration: none; }

.app-topbar .brand-mark {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(1, 69, 49, 0.08);
  box-shadow: 0 1px 2px rgba(1, 69, 49, 0.06);
}

.brand-mark__logo { height: 26px; width: auto; display: block; }

.brand-mark__wordmark {
  display: none;
  align-items: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--shell-ink);
  letter-spacing: -0.01em;
}

.brand-mark__wordmark .rb-accent { color: var(--shell-green-600); }

.brand-mark__divider {
  width: 1px;
  height: 24px;
  background: var(--shell-line);
  flex-shrink: 0;
}

.brand-mark__product {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

/* The product name is a name, not a paragraph: wrapping it turns a compact mark into
   a three-line block that sets the whole topbar's height. */
.brand-mark__product strong,
.brand-mark__product span {
  white-space: nowrap;
}

.brand-mark__product strong { font-size: 14.5px; font-weight: 700; color: var(--shell-ink); }
.brand-mark__product span { font-size: 11px; color: var(--shell-ink-muted); }

.app-topbar .topbar-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.layout {
  min-height: calc(100vh - 72px);
  display: block;
  background: var(--shell-bg);
}

@media (max-width: 760px) {
  .app-topbar { gap: 10px; padding: 14px 12px; }
  /* The mark yields space before the switcher does — the switcher is a control
     and has a floor, the product name is a label and can truncate. */
  .app-topbar .brand-mark {
    gap: 10px;
    padding: 8px 10px;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
  }
  .app-topbar .topbar-user { flex: 0 0 auto; }
  .brand-mark__product { overflow: hidden; }
  .brand-mark__product strong { overflow: hidden; text-overflow: ellipsis; }
  .brand-mark__product span { display: none; }
  .crumb { display: none; }
  body.sidebar-open .app-sidebar { width: 86vw; max-width: 320px; }
}



/* ---------------------------------------------------------------------------
   Topbar contents — breadcrumb, user chip, app switcher.

   These sit on the light topbar, so they are drawn as pale chips on white
   rather than the translucent-on-dark treatment the old green navbar used.
   --------------------------------------------------------------------------- */

.crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  color: var(--shell-ink-muted);
  font-size: 13px;
}

.crumb:empty { display: none; }
.crumb a { color: var(--shell-ink-muted); text-decoration: none; font-weight: 600; }
.crumb a:hover { color: var(--shell-ink); text-decoration: underline; }
.crumb .sep { opacity: 0.45; }
.crumb .current { color: var(--shell-ink); font-weight: 700; }

.topbar-user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--shell-ink-muted);
}

.topbar-signout { margin: 0; }

.topbar-signout button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--shell-line-soft);
  background: rgba(255, 255, 255, 0.72);
  color: var(--shell-ink-muted);
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.topbar-signout button svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar-signout button:hover {
  color: var(--shell-ink);
  background: #ffffff;
  border-color: var(--shell-line);
}

/* ---- App switcher ---- */

.app-switcher { position: relative; flex: 0 0 auto; }

.app-switcher-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--shell-line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shell-shadow-xs);
  color: var(--shell-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.app-switcher-btn:hover { background: #ffffff; border-color: var(--shell-line); }
.app-switcher.is-open .app-switcher-btn { background: #ffffff; border-color: rgba(1, 69, 49, 0.22); }

.app-switcher-grid { display: grid; grid-template-columns: repeat(2, 4px); gap: 2px; }
.app-switcher-grid i { width: 4px; height: 4px; border-radius: 1px; background: currentColor; }
.app-switcher-caret { font-size: 10px; opacity: 0.65; }

/* Anchored to the right edge: the switcher is the last thing in the topbar, so
   a left-anchored menu would hang off the viewport. */
.app-switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 90;
  min-width: 290px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--shell-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(1, 69, 49, 0.18);
}

.app-switcher-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--shell-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.app-switcher-menu a:hover { background: var(--shell-cream-100); text-decoration: none; }
.app-switcher-menu a.is-current { background: rgba(200, 235, 45, 0.22); }
.app-switcher-icon { font-size: 17px; line-height: 1; }

.app-switcher-here {
  margin-left: auto;
  padding-left: 10px;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--shell-ink-muted);
}

.app-switcher-all {
  margin-top: 4px;
  border-top: 1px solid var(--shell-line);
  border-radius: 0 0 8px 8px;
  font-size: 13px !important;
  color: var(--shell-green-600) !important;
}

@media (max-width: 760px) {
  .app-switcher-btn { padding: 7px 10px; }
  .topbar-user-name { display: none; }
}