/* Compact desktop workspace. Scope all overrides to the application shell. */
.imap-app .app-sidebar { position: absolute; inset: 0 auto 0 0; width: 64px; padding: 12px 6px; z-index: 30; overflow: hidden auto; }
.imap-app .app-sidebar.expanded { width: 280px; }
.imap-app .navigation-toggle { width: 44px; min-height: 36px; margin: 0 4px 16px; border: 1px solid var(--dark-green-300); background: transparent; color: white; font-size: 20px; cursor: pointer; }
.imap-app .sidebar-brand, .imap-app .sidebar-label, .imap-app .sidebar-footer { display: none; }
.imap-app .app-sidebar.expanded .sidebar-brand { display: block; padding: 0 12px 24px; }
.imap-app .tabs { flex-direction: column; overflow: visible; }
.imap-app .tab-btn { flex: none; width: 100%; min-height: 48px; padding: 10px 8px 10px 42px; overflow: hidden; font-size: 0; }
.imap-app .tab-btn::before { left: 17px; top: 14px; font-size: 13px; }
.imap-app .tab-btn.active::before { left: 13px; }
.imap-app .app-sidebar.expanded .tab-btn { font-size: 13px; }
/* Sidebar entry = .tab-name + .tab-count (imap-design.js). In the 64 px bar nothing but the number shows; in the
   .expanded overlay (below 1280 px) and from 1280 px the name and the count show. */
.imap-app .tab-btn .tab-count { display: none; }
.imap-app .tab-btn .tab-name { display: block; }
.imap-app .app-sidebar.expanded .tab-btn.has-count { padding-right: 36px; }
.imap-app .app-sidebar.expanded .tab-btn .tab-count { display: block; position: absolute; top: 12px; right: 10px; min-width: 20px; text-align: right; font-size: 12px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--mint); }
.imap-app .workspace { margin-left: 64px; padding: 0 16px 12px; }
/* From 1280 px the sidebar is permanently wide and shows the table names (numbers stay as prefix, long names wrap).
   The hamburger and the .expanded overlay are not needed there. */
