/* ============================================================
   dbw-ui 1.0.0 · one design language for DBW OS, DBW PM and
   DBW Angebote.

   SOURCE OF TRUTH: ~/Arbeitsplatz/01_Code/02_Eigenentwicklungen/dbw-ui
   Every app holds a COPY (written by sync.sh). Never edit the copy,
   edit here and run ./sync.sh.

   Loaded AFTER the app's own CSS on purpose: for the shell, the tokens
   and the base controls this file is the law, so an old app rule can
   not drift the look apart again. App-specific things (task cards,
   offer editor, charts) stay in the app CSS and only use the tokens.

   Rules in short (details in DESIGN.md):
   - Quiet chrome, the brand gradient is a signature, never a surface:
     logo dots, app tag, active nav bar, avatar. No gradient buttons,
     no gradient text.
   - Sentence case everywhere, no tracked uppercase labels.
   - Weights 400 to 650, the logo alone is heavy.
   - Same thing, same size: nav rows 32, buttons 32/28/40, radii 8/14.
   ============================================================ */

@font-face {
  font-family: 'Aspekta';
  src: url('/assets/fonts/AspektaVF.woff2?v=1') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument.woff2?v=1') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* ---------------------------------------------------------- tokens */
:root {
  /* Brand (dbw media gradient, 5 stops, 135deg) */
  --c-red: #ea2b1f;
  --c-pink: #ff3c6f;
  --c-magenta: #ff4fdd;
  --c-violet: #7e56ff;
  --c-blue: #00b2ff;
  --grad: linear-gradient(135deg, var(--c-red), var(--c-pink), var(--c-magenta), var(--c-violet), var(--c-blue));

  /* Neutrals: warm paper ramp */
  --ink: #131118;
  --ink-2: #4d4a55;
  --ink-3: #8d8a96;
  --ink-4: #b4b1ba;
  --canvas: #ffffff;      /* page background */
  --side-bg: #fbfaf8;     /* sidebar */
  --paper: #f7f6f3;       /* quiet fills, wells */
  --card: #ffffff;        /* raised surfaces */
  --hover: #faf9f6;
  --line: #e9e6df;
  --line-soft: #f1efea;
  --line-strong: #d8d4cb;
  --hair: #ebe9e3;
  --fill-hover: rgba(19, 17, 24, .045);

  /* One accent for selection, focus and links inside the chrome */
  --accent: #7e56ff;
  --accent-soft: #f1edff;
  --accent-ink: #5b36e0;

  /* Meaning only */
  --ok: #0d9f6e;
  --warn: #d97706;
  --crit: #dc2626;

  /* Type */
  --display: 'Aspekta', 'Avenir Next', sans-serif;
  --body: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  /* Shape */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 18px;

  /* Depth: neutral, soft, small */
  --shadow-1: 0 1px 1px rgba(19, 17, 24, .03), 0 1px 3px rgba(19, 17, 24, .05);
  --shadow-2: 0 1px 2px rgba(19, 17, 24, .04), 0 6px 16px -6px rgba(19, 17, 24, .12);
  --shadow-3: 0 2px 6px rgba(19, 17, 24, .05), 0 24px 56px -20px rgba(19, 17, 24, .30);
  --shadow: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  --shadow-lift: var(--shadow-3);
  --focus: 0 0 0 3px rgba(126, 86, 255, .22);

  /* Motion: one curve, two durations, no overshoot */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: var(--ease);
  --t-fast: 120ms;
  --t: 200ms;

  /* Layout */
  --side-w: 248px;
  --nav-h: 32px;
  --gap: 20px;
  --mobilebar-h: 54px;
}

/* ---------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  min-height: 100vh;
}
::selection { background: var(--c-pink); color: #fff; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-optical-sizing: auto; }

kbd {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-family: var(--body); font-size: 10.5px; font-weight: 600; line-height: 1;
  color: var(--ink-3); background: #fff;
  border: 1px solid var(--line); border-bottom-width: 1.5px; border-radius: 5px;
}

/* ---------------------------------------------------------- shell */
.shell { display: flex; min-height: 100vh; }

.side {
  position: sticky; top: 0;
  width: var(--side-w); flex: 0 0 var(--side-w);
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  padding: 0 12px 12px;
  background: var(--side-bg);
  border-right: 1px solid var(--hair);
  overflow-y: auto;
  scrollbar-width: none;
  z-index: 40;
}
.side::-webkit-scrollbar { width: 0; }

/* Logo row: stacked logo, app tag, version. Identical in every app. */
.side-head {
  display: flex; align-items: center;
  height: 68px; padding: 6px 10px 0;
  flex: none;
}
.brand {
  display: inline-flex; flex-direction: column;
  font-family: var(--display); font-weight: 830; font-size: 19px;
  letter-spacing: -.035em; line-height: .82;
  color: var(--ink); text-decoration: none;
  padding: 0; gap: 0;
}
.brand .r1 { display: inline-flex; align-items: center; gap: .22em; }
.brand .dots { display: inline-flex; gap: .1em; }
.brand .dots i { width: .26em; height: .26em; border-radius: 50%; display: block; }
.brand .dots i:nth-child(1) { background: linear-gradient(135deg, var(--c-red), var(--c-pink)); }
.brand .dots i:nth-child(2) { background: linear-gradient(135deg, var(--c-pink), var(--c-violet)); }
.brand .dots i:nth-child(3) { background: linear-gradient(135deg, var(--c-violet), var(--c-blue)); }
.brand .r2 { margin-left: .95em; }
.brand-app {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 7px; margin-left: 10px;
  font-family: var(--display); font-weight: 760; font-size: 12px; letter-spacing: .02em;
  color: #fff; background: var(--grad); border-radius: var(--r-xs);
  white-space: nowrap;
}
.brand-ver {
  margin-left: 8px;
  font-family: var(--body); font-size: 11.5px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3); text-decoration: none;
}
a.brand-ver:hover { color: var(--ink); }

