/* OncoPrint portal — the access-controlled workstation.
 *
 * Loaded after `/css/base.css`, which carries the brand tokens. This file is the
 * sign-in screen and the application shell.
 *
 * The portal is a WORKING surface, not a marketing one: denser, quieter, and
 * built for a clinician holding a phone in a ward as much as for a scientist at
 * a bench with two monitors. Where the public site breathes, this counts rows.
 */

/* ── sign-in ──────────────────────────────────────────────────────────────── */
.signin { min-height: 100dvh; display: grid; }
@media (min-width: 940px) { .signin { grid-template-columns: 1.05fr 1fr; } }

/* The brand half. Hidden on a phone — a sign-in screen that makes you scroll
 * past a poster to reach the password field is a worse screen. */
.signin__brand {
  background: var(--ink); color: #E8EDF1;
  padding: clamp(2rem, 1rem + 4vw, 4rem);
  display: none; position: relative; overflow: hidden;
  flex-direction: column; justify-content: space-between;
}
@media (min-width: 940px) { .signin__brand { display: flex; } }
.signin__field { position: absolute; inset: 0; opacity: .34; pointer-events: none; }
/* :not(), because this rule also matched the absolutely-positioned background
 * and put it back in the flow — which pushed the panel's own content off the
 * bottom of the screen. */
.signin__brand > *:not(.signin__field) { position: relative; }
.signin__brand h2 { color: var(--paper); max-width: 18ch; margin-top: 1.5rem; }
.signin__brand p { color: var(--muted-on-dark); max-width: 40ch; margin-top: 1rem; }

.signin__panel {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) 1.25rem;
}
.signin__card { width: min(100%, 26rem); }
.signin__card > .logo { margin-bottom: 2rem; }
@media (min-width: 940px) { .signin__card > .logo { display: none; } }

/* The organisation / individual switch. Two ways in, and the difference is not
 * cosmetic: one narrows the account lookup to a tenant, the other does not. */
.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
  background: var(--wash); padding: .25rem; border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
}
.tabs button {
  border: 0; background: transparent; border-radius: 7px;
  padding: .6rem .5rem; font-size: 0.9rem; font-weight: 600;
  color: var(--muted); min-height: 40px;
}
.tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }

.signin__hint {
  font-size: var(--t-small); color: var(--muted);
  margin-top: .4rem;
}

/* The remembered organisation, shown as a dismissable chip so a returning user
 * does not retype it — and can see WHICH one is about to be used. */
.org-chip {
  display: flex; align-items: center; gap: .6rem;
  background: var(--accent-06); border: 1px solid var(--accent-22);
  border-radius: var(--radius-sm); padding: .6rem .75rem;
  font-size: var(--t-small); margin-bottom: 1rem;
}
.org-chip b { font-weight: 600; }
.org-chip button {
  margin-left: auto; border: 0; background: none; color: var(--accent);
  font-size: var(--t-small); font-weight: 600; text-decoration: underline;
  padding: .25rem;
}

/* ── application shell ────────────────────────────────────────────────────── */
.app { min-height: 100dvh; display: flex; flex-direction: column; }

.appbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(.85rem, .5rem + 1.4vw, 1.5rem);
  background: var(--ink); color: #E8EDF1;
  position: sticky; top: 0; z-index: 40;
}
.appbar .logo img { height: 1.5rem; }
.appbar__org {
  font-size: var(--t-small); color: var(--muted-on-dark);
  padding-left: 1rem; margin-left: .25rem;
  border-left: 1px solid var(--line-on-dark);
}
@media (max-width: 700px) { .appbar__org { display: none; } }
.appbar__spacer { margin-left: auto; }
.appbar__who { font-size: var(--t-small); color: var(--muted-on-dark); text-align: right; }
.appbar__who b { display: block; color: var(--paper); font-weight: 600; }
@media (max-width: 560px) { .appbar__who { display: none; } }

.appbar button {
  background: transparent; border: 1px solid var(--line-on-dark);
  color: #E8EDF1; border-radius: var(--radius-sm);
  padding: .45rem .8rem; font-size: var(--t-small); min-height: 40px;
}
.appbar button:hover { border-color: var(--accent-on-dark); color: var(--accent-on-dark); }

.menu-btn { display: none; padding: .45rem !important; }
.menu-btn svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .menu-btn { display: inline-flex; } }

.app__body { display: flex; flex: 1; min-height: 0; }

/* Sidebar on a desktop; a drawer on a phone. Same markup, so there is one nav
 * to keep correct rather than two that drift. */
.sidenav {
  width: 15rem; flex: none;
  border-right: 1px solid var(--line);
  padding: 1rem .75rem; background: var(--paper);
  display: flex; flex-direction: column; gap: .15rem;
}
.sidenav button {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  padding: .65rem .75rem; font-size: 0.94rem; font-weight: 500;
  color: var(--ink); min-height: 44px;
}
.sidenav button svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.sidenav button:hover { background: var(--wash); }
.sidenav button[aria-current="page"] { background: var(--accent-12); color: var(--accent); font-weight: 600; }
.sidenav button[aria-current="page"] svg { color: var(--accent); }
.sidenav__label {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  padding: 1.25rem .75rem .4rem;
}

@media (max-width: 900px) {
  .sidenav {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: min(17rem, 80vw); box-shadow: var(--shadow-lg);
    transform: translateX(-100%); transition: transform .2s ease;
    padding-top: 1.25rem; overflow-y: auto;
  }
  .sidenav[data-open="true"] { transform: none; }
  .app-scrim {
    position: fixed; inset: 0; background: rgba(14,23,32,.45); z-index: 55;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .app-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
}

.app__main {
  flex: 1; min-width: 0;
  padding: clamp(1rem, .6rem + 1.6vw, 2rem);
  background: var(--wash);
}
.app__main > h2:first-child { margin-bottom: 1.25rem; }

/* ── working surfaces ─────────────────────────────────────────────────────── */
.panel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1rem, .8rem + .8vw, 1.5rem);
}
.panel + .panel { margin-top: 1rem; }
.panel__head {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.panel__head h3 { margin-right: auto; }

/* A table on a phone is the thing that ruins clinical software. Below 720px each
 * row becomes a card and every cell is labelled from `data-label`, so nothing is
 * lost and nothing scrolls sideways. */
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--line); }
th { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
tbody tr:hover { background: var(--wash); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tr {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: .5rem .75rem; margin-bottom: .6rem; background: var(--paper);
  }
  td { border: 0; padding: .35rem 0; display: flex; gap: 1rem; align-items: baseline; }
  td::before {
    content: attr(data-label);
    flex: none; width: 8.5rem;
    font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); font-weight: 600;
  }
  td.num { text-align: left; }
}

/* ── status pills ─────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem; border-radius: 100px;
  font-size: var(--t-micro); font-weight: 600;
  background: var(--wash); color: var(--muted);
  white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.pill--ok      { background: rgba(23,121,74,.10);  color: var(--ok); }
.pill--warn    { background: rgba(168,100,26,.10); color: var(--warn); }
.pill--bad     { background: rgba(179,55,47,.10);  color: var(--bad); }
.pill--accent  { background: var(--accent-12);     color: var(--accent); }

.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty svg { width: 44px; height: 44px; margin: 0 auto 1rem; color: var(--line); }