@media (min-width: 1280px) {
    .imap-app .app-sidebar, .imap-app .app-sidebar.expanded { width: 220px; padding: 20px 8px 16px; }
    .imap-app .navigation-toggle { display: none; }
    .imap-app .sidebar-brand { display: block; padding: 0 12px 20px; }
    .imap-app .tab-btn { min-height: 48px; padding: 10px 8px 10px 42px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
    .imap-app .tab-btn::before { left: 17px; top: 12px; }
    .imap-app .tab-btn.active::before { left: 13px; }
    .imap-app .tab-btn.has-count { padding-right: 36px; }
    .imap-app .tab-btn .tab-count { display: block; position: absolute; top: 11px; right: 10px; min-width: 20px; text-align: right; font-size: 12px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--mint); }
    .imap-app .workspace { margin-left: 220px; }
}
.imap-app .header { min-height: 48px; padding: 6px 0; margin-bottom: 8px; gap: 8px; }
.imap-app .header .btn { min-height: 30px; padding: 5px 8px; }
.list-workspace .title-row { min-height: 44px; padding: 6px 0; margin-bottom: 8px; background: white; color: var(--dark-green); gap: 16px; }
.list-workspace .title-row h1 { font-size: 22px; line-height: 1.25; margin: 0; }
.list-workspace .title-row .eyebrow, .list-workspace #page-description { display: none; }
.compact-count { margin-left: auto; font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.imap-app .filter-row { position: relative; align-items: end; padding: 6px 10px; gap: 6px 12px; margin-bottom: 8px; flex-wrap: wrap; }
.imap-app .filter-group { flex: 0 1 210px; min-width: 0; }
.imap-app .filter-input { min-height: 30px; height: 30px; width: 100%; padding: 4px 8px; }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; flex-basis: 100%; }
.filter-chips:empty { display: none; }
.imap-app .market-team-filter { width: 100%; min-height: 30px; height: 30px; padding: 4px 8px; border: 1px solid var(--dark-green-300); background: white; color: var(--dark-green); font-size: 12px; }
.imap-app .table-download { min-height: 30px; align-self: end; margin-left: auto; }
.period-filter { position: relative; }
.period-trigger { min-height: 30px; width: 100%; justify-content: space-between; }
.period-panel { position: fixed; top: 15vh; left: 50%; transform: translateX(-50%); max-height: 75vh; overflow: auto; z-index: 45; width: 510px; max-width: calc(100vw - 32px); padding: 16px; background: white; border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 8px 30px #0002; color: var(--dark-green); }
.period-panel[hidden] { display: none; }
.period-help { margin: 0 0 12px; font-size: 11px; line-height: 1.5; color: var(--ink-muted); }
.period-calendars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.period-calendar { min-width: 0; }
.period-calendar h3 { font-size: 12px; text-align: center; margin: 0 0 8px; }
.period-month { display: flex; gap: 2px; align-items: center; background: #f3f5f4; padding: 4px 2px; border: 1px solid var(--linie); }
.period-month select { min-width: 0; padding: 2px 0; border: 0; background: transparent; font: inherit; font-size: 11px; flex: 1; }
.period-month select + select { flex: 0 0 54px; }
.period-month button, .period-day { border: 0; background: transparent; color: inherit; cursor: pointer; min-height: 28px; font: inherit; }
.period-month button { font-size: 20px; padding: 0 5px; }
.period-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--linie); border-top: 0; padding: 4px; gap: 2px; }
.period-weekday { text-align: center; font-size: 10px; padding: 4px 0; }
.period-day { font-size: 11px; padding: 0; border-radius: 3px; }
.period-day.in-range { background: var(--mint-100); }
.period-day[aria-pressed="true"], .period-panel .period-apply { background: var(--dark-green); color: white; }
.period-day:hover { box-shadow: inset 0 0 0 1px var(--dark-green); }
.period-panel :focus-visible { outline: 2px solid var(--dark-green); outline-offset: 2px; }
.period-selected { text-align: center; font-size: 11px; margin: 6px 0; }
.period-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.period-error { color: #a12626; font-size: 12px; margin: 8px 0; }
.period-error:empty { display: none; }
.period-apply:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 480px) {
    .period-calendars { grid-template-columns: 1fr; }
}
.filter-chip { border: 1px solid var(--linie); background: white; padding: 2px 6px; font-size: 11px; color: var(--dark-green); cursor: pointer; overflow-wrap: anywhere; max-width: 100%; }
.imap-app .table-container .compact-table { table-layout: fixed; width: 100%; min-width: 0; font-size: 13px; }
/* Semantic column widths replace the old nth-child minimum widths. */
.imap-app .compact-table th, .imap-app .compact-table td { min-width: 0 !important; max-width: none !important; width: auto; padding: 4px 8px; text-align: left !important; vertical-align: middle; overflow-wrap: anywhere; }
.imap-app .compact-table th { height: 38px; padding-block: 4px; background: var(--flaeche-kopf); color: var(--ink); border-bottom: 2px solid var(--dark-green); }
.imap-app .compact-table .create-record-button { min-height: 28px; height: 28px; width: 28px; }
.imap-app .compact-table .compact-selection { width: 64px; text-align: center !important; }
.imap-app .compact-table th.compact-documents, .imap-app .compact-table td.compact-documents { text-align: center !important; }
.imap-app .compact-table .compact-reference { width: 105px; }
.imap-app .compact-table .compact-deadlines { width: 130px; }
.imap-app .compact-table .compact-owners { width: 260px; }
.imap-app .compact-table :is(.compact-duration, .compact-deepdive) { width: 150px; white-space: nowrap; font-size: 12px; }
.imap-app .compact-table .compact-actions { width: 104px; }
/* P1-T33: the nameless last column "in nächste Phase senden" (not in final) takes the width the duration had. styles.css sizes the last column of
   four tables by id (180px), hence the :is() with id specificity; the button wraps between words only. */
