/*
  Kontor app composition. Layout and screen-specific pieces only; the visual
  language lives in tokens.css, which must be linked first.
*/

:root {
  --rail: 236px;
  --pad: clamp(1.25rem, 3vw, 2.5rem);
}

/* --- Sign-in --- */
.signin {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.signin__card {
  width: min(23rem, 100%);
  display: grid;
  gap: 1rem;
  padding: 2.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.signin__lead {
  margin: 0.25rem 0 0.75rem;
  color: var(--text-dim);
  font-size: 0.88rem;
}

.signin__error {
  margin: 0;
  color: var(--neg);
  font-size: 0.85rem;
}

/* --- Shell --- */

/* The window does not scroll; everything that scrolls names the box it scrolls
   inside. docs/issues/024. */
.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100dvh;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 1.5rem 1.25rem;
  background: var(--surface);
  border-right: 1px solid var(--line);
  height: 100%;
  /* `visible` so the Mandant menu can open past the rail's right edge. The rail
     itself still cannot scroll: `.rail__nav` takes the spare height with
     `flex: 1; min-height: 0` and does its own scrolling. */
  overflow: visible;
}

/* The nav scrolls; the wordmark above and the account card below stay pinned,
   so the user card can never spill onto the page background (windee). */
/* `align-content: start` because the nav is a flex child told to grow, and a
   grid stretches its rows to fill what it was given. With a dozen entries that
   never showed; with the Lieferant's one (#389) the single link became 538
   pixels tall and its active marker a brass line down the whole rail. */
.rail__nav {
  display: grid;
  gap: 0.1rem;
  align-content: start;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Section headers group the rail into Rentvine's spines: Portfolio, Kontakte,
   Buchhaltung. */
.rail__section {
  margin: 1.1rem 0 0.2rem;
  padding: 0 0.7rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Language switch — a full-width segmented control. Both buttons carry a
   transparent border so the active state changes colour, never size. */
.rail__lang {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem;
  padding: 0.2rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.lang {
  padding: 0.3rem 0.5rem;
  border: 1px solid transparent;
  border-radius: calc(var(--r-sm) - 3px);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease;
}

.lang:hover {
  color: var(--text);
}

.lang.is-active {
  background: var(--surface);
  color: var(--brass);
  border-color: var(--line);
}

/* The "where you are" mark: a brass rule on the active link. */
.rail__link {
  padding: 0.5rem 0.7rem;
  border-left: 2px solid transparent;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.92rem;
  transition:
    color 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}

.rail__link:hover {
  color: var(--text);
  background: var(--surface-2);
}

.rail__link.is-active {
  color: var(--brass);
  border-left-color: var(--brass);
  font-weight: 550;
}

/* A screen the rail does not offer, whose address it still has to resolve (#747).
   The two Berichte are reached from the Berichte index and one entry in the rail
   is the whole point of that index — but a bookmark, the back button and a pasted
   link are all answered by finding the hash among the rail's entries, so the
   entry stays in the markup and only stops being drawn. `hidden` is not the same
   thing: that says the reader has no right to the screen, and these they have. */
.rail__link--nested {
  display: none;
}

/* The account section: the user card opens language + sign out. Pinned below
   the scrolling nav. */
.rail__foot {
  display: grid;
  flex: none;
}

/* The user card is the logout control: click it for a small menu (windee). */
.usermenu {
  position: relative;
}

.usercard {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  padding: 0.4rem 0.45rem;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}

.usercard:hover,
.usercard[aria-expanded="true"] {
  background: var(--surface-2);
}

.usercard__chev {
  flex: none;
  margin-left: auto;
  color: var(--text-faint);
  transition: transform 150ms ease;
}

.usercard[aria-expanded="true"] .usercard__chev {
  transform: rotate(180deg);
}

.usermenu__pop {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 0.4rem;
  padding: 0.25rem;
  display: grid;
  gap: 0.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
}

.usermenu__pop[hidden] {
  display: none;
}

.usermenu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.usermenu__item--danger {
  color: var(--neg);
}

.usermenu__item--danger:hover {
  background: var(--neg-soft);
}

.usermenu__lang {
  display: grid;
  gap: 0.35rem;
  padding: 0.4rem 0.4rem 0.2rem;
}

.usermenu__label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.usermenu__divider {
  height: 1px;
  margin: 0.3rem 0;
  background: var(--line);
}

.rail__avatar {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brass);
  border: 0;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 650;
}

.rail__id {
  display: grid;
  flex: 1;
  min-width: 0;
}

/* The sidebar is the narrow column the truncation was written for, and it does
   the clamping itself: `.rail__id` is 123 px with `min-width: 0`, so a second
   limit of 112 px only cost the eleven px in between. What was missing is the
   full text on hover — `.verlauf__wo` sets it and says so. */
.rail__name {
  font-size: 0.86rem;
  font-weight: 550;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail__email {
  font-size: 0.74rem;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scrolls rather than clips: a screen that is not a table — the dashboard's
   cards, a long form — has to stay reachable. A table caps itself first and
   never reaches this. */
.main {
  padding: 1.5rem var(--pad) var(--pad);
  display: grid;
  gap: 1.1rem;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
}

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}