/*
 * limas.Hub - Manufacturer pages (Herstellerübersicht / Herstellerakte)
 * Visual spec mirrors "LIMAS_Hersteller_Uebersicht_und_Akte.html" (binding prototype).
 * Scoped under .manufacturer-module so it never collides with the app-wide
 * .btn/.card/.badge/.grid classes already used by the other screens.
 */
.manufacturer-module {
  --mm-red: #ee312d;
  --mm-red-dark: #cf2622;
  --mm-red-soft: #fff3f2;
  --mm-bg: #f7f7f7;
  --mm-surface: #fff;
  --mm-line: #e3e3e3;
  --mm-line2: #d9d9d9;
  --mm-text: #24262a;
  /* Darkened per customer feedback (2026-08): the old #6f747a "muted grey"
     text dipped below comfortable readability whenever it sat on a
     grey-ish background (table headers, chips, tag pills), not just white -
     e.g. only 4.1:1 contrast on #eef0f2. #5a5f65 (already used elsewhere in
     this file, e.g. .tag/.badge.wkz text) keeps a solid ~5.6-6.4:1 against
     every light background used in this module. */
  --mm-muted: #5a5f65;
  --mm-green: #23745c;
  --mm-green-bg: #e8f6f1;
  --mm-amber: #7a5a18;
  --mm-amber-bg: #fff7ea;
  --mm-blue: #325a78;
  --mm-blue-bg: #eef3f7;
  /* Werbeplan empty-state only (2026-08-14) - a brighter, more standard blue
     than --mm-blue above (that one's this app's own muted slate-blue, used
     for row-highlight/tag backgrounds elsewhere, not vivid enough to match
     the mockup here). */
  --mm-empty-icon-bg: #dceafd;
  --mm-empty-accent: #2f6fdb;
  --mm-empty-accent-dark: #2558b3;
  --mm-shadow: 0 8px 24px rgba(0, 0, 0, .055);
  --mm-shadow2: 0 14px 40px rgba(0, 0, 0, .14);
  font-size: 14px;
  color: var(--mm-text);
}
.manufacturer-module .breadcrumb { font-size: 12px; color: var(--mm-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.manufacturer-module .breadcrumb .here { color: #3a3e43; font-weight: 700; }
.manufacturer-module .breadcrumb .lnk { color: var(--mm-red-dark); cursor: pointer; font-weight: 600; }
/* Link-style buttons (Verteiler recipient cells, Abrechnung open-links,
   history toggle...). Previously UNSTYLED outside the breadcrumb - the
   Verteiler's clickable cells rendered as default browser mini-buttons
   with no link affordance ("I try to click on something,
   but nothing happen") - now they read unmistakably as links. */
.manufacturer-module .lnk { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--mm-red-dark); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.manufacturer-module .lnk:hover { color: var(--mm-red); }
body.dark .manufacturer-module .lnk { color: #f0a8a8; }
body.dark .manufacturer-module .lnk:hover { color: #ffc4c4; }
.manufacturer-module .wp-quick-action { color: var(--mm-blue); cursor: pointer; font-weight: 700; font-size: 12px; text-decoration: underline; }

.manufacturer-module .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: 14px; box-shadow: var(--mm-shadow); padding: 12px; margin-bottom: 12px; }
.manufacturer-module .search-wrap { flex: 1; min-width: 260px; position: relative; display: flex; align-items: center; }
.manufacturer-module .search { height: 40px; width: 100%; border: 1px solid var(--mm-line2); border-radius: 10px; padding: 0 13px 0 38px; font: inherit; box-sizing: border-box; }
.manufacturer-module .search:focus { outline: none; border-color: var(--mm-red); box-shadow: 0 0 0 3px var(--mm-red-soft); }
.manufacturer-module .search-wrap .ic { position: absolute; left: 12px; color: var(--mm-muted); }

/* Inline line icons in toolbar buttons / search, mirroring the prototype's svg.ic */
.manufacturer-module .ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.manufacturer-module .btn .ic { color: var(--mm-muted); }
.manufacturer-module .btn.primary .ic { color: #fff; }

.manufacturer-module .btn { height: 40px; border-radius: 10px; border: 1px solid var(--mm-line); background: #fff; color: #33383d; font-weight: 700; cursor: pointer; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; font: inherit; }
.manufacturer-module .btn:hover { background: #fafafa; }
.manufacturer-module .btn.primary { background: var(--mm-red); border-color: var(--mm-red); color: #fff; }
.manufacturer-module .btn.primary:hover { background: var(--mm-red-dark); }
.manufacturer-module .btn.ghost { border-color: transparent; color: var(--mm-muted); }
.manufacturer-module .btn.sm { height: 32px; padding: 0 11px; font-size: 12px; }

.manufacturer-module .filterbar { display: none; background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: 14px; box-shadow: var(--mm-shadow); padding: 10px 14px; margin-bottom: 8px; }
.manufacturer-module .filterbar.open { display: block; }
.manufacturer-module .fb-flags { display: flex; gap: 7px; flex-wrap: wrap; }
.manufacturer-module .fb-flag { border: 1px solid var(--mm-line); background: #fff; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 800; color: #5a5f65; cursor: pointer; user-select: none; }
/* The " · Ja"/" · Nein" suffix moved from CSS ::after content (German in
   the stylesheet, untranslatable) into the chip markup - see
   flagChipSuffix() in ManufacturerOverviewController. */
.manufacturer-module .fb-flag.yes { background: var(--mm-green-bg); border-color: #cfeae0; color: #21695a; }
.manufacturer-module .fb-flag.no { background: #fdecec; border-color: #f6cfcb; color: #b42318; }
.manufacturer-module .fb-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid #efefef; }
.manufacturer-module .fb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 16px; }
.manufacturer-module .fb-field { display: flex; flex-direction: column; gap: 3px; }
.manufacturer-module .fl { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-muted); font-weight: 800; }
.manufacturer-module .fb-field select { height: 32px; border: 1px solid var(--mm-line2); border-radius: 9px; background: #fff; padding: 0 10px; font: inherit; min-width: 140px; }
.manufacturer-module .pill { background: var(--mm-red); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 800; padding: 1px 7px; margin-left: 1px; }

.manufacturer-module .section-head { margin-bottom: 18px; }
.manufacturer-module .section-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.manufacturer-module .section-head p { color: var(--mm-muted); font-size: 14px; max-width: 700px; margin: 0; line-height: 1.5; }

.manufacturer-module .toolbar select { height: 40px; border: 1px solid var(--mm-line2); border-radius: 10px; background: #fff; padding: 0 10px; font: inherit; }

.manufacturer-module .kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.manufacturer-module .kpi { background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: 14px; box-shadow: var(--mm-shadow); padding: 15px 16px; }
.manufacturer-module .kpi .k-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-muted); font-weight: 800; }
.manufacturer-module .kpi .k-val { font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin-top: 7px; }
.manufacturer-module .kpi.accent { background: linear-gradient(180deg, #fff, #fff6f5); border-color: #f6d6d3; }
.manufacturer-module .kpi.clickable { cursor: pointer; transition: box-shadow .12s ease, transform .12s ease; }
.manufacturer-module .kpi.clickable:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); transform: translateY(-1px); }
.manufacturer-module .k-go { font-size: 11px; color: var(--mm-red); margin-top: 6px; font-weight: 600; }

/* Werbeplan global empty state:
   a dedicated centered card replacing the whole tabbar+tables view, not a
   thin hint bar above them. Blue is deliberate here, per the mockup and the
   an explicit product decision - everywhere else in this app "primary" means red
   (.btn.primary), so this gets its own one-off class rather than changing
   that global convention. */
.manufacturer-module .wp-empty-card { max-width: 480px; margin: 48px auto; padding: 40px 32px; background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: 16px; box-shadow: var(--mm-shadow); text-align: center; }
.manufacturer-module .wp-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--mm-empty-icon-bg); color: var(--mm-empty-accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.manufacturer-module .wp-empty-title { margin: 0 0 12px; font-size: 20px; font-weight: 800; color: var(--mm-text); }
.manufacturer-module .wp-empty-subtitle { margin: 0 auto 24px; max-width: 380px; color: var(--mm-muted); font-size: 14px; line-height: 1.6; }
.manufacturer-module .wp-empty-card .btn.wp-empty-btn { background: var(--mm-empty-accent); border-color: var(--mm-empty-accent); color: #fff; }
.manufacturer-module .wp-empty-card .btn.wp-empty-btn:hover { background: var(--mm-empty-accent-dark); }
.manufacturer-module .d-tag.bad { background: #fae3e3; color: #b3261e; }
@media (max-width: 980px) {
  .manufacturer-module .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

.manufacturer-module .active-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.manufacturer-module .active-filters .lbl { font-size: 12px; color: var(--mm-muted); font-weight: 700; }
.manufacturer-module .af-chip { display: inline-flex; align-items: center; gap: 7px; background: #1f2024; color: #fff; border-radius: 999px; padding: 5px 7px 5px 11px; font-size: 12px; font-weight: 700; }
.manufacturer-module .af-chip button { border: 0; background: rgba(255, 255, 255, .2); color: #fff; width: 17px; height: 17px; border-radius: 50%; cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.manufacturer-module .af-clear { font-size: 12px; color: var(--mm-red-dark); font-weight: 700; cursor: pointer; border: 0; background: none; }

.manufacturer-module .views { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 13px; font-size: 12px; color: var(--mm-muted); }
.manufacturer-module .views .lbl { font-weight: 700; }
.manufacturer-module .view-chip { border: 1px solid var(--mm-line); background: #fff; border-radius: 999px; padding: 7px 12px; cursor: pointer; font-size: 12px; font-weight: 700; color: #4a4f54; display: inline-flex; align-items: center; gap: 6px; }
.manufacturer-module .view-chip.active { background: #1f2024; border-color: #1f2024; color: #fff; }
.manufacturer-module .view-chip .star { font-size: 11px; opacity: .75; }
.manufacturer-module .view-chip.new { border-style: dashed; color: var(--mm-red-dark); border-color: #f3c9c6; }
.manufacturer-module .view-chip.new:hover { background: var(--mm-red-soft); }
.manufacturer-module .view-chip button { border: 0; background: rgba(0, 0, 0, .12); color: inherit; width: 15px; height: 15px; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.manufacturer-module .view-chip.active button { background: rgba(255, 255, 255, .25); }

/* Spalten/KPIs panel */
.manufacturer-module .scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .25); z-index: 50; display: none; }
.manufacturer-module .scrim.open { display: block; }
.manufacturer-module .panel { position: fixed; top: 0; right: 0; bottom: 0; width: 386px; max-width: 92vw; background: var(--mm-surface); z-index: 51; box-shadow: -12px 0 40px rgba(0, 0, 0, .16); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; }
.manufacturer-module .panel.open { transform: translateX(0); }
.manufacturer-module .panel-head { padding: 18px 20px; border-bottom: 1px solid var(--mm-line); display: flex; justify-content: space-between; align-items: flex-start; }
.manufacturer-module .panel-head h3 { margin: 0; font-size: 17px; }
.manufacturer-module .panel-head p { margin: 5px 0 0; font-size: 12px; color: var(--mm-muted); }
.manufacturer-module .icon-x { border: 0; background: transparent; font-size: 24px; cursor: pointer; color: var(--mm-muted); line-height: 1; }
.manufacturer-module .panel-body { padding: 14px 18px; overflow: auto; flex: 1; }
.manufacturer-module .cfg-sec { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mm-muted); font-weight: 800; margin: 14px 0 8px; display: flex; justify-content: space-between; }
.manufacturer-module .cfg-sec .tip { text-transform: none; letter-spacing: 0; color: var(--mm-muted); font-weight: 600; }
.manufacturer-module .cfg-row { display: flex; align-items: center; gap: 11px; border: 1px solid var(--mm-line); border-radius: 11px; padding: 10px 12px; margin-bottom: 8px; background: var(--mm-surface); }
.manufacturer-module .cfg-row.fixed { background: #fafafa; color: var(--mm-muted); }
.manufacturer-module .cfg-row.drag-over { border-color: var(--mm-red); box-shadow: 0 0 0 3px var(--mm-red-soft); }
.manufacturer-module .cfg-row.dragging { opacity: .45; }
.manufacturer-module .cfg-row .grip { color: var(--mm-muted); cursor: grab; font-size: 15px; }
.manufacturer-module .cfg-row .cfg-label { flex: 1; font-weight: 700; font-size: 14px; }
.manufacturer-module .cfg-row .cfg-hint { font-size: 11px; color: var(--mm-muted); font-weight: 600; }
.manufacturer-module .cfg-empty { color: var(--mm-muted); font-style: italic; padding: 14px 2px; font-size: 12px; }
.manufacturer-module .switch { position: relative; width: 40px; height: 23px; flex: none; }
.manufacturer-module .switch input { opacity: 0; width: 0; height: 0; }
.manufacturer-module .slider { position: absolute; inset: 0; background: #d6d9dc; border-radius: 999px; transition: .18s; cursor: pointer; }
.manufacturer-module .slider:before { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .18s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.manufacturer-module .switch input:checked + .slider { background: var(--mm-red); }
.manufacturer-module .switch input:checked + .slider:before { transform: translateX(17px); }
.manufacturer-module .panel-foot { padding: 14px 18px; border-top: 1px solid var(--mm-line); }
.manufacturer-module .saverow { display: flex; gap: 8px; width: 100%; }
.manufacturer-module .saverow input { flex: 1; height: 40px; border: 1px solid var(--mm-line2); border-radius: 10px; padding: 0 12px; font: inherit; }
.manufacturer-module .kpi-search { margin-bottom: 10px; }
.manufacturer-module .kpi-search input { width: 100%; height: 38px; border: 1px solid var(--mm-line2); border-radius: 10px; padding: 0 12px; font: inherit; box-sizing: border-box; }
.manufacturer-module .jv-pill { display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 800; }
.manufacturer-module .jv-pill.ok { background: var(--mm-green-bg); color: #21695a; }
.manufacturer-module .jv-pill.expired { background: #fdecec; color: #b42318; }

.manufacturer-module .export-wrap { position: relative; }
.manufacturer-module .export-menu { position: absolute; top: 46px; right: 0; width: 288px; background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: 12px; box-shadow: var(--mm-shadow2); z-index: 30; display: none; overflow: hidden; }
.manufacturer-module .export-menu.open { display: block; }
.manufacturer-module .export-menu button { display: flex; flex-direction: column; gap: 2px; width: 100%; border: 0; background: var(--mm-surface); text-align: left; padding: 12px 14px; cursor: pointer; font: inherit; border-bottom: 1px solid #f0f0f0; }
.manufacturer-module .export-menu button:last-child { border-bottom: 0; }
.manufacturer-module .export-menu button:hover { background: #fafafa; }
.manufacturer-module .export-menu button b { font-size: 14px; color: #2b2e33; }
.manufacturer-module .export-menu button span { font-size: 11px; color: var(--mm-muted); }

.manufacturer-module .tablecard { background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: 14px; box-shadow: var(--mm-shadow); overflow: hidden; }
.manufacturer-module .table-meta { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--mm-line); font-size: 12px; color: var(--mm-muted); }
.manufacturer-module .table-wrap { overflow-x: auto; }
/* Force real table rendering: the app-wide `.grid` utility in styles.css sets
 * `display:grid; gap:24px`, which would otherwise turn this <table class="grid">
 * into a CSS-grid container and break the header/row layout. */
/* width:auto + min-width:100% lets the table grow to the sum of the column
 * widths and exceed the container (so .table-wrap scrolls horizontally when
 * columns are widened past the viewport), while still filling the container
 * when the columns are narrow. The trailing spacer column absorbs the slack. */
.manufacturer-module table.grid { display: table; width: auto; min-width: 100%; border-collapse: separate; border-spacing: 0; gap: 0; }
.manufacturer-module table.grid thead { display: table-header-group; }
.manufacturer-module table.grid tbody { display: table-row-group; }
.manufacturer-module table.grid tr { display: table-row; }
.manufacturer-module table.grid th, .manufacturer-module table.grid td { display: table-cell; }
.manufacturer-module .grid th { background: #fafafa; color: #565c62; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--mm-line); font-weight: 800; vertical-align: bottom; line-height: 1.25; }
.manufacturer-module .grid th.num, .manufacturer-module .grid td.num { text-align: right; }
.manufacturer-module .grid th.sortable { cursor: pointer; }
.manufacturer-module .grid th .hint { display: block; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--mm-muted); font-size: 11px; margin-top: 2px; }
.manufacturer-module .grid th .arrow { font-size: 11px; color: var(--mm-muted); margin-left: 3px; }
.manufacturer-module .grid th { position: relative; }
.manufacturer-module .grid th .resizer { position: absolute; right: 0; top: 0; height: 100%; width: 7px; cursor: col-resize; }
.manufacturer-module .grid th .resizer:hover { background: linear-gradient(90deg, transparent, #d8dadd); }
.manufacturer-module table.grid { table-layout: fixed; }
.manufacturer-module .grid td { padding: 12px 13px; border-bottom: 1px solid #efefef; vertical-align: middle; }
.manufacturer-module .grid tr:last-child td { border-bottom: 0; }
.manufacturer-module .grid tbody tr { cursor: pointer; }
.manufacturer-module .grid tbody tr:hover td { background: #fffafa; }
/* Deactivated lookup-list row (Settings/Benutzerverwaltung "active" toggle) -
   still fully visible/editable, just visually de-emphasized so it reads as
   "not selectable for new records" without looking deleted or broken. */
.manufacturer-module .grid tr.row-inactive { opacity: .6; background: var(--mm-amber-bg); }
.manufacturer-module .grid tr.row-inactive .h-name { text-decoration: line-through; color: var(--mm-amber); }
/* Same "deactivated" treatment as .row-inactive above, but for a lookup name
   shown inline inside a card/list item (Contacts, Contracts & Documents,
   Pooltermine) rather than as its own Settings-table row (a deactivated Vertrags-/Dokumententyp, Job-Titel,
   Recipient-For, or Order Channel value must visibly read as inactive
   wherever it's shown, not just in Settings itself). */
.manufacturer-module .item-inactive {
  text-decoration: line-through;
  opacity: .6;
  color: var(--mm-amber);
  background: var(--mm-amber-bg);
  padding: 1px 5px;
  border-radius: 4px;
}
.manufacturer-module .h-name { font-weight: 800; color: #1f2328; letter-spacing: -.01em; }
/* Herstellerübersicht ONLY: the manufacturer name is bold
   700 instead of the module-wide 800. Scoped via the table's dedicated
   .ovw-table class - the shared .h-name rule above stays untouched for every
   other name cell (users, roles, contracts, media, campaigns). */
.manufacturer-module .ovw-table .h-name { font-weight: 700; }
.manufacturer-module .h-line2 { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.manufacturer-module .h-sub { color: var(--mm-muted); font-size: 12px; font-weight: 600; }
.manufacturer-module .val { font-weight: 800; color: #23262b; }
.manufacturer-module .umsatz-tag { font-size: 11px; font-weight: 800; padding: 1px 5px; border-radius: 5px; text-transform: uppercase; letter-spacing: .03em; margin-left: 6px; }
.manufacturer-module .umsatz-tag.hap { background: #eef0f2; color: #6b7178; }
.manufacturer-module .umsatz-tag.bon { background: var(--mm-amber-bg); color: var(--mm-amber); }

.manufacturer-module .mini { display: inline-flex; align-items: center; border-radius: 5px; padding: 2px 6px; font-size: 11px; font-weight: 800; }
.manufacturer-module .mini.wave { background: var(--mm-green-bg); color: #21695a; }
.manufacturer-module .mini.bonus { background: var(--mm-amber-bg); color: var(--mm-amber); }
.manufacturer-module .tag { display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 7px; font-size: 12px; font-weight: 800; background: #eef1f3; color: #566069; }
.manufacturer-module .tag.rx { background: #eef3f7; color: #325a78; }
.manufacturer-module .tag.gx { background: #eaf5ef; color: #23745c; }
.manufacturer-module .tag.otc { background: #fff2ec; color: #a4561f; }
.manufacturer-module .tag.import { background: #f1eef7; color: #5b4a86; }
.manufacturer-module .tag.gx-otc { background: #eef3ef; color: #3f6a52; }
.manufacturer-module .tag.freiwahl { background: #f5eef5; color: #7a4b74; }
.manufacturer-module .tag.ok { background: var(--mm-green-bg); color: #21695a; }
.manufacturer-module .tag.bad { background: var(--mm-red-soft); color: var(--mm-red-dark); }
.manufacturer-module .wp-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 800; background: var(--mm-amber-bg); color: var(--mm-amber); }
.manufacturer-module .wp-approved { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--mm-green); }
/* "WP-Freigabe offen" stage chip in light red (customer 2026-08-18). */
.manufacturer-module .tag.wp-open-tag { background: #fdecec; color: #b3261e; }
/* Month sub-group rows in the Nach-Medium tree (customer 2026-08-18). */
.manufacturer-module .wp-month-row > td { background: #f7f9fb; font-weight: 700; }
.manufacturer-module .wp-status.ok { background: var(--mm-green-bg); color: #21695a; }
.manufacturer-module .wp-geaendert, .manufacturer-module .wp-bearb { display: inline-flex; align-items: center; border-radius: 5px; padding: 1px 6px; margin-left: 4px; font-size: 11px; font-weight: 800; background: var(--mm-amber-bg); color: var(--mm-amber); }
/* "freigegeben" is deliberately NOT a pill (04_Status_and_Flag_Rules.md §5) -
   plain green text + checkmark so an approved measure reads as a status rather
   than an empty cell, without the heavy background/border the other tags have. */
.manufacturer-module tr.cancelled { opacity: .55; text-decoration: line-through; }

/* Druckunterlagen status dropdown (Werbeplan table cell, edit modal, campaign
   overlay) - same rounded look as the app's form selects (.ap-field select)
   but compact enough to sit inline in a table cell / detail row.
   appearance:none suppresses the mismatched native widget so the custom
   chevron (inline SVG) renders consistently across browsers. */
.manufacturer-module select.wp-status-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    height: 30px; padding: 0 28px 0 10px;
    border: 1px solid var(--mm-line2); border-radius: 9px;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235a5f65' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    font: inherit; font-size: 14px; font-weight: 700; color: #3a3f45;
    cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.manufacturer-module select.wp-status-select:hover:not(:disabled) { border-color: #b9c0c9; }
.manufacturer-module select.wp-status-select:focus { outline: none; border-color: var(--mm-red); box-shadow: 0 0 0 3px var(--mm-red-soft); }
.manufacturer-module select.wp-status-select:disabled { opacity: .6; cursor: default; }
/* UAT 2026-08-24: disabled/read-only fields in the module's modals showed the
   browser's native striped/patterned disabled rendering - force a clean,
   SOLID background instead. Scoped to the module's modal boxes only. */
.manufacturer-module .modal-box select:disabled,
.manufacturer-module .modal-box input:disabled,
.manufacturer-module .modal-box textarea:disabled {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background: #f3f4f6; background-image: none; color: #6b7280;
    border-color: var(--mm-line2); opacity: 1; cursor: default;
}
body.dark .manufacturer-module .modal-box select:disabled,
body.dark .manufacturer-module .modal-box input:disabled,
body.dark .manufacturer-module .modal-box textarea:disabled {
    background: #1f2937; background-image: none; color: #9ca3af;
}

/* Herstellerfreigabe upload card above the plan table (2026-08-17 customer
   feedback: the picker had no label/heading). Sits on the standard dashed
   .upload-bar surface; the text block takes the full first line, the picker
   button + filename + upload action flow beneath it. */

/* Werbeplan budget cards, compact variant ("that
   part with agreed etc. must be much smaller") - tighter padding, smaller
   type, no shadow; scoped so the full-size .kpi cards elsewhere (Dashboard,
   Finanzen) stay untouched. */
/* Werbeplan tab header + slim budget row + action bar, mirroring the customer's
   LIMAS_Werbeplan_Detail_interaktiv prototype (2026-08-18). Year pills keep
   the team's Alle | divider | years layout with the active pill emphasized. */
.manufacturer-module .wp-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.manufacturer-module .wp-title { display: flex; align-items: center; gap: 10px; }
.manufacturer-module .wp-title .wp-plan-headline { margin: 0; }
.manufacturer-module .wp-head-right { display: flex; align-items: center; gap: 4px; }
.manufacturer-module .wp-yr-lbl { font-size: 11px; font-weight: 800; color: #6a7077; text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; }
.manufacturer-module .wp-year-pill { border: 0; background: none; color: #5a5f65; font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.manufacturer-module .wp-year-pill:hover { background: #f0f2f4; }
.manufacturer-module .wp-year-pill.primary { background: var(--mm-red); color: #fff; font-size: 14px; font-weight: 800; }
.manufacturer-module .wp-year-all { text-transform: uppercase; letter-spacing: .04em; }
.manufacturer-module .wp-year-divider { display: inline-block; width: 2px; height: 18px; border-radius: 2px; background: var(--mm-red); margin: 0 6px; align-self: center; }
/* The add button is deliberately a full-size .btn (14px) so it reads more
   prominent than the 12px year pills beside it. */
.manufacturer-module .wp-add-btn { margin-left: 10px; }
.manufacturer-module .budget-slim { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; padding: 4px 2px 12px; margin-bottom: 12px; border-bottom: 1px solid var(--mm-line); }
.manufacturer-module .bvals { display: flex; gap: 22px; flex-wrap: wrap; font-size: 12px; color: #5a5f65; }
.manufacturer-module .bvals b { color: #23272d; font-weight: 700; margin-right: 5px; font-size: 14px; }
.manufacturer-module .bvals .avail b { color: var(--mm-green); }
.manufacturer-module .bcompose { font-size: 12px; color: var(--mm-muted); }
.manufacturer-module .bv-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #e6e8eb; color: #666; font-size: 11px; font-weight: 700; cursor: help; margin-left: 4px; }
.manufacturer-module .wp-actionsbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.manufacturer-module .wp-actions-left { display: flex; align-items: center; gap: 10px; }
.manufacturer-module .wp-actions-hint { font-size: 12px; color: var(--mm-muted); }
.manufacturer-module .wp-actions-right { display: flex; gap: 8px; margin-left: auto; }

/* Freigabe flow modal (2026-08-17, LIMAS_Freigabe_Flow.html prototype):
   option rows in step 1, scope pill + big summary in step 2. */
.manufacturer-module .fg-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; }
.manufacturer-module .fg-lbl { font-size: 14px; font-weight: 700; color: #3a3f45; }
.manufacturer-module .fg-ctrl { display: inline-flex; align-items: center; gap: 8px; }
.manufacturer-module .fg-sep { border-top: 1px solid var(--mm-line); margin: 2px 0; }
.manufacturer-module .fg-scope { display: inline-block; margin: 4px 0 10px; padding: 3px 10px; border-radius: 999px; background: #eef0f2; color: #3a3f45; font-size: 12px; font-weight: 700; }
.manufacturer-module .fg-summary { padding: 6px 0 2px; }
.manufacturer-module .fg-big { font-size: 18px; font-weight: 800; }
.manufacturer-module .fg-sub { margin-top: 3px; color: var(--mm-muted); font-size: 12px; }
.manufacturer-module .fg-skip { margin-top: 10px; padding: 7px 10px; border-radius: 8px; background: #fff8e1; color: #8a6d1a; font-size: 12px; }
/* Darkmode link contrast: document/download links (e.g.
   "Artikelliste" in Konditionen, the WAVE Teilsortiment file) are plain <a>
   elements with no colour of their own, so they fell back to the browser
   default #0000EE - unreadable on the dark surface. Light blue instead, with
   the visited state pinned too so it does not drift back to dark purple. */
/* #d32f2f is a dark red that sits poorly on the dark surface - now that the
   validation colour lives in one class it can get a readable dark variant. */
body.dark .manufacturer-module .field-error { color: #ff8a80; }

body.dark .manufacturer-module a,
body.dark .manufacturer-module a:visited { color: #7cc4fa; }
body.dark .manufacturer-module a:hover { color: #a8d8ff; }

body.dark .manufacturer-module .fg-lbl { color: #cbd2da; }
body.dark .manufacturer-module .fg-scope { background: #263041; color: #cbd2da; }
body.dark .manufacturer-module .fg-skip { background: rgba(122, 90, 24, .22); color: #f0d59a; }

/* mm-month-picker (nicer month/year dropdown in
   the system's rounded design) - toggle mirrors the app's form inputs,
   popover is a rounded card with a year stepper and a 3x4 month grid. */
.manufacturer-module .mmp { position: relative; }
.manufacturer-module .mmp-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; height: 38px; padding: 0 11px; box-sizing: border-box;
    border: 1px solid var(--mm-line2); border-radius: 9px; background: #fff;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.manufacturer-module .mmp-toggle:hover { border-color: #b9c0c9; }
/* View-mode lock (ngDisabled on mm-month-picker/mm-date-picker) - same muted
   look native disabled inputs get. */
.manufacturer-module .mmp.disabled .mmp-toggle { opacity: .6; cursor: default; pointer-events: none; }
.manufacturer-module .mmp.open .mmp-toggle,
.manufacturer-module .mmp-toggle:focus { outline: none; border-color: var(--mm-red); box-shadow: 0 0 0 3px var(--mm-red-soft); }
.manufacturer-module .mmp-placeholder { color: var(--mm-muted); }
.manufacturer-module .mmp-caret { color: #5a5f65; flex: none; }
.manufacturer-module .mmp-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 232px;
    background: #fff; border: 1px solid var(--mm-line2); border-radius: 12px;
    box-shadow: 0 10px 28px rgba(20, 28, 38, .16); padding: 10px;
}
.manufacturer-module .mmp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.manufacturer-module .mmp-year { font-weight: 800; font-size: 14px; }
.manufacturer-module .mmp-nav {
    width: 28px; height: 28px; border: 1px solid var(--mm-line2); border-radius: 999px;
    background: #fff; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; color: #3a3f45;
}
.manufacturer-module .mmp-nav:hover { background: #f3f5f7; }
.manufacturer-module .mmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.manufacturer-module .mmp-month {
    border: 1px solid transparent; border-radius: 8px; background: transparent;
    font: inherit; font-size: 12px; font-weight: 600; color: #3a3f45;
    padding: 7px 0; cursor: pointer;
}
.manufacturer-module .mmp-month:hover { background: #f3f5f7; }
.manufacturer-module .mmp-month.selected { background: var(--mm-red); border-color: var(--mm-red); color: #fff; }
/* mm-date-picker's day grid (same popover shell as the month picker) */
.manufacturer-module .mmp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }
.manufacturer-module .mmp-dow span { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--mm-muted); text-transform: uppercase; padding: 2px 0; }
.manufacturer-module .mmp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.manufacturer-module .mmp-day {
    border: 1px solid transparent; border-radius: 8px; background: transparent;
    font: inherit; font-size: 12px; font-weight: 600; color: #3a3f45;
    padding: 5px 0; cursor: pointer; text-align: center;
}
.manufacturer-module .mmp-day:hover { background: #f3f5f7; }
.manufacturer-module .mmp-day.out { color: #b6bcc4; font-weight: 500; }
.manufacturer-module .mmp-day.today { border-color: var(--mm-red); }
.manufacturer-module .mmp-day.selected { background: var(--mm-red); border-color: var(--mm-red); color: #fff; }
body.dark .manufacturer-module .mmp-day { color: #cbd2da; }
body.dark .manufacturer-module .mmp-day:hover { background: #263041; }
body.dark .manufacturer-module .mmp-day.out { color: #5b6470; }
body.dark .manufacturer-module .mmp-toggle { background: #17202e; color: #e5e7eb; border-color: #2b3646; }
body.dark .manufacturer-module .mmp-toggle:hover { border-color: #4b5563; }
body.dark .manufacturer-module .mmp-caret { color: #9ca3af; }
body.dark .manufacturer-module .mmp-pop { background: #17202e; border-color: #2b3646; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
body.dark .manufacturer-module .mmp-year { color: #e5e7eb; }
body.dark .manufacturer-module .mmp-nav { background: #17202e; border-color: #2b3646; color: #e5e7eb; }
body.dark .manufacturer-module .mmp-nav:hover { background: #263041; }
body.dark .manufacturer-module .mmp-month { color: #cbd2da; }
body.dark .manufacturer-module .mmp-month:hover { background: #263041; }

/* Werbeplan tab (Manufacturer detail): Medium section headline (2026-08-14 UI
   feedback) - name only, no counts/totals on this row by design. Font-size
   bumped and hover suppressed per PO round-2 feedback: the medium header
   rows should read as section labels, not clickable/hoverable data rows -
   only the campaign rows underneath get the hover treatment. */
.manufacturer-module .wp-medium-header td { background: #f2f5f8; color: #3c4650; font-size: 14px; font-weight: 800; padding: 8px 13px; border-bottom: 1px solid var(--mm-line); cursor: default; }
.manufacturer-module .wp-plan-table tbody tr.wp-medium-header:hover td { background: #f2f5f8; }
/* Slightly denser campaign rows than the rest of the app's .grid tables
   (PO round-2 feedback: "reduce the line height in the table") - scoped to
   this table only via .wp-plan-table, not the shared .grid rule used
   everywhere else in the app. */
.manufacturer-module .wp-plan-table td { padding-top: 8px; padding-bottom: 8px; line-height: 1.3; }


/* Eigene Ansichten (personal view chips) - matches the demo's .views/.view-chip. */
.manufacturer-module .views { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 13px; font-size: 12px; color: var(--mm-muted); }
.manufacturer-module .views .lbl { font-weight: 700; }
.manufacturer-module .view-chip { border: 1px solid var(--mm-line); background: #fff; border-radius: 999px; padding: 7px 12px; cursor: pointer; font-size: 12px; font-weight: 700; color: #4a4f54; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.manufacturer-module .view-chip:hover { background: #fafafa; }
.manufacturer-module .view-chip.active { background: #1f2024; border-color: #1f2024; color: #fff; }
.manufacturer-module .view-chip .star { font-size: 11px; opacity: .75; }
.manufacturer-module .view-chip .vchip-x { margin-left: 2px; font-size: 14px; line-height: 1; opacity: .6; }
.manufacturer-module .view-chip .vchip-x:hover { opacity: 1; }
.manufacturer-module .view-chip.new { border-style: dashed; color: var(--mm-red-dark); border-color: #f3c9c6; }
.manufacturer-module .view-chip.new:hover { background: var(--mm-red-soft); }
.manufacturer-module .save-summary { font-size: 12px; color: var(--mm-muted); margin-bottom: 10px; }
/* Ja/Nein condition values: green when yes, muted when no - matches the demo's jn().
   The selector must outrank ".manufacturer-module .dl dd" (which sets the default
   value colour), so it targets "dd.jn-*", not just ".jn-*". */
.manufacturer-module .dl dd.jn-yes { color: var(--mm-green); font-weight: 800; }
.manufacturer-module .dl dd.jn-no { color: var(--mm-muted); font-weight: 800; }
body.dark .manufacturer-module .dl dd.jn-yes { color: #8fd6bd; }
body.dark .manufacturer-module .dl dd.jn-no { color: #7a828b; }
body.dark .manufacturer-module .view-chip { background: #2a3139; border-color: #3a424c; color: #cbd2d9; }
body.dark .manufacturer-module .view-chip:hover { background: #323a43; }
body.dark .manufacturer-module .view-chip.active { background: #f3f4f6; border-color: #f3f4f6; color: #1f2024; }
.manufacturer-module tr.wp-highlight > td { background: var(--mm-blue-bg); transition: background 2s ease; }

.manufacturer-module .akte-head { background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: 14px; box-shadow: var(--mm-shadow); padding: 20px 22px; margin-bottom: 14px; }
.manufacturer-module .akte-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.manufacturer-module .akte-name { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.manufacturer-module .akte-sub { color: var(--mm-muted); font-size: 12px; margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.manufacturer-module .akte-badges { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.manufacturer-module .akte-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.manufacturer-module .badge { border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; border: 1px solid; }
.manufacturer-module .badge.wave { background: var(--mm-green-bg); border-color: #cfeae0; color: #21695a; }
.manufacturer-module .badge.bonus { background: var(--mm-amber-bg); border-color: #f1e2c8; color: var(--mm-amber); }
.manufacturer-module .badge.uw { background: #f4eef7; border-color: #e6d8ee; color: #6a4b86; }
.manufacturer-module .badge.wkz, .manufacturer-module .badge.hap { background: #eef0f2; border-color: #e2e4e7; color: #5a5f65; }

.manufacturer-module .tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--mm-line); margin-bottom: 16px; overflow-x: auto; }
.manufacturer-module .tab { padding: 11px 15px; font-size: 14px; font-weight: 700; color: #6b7178; cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.manufacturer-module .tab:hover { color: #33383d; }
.manufacturer-module .tab.active { color: var(--mm-red-dark); border-bottom-color: var(--mm-red); }

.manufacturer-module .akte-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.manufacturer-module .akte-grid.thirds { grid-template-columns: 1.3fr 1fr; }
/* Compact-width caps ("make them again smaller"). Both are
   NEW, tightly scoped classes used exactly once each in manufacturer-file.html
   - deliberately NOT changes to .card/.tablecard/.grid/.akte-grid, which other
   views (Werbeplan, Verteiler, Settings) share. minmax(0, cap) keeps them
   shrinkable on narrow screens, same pattern as .overview-grid. */
.manufacturer-module .fin-compare-grid { display: grid; grid-template-columns: minmax(0, 940px); gap: 14px; } /* 940: five columns since 2026-09-03 (was 760) */
.manufacturer-module .doclist-card { max-width: 860px; }
/* Übersicht-tab layout only (customer-approved, 2026-08, see
   template/bonus-flag-ideas.html): Kernkonditionen/Stammdaten/Ansprechpartner
   sit side by side in one row (1/3 width each), "Letzte Dokumente &
   Aktivität" sits in the row below but ALSO only takes 1/3 width (the "."
   placeholders leave the rest of that row empty) so the cards stay compact
   instead of stretching edge to edge. Does not replace .akte-grid, which
   every other tab still uses unchanged. */
.manufacturer-module .overview-grid {
  display: grid;
  /* Explicit cap, not 1fr 1fr 1fr: on a wide monitor 1fr
     columns would stretch to fill the whole row, defeating the point of
     narrowing these cards. minmax(0, 460px) lets each column shrink on small
     screens but never grow past 460px, so the unused width past the third
     column stays empty grey background - intentional, not a bug. */
  grid-template-columns: repeat(3, minmax(0, 460px));
  /* Row 2 (2026-09-03): the new "Adressen" card sits under the card that
     used to hold the addresses; the third slot stays deliberately empty. */
  grid-template-areas:
    "core   master     contacts"
    "docs   addresses  .";
  gap: 14px;
}
@media (max-width: 980px) {
  .manufacturer-module .overview-grid { grid-template-columns: 1fr; grid-template-areas: "core" "master" "addresses" "contacts" "docs"; }
}
.manufacturer-module .overview-grid .core { grid-area: core; }
.manufacturer-module .overview-grid .master { grid-area: master; }
.manufacturer-module .overview-grid .contacts { grid-area: contacts; }
.manufacturer-module .overview-grid .addresses { grid-area: addresses; }
.manufacturer-module .overview-grid .docs { grid-area: docs; }
/* General comment / Bemerkung callout in the Akte header (2026-09-03) - the
   neutral amber "hint" tone of the former JV banner, never red: it is a status
   note, not an alarm. pre-wrap keeps the author's line breaks. */
.manufacturer-module .akte-top > div:first-child { flex: 1 1 320px; min-width: 0; } /* lets the callout span the left column */
/* inline-flex, not flex: the box hugs its text, so a short note is a small
   chip and only a long one grows to the full column width and wraps. Height is automatic either way. */
.manufacturer-module .akte-remark { display: inline-flex; max-width: 100%; gap: 12px; align-items: baseline; margin-top: 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid #f1e2c8; background: var(--mm-amber-bg); color: #6f5417; font-size: 14px; }
.manufacturer-module .akte-remark-lbl { flex: none; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-amber); }
.manufacturer-module .akte-remark-text { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
/* Inline edit on the callout (2026-09-04). The pencil is a compact .ap-edit so
   a one-line note keeps its height; the editing state stacks (label above the
   textarea) rather than staying a baseline-aligned row, which cannot align a
   12px label against a padded textarea without pixel-fiddling. */
.manufacturer-module .akte-remark-btn { margin-left: auto; align-self: flex-start; width: 24px; height: 24px; font-size: 12px; }
.manufacturer-module .akte-remark-add { margin-top: 12px; }
/* The editing state goes full width (easier to type in) and its textarea
   auto-grows via mm-autogrow up to this cap, after which it scrolls. */
.manufacturer-module .akte-remark.akte-remark-editing { display: block; }
.manufacturer-module .akte-remark-editing .akte-remark-lbl { display: block; margin-bottom: 6px; }
.manufacturer-module .akte-remark-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--mm-line2); border-radius: 9px; padding: 8px 11px; font: inherit; font-size: 14px; max-height: 320px; overflow-y: hidden; }
.manufacturer-module .akte-remark-form textarea:focus { outline: none; border-color: var(--mm-red); box-shadow: 0 0 0 3px var(--mm-red-soft); }
.manufacturer-module .akte-remark-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
/* overflow: visible is load-bearing, do not drop it. The APP-WIDE `.card` rule
   in styles.css sets `overflow: hidden` (it clips content to the rounded
   corners), and this rule overrides every other property of it but used to stay
   silent about overflow - so the global `hidden` still applied to every card in
   this module. That clipped any absolutely-positioned popover a card contains
   at the card's padding box: the mm-date-picker / mm-month-picker popover
   (.mmp-pop, e.g. the "Gültig ab" pickers in Übersicht > Kernkonditionen) was
   cut off at the bottom, and the same fate awaited .export-menu and
   .wp-manufacturer-dropdown. Corner clipping is not needed here: every card in
   this module has 16px/18px padding, so no child ever reaches the rounded
   corner - tables that DO need it use .tablecard, which sets its own
   overflow: hidden. `visible` also cannot introduce a scrollbar (only
   auto/scroll can). */
.manufacturer-module .card { background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: 14px; box-shadow: var(--mm-shadow); padding: 16px 18px; overflow: visible; }
.manufacturer-module .card h4 { margin: 0 0 13px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-muted); display: flex; align-items: center; justify-content: space-between; }
/* Werbeplan tab headline ("make it bigger") - prominent h2
   replacing the tab's small uppercase h4; same flex layout so the add button
   keeps its right-aligned spot. Heading tier, outside the 14/12/11 body rule. */
.manufacturer-module .card h2.wp-plan-headline { margin: 0 0 14px; font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--mm-ink, #23272d); display: flex; align-items: center; justify-content: space-between; }
body.dark .manufacturer-module .card h2.wp-plan-headline { color: #e5e7eb; }
body.dark .manufacturer-module .budget-slim { border-bottom-color: #2b3646; }
body.dark .manufacturer-module .bvals { color: #aeb6bf; }
body.dark .manufacturer-module .bvals b { color: #e5e7eb; }
body.dark .manufacturer-module .wp-year-pill { color: #cbd2da; }
body.dark .manufacturer-module .wp-year-pill:hover { background: #223047; }
body.dark .manufacturer-module .wp-year-pill.primary { background: var(--mm-red); color: #fff; }
body.dark .manufacturer-module .bv-info { background: #2b3646; color: #aeb6bf; }
body.dark .manufacturer-module .wp-approved { color: #8fd6bd; }
body.dark .manufacturer-module .tag.wp-open-tag { background: #3a2325; color: #f0a8a8; }
body.dark .manufacturer-module .wp-month-row > td { background: #16202e; }
/* Sub-section headers (e.g. WAVE's "Wholesaler-to-Manufacturer/-Pharmacy
   Handling") - the global `* { margin: 0 }` reset otherwise leaves h5 flush
   against whatever comes before it. Only margin-top is set here (not
   margin-bottom, and nothing about font/color) - the gap between an h5 and
   the block right after it (.dl or .edit-grid) comes from THAT block's own
   margin-top below, so the two never stack into a double gap. A handful of
   unrelated h5 usages elsewhere (Werbeplan's year heading, Abrechnung's
   Bonus/WKZ tab labels) already set their own inline margin, which wins over
   this rule for those, so they're unaffected. */
.manufacturer-module .card h5 { margin-top: 22px; }
/* Tight, left-aligned "Option A" layout (see
   template/bonus-flag-ideas.html) - value sits right next to its label
   instead of stretching to the far edge of the card. Applies to every
   .dl in the app. */
.manufacturer-module .dl { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 12px; row-gap: 8px; font-size: 14px; margin: 10px 0 0; }
.manufacturer-module .dl dt { color: var(--mm-muted); font-weight: 600; }
.manufacturer-module .dl dd { margin: 0; font-weight: 700; color: #2b2e33; text-align: left; }
.manufacturer-module .contact { display: flex; flex-direction: column; gap: 12px; }
.manufacturer-module .c-item { display: flex; gap: 11px; align-items: flex-start; }
.manufacturer-module .ap-edit { border: 1px solid var(--mm-line); background: #fff; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 14px; color: #6b7178; flex: none; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.manufacturer-module .ap-edit:hover { background: #fafafa; color: var(--mm-red-dark); }
/* Settings/Benutzerverwaltung active-toggle icon (2026-08-13): a status
   indicator as much as a button, so it keeps its own color (green/red)
   regardless of the button's own hover color above - a check-circle reads
   as "active" and an x-circle as "deactivated" more clearly than a neutral
   toggle-switch shape did. */
.manufacturer-module .status-icon.is-active { color: var(--mm-green); }
.manufacturer-module .status-icon.is-inactive { color: var(--mm-red-dark); }
.manufacturer-module .c-ava { width: 38px; height: 38px; border-radius: 50%; background: #eef1f3; color: #5b636b; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex: none; }
.manufacturer-module .c-role { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--mm-muted); font-weight: 800; }
.manufacturer-module .c-name { font-weight: 800; margin-top: 2px; }
.manufacturer-module .c-meta { font-size: 12px; color: var(--mm-muted); margin-top: 2px; }
.manufacturer-module .doc-search { width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 8px 11px; border: 1px solid #e2e4e8; border-radius: 8px; font: inherit; }
.manufacturer-module .doclist { display: flex; flex-direction: column; }
.manufacturer-module .doc { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.manufacturer-module .doc:last-child { border-bottom: 0; }
.manufacturer-module .d-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--mm-red-soft); color: var(--mm-red-dark); display: flex; align-items: center; justify-content: center; flex: none; }
.manufacturer-module .d-name { font-weight: 700; font-size: 14px; }
.manufacturer-module .d-name a { color: inherit; text-decoration: none; }
.manufacturer-module .d-name a:hover { text-decoration: underline; }
.manufacturer-module .d-meta { font-size: 11px; color: var(--mm-muted); margin-top: 2px; }
.manufacturer-module .d-tag { margin-left: auto; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.manufacturer-module .d-tag.ok { background: var(--mm-green-bg); color: #21695a; }
.manufacturer-module .d-tag.warn { background: var(--mm-amber-bg); color: var(--mm-amber); }
.manufacturer-module .empty-note { color: var(--mm-muted); font-style: italic; padding: 4px 0; }

.manufacturer-module .timeline { position: relative; padding-left: 4px; }
.manufacturer-module .t-item { position: relative; padding: 0 0 16px 18px; border-left: 2px solid #eee; }
.manufacturer-module .t-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.manufacturer-module .t-dot { position: absolute; left: -7px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--mm-red); border: 2px solid var(--mm-surface); box-shadow: 0 0 0 1px var(--mm-line); }
.manufacturer-module .t-date { font-size: 11px; color: var(--mm-muted); font-weight: 700; }
.manufacturer-module .t-txt { font-weight: 600; font-size: 14px; margin-top: 2px; }

.manufacturer-module table.fin { width: 100%; border-collapse: collapse; font-size: 14px; }
.manufacturer-module table.fin th, .manufacturer-module table.fin td { padding: 11px 12px; border-bottom: 1px solid #eee; text-align: right; }
.manufacturer-module table.fin th:first-child, .manufacturer-module table.fin td:first-child { text-align: left; }
.manufacturer-module table.fin thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--mm-muted); background: #fafafa; }
.manufacturer-module table.fin td:first-child { font-weight: 700; color: #3a3e43; }
.manufacturer-module table.fin.left th, .manufacturer-module table.fin.left td { text-align: left; }
.manufacturer-module table.fin.left td:last-child { text-align: right; }

/* Finanzen tab: year-selector head, partial-year notice, source tags, inline edit */
.manufacturer-module .fin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.manufacturer-module .fin-head h4 { margin: 0; }
.manufacturer-module .fin-year-select { display: flex; align-items: center; gap: 8px; }
.manufacturer-module .fin-year-select label { font-size: 12px; letter-spacing: .03em; color: var(--mm-muted); }
.manufacturer-module .fin-year-select select { padding: 5px 8px; border: 1px solid var(--mm-line); border-radius: 6px; background: #fff; font-size: 14px; }
.manufacturer-module .fin-partial-notice { margin: 10px 0 2px; padding: 8px 12px; border-radius: 6px; background: #fff8e1; color: #8a6d1a; font-size: 12px; }
.manufacturer-module .fin-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #eef1f4; color: var(--mm-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; vertical-align: middle; }
.manufacturer-module .fin-tag.fin-tag-manual { background: #e5f0ff; color: #2d6cdf; }
/* Small "(i)" info icon next to a label, explaining what the label text alone
   doesn't convey (e.g. what exactly "Umsatz GEP"/"Marktanteil" include).
   Custom .info-tip popover instead of the native title="" tooltip - the
   native one is slow to appear and can't be tapped/clicked open; this one
   shows instantly on hover (plain CSS, no delay) and toggleInfoTip() in the
   controller also lets it be clicked open/closed (touch devices, or anyone
   who'd rather tap than hold a hover). cursor:pointer, not cursor:help - the
   OS "?" cursor that help draws was explicitly unwanted. */
.manufacturer-module .info-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 5px; border-radius: 50%; border: 1px solid #9aa0a6; color: var(--mm-muted); font-size: 11px; font-style: normal; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; }
body.dark .manufacturer-module .info-icon { border-color: #7a828b; color: #7a828b; }
.manufacturer-module .info-icon .info-tip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 230px;
  max-width: 80vw;
  padding: 9px 11px;
  border-radius: 8px;
  background: #24262a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  box-shadow: var(--mm-shadow2, 0 14px 40px rgba(0, 0, 0, .14));
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .06s linear;
}
.manufacturer-module .info-icon .info-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #24262a;
}
.manufacturer-module .info-icon:hover .info-tip,
.manufacturer-module .info-icon.open .info-tip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.dark .manufacturer-module .info-icon .info-tip { background: #374151; }
body.dark .manufacturer-module .info-icon .info-tip::after { border-top-color: #374151; }
.manufacturer-module .fin-input { width: 130px; padding: 5px 8px; border: 1px solid var(--mm-line); border-radius: 6px; font-size: 14px; text-align: right; }
.manufacturer-module .fin-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Pooltermine modal: "+ weiteres Datum" - deliberately small and a muted red
   so it doesn't compete visually with the primary Save action. */
.manufacturer-module .btn.sm.pool-add-date {
  height: 20px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #ef4444;
  background: #fee2e2;
  border-color: #fee2e2;
  border-radius: 6px;
  margin-top: 2px;
}
.manufacturer-module .btn.sm.pool-add-date:hover { background: #fecaca; border-color: #fecaca; }
body.dark .manufacturer-module .btn.sm.pool-add-date { color: #fca5a5; background: #4c1d1d; border-color: #4c1d1d; }
body.dark .manufacturer-module .btn.sm.pool-add-date:hover { background: #5c2323; border-color: #5c2323; }

/* Import/Export: TESTING-ONLY hard-reset "danger zone" */
.manufacturer-module .danger-card { border: 1px solid #f0c2c2; background: #fdf5f5; }
.manufacturer-module .test-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 10px; background: #b3261e; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .4px; vertical-align: middle; }
.manufacturer-module .btn.danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.manufacturer-module .btn.danger:hover { background: #8f1e18; border-color: #8f1e18; }
.manufacturer-module .btn.danger[disabled] { opacity: .6; cursor: not-allowed; }
body.dark .manufacturer-module .danger-card { border-color: #5a2a2a; background: #2a1c1c; }

/* Overview pagination bar (server-side paging) */
.manufacturer-module .table-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid #e6e8eb; flex-wrap: wrap; }
.manufacturer-module .table-pager .pager-info { font-size: 12px; color: var(--mm-muted); }
.manufacturer-module .table-pager .pager-controls { display: flex; align-items: center; gap: 10px; }
.manufacturer-module .table-pager .pager-page { font-size: 12px; color: #3a3e43; font-weight: 600; }
.manufacturer-module .btn.sm { padding: 4px 10px; font-size: 12px; }
body.dark .manufacturer-module .table-pager { border-top-color: #2a2f36; }
body.dark .manufacturer-module .table-pager .pager-info { color: var(--mm-muted); }
body.dark .manufacturer-module .table-pager .pager-page { color: #e5e7eb; }

/* Multi-select Bereich(e): checkbox row in the manufacturer create/edit forms */
/* Trigger buttons on the Verteiler page (2026-08-25): the shared .btn-loading
   spinner from styles.css is 20px - too tall for a .btn.sm. Scoped shrink only,
   the global rule is untouched. */
.manufacturer-module .btn .btn-loading { display: inline-flex; align-items: center; gap: 6px; }
.manufacturer-module .btn .btn-loading .spinner { width: 14px; height: 14px; }

.manufacturer-module .cat-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 0; }
.manufacturer-module .cat-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #3a3e43; cursor: pointer; }
.manufacturer-module .cat-check input { margin: 0; cursor: pointer; }
body.dark .manufacturer-module .cat-check { color: #e5e7eb; }

/* Import/Export result: skipped/error message list */
.manufacturer-module .import-messages { margin: 6px 0 0; padding: 0; list-style: none; max-height: 280px; overflow-y: auto; border: 1px solid var(--mm-line); border-radius: 8px; }
.manufacturer-module .import-messages li { padding: 7px 12px; border-bottom: 1px solid #f0f0f0; font-size: 12px; color: #8a4b18; background: #fff8ef; }
.manufacturer-module .import-messages li:last-child { border-bottom: none; }
body.dark .manufacturer-module .import-messages li { background: #2a2410; color: #d9c07a; border-bottom-color: #2b3646; }

body.dark .manufacturer-module .fin-year-select select { background: #17202e; color: #e5e7eb; border-color: #2b3646; }
body.dark .manufacturer-module .fin-partial-notice { background: #2a2410; color: #d9c07a; }
body.dark .manufacturer-module .fin-tag { background: #222c3a; color: #9ca3af; }
body.dark .manufacturer-module .fin-tag.fin-tag-manual { background: #14294a; color: #7fb0ff; }
body.dark .manufacturer-module .fin-input { background: #17202e; color: #e5e7eb; border-color: #2b3646; }

/* WAVE tab "Allgemein" section: a real table (customer request) instead
   of the vertical dl label/value list - one row per manufacturer, one column
   per field. See template/bonus-flag-ideas.html (table.wave-cols). */
/* WAVE tab: "Abwicklung ... an Hersteller" / "... an Apotheke" /
   "Kooperationsdaten" sit SIDE BY SIDE in ONE row, each exactly 1/3 wide
   (2026-08-19 follow-up; they were stacked one-per-row before, per the docx's
   "place the two small white areas among themselves"). gap: 14px is the
   module's standard card gutter, same as .akte-grid / .overview-grid.

   minmax(0, 1fr) rather than plain 1fr: a grid item's default min-width is
   auto = its min-content width, so a card holding a long German label such as
   "Anforderung Vergütung über" would refuse to shrink to a third and push the
   whole row wider than the tab. minmax(0, ...) lets each card really take 1/3.
   Heights are left at the grid default (stretch) so the three cards line up as
   one tidy row, the way they did in the side-by-side .akte-grid this replaces -
   the Apotheke card simply carries more whitespace, which is how the customer's own
   mockups show it. */
.manufacturer-module .wave-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* 2026-09-03: row 1 = Hersteller (1/3) + Kooperationsdaten with its comparison
   table (2/3); row 2 = Apotheke alone, full width. */
.manufacturer-module .wave-tiles.wave-tiles-top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.manufacturer-module .wave-tiles.wave-tiles-bottom { grid-template-columns: minmax(0, 1fr); }
.manufacturer-module .wave-tiles table.wave-kpi { margin-bottom: 12px; }
/* Same reason one level down - the card must be allowed to be narrower than
   its widest label/value pair. */
.manufacturer-module .wave-tiles > .card { min-width: 0; }
/* At a third of the tab width there is no room for the .dl's default
   "label | value" two-column layout (see .dl: grid-template-columns: auto
   auto). The values here are long German phrases - "an WAVE Apotheken mit
   Nachweis Vorteilsmatrix", "Kein Ansprechpartner zugeordnet." - which would
   overflow the card rather than wrap, and cards no longer clip their overflow.
   So inside these tiles the label sits ABOVE its value, each full width.
   Font sizes are untouched: dt/dd keep the .dl 14px body tier. */
.manufacturer-module .wave-tiles .dl { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
.manufacturer-module .wave-tiles .dl dt { margin-top: 6px; }
.manufacturer-module .wave-tiles .dl dt:first-child { margin-top: 0; }
/* A long unbroken token (street name, imported value) must break rather than
   escape the card. */
.manufacturer-module .wave-tiles .dl dt,
.manufacturer-module .wave-tiles .dl dd { overflow-wrap: break-word; }
/* .card h4 is display:flex + space-between. At 1/3 width the title wraps to
   several lines and the validity-range chip has nowhere to go, so let the two
   parts wrap onto their own lines instead of squashing each other. */
.manufacturer-module .wave-tiles .card h4 { flex-wrap: wrap; align-items: baseline; gap: 4px; }
/* One word emphasised inside a .card h4 (2026-08-19: "make the word HERSTELLER
   in Abwicklung Großhandel an Hersteller bold. And the word APOTHEKE in the
   other white small tile also bold"). The h4 itself is 12px uppercase muted at
   the browser-default bold weight, so the emphasis needs both a heavier weight
   AND the full-strength text colour to actually read as bolder. Font size is
   deliberately NOT touched - it inherits the h4's 12px secondary tier. */
.manufacturer-module .card h4 .hd-em { font-weight: 800; color: var(--mm-text); }
body.dark .manufacturer-module .card h4 .hd-em { color: #f3f4f6; }
/* Which configuration a handling tile / a Bemerkung line refers to, when a
   manufacturer holds more than one. Tertiary tier (11px) - it is a scope hint,
   not content. */
.manufacturer-module .card h4 .wave-tile-scope { font-size: 11px; font-weight: 700; color: var(--mm-muted); text-transform: none; letter-spacing: 0; }
.manufacturer-module .wave-remark-scope { font-size: 11px; font-weight: 800; color: var(--mm-muted); margin-right: 8px; }
body.dark .manufacturer-module .card h4 .wave-tile-scope,
body.dark .manufacturer-module .wave-remark-scope { color: #9ca3af; }

.manufacturer-module table.wave-cols { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.manufacturer-module table.wave-cols th, .manufacturer-module table.wave-cols td { padding: 12px 16px; text-align: left; vertical-align: top; }
.manufacturer-module table.wave-cols th { background: #fafafa; color: #565c62; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; font-weight: 800; border-bottom: 1px solid var(--mm-line); }
.manufacturer-module table.wave-cols td { border-bottom: 1px solid #efefef; font-weight: 600; color: #2b2e33; }
.manufacturer-module table.wave-cols tr:last-child td { border-bottom: 0; }
body.dark .manufacturer-module table.wave-cols th { background: #17202e; color: #9ca3af; }
body.dark .manufacturer-module table.wave-cols td { border-bottom-color: #2b3646; color: #f3f4f6; }

.manufacturer-module .ek-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 4px; }
.manufacturer-module .ek-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--mm-muted); text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--mm-line); background: #fafafa; }
.manufacturer-module .ek-table th.num, .manufacturer-module .ek-table td.num { text-align: right; }
.manufacturer-module .ek-table td { padding: 9px 10px; border-bottom: 1px solid #f1f1f1; }
.manufacturer-module .ek-table tr:last-child td { border-bottom: 0; }

/* align-items: flex-end (smaller-laptop
   screenshot): a long label that wraps to 2 lines at these column widths used
   to push just its own input down, misaligning it against the shorter-label
   fields sharing its row. Bottom-aligning every grid item means the input
   boxes always line up regardless of label height - the wrapped label grows
   upward into the row's own extra height instead of shoving its input down. */
.manufacturer-module .edit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; align-items: flex-end; }
/* Error-safe variant (2026-08-21): grids whose fields show inline .error-text
   messages must be TOP-aligned - with the default flex-end, a validation error
   growing one cell bottom-shifts every other control in that row (reported:
   user-edit email error pushed the Rolle/Niederlassung dropdowns down). All
   labels in these grids are single-line, so rendering without an error is
   pixel-identical to the default. */
.manufacturer-module .edit-grid.eg-top { align-items: flex-start; }
.manufacturer-module .edit-grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 10px; align-items: flex-end; }
.manufacturer-module .ap-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Field validation messages (2026-08-27). The edit grids are align-items:
   flex-end, so an in-flow error message made its own field taller and pushed
   that field's INPUT upwards - the row lost its shared baseline as soon as a
   value was invalid. Pulling the message out of the flow keeps every input on
   the same line whether or not an error is showing. The .ap-field only needs
   to become the positioning context; that has no visual effect of its own. */
.manufacturer-module .ap-field { position: relative; }
.manufacturer-module .field-error {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    margin-top: 2px;
    color: #d32f2f;
    font-size: 12px;
    line-height: 1.2;
    /* never swallow a click meant for the control underneath */
    pointer-events: none;
}
/* Stacked Skonto / Zahlungsziel Kreditor rows: value input and its own
   "Gültig ab" date share the row equally, stretching to fill the card's full
   width instead of sitting at a fixed, cramped-looking pixel width. */
.manufacturer-module .cond-rows { display: flex; flex-direction: column; gap: 12px; }
.manufacturer-module .cond-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.manufacturer-module .cond-row .cond-narrow { flex: 1 1 0; min-width: 140px; }
.manufacturer-module .cond-row .cond-date { flex: 1 1 0; min-width: 140px; }
/* Rechnungsadresse row: Straße / PLZ / Ort side by side, PLZ physically narrower. */
.manufacturer-module .address-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.manufacturer-module .address-row + .address-row { margin-top: 12px; }
.manufacturer-module .address-row .addr-street { flex: 1 1 220px; }
.manufacturer-module .address-row .addr-zip { flex: 0 0 110px; max-width: 110px; }
.manufacturer-module .address-row .addr-city { flex: 1 1 180px; }
/* Land + Zusatz/c/o (2026-08-14, Part 9 item 4): Land is a short code-driven
   select, doesn't need to stretch like a text field. */
.manufacturer-module .address-row .addr-country { flex: 0 0 160px; }
.manufacturer-module .address-row .addr-addition { flex: 1 1 220px; }
.manufacturer-module .address-row .addr-email { flex: 1 1 220px; } /* E-Mail next to Ort (2026-09-03) */
/* Pooltermine modal (13.08.2026, customer's redlined screenshot): Bestellweg and
   the %/Fix type selector don't need to stretch across their full 50% grid
   column like every other field here - fixed narrow width instead, left-
   aligned, with the rest of the column left empty. */
.manufacturer-module .ap-field.pool-narrow-md select { width: 130px; }
.manufacturer-module .ap-field.pool-narrow-sm select { width: 90px; }
.manufacturer-module .ap-field label { font-size: 12px; letter-spacing: .03em; color: var(--mm-muted); font-weight: 800; }
.manufacturer-module .ap-field select, .manufacturer-module .ap-field input:not([type="checkbox"]):not([type="radio"]) { height: 38px; border: 1px solid var(--mm-line2); border-radius: 9px; padding: 0 11px; font: inherit; box-sizing: border-box; width: 100%; }
.manufacturer-module .ap-field textarea { border: 1px solid var(--mm-line2); border-radius: 9px; padding: 8px 11px; font: inherit; resize: vertical; box-sizing: border-box; width: 100%; }
/* mm-autogrow owns the height, so the drag handle would only fight it (the
   next keystroke re-measures). Must stay AFTER the .ap-field rule above -
   equal specificity, so source order decides. */
.manufacturer-module textarea[mm-autogrow] { resize: none; }
.manufacturer-module .ap-field select:focus, .manufacturer-module .ap-field input:focus, .manufacturer-module .ap-field textarea:focus { outline: none; border-color: var(--mm-red); box-shadow: 0 0 0 3px var(--mm-red-soft); }
/* Campaign-add dialog's searchable manufacturer dropdown (2026-08-14) - a
   real "must select from the list" combobox, not a native <datalist> (which
   still let free-typed text sit in the field unresolved). */
.manufacturer-module .wp-manufacturer-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 4px; max-height: 240px; overflow-y: auto; background: var(--mm-surface); border: 1px solid var(--mm-line2); border-radius: 9px; box-shadow: var(--mm-shadow2); }
.manufacturer-module .wp-manufacturer-option { padding: 9px 12px; font-size: 14px; cursor: pointer; }
.manufacturer-module .wp-manufacturer-option.highlighted, .manufacturer-module .wp-manufacturer-option:hover { background: var(--mm-red-soft); }
.manufacturer-module .wp-manufacturer-hint { padding: 9px 12px; font-size: 12px; color: var(--mm-muted); font-style: italic; }
body.dark .manufacturer-module .wp-manufacturer-option.highlighted, body.dark .manufacturer-module .wp-manufacturer-option:hover { background: #263041; }
.manufacturer-module .edit-merk { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.manufacturer-module .chk { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; cursor: pointer; }
/* Contact modal "Empfänger für" (2026-09-03): a strict 4-per-row grid instead
   of ragged flex-wrap, so every checkbox starts exactly under the one above. */
.manufacturer-module .recipient-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; margin-top: 4px; }
/* Both checkbox labels below live INSIDE an .ap-field, whose generic
   ".ap-field label" rule (12px/800/muted) would otherwise win on specificity -
   these are option labels, so they take the 14px/600 body tier of .chk. */
.manufacturer-module .recipient-grid .chk { margin: 0; min-width: 0; align-items: flex-start; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--mm-text); }
.manufacturer-module .recipient-grid .chk input { flex: none; margin: 2px 0 0; }
.manufacturer-module .recipient-grid .chk span { overflow-wrap: anywhere; }
/* Hauptansprechpartner toggle row in the contact modal: reuses the bordered
   .chk-row look, sized like an input so it reads as one form control. */
.manufacturer-module .ap-check-row .chk-row { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--mm-text); }
.manufacturer-module .ap-check-row .chk-row input { margin: 0; }
.manufacturer-module .tag.main-contact { background: var(--mm-green-bg); border-color: #cfeae0; color: #21695a; }
/* 13px, not 11px (this headline sometimes rendered SMALLER
   than the field labels below it) - .ap-field label is 12px, so this needs
   to stay clearly above that, not just equal to it. */
.manufacturer-module .sec-hd { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-muted); font-weight: 800; margin: 14px 0 10px; }

/* Document upload bar - replaces the raw, browser-styled <input type="file"> with
 * a custom button + filename readout, matching the app's own button language. */
.manufacturer-module .upload-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; background: #fafafa; border: 1px dashed var(--mm-line2); border-radius: 12px; }
.manufacturer-module .file-picker { position: relative; display: inline-flex; cursor: pointer; }
.manufacturer-module .file-picker-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.manufacturer-module .file-picker-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--mm-line2); background: var(--mm-surface); font-weight: 700; font-size: 14px; color: #33383d; white-space: nowrap; }
.manufacturer-module .file-picker:hover .file-picker-btn { background: #fafafa; border-color: var(--mm-red); }
.manufacturer-module .file-picker-btn .ic { width: 16px; height: 16px; color: var(--mm-muted); }
.manufacturer-module .upload-filename { flex: 1; min-width: 120px; font-size: 14px; font-weight: 600; color: #33383d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manufacturer-module .upload-filename.muted { color: var(--mm-muted); font-weight: 500; font-style: italic; }
.manufacturer-module .upload-type-select { height: 38px; border: 1px solid var(--mm-line2); border-radius: 9px; padding: 0 11px; font: inherit; background: var(--mm-surface); min-width: 160px; }
.manufacturer-module .upload-type-select:focus { outline: none; border-color: var(--mm-red); box-shadow: 0 0 0 3px var(--mm-red-soft); }

.manufacturer-module .modal-back { position: fixed; inset: 0; background: rgba(20, 22, 25, .45); z-index: 80; display: none; }
.manufacturer-module .modal-back.open { display: block; }
.manufacturer-module .modal-box { position: fixed; z-index: 81; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(880px, 94vw); max-height: 90vh; overflow: auto; background: var(--mm-surface); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); padding: 22px 32px; display: none; }
.manufacturer-module .modal-box.open { display: block; }
.manufacturer-module .modal-box h3 { margin: 0 0 14px; font-size: 16px; }
.manufacturer-module .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.manufacturer-module .modal-x { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 20px; line-height: 1; color: var(--mm-muted); cursor: pointer; padding: 2px 6px; }
.manufacturer-module .modal-x:hover { color: #333; }

@media (max-width: 980px) {
  .manufacturer-module .akte-grid { grid-template-columns: 1fr; }
  .manufacturer-module .edit-grid,
  .manufacturer-module .edit-grid-2col { grid-template-columns: 1fr; }
  .manufacturer-module .fb-grid { grid-template-columns: 1fr; gap: 16px; }
  /* Three 1/3-width cards stop being readable well before this breakpoint -
     stack them, and hand the .dl its normal label-beside-value layout back
     now that the full width is available again. */
  .manufacturer-module .wave-tiles,
  .manufacturer-module .wave-tiles.wave-tiles-top { grid-template-columns: 1fr; }
  .manufacturer-module .recipient-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manufacturer-module .wave-tiles .dl { grid-template-columns: auto auto; row-gap: 8px; }
  .manufacturer-module .wave-tiles .dl dt { margin-top: 0; }
}

/* ============ Werbeplan (Advertising Plan) - tree table / WKZ chips / grouped media list ============ */
.manufacturer-module .mkt-tree { width: 100%; border-collapse: collapse; font-size: 14px; }
.manufacturer-module .mkt-tree td { padding: 9px 8px; border-bottom: 1px solid #f1f1f1; }
.manufacturer-module .mkt-tree tbody:last-child tr:last-child td { border-bottom: 0; }
.manufacturer-module .mkt-tree .yearhead > td { background: var(--mm-blue-bg); font-size: 14px; font-weight: 700; padding: 10px 8px; border-top: 1px solid var(--mm-line); }
.manufacturer-module .mkt-tree .yearhead > td > b { font-size: 15px; }
/* The year header row (.med-head.yearhead) lost its expand/collapse click
   when the single-year view landed - only the group-level headers (with
   their carets) stay clickable. */
.manufacturer-module .mkt-tree tr.med-head:not(.yearhead) { cursor: pointer; }
/* No hover background on medium/manufacturer group header rows (PO round-2
   feedback) - only the campaign detail rows (.med-sub3) below get the hover
   treatment. Font-size bumped ("make Media headers a bit bigger").
   The transparent override below is load-bearing: the app-global
   "tr:hover" rule in styles.css (and its body.dark variant) would otherwise
   bleed a hover background onto these header/note rows - removing this
   file's own :hover rule alone wasn't enough. */
.manufacturer-module .mkt-tree tr.med-head:hover,
.manufacturer-module .mkt-tree tr.med-sub2:hover { background-color: transparent; }
.manufacturer-module .mkt-tree tr.med-head:not(.yearhead) > td { padding-left: 20px; font-size: 14px; font-weight: 700; }
.manufacturer-module .mkt-tree tr.med-sub2 > td { padding-left: 20px; }
.manufacturer-module .mkt-tree tr.med-sub3 { cursor: pointer; }
.manufacturer-module .mkt-tree tr.med-sub3 > td { padding-left: 44px; line-height: 1.3; }
.manufacturer-module .mkt-tree tr.med-sub3:hover > td { background: #fffafa; }
.manufacturer-module .med-caret { display: inline-block; width: 13px; color: var(--mm-muted); font-size: 11px; }

.manufacturer-module .wkz-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef0f2; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 800; color: #3a3f45; margin-left: 6px; }
.manufacturer-module .wkz-chip.strong { background: #e2e4e8; color: #1f2328; }
.manufacturer-module .wkz-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }

.manufacturer-module .med-kat-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mm-amber); font-weight: 800; margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid #f0e4c4; }
.manufacturer-module .med-kat-h:first-child { margin-top: 0; }
.manufacturer-module .med-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid #f2f4f6; }
.manufacturer-module .med-item:last-child { border-bottom: 0; }
.manufacturer-module .med-item:hover { background: #fafbfc; }
.manufacturer-module .med-name { font-weight: 700; font-size: 14px; color: #2a2f34; cursor: pointer; }
.manufacturer-module .med-name:hover { color: var(--mm-red-dark); }
.manufacturer-module .med-meta { font-size: 11px; color: var(--mm-muted); margin-top: 3px; }
.manufacturer-module .med-go { display: flex; align-items: center; gap: 6px; flex: none; }

.manufacturer-module .chk-row { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--mm-line); border-radius: 8px; margin-bottom: 5px; cursor: pointer; font-size: 14px; }
.manufacturer-module .chk-row:hover { background: #fafafa; }

/* ============ Dark mode ============ */
body.dark .manufacturer-module {
  --mm-red-soft: rgba(238, 49, 45, .18);
  --mm-bg: #111827;
  --mm-surface: #1f2937;
  --mm-line: #374151;
  --mm-line2: #4b5563;
  --mm-text: #e5e7eb;
  --mm-muted: #9ca3af;
  --mm-green-bg: rgba(35, 116, 92, .22);
  --mm-amber-bg: rgba(122, 90, 24, .22);
  --mm-blue-bg: rgba(50, 90, 120, .22);
  --mm-empty-icon-bg: rgba(47, 111, 219, .22);
  --mm-empty-accent: #5b93e8;
  --mm-empty-accent-dark: #3f7bd9;
}

body.dark .manufacturer-module .btn { background: #263041; color: #e5e7eb; }
body.dark .manufacturer-module .btn:hover { background: #2d3849; }
body.dark .manufacturer-module .export-menu button { background: var(--mm-surface); border-bottom-color: #2b3646; }
body.dark .manufacturer-module .export-menu button:hover { background: #263041; }
body.dark .manufacturer-module .export-menu button b { color: #f3f4f6; }
body.dark .manufacturer-module .fb-flag { background: #263041; color: #cbd2d9; }
body.dark .manufacturer-module .fb-flag.yes { background: rgba(35, 116, 92, .28); border-color: rgba(35, 116, 92, .45); color: #8fd6bd; }
body.dark .manufacturer-module .fb-flag.no { background: rgba(180, 35, 24, .25); border-color: rgba(180, 35, 24, .4); color: #f3a9a3; }
body.dark .manufacturer-module .fb-foot { border-top-color: #374151; }
body.dark .manufacturer-module .fl { color: var(--mm-muted); }
body.dark .manufacturer-module .fb-field select,
body.dark .manufacturer-module .toolbar select,
body.dark .manufacturer-module .ap-field select,
body.dark .manufacturer-module .ap-field input,
body.dark .manufacturer-module .ap-field textarea { background: #263041; color: #e5e7eb; border-color: #4b5563; }
body.dark .manufacturer-module .upload-bar { background: #17202e; border-color: #4b5563; }
body.dark .manufacturer-module .file-picker-btn { background: #263041; border-color: #4b5563; color: #e5e7eb; }
body.dark .manufacturer-module .file-picker:hover .file-picker-btn { background: #2d3849; }
body.dark .manufacturer-module .upload-filename { color: #e5e7eb; }
body.dark .manufacturer-module .upload-filename.muted { color: #9ca3af; }
body.dark .manufacturer-module .upload-type-select { background: #263041; color: #e5e7eb; border-color: #4b5563; }
body.dark .manufacturer-module .view-chip { background: #263041; color: #cbd2d9; }
body.dark .manufacturer-module .view-chip.new { border-color: rgba(180, 35, 24, .4); }
body.dark .manufacturer-module .panel-head p { color: #9ca3af; }
body.dark .manufacturer-module .icon-x { color: #9ca3af; }
body.dark .manufacturer-module .icon-x:hover { color: #e5e7eb; }
body.dark .manufacturer-module .cfg-row { background: var(--mm-surface); border-color: #374151; }
body.dark .manufacturer-module .cfg-row.fixed { background: #17202e; color: #9ca3af; }
body.dark .manufacturer-module .cfg-row .cfg-hint { color: #9ca3af; }
body.dark .manufacturer-module .cfg-empty { color: #9ca3af; }
body.dark .manufacturer-module .panel-foot { border-top-color: #374151; }
body.dark .manufacturer-module .saverow input,
body.dark .manufacturer-module .kpi-search input { background: #263041; color: #e5e7eb; border-color: #4b5563; }
body.dark .manufacturer-module .jv-pill.expired { background: rgba(180, 35, 24, .25); color: #f3a9a3; }
body.dark .manufacturer-module .akte-remark { background: rgba(122, 90, 24, .22); border-color: rgba(122, 90, 24, .4); color: #f0d59a; }
body.dark .manufacturer-module .akte-remark-lbl { color: #d9c07a; }
body.dark .manufacturer-module .akte-remark-form textarea { background: #263041; color: #e5e7eb; border-color: #4b5563; }
body.dark .manufacturer-module .tag.main-contact { background: rgba(33, 105, 90, .25); border-color: rgba(33, 105, 90, .4); color: #8fd6bd; }
body.dark .manufacturer-module .grid th { background: #17202e; color: #9ca3af; }
body.dark .manufacturer-module .grid td { border-bottom-color: #2b3646; }
body.dark .manufacturer-module .grid tbody tr:hover td { background: #263041; }
body.dark .manufacturer-module .wp-medium-header td { background: #1c2531; color: #b7c0cc; }
body.dark .manufacturer-module .wp-plan-table tbody tr.wp-medium-header:hover td { background: #1c2531; }
body.dark .manufacturer-module select.wp-status-select {
    background-color: #17202e; color: #e5e7eb; border-color: #2b3646;
}
body.dark .manufacturer-module select.wp-status-select:hover:not(:disabled) { border-color: #4b5563; }
body.dark .manufacturer-module .h-name { color: #f3f4f6; }
body.dark .manufacturer-module .h-sub { color: #9ca3af; }
body.dark .manufacturer-module .val { color: #f3f4f6; }
body.dark .manufacturer-module .umsatz-tag.hap { background: #374151; color: #cbd2d9; }
body.dark .manufacturer-module .tag { background: #374151; color: #cbd2d9; }
body.dark .manufacturer-module .tag.rx { background: rgba(50, 90, 120, .3); color: #9fc1dd; }
body.dark .manufacturer-module .tag.gx { background: rgba(35, 116, 92, .3); color: #8fd6bd; }
body.dark .manufacturer-module .tag.otc { background: rgba(164, 86, 31, .3); color: #ecab7c; }
body.dark .manufacturer-module .tag.import { background: rgba(91, 74, 134, .3); color: #c6b8e6; }
body.dark .manufacturer-module .tag.gx-otc { background: rgba(63, 106, 82, .3); color: #a9d3bb; }
body.dark .manufacturer-module .tag.freiwahl { background: rgba(122, 75, 116, .3); color: #dcaed4; }
body.dark .manufacturer-module .akte-sub { color: #9ca3af; }
body.dark .manufacturer-module .badge.uw { background: rgba(106, 75, 134, .25); color: #d3b8e8; }
body.dark .manufacturer-module .badge.wkz,
body.dark .manufacturer-module .badge.hap { background: #374151; color: #cbd2d9; }
body.dark .manufacturer-module .tab { color: #9ca3af; }
body.dark .manufacturer-module .tab:hover { color: #e5e7eb; }
body.dark .manufacturer-module .card h4 { color: #9ca3af; }
body.dark .manufacturer-module .dl dt { color: #9ca3af; }
body.dark .manufacturer-module .dl dd { color: #f3f4f6; }
body.dark .manufacturer-module .c-ava { background: #374151; color: #cbd2d9; }
body.dark .manufacturer-module .ap-edit { background: #263041; color: #cbd2d9; border-color: #4b5563; }
body.dark .manufacturer-module .ap-edit:hover { background: #2d3849; }
body.dark .manufacturer-module .c-role { color: #9ca3af; }
body.dark .manufacturer-module .c-meta { color: #9ca3af; }
body.dark .manufacturer-module .doc { border-bottom-color: #2b3646; }
body.dark .manufacturer-module .d-meta { color: #9ca3af; }
body.dark .manufacturer-module .empty-note { color: #9ca3af; }
body.dark .manufacturer-module .t-item { border-left-color: #374151; }
body.dark .manufacturer-module .t-date { color: #9ca3af; }
body.dark .manufacturer-module table.fin th,
body.dark .manufacturer-module table.fin td { border-bottom-color: #2b3646; }
body.dark .manufacturer-module table.fin thead th { background: #17202e; color: #9ca3af; }
body.dark .manufacturer-module .ek-table th { background: #17202e; color: #9ca3af; }
body.dark .manufacturer-module .ek-table td { border-bottom-color: #2b3646; }
body.dark .manufacturer-module table.fin td:first-child { color: #e5e7eb; }
body.dark .manufacturer-module .ap-field label { color: #9ca3af; }
body.dark .manufacturer-module .modal-x { color: #9ca3af; }
body.dark .manufacturer-module .modal-x:hover { color: #e5e7eb; }
body.dark .manufacturer-module .kpi .k-lbl { color: #9ca3af; }
body.dark .manufacturer-module .kpi.accent { background: linear-gradient(180deg, #1f2937, #2a2020); border-color: #4b3030; }
body.dark .manufacturer-module .d-tag.bad { background: rgba(179, 38, 30, .25); color: #f3a9a3; }

body.dark .manufacturer-module .mkt-tree td { border-bottom-color: #2b3646; }
body.dark .manufacturer-module .mkt-tree .yearhead > td { background: rgba(50, 90, 120, .22); border-top-color: #374151; }
body.dark .manufacturer-module .mkt-tree tr.med-sub3:hover > td { background: #263041; }
body.dark .manufacturer-module .med-caret { color: #6b7280; }
body.dark .manufacturer-module .wkz-chip { background: #374151; color: #e5e7eb; }
body.dark .manufacturer-module .wkz-chip.strong { background: #4b5563; color: #f3f4f6; }
body.dark .manufacturer-module .med-kat-h { color: #f0d59a; border-bottom-color: rgba(122, 90, 24, .4); }
body.dark .manufacturer-module .grid tr.row-inactive .h-name { color: #f0d59a; }
body.dark .manufacturer-module .item-inactive { color: #f0d59a; }
body.dark .manufacturer-module .med-item { border-bottom-color: #2b3646; }
body.dark .manufacturer-module .med-item:hover { background: #263041; }
body.dark .manufacturer-module .med-name { color: #f3f4f6; }
body.dark .manufacturer-module .med-name:hover { color: #f3a9a3; }
body.dark .manufacturer-module .med-meta { color: #9ca3af; }
body.dark .manufacturer-module .chk-row { border-color: #4b5563; }
body.dark .manufacturer-module .recipient-grid .chk,
body.dark .manufacturer-module .ap-check-row .chk-row { color: #e5e7eb; }
body.dark .manufacturer-module .chk-row:hover { background: #263041; }