.imap-app :is(#table-main, #table-screening, #table-deepdive, #table-headobu) .compact-next { width: 150px; min-width: 0; padding: 4px 8px; }
.imap-app .compact-table .compact-next .confirm-btn { width: 100%; padding: 4px 6px; font-size: 12px; line-height: 15px; white-space: normal; text-align: center; overflow-wrap: normal; word-break: normal; }
/* Arrow switch in a sortable column head. */
.imap-app .compact-table th.is-sortable { white-space: nowrap; }
.imap-app .compact-table .sort-label { vertical-align: middle; }
.imap-app .compact-table .sort-toggle { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 24px; height: 24px; min-height: 24px; margin-left: 4px; padding: 0; border: 1px solid var(--dark-green-300); background: white; color: var(--dark-green); font: 600 14px/1 Arial, sans-serif; cursor: pointer; }
.imap-app .compact-table .sort-toggle:hover { background: var(--mint-200); }
.imap-app .compact-table th[aria-sort="ascending"] .sort-toggle, .imap-app .compact-table th[aria-sort="descending"] .sort-toggle { background: var(--dark-green); border-color: var(--dark-green); color: white; }
/* P1-T74: the DeepDive button stays on one line and inside the cell, also in the 84 px band. */
.imap-app .compact-table .compact-deepdive .deepdive-btn { display: block; max-width: 100%; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-size: 12px; }
/* The client wraps and the row grows downwards; the description shows up to four lines, the full text is in the drawer. */
.compact-table .compact-client, .compact-table .compact-place { display: block; }
.compact-table .compact-place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); font-size: 11px; line-height: 14px; }
.compact-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; line-height: 17px; }
/* Procedure stage, documents, Market Team and (not in final) the duration: hidden by default, shown only where the fixed columns leave room (see the media queries below). */
.imap-app .compact-table th.compact-procedure, .imap-app .compact-table td.compact-procedure,
.imap-app .compact-table th.compact-documents, .imap-app .compact-table td.compact-documents,
.imap-app .compact-table th.compact-market, .imap-app .compact-table td.compact-market { display: none; }
/* P1-T74: the DeepDive column replaces the duration in these four tables (final keeps its duration, always visible; the archive tables have duration cells of their own). */
.imap-app :is(#table-main, #table-screening, #table-deepdive, #table-headobu) :is(th, td).compact-deepdive { display: none; }
.compact-table .compact-procedure .record-field { line-height: 17px; }
/* Documents (from 1760 px): one link per line, centred in the cell; long link texts wrap inside the 180 px. */
.compact-table .compact-doc-links { display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 12px; line-height: 24px; }
.compact-table .compact-doc-links a { display: block; max-width: 100%; min-height: 0; height: auto; padding: 0; font: inherit; color: var(--dark-green); text-decoration: none; background: transparent; border: 0; cursor: pointer; text-align: center; overflow-wrap: anywhere; }
.compact-table .compact-doc-links a:hover { color: var(--ink); }
.compact-label { display: block; color: var(--ink-muted); font-size: 10px; line-height: 14px; font-weight: 500; }
.compact-table .record-field { min-width: 0; line-height: 18px; }
.imap-app .compact-table .form-input, .imap-app .compact-table .deadline-input { min-height: 26px; height: 26px; max-width: 100%; width: 100%; padding: 2px 4px; font-size: 12px; }
.compact-table .assignee-input-wrap { padding: 2px 4px; min-width: 0; }
.compact-table .assignee-input { font-size: 12px; min-width: 0; width: 100%; }
.compact-table .btn-circle-small, .compact-table .btn-ghost { min-width: 24px; min-height: 24px; width: 24px; height: 24px; flex-shrink: 0; }
.compact-table .compact-owners .record-field > div { gap: 2px !important; }
/* 4 px between field title and field, the same gap as .filter-group (styles.css) between .filter-label and .filter-input. */
.compact-table .compact-owners .compact-label { line-height: 11px; margin-bottom: 4px; }
.imap-app .compact-table :is(.compact-owners, .compact-market) .form-input { min-height: 24px; height: 24px; }
/* final is read-only: values are plain text (createReadOnlyText). */
.readonly-value { display: block; overflow-wrap: anywhere; }
.compact-table .compact-selection .select-toggle { margin: 0 auto 4px; }
/* P1-T34: Archiv und Fertige Ausschreibungen (js/archive-tabs.js), read-only table in the compact look. */
/* P1-T57: Links-Spalte +24 px (168 / 174 / 176), damit "Leistungsbeschreibung" (151 px) in einer Zeile passt; die Spalte nimmt der Grund- bzw. Summary-Spalte weg. */
.imap-app .compact-table .compact-selection .archive-retention-hint { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 4px auto 0; border: 0; background: var(--dark-green); color: var(--surface); font-size: 12px; font-weight: 700; line-height: 1; cursor: help; }
.imap-app .compact-table .compact-selection .archive-retention-hint:hover, .imap-app .compact-table .compact-selection .archive-retention-hint:focus-visible { outline: 2px solid var(--dark-green); outline-offset: 2px; }
/* P1-T66: warning triangle for missing required fields (js/compact-lists.js missingHint). PO exception to "Neon-Gelb only for row-highlight":
   the fill is the Neon-Gelb token, the outline and the mark are ink, so it stays visible on a highlighted (yellow) row. */
.imap-app .compact-table .compact-selection .missing-hint { display: flex; align-items: center; justify-content: center; width: 24px; height: 22px; margin: 4px auto 0; cursor: help; }
.imap-app .compact-table .compact-selection .missing-hint:hover, .imap-app .compact-table .compact-selection .missing-hint:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.missing-hint svg { display: block; flex: none; }
/* P1-T66 (PO exception, as above): a row with missing required fields is tinted lightly yellow (22 % Neon-Gelb on white). Selection (row-highlight, !important)
   and hover (tbody tr:hover td, higher specificity) still win. Below 900 px (cards) the colour sits on the tr, like row-highlight in imap-design.css. */
tr.row-missing td { background: color-mix(in srgb, var(--neon-gelb) 22%, var(--surface)); }
@media (max-width: 899px) {
    .imap-app tr.row-missing:not(.row-highlight) { background: color-mix(in srgb, var(--neon-gelb) 22%, var(--surface)); }
}
.missing-hint-shape { fill: var(--neon-gelb); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.missing-hint-mark { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
/* P1-T66: editable fields (Postgres only): the table shows text, compact-lists.js addEditControls swaps in the input while the details window is open. */
#record-drawer .edit-input { display: block; width: 100%; box-sizing: border-box; }
#record-drawer textarea.edit-input { min-height: 120px; resize: vertical; }
#record-drawer .record-field > a + .edit-input { margin-top: 6px; }
.imap-app .tab-btn[data-tab="archive"]::before { content: 'A'; }
.imap-app .tab-btn[data-tab="inWork"]::before { content: 'F'; }
/* P1-T37: from 900 px the columns next to the summary are sized to their text (Arial 13 px, padding 8+8 px): link "Vergabeunterlagen" 128, date 65, duration "mind. 12 Tage 23 Std." 124, head
   "Bearbeitungsdauer" 119, "Finale Entscheidung Head of BU OE/PI" 242. Links, date, duration (from 1024 px) and "Archiviert aus" (from 1600 px) stay on one line. The summary is fixed; exactly one column takes the rest:
   "Grund" in Archiv (class archive-with-reason), the summary in Fertige Ausschreibungen. Table width = viewport - 97 (900-1279 px) / - 253 (from 1280 px). Widths, left to right (selection/reference/from/at/duration/documents + summary):
   900-1023: 48+80+72+82+76+144 + 200 = 702, Grund 803-702 = 101 at 900 px. 1024-1279: 52+80+100+82+144+150 + 200 = 808, Grund 927-808 = 119 at 1024 px.
   1280-1439: 52+95+150+92+144+152 + 210 = 895, Grund 1027-895 = 132 at 1280 px. 1440-1599: 52+95+170+92+144+152 + 240 = 945, Grund 1187-945 = 242 at 1440 px.
   from 1600: 52+95+264+92+144+152 + 240 = 1039, Grund 1347-1039 = 308 at 1600 px; from 1760 the summary is 300, Grund 1667-1099 = 568 at 1920 px.
   Under 900 px the card layout and the base widths below stay as they were. */
.imap-app .compact-table.archive-table .compact-summary { width: auto; }
.imap-app .archive-more { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.imap-app .archive-more[hidden] { display: none; }
.imap-app .compact-table.archive-table .archive-from { width: 150px; }
.imap-app .compact-table.archive-table .archive-at { width: 95px; }
.imap-app .compact-table.archive-table .archive-reason { width: 150px; }
.imap-app .compact-table.archive-table .archive-links { width: 110px; }
.imap-app .compact-table.archive-table .archive-links a { display: block; color: var(--dark-green); }
@media (min-width: 900px) {
    .imap-app .compact-table.archive-table td.archive-at, .imap-app .compact-table.archive-table td.archive-links { white-space: nowrap; }
    .imap-app .compact-table.archive-table .archive-links a { white-space: nowrap; }
    .imap-app .compact-table.archive-table.archive-with-reason .compact-summary { width: 200px; }
    .imap-app .compact-table.archive-table .archive-reason { width: auto; }
}
@media (min-width: 900px) and (max-width: 1023.98px) {
    .imap-app .compact-table.archive-table .compact-reference { width: 80px; }
    .imap-app .compact-table.archive-table .archive-from { width: 72px; }
    .imap-app .compact-table.archive-table .archive-at { width: 82px; }
    .imap-app .compact-table.archive-table .compact-duration { width: 76px; }
    .imap-app .compact-table.archive-table .archive-links { width: 168px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .imap-app .compact-table.archive-table .compact-reference { width: 80px; }
    .imap-app .compact-table.archive-table .archive-from { width: 100px; }
    .imap-app .compact-table.archive-table .archive-at { width: 82px; }
    .imap-app .compact-table.archive-table .archive-links { width: 174px; }
}
@media (min-width: 1024px) {
    .imap-app .compact-table.archive-table .compact-duration { width: 144px; }
    .imap-app .compact-table.archive-table td.compact-duration { white-space: nowrap; }
    .imap-app .compact-table.archive-table th { overflow-wrap: normal; word-break: normal; }
}
@media (min-width: 1280px) {
    .imap-app .compact-table.archive-table .compact-selection { width: 52px; }
    .imap-app .compact-table.archive-table .compact-reference { width: 95px; }
    .imap-app .compact-table.archive-table .archive-at { width: 92px; }
    .imap-app .compact-table.archive-table .archive-links { width: 176px; }
    .imap-app .compact-table.archive-table .archive-from { width: 150px; }
    .imap-app .compact-table.archive-table.archive-with-reason .compact-summary { width: 210px; }
}
@media (min-width: 1440px) {
    .imap-app .compact-table.archive-table .archive-from { width: 170px; }
    .imap-app .compact-table.archive-table.archive-with-reason .compact-summary { width: 240px; }
}
@media (min-width: 1600px) {
    .imap-app .compact-table.archive-table .archive-from { width: 264px; }
    .imap-app .compact-table.archive-table td.archive-from { white-space: nowrap; }
}
/* range syntax: tests locate the process tables' 1760 px block by its text */
@media (width >= 1760px) {
    .imap-app .compact-table.archive-table.archive-with-reason .compact-summary { width: 300px; }
}
.imap-app .compact-table .compact-selection .trash-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-width: 24px; min-height: 24px; margin: 0 auto; padding: 0; border: 1px solid var(--dark-green-300); background: transparent; color: var(--dark-green); font-size: 0; line-height: 0; cursor: pointer; }
.imap-app .compact-table .compact-selection .trash-btn:hover, .imap-app .compact-table .compact-selection .trash-btn:focus-visible { color: #a12626; border-color: #a12626; background: rgb(161 38 38 / 8%); }
.compact-table .compact-selection .trash-btn svg { display: block; flex: none; }
.compact-open { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 3px 8px; background: white; color: var(--dark-green); border: 1px solid var(--dark-green-300); font: 500 12px/1.4 Arial, sans-serif; cursor: pointer; }
.compact-open:hover { background: var(--mint-100); }
.compact-actions .compact-open { width: 100%; margin-block: 2px; }
.record-backdrop { position: fixed; inset: 0; background: rgb(18 67 77 / 18%); z-index: 1000; }
.imap-app #overlay { z-index: 2500; }
.record-drawer { position: fixed; inset: 0 0 0 auto; width: min(600px, 100vw); display: flex; flex-direction: column; background: white; border-left: 1px solid var(--linie); z-index: 1001; font-size: 13px; }
.record-drawer-header { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--dark-green); color: white; }
.record-drawer-header h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.record-section-nav { display: flex; gap: 6px; padding: 8px 20px; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.record-close { border: 1px solid var(--mint); background: transparent; color: white; font-size: 24px; width: 36px; height: 36px; flex-shrink: 0; cursor: pointer; }
.record-drawer-content { overflow: auto; min-height: 0; padding: 0 20px 24px; overscroll-behavior: contain; }
.record-section { padding: 16px 0; border-bottom: 1px solid var(--rahmen-kraeftig); scroll-margin-top: 12px; }
.record-section h3 { margin: 0 0 12px; padding: 6px 10px; font-size: 16px; color: var(--ink); background: var(--flaeche-kopf); }
.record-detail-field { margin: 0 0 12px; overflow-wrap: anywhere; }
.record-detail-field > .compact-label { font-size: 11px; margin-bottom: 4px; }
.record-drawer .record-field { min-width: 0; }
.record-drawer .record-field:has(.procedure-stage) { min-width: 0; }
.record-drawer .option-box { width: 100%; min-width: 0; flex-wrap: wrap; }
.record-drawer .option-field { min-width: 0; max-width: 100%; }
.record-drawer .assignee-input-wrap { min-width: 0; }
.record-drawer input, .record-drawer select { max-width: 100%; }
.record-drawer .assignee-input { width: 100%; min-width: 0; }
.compact-table .compact-owners > .compact-slot > .record-field > .assignee-input { border: 1px solid var(--dark-green-300); background: white; padding: 2px 4px; height: 24px; }
.compact-table .compact-owners > .compact-slot > .record-field > .people-combobox > .assignee-input { border: 1px solid var(--dark-green-300); background: white; padding: 2px 18px 2px 4px; height: 24px; }
.record-drawer .drop-zone { width: 100%; }
/* Medium widths (F7): the fixed columns add up to ~813 px and would squeeze the summary column to a few pixels.
   Narrower fixed columns keep it above 240 px. The :is() list carries id specificity because styles.css sizes the
   last column of four tables by id (width 180px). */
@media (min-width: 900px) and (max-width: 1023.98px) {
    .imap-app .workspace { padding-inline: 8px; }
    .imap-app .compact-table .compact-selection { width: 48px; }
    .imap-app .compact-table .compact-reference { width: 80px; }
    .imap-app .compact-table .compact-deadlines { width: 100px; }
    .imap-app .compact-table .compact-owners { width: 160px; }
    .imap-app .compact-table :is(.compact-duration, .compact-deepdive) { width: 84px; white-space: normal; hyphens: auto; }
    .imap-app :is(#table-main, #table-screening, #table-deepdive, #table-headobu) .compact-next { width: 84px; }
    .imap-app :is(#table-main, #table-screening, #table-deepdive, #table-headobu, #table-final) .compact-actions { width: 72px; min-width: 0; padding-inline: 6px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .imap-app .compact-table .compact-selection { width: 52px; }
    .imap-app .compact-table .compact-reference { width: 90px; }
    .imap-app .compact-table .compact-deadlines { width: 110px; }
    .imap-app .compact-table .compact-owners { width: 180px; }
    .imap-app .compact-table :is(.compact-duration, .compact-deepdive) { width: 105px; white-space: normal; hyphens: auto; }
    .imap-app :is(#table-main, #table-screening, #table-deepdive, #table-headobu) .compact-next { width: 105px; }
    .imap-app :is(#table-main, #table-screening, #table-deepdive, #table-headobu, #table-final) .compact-actions { width: 88px; min-width: 0; }
}
/* From 1280 px the actions column takes its intended 104 px in all five tables (styles.css sizes four of them by id to 180 px). */
@media (min-width: 1280px) {
    .imap-app :is(#table-main, #table-screening, #table-deepdive, #table-headobu, #table-final) .compact-actions { width: 104px; min-width: 0; }
}
/* Wide screens. The sidebar (220 px from 1280 px) leaves the table 156 px less than before, so the bands were re-cut (P1-T17).
   Table width = viewport - sidebar - 32 (padding) - ~15 (scroll bar, only when the rows need it). Exactly one visible column has no width and takes the rest.
   1280-1399 px: narrow fixed set (723 px), the summary takes the rest (288-408 px).
   1400-1459 px: the summary stays at 420 px and the owners column takes the rest (230-289 px), so the summary never grows past ~420 px.
   1460-1579 px: narrow set + stage column; summary 325 px, the stage column takes the rest (>= 140 px, "Teilnahmeantrag" on one line).
   1580-1759 px: normal set (813 px), summary 360 px, the stage column takes the rest (>= 140 px).
   From 1760 px (P1-T19): documents appear, 180 px wide with the links stacked and centred; the stage column is fixed at 140 px and
   the summary takes the rest (~360 px at 1760 px) and has no upper limit. Duration may wrap in the narrow set. The sidebar stays 220 px.
   From 1760 px the columns "Market Team" and (not in final) "Bearbeitungsdauer" (P1-T20, P1-T35) appear one after the other, each only where the summary
   keeps at least 360 px even with a classic 17 px scroll bar: summary = viewport - 1389 - added - 17 (1389 = 220 sidebar + 32 padding + 1133 fixed + ~4;
   the 1133 contain the nameless "next" column, or in final the duration, both 150 px), so threshold = 1767 + width of every column added so far.
   "Market Team" (204 px, not in main) from 1767 + 204 = 1971 px; the duration (150 px) after it from 1971 + 150 = 2121 px in screening, deepdive and headobu;
   main has no Market Team, so its duration starts at 1767 + 150 = 1917 px. final shows its duration at every width (inside the 1133 px) and
   has no further column. The duration column keeps the 150 px of the base rule here. Below the threshold the duration stays in the drawer only.
   In the table the order is Zuständigkeit, Market Team, Bearbeitungsdauer, Aktionen, (nameless) in nächste Phase senden.
   A further fixed column raises every threshold behind it by its width. */
@media (min-width: 1280px) and (max-width: 1579.98px) {
    .imap-app .compact-table .compact-reference { width: 95px; }
    .imap-app .compact-table .compact-deadlines { width: 120px; }
    .imap-app .compact-table .compact-owners { width: 230px; }
    .imap-app .compact-table :is(.compact-duration, .compact-deepdive) { width: 110px; white-space: normal; hyphens: auto; }
    .imap-app :is(#table-main, #table-screening, #table-deepdive, #table-headobu) .compact-next { width: 110px; }
}
@media (min-width: 1400px) and (max-width: 1459.98px) {
    .imap-app .compact-table .compact-summary { width: 420px; }
    .imap-app .compact-table .compact-owners { width: auto; }
}
@media (min-width: 1460px) {
    .imap-app .compact-table th.compact-procedure, .imap-app .compact-table td.compact-procedure { display: table-cell; }
    .imap-app .compact-table .compact-summary { width: 325px; }
}
@media (min-width: 1580px) and (max-width: 1759.98px) {
    .imap-app .compact-table .compact-summary { width: 360px; }
}
@media (min-width: 1760px) {
    .imap-app .compact-table th.compact-documents, .imap-app .compact-table td.compact-documents { display: table-cell; }
    .imap-app .compact-table .compact-procedure { width: 140px; }
    .imap-app .compact-table .compact-documents { width: 180px; }
    .imap-app .compact-table .compact-summary { width: auto; }
    .imap-app .compact-table .compact-market { width: 204px; }
}
@media (min-width: 1971px) {
    .imap-app .compact-table th.compact-market, .imap-app .compact-table td.compact-market { display: table-cell; }
}
@media (min-width: 1917px) {
    .imap-app #table-main :is(th, td).compact-deepdive { display: table-cell; }
}
@media (min-width: 2121px) {
    .imap-app :is(#table-screening, #table-deepdive, #table-headobu) :is(th, td).compact-deepdive { display: table-cell; }
}
@media (max-width: 899px) {
    .imap-app .workspace { padding-inline: 8px; }
    .imap-app .filter-group { flex-basis: 180px; }
    .record-drawer { width: 100vw; }
    .imap-app .compact-table .compact-selection, .imap-app .compact-table .compact-reference,
    .imap-app .compact-table .compact-deadlines, .imap-app .compact-table .compact-owners,
    .imap-app .compact-table .compact-duration, .imap-app .compact-table .compact-deepdive, .imap-app .compact-table .compact-actions { width: 100%; }
    /* The nameless cell has no label: no empty label column in the card. */
    .imap-app :is(#table-main, #table-screening, #table-deepdive, #table-headobu) td.compact-next { display: block; padding: 4px 0; }
    .imap-app .table-container tbody td.compact-next::before { display: none; }
    .imap-app .compact-table tbody td { padding: 4px 0; }
    .compact-actions .compact-open { width: auto; margin-right: 6px; }
    /* Card layout: imap-design.css hides every head cell but the first; the sort switch stays next to the "+". */
    .imap-app .table-container thead th.is-sortable { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; width: auto; padding: 4px 8px; border: 0; }
    .list-workspace .title-row { align-items: start; flex-wrap: wrap; }
    .list-workspace .title-row h1 { font-size: 18px; }
}