/* Developer-Portal: Shell, Sidebar, Tabellen, Chips. */

.dev-gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.dev-gate .card { width: min(420px, 100%); text-align: center; padding: 36px 28px; }
.dev-gate .gate-icon { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 14px;
  background: var(--surface-3); display: grid; place-items: center; }
.dev-gate .gate-icon .icon { width: 26px; height: 26px; }

/* Shell */
.dev-shell { display: flex; min-height: 100dvh; }
.dev-side {
  width: 220px; flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; height: 100dvh; padding: 18px 12px;
}
.dev-side__brand { display: flex; align-items: center; gap: 10px; font-weight: 800;
  padding: 6px 10px 18px; letter-spacing: -.01em; }
.dev-side__brand .icon { width: 22px; height: 22px; }
.dev-side__brand small { display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; color: var(--ink-muted); }
.dev-side nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.dev-side nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 10px; text-decoration: none; color: var(--ink-muted);
  font-weight: 600; font-size: 14px; transition: background var(--t-fast), color var(--t-fast);
}
.dev-side nav a:hover { color: var(--ink); background: var(--surface-2); }
.dev-side nav a.is-active { color: var(--ink); background: var(--surface-3); }
.dev-side nav a .icon { width: 17px; height: 17px; }
.dev-side__user { border-top: 1px solid var(--line); padding-top: 12px;
  display: flex; align-items: center; gap: 10px; }
.dev-side__user img { width: 30px; height: 30px; border-radius: 50%; }
.dev-side__user .name { font-size: 13px; font-weight: 650; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-side__user .btn { padding: 6px 8px; }

.dev-main { flex: 1; min-width: 0; padding: 28px clamp(16px, 4vw, 40px) 60px; }
.dev-main > h1 { margin-bottom: 4px; font-size: clamp(22px, 3vw, 30px); }
.dev-main > .page-sub { margin-bottom: 26px; }

/* Statistik-Karten */
.stat-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 24px; }
.stat { display: flex; align-items: center; gap: 14px; }
.stat .icon-box { width: 42px; height: 42px; border-radius: 11px; background: var(--surface-3);
  display: grid; place-items: center; flex-shrink: 0; }
.stat .icon-box .icon { width: 19px; height: 19px; }
.stat .num { font-size: 24px; font-weight: 800; line-height: 1.1; }
.stat .lbl { font-size: 12.5px; color: var(--ink-muted); }

/* Tabelle */
.table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line-strong); }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table select.input { width: auto; padding: 6px 10px; font-size: 13.5px; }

/* Filter-Chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.chip:hover { color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--accent-ink); border-color: var(--ink); }

/* Listen-Karten (Bugs, Roadmap-Einträge, Staff) */
.stack { display: grid; gap: 12px; }
.row-card { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.row-card .grow { flex: 1; min-width: 220px; }
.row-card .meta { font-size: 12.5px; color: var(--ink-muted); margin-top: 6px;
  display: flex; gap: 12px; flex-wrap: wrap; }
.row-card .actions { display: flex; gap: 8px; align-items: center; }

.empty { text-align: center; padding: 48px 20px; color: var(--ink-muted); }
.empty .icon { width: 34px; height: 34px; margin: 0 auto 12px; stroke: var(--ink-faint); }

.group-title { display: flex; align-items: center; gap: 8px; margin: 26px 0 12px; }
.group-title .icon { width: 17px; height: 17px; }

.form-grid { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-grid .field--wide { grid-column: 1 / -1; }

.check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--ink-muted); cursor: pointer; margin-top: 6px; }

/* Responsiv */
@media (max-width: 760px) {
  .dev-shell { flex-direction: column; }
  .dev-side { width: 100%; height: auto; position: static; flex-direction: row;
    align-items: center; gap: 8px; padding: 10px 12px; border-right: none;
    border-bottom: 1px solid var(--line); }
  .dev-side__brand { padding: 0 6px; }
  .dev-side__brand small { display: none; }
  .dev-side nav { flex-direction: row; overflow-x: auto; }
  .dev-side nav a span { display: none; }
  .dev-side__user { border-top: none; padding-top: 0; }
  .dev-side__user .name { display: none; }
}

/* Sales & Analytics */
.hint-row { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; min-width: 0; }
.hint-row .icon { width: 15px; height: 15px; flex-shrink: 0; }
.icon--up { transform: rotate(180deg); }

.mx-table { min-width: 720px; }
.mx-table td:first-child { width: 100%; min-width: 0; }
.mx-table input.input { width: 100%; min-width: 0; }
.mx-table .mx-c { text-align: center; }
.mx-table .mx-c input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.mx-table td.mx-act { white-space: nowrap; text-align: right; }
.mx-table td.mx-act .btn { padding: 6px 7px; }
.mx-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.view-head { display: flex; justify-content: flex-end; margin-bottom: 14px; }

.charts-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.charts-grid .card { min-width: 0; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin-top: 16px; }
.bars__bar { flex: 1 1 0; min-width: 0; min-height: 2px; border-radius: 2px 2px 0 0;
  background: var(--accent); opacity: .8; }
.bars__axis { display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 11.5px; color: var(--ink-muted); }