/* ══════════════════════════════════════════════════════════════
   Ticketreport für Vertrieb — ACP Corporate Design Stylesheet
   Tokens sourced verbatim from acp-corporate-design SKILL.md
   ══════════════════════════════════════════════════════════════ */

/* ── 1. ACP Design Tokens ─────────────────────────────────── */
:root {
  /* Brand */
  --acp-red:        #F00F40;   /* Primary brand color, CTAs, accents */
  --acp-red-dark:   #C50A33;   /* Hover state for red buttons */
  --acp-charcoal:   #3D4A52;   /* Body text, headings, dark UI */
  --acp-charcoal-2: #2A343B;   /* Hover/darker variant */

  /* Surface */
  --acp-bg:         #FFFFFF;
  --acp-bg-muted:   #EBECED;   /* Section dividers, table stripes, cards */
  --acp-bg-soft:    #F7F7F8;
  --acp-border:     #D9DCDE;

  /* Status (use sparingly, ACP-tinted) */
  --acp-success:    #2E7D32;
  --acp-warning:    #ED6C02;
  --acp-danger:     #C62828;
  --acp-info:       #0091AE;   /* sampled from acp.de */

  /* Typography */
  --acp-font-body:    "Apex New Book", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --acp-font-display: "Apex New Medium", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Geometry */
  --acp-radius-sm: 8px;        /* outline buttons, small chips */
  --acp-radius:    10px;       /* primary buttons, inputs */
  --acp-radius-lg: 16px;       /* cards, modals */

  /* Shadow */
  --acp-shadow-sm: 0 1px 2px rgba(61,74,82,.08);
  --acp-shadow:    0 4px 12px rgba(61,74,82,.10);

  /* ── Semantic aliases for this app ──────────────────────── */
  /*
   * Color mapping for billable / strike states:
   * - "Zum Abrechnen" (billable) = ACP RED (#F00F40)
   *   Rationale: red is the ACP brand primary; billable items are the
   *   desired/positive revenue state — the main action of this tool.
   *   Using brand-primary for the affirmative state keeps CD consistent.
   * - "Streichen" (strike/reject) = neutral charcoal-tinted grey
   *   Rationale: grey signals "off / excluded" without semantic danger.
   */
  --bill:           var(--acp-red);
  --bill-soft:      rgba(240,15,64,.18);
  --bill-tint:      rgba(240,15,64,.07);
  --strike:         #8A9199;           /* neutral grey — not a brand color */
  --strike-soft:    rgba(138,145,153,.22);
  --strike-tint:    rgba(138,145,153,.09);
}

/* ── 2. Reset + Body ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

html, body {
  font-family: var(--acp-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--acp-charcoal);
  background: var(--acp-bg);
  min-height: 100vh;
}

::selection { background: var(--acp-charcoal); color: #fff; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--acp-font-display);
  font-weight: 400;            /* ACP headings are NOT bold — weight 400 */
  color: var(--acp-charcoal);
  letter-spacing: 0;
  line-height: 1.2;
}
h1 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }

/* ── 3. Topbar ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: var(--acp-bg);
  border-bottom: 1px solid var(--acp-border);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--acp-shadow-sm);
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar .brand img {
  display: block;
  height: 48px;
  width: auto;
  flex-shrink: 0;
}

.topbar .brand-sep {
  font-family: var(--acp-font-body);
  font-size: 13px;
  color: var(--acp-charcoal);
  opacity: 0.6;
}

.topbar .brand-sep a {
  color: var(--acp-charcoal);
  opacity: 0.8;
  transition: opacity .12s ease;
}

.topbar .brand-sep a:hover { opacity: 1; }

.topbar .brand-role {
  font-weight: 500;
  opacity: 0.9;
}

.topbar .logout {
  font-family: var(--acp-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--acp-charcoal);
  padding: 8px 16px;
  border: 2px solid var(--acp-charcoal);
  border-radius: var(--acp-radius-sm);
  transition: background .15s, color .15s;
}

.topbar .logout:hover {
  background: var(--acp-charcoal);
  color: #fff;
}

/* ── 4. Flash Messages ─────────────────────────────────────── */
.flashes {
  padding: 0 28px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flash {
  padding: 10px 14px;
  border-radius: var(--acp-radius-sm);
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid var(--acp-border);
  background: var(--acp-bg-soft);
  color: var(--acp-charcoal);
}

.flash-success,
.flash.success {
  border-left-color: var(--acp-success);
  background: rgba(46,125,50,.08);
  color: var(--acp-success);
}

.flash-error,
.flash.error {
  border-left-color: var(--acp-red);
  background: var(--bill-tint);
  color: var(--acp-red-dark);
}

.flash-info,
.flash.info {
  border-left-color: var(--acp-info);
  background: rgba(0,145,174,.08);
  color: var(--acp-info);
}

/* ── 5. Login Page ─────────────────────────────────────────── */
body.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--acp-bg-soft);
}