/* ⌘K trigger */
.side-search {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: var(--nav-h); margin: 0 0 8px; padding: 0 8px 0 10px;
  font: inherit; font-size: 13px; font-weight: 500; text-align: left;
  color: var(--ink-3); background: #fff;
  border: 1px solid var(--hair); border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.side-search:hover { color: var(--ink-2); border-color: var(--line-strong); }
.side-search svg, .side-search .ic { width: 15px; height: 15px; flex: none; }
.side-search span { flex: 1; }
.side-search kbd { margin-left: auto; }

/* Group labels: sentence case, quiet, close to their items */
.side-group, .nav-head, .nav-kind, .nav-folder {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 10px 4px;
  font-family: var(--body); font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--ink-3);
}
.nav-kind, .nav-folder { padding-top: 10px; }

/* Nav rows */
.side-nav { display: flex; flex-direction: column; gap: 1px; padding: 0; flex: 1; }
.side-link, .nav-link {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: var(--nav-h); height: auto; padding: 0 10px;
  font-family: var(--body); font-size: 13.5px; font-weight: 500; line-height: 1.25;
  color: var(--ink-2); text-decoration: none; text-align: left;
  background: none; border: 0; border-radius: var(--r-sm);
  box-shadow: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.side-link svg, .nav-link > .ic {
  width: 16px; height: 16px; flex: none;
  color: var(--ink-3); opacity: 1; stroke-width: 1.8;
}
.side-link:hover, .nav-link:hover { background: var(--fill-hover); color: var(--ink); }
.side-link.on, .nav-link.active {
  background: #fff; color: var(--ink); font-weight: 600;
  box-shadow: 0 0 0 1px var(--hair), var(--shadow-1);
}
.side-link.on svg, .nav-link.active > .ic { color: var(--ink); }
/* The one brand touch in the chrome: a slim gradient bar on the active page. */
.side-link.on::before, .nav-link.active::before {
  content: ''; position: absolute;
  left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--grad);
}
.nav-link .count, .side-link .count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nav-badge, .nav-link .count.badge {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 6px;
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 600; line-height: 1;
  color: #fff; background: var(--c-pink); border-radius: 9px;
}

