/* Kontor – App-Shell und Ergänzungen zu Bulma. */

:root {
  --kontor-ink: #1f3a3d;
  --kontor-ink-2: #16292b;
  --kontor-accent: #2f7e86;
  --kontor-accent-soft: #e3f0f1;
  --kontor-paper: #f6f7f8;
  --bulma-primary-h: 187deg;
  --bulma-primary-s: 48%;
  --bulma-primary-l: 35%;
  --bulma-link-h: 187deg;
  --bulma-link-s: 48%;
  --bulma-link-l: 32%;
  --bulma-link-on-scheme-l: 32%;   /* Links/Tabs nicht aufhellen */
  --bulma-primary-invert-l: 100%;  /* weiße Schrift auf Primär-Buttons */
}

html { background: var(--kontor-paper); }

/* ---------- Staging-Banner ---------- */
.env-banner {
  background: repeating-linear-gradient(45deg, #b8860b, #b8860b 12px, #9a7009 12px, #9a7009 24px);
  color: #fff; text-align: center; font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; padding: .3rem; text-transform: uppercase;
}

/* ---------- App-Shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--kontor-ink) 0%, var(--kontor-ink-2) 100%);
  color: #cfe0e1; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  font-size: 1.15rem; font-weight: 700; letter-spacing: .06em;
  color: #fff; padding: 1.25rem 1.25rem 1rem;
}
.sidebar .brand small {
  display: block; font-size: .65rem; font-weight: 400; letter-spacing: .14em;
  color: #7fa6a9; text-transform: uppercase; margin-top: 2px;
}
.sidebar nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 1.25rem; color: #b9d2d4; font-size: .9rem;
  border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.sidebar nav a.is-active {
  background: rgba(255,255,255,.08); color: #fff;
  border-left-color: #6fc3cb; font-weight: 600;
}
.sidebar .foot { margin-top: auto; padding: 1rem 1.25rem; font-size: .72rem; color: #6f9396; }

.main { flex: 1; min-width: 0; }
.topbar {
  background: #fff; border-bottom: 1px solid #e4e7e9;
  padding: .7rem 1.5rem; display: flex; align-items: center; gap: 1rem;
}
.topbar .crumbs { font-size: .85rem; color: #7a8588; }
.topbar .crumbs strong { color: #2c3436; }
.content-pad { padding: 1.5rem; }

/* ---------- wiederkehrende Bausteine ---------- */
.mono-num { font-variant-numeric: tabular-nums; }
.status-badge { text-transform: uppercase; letter-spacing: .05em; font-size: .65rem; font-weight: 700; }
.rc-note { background: var(--kontor-accent-soft); border-left: 3px solid var(--kontor-accent); }

.pos-table input, .pos-table textarea, .pos-table .select select { font-size: .9rem; }
.pos-table textarea { resize: vertical; min-height: 2.4em; }
.pos-table td { vertical-align: top; }
.pos-table .row-sum { text-align: right; font-weight: 600; padding-top: .55em; white-space: nowrap; }
.pos-table .pos-nr { color: #98a4a7; font-weight: 600; padding-top: .55em; }
.pos-actions button { border: none; background: none; cursor: pointer; color: #98a4a7; padding: .35em .3em; }
.pos-actions button:hover { color: var(--kontor-accent); }
.pos-actions button.del:hover { color: #cc3d3d; }

.summary-card { position: sticky; top: 1rem; }
.summary-card .grand { font-size: 1.5rem; font-weight: 700; color: var(--kontor-ink); }
.summary-line { display: flex; justify-content: space-between; font-size: .9rem; padding: .15rem 0; }
.summary-line.total { border-top: 2px solid var(--kontor-ink); margin-top: .5rem; padding-top: .5rem; }

/* ---------- Flash-Meldungen ---------- */
.flash-stack {
  position: fixed; top: 1rem; right: 1rem; z-index: 50;
  width: min(26rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: .5rem;
}
.flash-stack .notification { margin: 0; box-shadow: 0 4px 16px rgba(0,0,0,.12); font-size: .9rem; }

/* ---------- Stammdaten ---------- */
.subnav.tabs { background: #fff; margin-bottom: 0; padding: 0 1.5rem; font-size: .9rem; }
.subnav.tabs ul { border-bottom-color: #e4e7e9; }
.subnav.tabs li.is-active a { color: var(--kontor-accent); border-bottom-color: var(--kontor-accent); font-weight: 600; }
.data-table { font-size: .9rem; }
.data-table td, .data-table th { vertical-align: middle; }
.data-table tr.is-inactive td { color: #98a4a7; }
.data-table td.actions { text-align: right; white-space: nowrap; }
.data-table a.row-link { color: inherit; font-weight: 600; }
.data-table a.row-link:hover { color: var(--kontor-accent); }
.list-toolbar { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.list-toolbar .search { flex: 1; max-width: 24rem; }
.form-section { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #7a8588; margin: 1.25rem 0 .5rem; }
.form-section:first-child { margin-top: 0; }
.form-actions { display: flex; gap: .5rem; align-items: center; margin-top: 1.5rem; }
.form-actions .danger-zone { margin-left: auto; }
.stat-card { display: block; height: 100%; color: inherit; }
.stat-card:hover { box-shadow: 0 0 0 2px var(--kontor-accent-soft), 0 4px 16px rgba(0,0,0,.06); }
.stat-card .stat { font-size: 1.75rem; font-weight: 700; color: var(--kontor-ink); line-height: 1.2; }
.stat-card .stat-label { font-size: .8rem; color: #7a8588; text-transform: uppercase; letter-spacing: .06em; }

[x-cloak] { display: none !important; }

@media (max-width: 1023px) { .sidebar { display: none; } }

/* ---------- Kundenportal (rechnung.<domain>) ---------- */
.portal-kopf { background: var(--kontor-ink); color: #fff; padding: .9rem 1.5rem; font-weight: 700; font-size: 1.1rem; }
.portal-main { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.portal-schmal { max-width: 26rem; margin: 3rem auto; }
.portal-pdf { width: 100%; height: 80vh; border: 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.portal-fuss { font-size: .75rem; color: #6b7a7c; text-align: center; padding: 1.5rem 1rem; }
.portal-info td:first-child { color: #6b7a7c; padding-left: 0; }
.portal-info td:last-child { text-align: right; padding-right: 0; }
.portal-betrag { font-size: 1.6rem; font-weight: 700; }