.login-card {
  background: var(--acp-bg);
  border: 1px solid var(--acp-border);
  border-radius: var(--acp-radius-lg);
  padding: 40px 44px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--acp-shadow);
}

.login-logo {
  text-align: center;
  margin-bottom: 28px;
}

.login-logo img {
  height: 56px;
  width: auto;
}

.login-card h1 {
  font-family: var(--acp-font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--acp-charcoal);
  margin-bottom: 4px;
  text-align: center;
}

.login-card .sub {
  font-size: 14px;
  color: var(--acp-charcoal);
  opacity: 0.6;
  margin-bottom: 28px;
  text-align: center;
}

.login-card .error {
  background: var(--bill-tint);
  color: var(--acp-red-dark);
  border: 1px solid var(--bill-soft);
  border-left: 3px solid var(--acp-red);
  border-radius: var(--acp-radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  margin-bottom: 18px;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.login-card label span {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--acp-charcoal);
  opacity: 0.7;
}

.login-card input[type="text"],
.login-card input[type="password"] {
  font-family: var(--acp-font-body);
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid var(--acp-border);
  border-radius: var(--acp-radius);
  background: var(--acp-bg);
  color: var(--acp-charcoal);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}

.login-card input:focus {
  border-color: var(--acp-red);
  box-shadow: 0 0 0 3px rgba(240,15,64,.15);
}

.login-card button[type="submit"] {
  font-family: var(--acp-font-body);
  font-size: 15px;
  font-weight: 400;
  padding: 12px 18px;
  background: var(--acp-red);
  color: #fff;
  border: 1px solid var(--acp-red);
  border-radius: var(--acp-radius);
  cursor: pointer;
  margin-top: 8px;
  transition: background .15s, border-color .15s;
}

.login-card button[type="submit"]:hover {
  background: var(--acp-red-dark);
  border-color: var(--acp-red-dark);
}

/* ── 6. Dashboard — shared ─────────────────────────────────── */
body.dashboard {
  padding-bottom: 48px;
}

/* ── 7. Innendienst Dashboard ──────────────────────────────── */
/* Upload Zone */
.upload-zone {
  padding: 28px 28px;
  border-bottom: 1px solid var(--acp-border);
  background: var(--acp-bg);
}

.upload-zone h2 {
  font-family: var(--acp-font-display);
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 4px;
  color: var(--acp-charcoal);
}

.upload-zone .sub {
  font-size: 13px;
  color: var(--acp-charcoal);
  opacity: 0.6;
  margin-bottom: 16px;
}

.dropzone {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.file-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 20px;
  border: 1px dashed var(--acp-border);
  border-radius: var(--acp-radius-sm);
  background: var(--acp-bg-soft);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  flex: 1;
  min-width: 180px;
}

.file-label:hover {
  border-color: var(--acp-charcoal);
  background: var(--acp-bg-muted);
}

.file-label input[type="file"] {
  font-family: var(--acp-font-body);
  font-size: 13px;
  color: var(--acp-charcoal);
  cursor: pointer;
}

.file-label span {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--acp-charcoal);
  opacity: 0.6;
  pointer-events: none;
}