/* Footer: user */
.side-foot {
  margin: auto -12px -12px; padding: 10px 12px 12px;
  border-top: 1px solid var(--hair);
  background: var(--side-bg);
  position: sticky; bottom: -12px;
}
.side-user > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.side-user > summary::-webkit-details-marker { display: none; }
.side-user > summary:hover { background: var(--fill-hover); }
.side-user > summary > svg { width: 12px; height: 12px; margin-left: auto; color: var(--ink-3); transition: transform var(--t-fast) var(--ease); }
.side-user[open] > summary > svg { transform: rotate(180deg); }
.side-user-avatar, .side-foot .avatar.lg {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 650; color: #fff;
  background: var(--grad);
}
.side-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.side-user-name small, .side-foot .who small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.side-foot .who { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: left; line-height: 1.2; }
.side-user-menu { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 2px; }
.side-user-mail { font-size: 11.5px; color: var(--ink-3); padding: 4px 8px 6px; overflow: hidden; text-overflow: ellipsis; }
.side-user-menu a, .side-user-menu button {
  display: flex; align-items: center; width: 100%; min-height: 30px; padding: 0 8px;
  font: inherit; font-size: 13px; font-weight: 500; text-align: left;
  color: var(--ink-2); text-decoration: none;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.side-user-menu a:hover, .side-user-menu button:hover { color: var(--ink); background: var(--fill-hover); }
.side-user-out { color: var(--crit) !important; }

/* Content column */
.content { flex: 1; min-width: 0; }
/* Apps with their own top bar (PM) set --main-pad to start closer to it. */
.main { padding: var(--main-pad, 28px 32px 64px); margin-left: 0; margin-right: 0; }

/* ---------------------------------------------------------- page head */
.page-head h1 {
  font-family: var(--display); font-size: 26px; font-weight: 650;
  line-height: 1.15; letter-spacing: -.022em;
  color: var(--ink);
}
.page-head .sub, .page-sub { margin-top: 4px; font-size: 13.5px; color: var(--ink-3); }

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  font-family: var(--body); font-size: 13px; font-weight: 600; line-height: 1;
  letter-spacing: 0; white-space: nowrap; text-decoration: none;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
  cursor: pointer; filter: none; transform: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { background: #fafaf8; border-color: var(--line-strong); box-shadow: var(--shadow-1); transform: none; }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; transform: none; }
.btn svg, .btn .ic { width: 15px; height: 15px; flex: none; }

/* Primary: ink, never a gradient. .btn-grad is the old OS/Angebote name. */
.btn-primary, .btn-grad {
  color: #fff; background: var(--ink);
  border-color: var(--ink); box-shadow: var(--shadow-1);
  filter: none;
}
.btn-primary:hover, .btn-grad:hover { color: #fff; background: #2a2731; border-color: #2a2731; filter: none; box-shadow: var(--shadow-1); }
.btn-ghost { color: var(--ink-2); background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { color: var(--ink); background: var(--fill-hover); border-color: transparent; box-shadow: none; }
.btn-danger, .btn-ghost.btn-danger { color: var(--crit); }
.btn-danger:hover { color: var(--crit); border-color: rgba(220, 38, 38, .35); }
.btn-sm, .btn.small { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.btn-big { height: 40px; padding: 0 16px; font-size: 14px; }

.icon-btn {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  color: var(--ink-2); background: none; border: 0; border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn:hover { color: var(--ink); background: var(--fill-hover); }
.icon-btn svg, .icon-btn .ic { width: 16px; height: 16px; }

/* ---------------------------------------------------------- toast */
.toast {
  border-radius: 12px; padding: 10px 16px;
  font-size: 13.5px; font-weight: 500; color: #fff;
  background: rgba(19, 17, 24, .92);
  box-shadow: var(--shadow-3);
}

/* ---------------------------------------------------------- mobile */
.mobilebar { display: none; }
.side-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(19, 17, 24, .35); }

@media (max-width: 960px) {
  html, body { overflow-x: clip; }
  .shell { display: block; }
  .side {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: min(300px, 84vw); height: auto;
    padding: env(safe-area-inset-top) 12px calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    transform: translateX(-102%);
    transition: transform .22s var(--ease);
    box-shadow: var(--shadow-3);
    z-index: 50;
  }
  .side.open { transform: none; }
  /* Apps with a mobile bar show the logo there, not twice. */
  .mobilebar ~ .side .side-head { display: none; }
  .mobilebar ~ .side { padding-top: calc(12px + env(safe-area-inset-top)); }

  .mobilebar {
    display: flex; align-items: center; gap: 4px;
    position: sticky; top: 0; z-index: 30;
    height: calc(var(--mobilebar-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hair);
  }
  .mobilebar .burger {
    display: inline-flex; padding: 6px 8px 6px 2px;
    color: var(--ink); background: none; border: 0; cursor: pointer;
  }
  .mobilebar .burger svg { width: 20px; height: 20px; }
  .mobilebar .brand { font-size: 17px; }

  .main { padding: var(--main-pad-m, 20px max(16px, env(safe-area-inset-right)) calc(76px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))); }
  .page-head h1 { font-size: 22px; }
  input, select, textarea { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}