.upload-zone button[type="submit"] {
  font-family: var(--acp-font-body);
  font-size: 14px;
  font-weight: 400;
  padding: 10px 20px;
  background: var(--acp-red);
  color: #fff;
  border: 1px solid var(--acp-red);
  border-radius: var(--acp-radius);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.upload-zone button[type="submit"]:hover {
  background: var(--acp-red-dark);
  border-color: var(--acp-red-dark);
}

/* Kanban board */
.kanban {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 24px 0;
  column-gap: 1px;
  background: var(--acp-border);
}

.kanban > .col {
  background: var(--acp-bg-soft);
  padding: 0 20px 20px;
  min-height: 200px;
}

.kanban > .col:first-child { padding-left: 28px; }
.kanban > .col:last-child  { padding-right: 28px; }

.kanban > .col h2 {
  font-family: var(--acp-font-display);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--acp-charcoal);
  padding: 18px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--acp-border);
  margin-bottom: 14px;
}

.kanban > .col .count,
.section .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--acp-bg-muted);
  color: var(--acp-charcoal);
  border: 1px solid var(--acp-border);
}

.kanban > .col .empty,
.section .empty {
  font-size: 13px;
  color: var(--acp-charcoal);
  opacity: 0.4;
  padding: 16px 0;
  text-align: center;
  font-style: italic;
}

/* ── 8. Vertrieb Dashboard ─────────────────────────────────── */
.section {
  padding: 24px 28px;
  border-bottom: 1px solid var(--acp-border);
  background: var(--acp-bg);
}

.section > h2,
.section > summary {
  font-family: var(--acp-font-display);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--acp-charcoal);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  list-style: none;
}

.section > summary {
  cursor: pointer;
  margin-bottom: 0;
  padding: 2px 0;
  user-select: none;
  transition: color .12s ease;
}

.section.collapsible > summary::-webkit-details-marker { display: none; }

.section.collapsible > summary::before {
  content: "▶";
  font-size: 8px;
  color: var(--acp-charcoal);
  opacity: 0.5;
  transition: transform .15s ease;
}

.section.collapsible[open] > summary::before {
  transform: rotate(90deg);
}

.section.collapsible > summary:hover { opacity: 0.8; }

.section.collapsible[open] > .card-grid {
  margin-top: 18px;
}

/* ── 9. Card Grid ──────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* ── 10. Card ──────────────────────────────────────────────── */
/* ACP card pattern: white, charcoal text, red 4px top-border for accent state */
.card {
  display: block;
  background: var(--acp-bg);
  border: 1px solid var(--acp-border);
  border-radius: var(--acp-radius-lg);
  padding: 16px 18px 14px;
  box-shadow: var(--acp-shadow-sm);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  border-top: 4px solid var(--acp-border);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--acp-shadow);
  border-color: var(--acp-charcoal);
}

/* Status-based top-border accents */
.card.status-pruefung_ausstehend {
  border-top-color: var(--acp-warning);
}

.card.status-geprueft {
  border-top-color: var(--acp-red);
}

.card.status-abgerechnet {
  border-top-color: var(--acp-border);
  opacity: .85;
}

.card.status-abgerechnet:hover { opacity: 1; }

/* Card head: Kunde + status badge */
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.card-head h3 {
  font-family: var(--acp-font-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.2;
  flex: 1;
  color: var(--acp-charcoal);
}

.card-head .badge {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: var(--acp-radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

.card.status-pruefung_ausstehend .badge {
  background: rgba(237,108,2,.10);
  color: var(--acp-warning);
  border: 1px solid rgba(237,108,2,.25);
}

.card.status-geprueft .badge {
  background: var(--bill-tint);
  color: var(--acp-red-dark);
  border: 1px solid var(--bill-soft);
}

.card.status-abgerechnet .badge {
  background: var(--acp-bg-muted);
  color: var(--acp-charcoal);
  opacity: 0.7;
  border: 1px solid var(--acp-border);
}

/* Card meta: date range + project */
.card-meta {
  font-size: 12px;
  color: var(--acp-charcoal);
  opacity: 0.6;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-meta .proj {
  color: var(--acp-charcoal);
  opacity: 0.8;
  font-weight: 500;
  font-size: 11px;
}

/* Card stats: key/value pairs */
.card-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--acp-border);
  border-bottom: 1px solid var(--acp-border);
  margin-bottom: 10px;
}

.card-stats > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.card-stats .k {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--acp-charcoal);
  opacity: 0.55;
}

.card-stats .v {
  font-size: 13px;
  font-weight: 500;
  color: var(--acp-charcoal);
  font-variant-numeric: tabular-nums;
}

/* Card foot: upload date */
.card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.card-foot .upload-date {
  font-size: 11px;
  color: var(--acp-charcoal);
  opacity: 0.4;
}

/* ── 11. Detail View ───────────────────────────────────────── */
body.detail {
  padding-bottom: 80px;
}

/* Meta section (Kostenstelle / Projekt / Zeitraum / Status) */
.meta {
  padding: 32px 28px 28px;
  border-bottom: 1px solid var(--acp-border);
  background: var(--acp-bg);
}

.meta h1 {
  font-family: var(--acp-font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.75rem);
  color: var(--acp-charcoal);
  margin-bottom: 22px;
  line-height: 1.1;
}

.meta .meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 32px;
  padding-top: 18px;
  border-top: 1px solid var(--acp-border);
}

.meta .meta-grid > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.meta .meta-grid .k {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--acp-charcoal);
  opacity: 0.55;
}

.meta .meta-grid .v {
  font-size: 14px;
  font-weight: 500;
  color: var(--acp-charcoal);
}

/* Entries host: all ticket blocks live here */
#entries-host {
  padding: 24px 28px 32px;
  max-width: 1600px;
}

/* Ticket block */
.ticket {
  margin-bottom: 32px;
  border: 1px solid var(--acp-border);
  background: var(--acp-bg);
  border-radius: var(--acp-radius-sm);
  overflow: hidden;
  box-shadow: var(--acp-shadow-sm);
}

.ticket-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--acp-border);
  background: var(--acp-bg-soft);
}

.ticket-head .id {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--acp-charcoal);
  opacity: 0.55;
  margin-bottom: 4px;
}

.ticket-head .section-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 2px 7px;
  border: 1px solid var(--acp-border);
  color: var(--acp-charcoal);
  opacity: 0.7;
  border-radius: var(--acp-radius-sm);
  margin-left: 8px;
  vertical-align: middle;
}

.ticket-head h2 {
  font-family: var(--acp-font-display);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--acp-charcoal);
}

/* Entries table */
table.entries {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

table.entries thead th {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--acp-charcoal);
  opacity: 0.55;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--acp-border);
  background: var(--acp-bg-soft);
}

table.entries thead th.num { text-align: right; }

table.entries tbody tr {
  border-bottom: 1px solid var(--acp-bg-muted);
  transition: background .08s ease;
}

table.entries tbody tr:last-child { border-bottom: none; }

table.entries tbody tr:nth-child(even) { background: var(--acp-bg-soft); }

table.entries tbody tr:hover { background: var(--acp-bg-muted); }

table.entries td {
  padding: 8px 12px;
  font-size: 13px;
  vertical-align: middle;
  color: var(--acp-charcoal);
}

/*
 * Left colour bar — 4px status stripe.
 * billable = ACP red (#F00F40): revenue/desired state = brand primary
 * strike   = neutral grey: excluded/off state
 */
table.entries td.status-bar {
  width: 4px;
  padding: 0;
  background: var(--strike);
}

tr.billable td.status-bar { background: var(--acp-red); }

table.entries td.date {
  font-size: 12px;
  color: var(--acp-charcoal);
  opacity: 0.6;
  white-space: nowrap;
  width: 90px;
  font-weight: 500;
}

table.entries td.time {
  font-size: 12px;
  color: var(--acp-charcoal);
  opacity: 0.7;
  white-space: nowrap;
  width: 130px;
}

table.entries td.desc {
  font-size: 13px;
  color: var(--acp-charcoal);
  line-height: 1.45;
  max-width: 600px;
}

table.entries td.dauer {
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
  width: 100px;
  font-weight: 500;
  color: var(--acp-charcoal);
}

table.entries td.emp {
  font-size: 12px;
  color: var(--acp-charcoal);
  opacity: 0.7;
  white-space: nowrap;
  width: 145px;
}

table.entries td.toggle {
  width: 130px;
  text-align: right;
}

/* Overridden indicator — red dot after pill */
tr.overridden td.toggle .pill::after {
  content: "●";
  color: var(--acp-red);
  font-size: 12px;
  line-height: 0;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── 12. Pill button ───────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--acp-font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .12s ease;
  user-select: none;
  white-space: nowrap;
}

tr.billable .pill {
  background: var(--bill-tint);
  color: var(--acp-red-dark);
  border-color: var(--bill-soft);
}

tr.billable .pill:hover {
  background: var(--bill-soft);
}

tr:not(.billable) .pill {
  background: var(--strike-tint);
  color: var(--acp-charcoal);
  border-color: var(--strike-soft);
  opacity: 0.85;
}

tr:not(.billable) .pill:hover {
  background: var(--strike-soft);
  opacity: 1;
}

/* ── 13. Detail Footer — Action buttons ───────────────────── */
footer.actions {
  position: sticky;
  bottom: 0;
  background: var(--acp-bg);
  border-top: 1px solid var(--acp-border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  z-index: 10;
  box-shadow: 0 -2px 8px rgba(61,74,82,.08);
}

/* Base button styling */
footer.actions button,
footer.actions .button {
  font-family: var(--acp-font-body);
  font-size: 14px;
  font-weight: 400;
  padding: 9px 18px;
  border-radius: var(--acp-radius);
  cursor: pointer;
  border: 1px solid var(--acp-border);
  background: var(--acp-bg);
  color: var(--acp-charcoal);
  transition: all .12s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

footer.actions button:hover,
footer.actions .button:hover {
  background: var(--acp-bg-muted);
  border-color: var(--acp-charcoal);
}

/* Primary: ACP red */
footer.actions button.primary,
footer.actions .button.primary {
  background: var(--acp-red);
  color: #fff;
  border-color: var(--acp-red);
}

footer.actions button.primary:hover,
footer.actions .button.primary:hover {
  background: var(--acp-red-dark);
  border-color: var(--acp-red-dark);
}

/* Danger: also red (same visual as primary by ACP CD — red is brand, not danger-only) */
footer.actions button.danger {
  background: transparent;
  color: var(--acp-red-dark);
  border-color: var(--acp-red);
}

footer.actions button.danger:hover {
  background: var(--bill-tint);
}

/* Ghost: transparent, charcoal text */
footer.actions button.ghost,
footer.actions .button.ghost {
  background: transparent;
  color: var(--acp-charcoal);
  border: 2px solid var(--acp-charcoal);
  border-radius: var(--acp-radius-sm);
}

footer.actions button.ghost:hover,
footer.actions .button.ghost:hover {
  background: var(--acp-charcoal);
  color: #fff;
}

/* ── 14. Utility: sub headings & shared .k/.v patterns ─────── */
.sub {
  font-size: 13px;
  color: var(--acp-charcoal);
  opacity: 0.6;
}

/* ── 16. Stats Bar ─────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--acp-border);
  margin: 0;
  border-bottom: 1px solid var(--acp-border);
}

.stat {
  background: var(--acp-bg);
  padding: 24px 28px 20px;
  position: relative;
}

.stat .k {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--acp-charcoal);
  opacity: 0.55;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acp-border);
  display: inline-block;
}

/* billable dot = ACP red; strike dot = neutral grey */
.stat.bill .dot { background: var(--acp-red); }
.stat.strike .dot { background: var(--strike); }

.stat .v {
  font-family: var(--acp-font-display);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--acp-charcoal);
}

/* billable count in ACP red; strike count stays charcoal (neutral) */
.stat.bill .v { color: var(--acp-red); }
.stat.strike .v { color: var(--acp-charcoal); opacity: 0.6; }

.stat .sub {
  font-size: 12px;
  color: var(--acp-charcoal);
  opacity: 0.5;
  margin-top: 6px;
}

/* ── 17. Controls row ──────────────────────────────────────── */
.controls {
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--acp-border);
  background: var(--acp-bg-soft);
}

.controls .label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--acp-charcoal);
  opacity: 0.6;
}

.chip {
  font-family: var(--acp-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid var(--acp-border);
  background: var(--acp-bg);
  color: var(--acp-charcoal);
  cursor: pointer;
  border-radius: 999px;
  transition: all .12s ease;
}

.chip:hover {
  background: var(--acp-charcoal);
  color: #fff;
  border-color: var(--acp-charcoal);
}

.chip.active {
  background: var(--acp-red);
  color: #fff;
  border-color: var(--acp-red);
}

.chip.active:hover {
  background: var(--acp-red-dark);
  border-color: var(--acp-red-dark);
}

.controls select {
  font-family: var(--acp-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 28px 6px 14px;
  border: 1px solid var(--acp-border);
  background: var(--acp-bg);
  color: var(--acp-charcoal);
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%233D4A52' d='M6 8l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  outline: none;
  transition: border-color .15s;
}

.controls select:focus {
  border-color: var(--acp-red);
  box-shadow: 0 0 0 3px rgba(240,15,64,.10);
}

.spacer { flex: 1; }

button.action {
  font-family: var(--acp-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border: 2px solid var(--acp-charcoal);
  background: transparent;
  color: var(--acp-charcoal);
  cursor: pointer;
  border-radius: var(--acp-radius-sm);
  transition: all .12s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

button.action:hover {
  background: var(--acp-charcoal);
  color: #fff;
}

button.action.ghost {
  border-color: var(--acp-border);
  color: var(--acp-charcoal);
  opacity: 0.8;
}

button.action.ghost:hover {
  background: var(--acp-bg-muted);
  opacity: 1;
}

/* ── 18. Ticket head totals + actions ──────────────────────── */
.ticket-head .totals {
  font-size: 13px;
  color: var(--acp-charcoal);
  opacity: 0.7;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ticket-head .totals .b { color: var(--acp-red); opacity: 1; }
.ticket-head .totals .s { color: var(--acp-charcoal); opacity: 0.6; }

.ticket-head .totals strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ticket-actions {
  display: flex;
  gap: 6px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--acp-border);
  background: var(--acp-bg-muted);
  align-items: center;
}

.ticket-actions .mini {
  font-family: var(--acp-font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 10px;
  background: var(--acp-bg);
  border: 1px solid var(--acp-border);
  color: var(--acp-charcoal);
  cursor: pointer;
  border-radius: var(--acp-radius-sm);
  transition: all .12s ease;
}

.ticket-actions .mini:hover {
  background: var(--acp-charcoal);
  color: #fff;
  border-color: var(--acp-charcoal);
}

.ticket-actions .label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--acp-charcoal);
  opacity: 0.5;
  align-self: center;
  margin-right: 6px;
}

/* ── 19. Pill .ic dot ──────────────────────────────────────── */
.pill .ic {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

tr.billable .pill .ic { background: var(--acp-red); }
tr:not(.billable) .pill .ic { background: var(--strike); }

/* ── 20. Sticky Footer (totals bar) ────────────────────────── */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--acp-charcoal);
  color: rgba(255,255,255,.9);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: 0 -4px 16px rgba(61,74,82,.20);
  z-index: 50;
}

.footer .f-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer .f-total .k {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.5);
}

.footer .f-total .v {
  font-family: var(--acp-font-display);
  font-size: 1.4rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  color: rgba(255,255,255,.9);
}

/* billable total in ACP red; strike/neutral in muted white */
.footer .f-total.bill .v { color: var(--acp-red); }
.footer .f-total.strike .v { color: rgba(255,255,255,.55); }

.footer .sep-v {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}

.footer .right {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Base footer button */
.footer .right button,
.footer .right .button {
  font-family: var(--acp-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.3);
  background: transparent;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  border-radius: var(--acp-radius);
  transition: all .12s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.footer .right button:hover,
.footer .right .button:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}

/* Secondary (outline on dark) */
.footer .right .button.secondary,
.footer .right button.secondary {
  border-color: rgba(255,255,255,.3);
  color: rgba(255,255,255,.65);
}

.footer .right .button.secondary:hover,
.footer .right button.secondary:hover {
  border-color: rgba(255,255,255,.6);
  color: #fff;
}

/* Primary: ACP red CTA */
.footer .right .button.primary,
.footer .right button.primary {
  background: var(--acp-red);
  color: #fff;
  border-color: var(--acp-red);
}

.footer .right .button.primary:hover,
.footer .right button.primary:hover {
  background: var(--acp-red-dark);
  border-color: var(--acp-red-dark);
}

/* Danger (outline red) */
.footer .right button.danger {
  border-color: var(--acp-red);
  color: var(--acp-red);
  background: transparent;
}

.footer .right button.danger:hover {
  background: rgba(240,15,64,.15);
}

/* Ghost on dark bg */
.footer .right button.ghost {
  background: transparent;
  color: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.2);
}

.footer .right button.ghost:hover {
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.9);
}

/* ── 21. Hidden rows (filter) ──────────────────────────────── */
tr.hidden { display: none !important; }

/* detail body needs bottom padding for fixed footer */
body.detail { padding-bottom: 80px; }

/* ── 15. Mobile Responsive ─────────────────────────────────── */
@media (max-width: 700px) {

  /* Topbar */
  .topbar {
    padding: 10px 16px;
    gap: 12px;
  }

  .topbar .brand img {
    height: 36px;
  }

  .topbar .brand-sep {
    font-size: 12px;
  }

  .topbar .logout {
    font-size: 12px;
    padding: 6px 12px;
  }

  /* Flashes */
  .flashes {
    padding: 0 16px;
    margin-top: 12px;
  }

  /* Login */
  .login-card {
    padding: 28px 20px 24px;
    max-width: 100%;
  }

  /* Upload zone */
  .upload-zone {
    padding: 18px 16px;
  }

  .dropzone {
    flex-direction: column;
  }

  .file-label {
    min-width: 0;
  }

  /* Kanban: single column */
  .kanban {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
    background: var(--acp-bg);
  }

  .kanban > .col {
    padding: 0 16px 16px;
    border-bottom: 1px solid var(--acp-border);
  }

  .kanban > .col:last-child {
    border-bottom: none;
  }

  .kanban > .col:first-child { padding-left: 16px; }
  .kanban > .col:last-child  { padding-right: 16px; }

  /* Vertrieb sections */
  .section {
    padding: 18px 16px;
  }

  /* Card grid: naturally collapses to 1 column */
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  /* Meta section */
  .meta {
    padding: 20px 16px 18px;
  }

  .meta h1 {
    font-size: 1.5rem;
    margin-bottom: 16px;
  }

  .meta .meta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
  }

  /* Entries host */
  #entries-host {
    padding: 16px 0 24px;
  }

  .ticket-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 16px 12px;
  }

  .ticket-head h2 {
    font-size: 1rem;
  }

  /* Table → card layout on mobile */
  table.entries,
  table.entries thead,
  table.entries tbody,
  table.entries tr,
  table.entries td {
    display: block;
  }

  table.entries thead {
    display: none;
  }

  table.entries tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date  dauer"
      "desc  desc"
      "emp   toggle";
    column-gap: 12px;
    row-gap: 6px;
    padding: 12px 16px;
    border-left: 4px solid var(--strike);
    border-bottom: 1px solid var(--acp-border);
    border-top: none;
    border-right: none;
    background: var(--acp-bg);
  }

  table.entries tbody tr.billable {
    border-left-color: var(--acp-red);
  }

  table.entries td {
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  table.entries td.status-bar { display: none; }

  table.entries td.date {
    grid-area: date;
    font-size: 11px;
  }

  table.entries td.time {
    display: none;
  }

  table.entries td.dauer {
    grid-area: dauer;
    font-size: 14px;
    font-weight: 600;
    color: var(--acp-charcoal);
    text-align: right;
    align-self: start;
  }

  table.entries td.desc {
    grid-area: desc;
    font-size: 13px;
    line-height: 1.45;
    word-wrap: break-word;
  }

  table.entries td.emp {
    grid-area: emp;
    font-size: 11px;
    opacity: 0.6;
    align-self: center;
  }

  table.entries td.toggle {
    grid-area: toggle;
    justify-self: end;
    text-align: right;
    align-self: center;
  }

  /* Larger touch target for pill */
  .pill {
    padding: 8px 14px;
    font-size: 11px;
    min-height: 36px;
  }

  /* Detail footer */
  footer.actions {
    padding: 12px 16px;
    gap: 8px;
  }

  footer.actions button,
  footer.actions .button {
    font-size: 13px;
    padding: 8px 14px;
  }

  /* Sticky footer */
  .footer {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 12px;
  }

  .footer .right {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Stats bar */
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .controls {
    padding: 12px 16px;
    gap: 8px;
  }
}