/*
 * BBS BauBoard Designsystem 2026
 *
 * Eine abschliessende, rein visuelle Ebene fuer die bestehende Single-Page-App.
 * Fachliche Ansichten behalten ihre DOM-Struktur und JavaScript-Logik. Der
 * PDF-Pruefviewer, Kamera-Vollbildmodus und die Queransicht der Wochenplanung
 * werden bewusst nicht neu gestaltet.
 */

:root {
  color-scheme: light;
  --bbs-green-950: #0b3422;
  --bbs-green-900: #0f4328;
  --bbs-green-800: #14522b;
  --bbs-green-700: #14783a;
  --bbs-green-600: #159447;
  --bbs-green-500: #19a24a;
  --bbs-green-200: #c9efd3;
  --bbs-green-100: #e0f2e5;
  --bbs-green-50: #f1f8f3;
  --bbs-logo-green: #19a24a;
  --bbs-header-green: #0b3422;
  --bbs-header-anthracite: #14522b;
  --bbs-sage-100: #eef3ee;
  --bbs-sage-50: #f5f8f4;
  --bbs-cream: #f6f5f0;
  --bbs-paper: #ffffff;
  --bbs-surface: #ffffff;
  --bbs-surface-muted: #e5e6ea;
  --bbs-ink: #19221f;
  --bbs-ink-soft: #34453d;
  --bbs-muted: #69776f;
  --bbs-line: #dbe4dd;
  --bbs-line-strong: #c7d4ca;
  --bbs-danger: #c83d3d;
  --bbs-danger-soft: #fbecec;
  --bbs-warning: #c47a17;
  --bbs-warning-soft: #fff4df;
  --bbs-info: #35698a;
  --bbs-info-soft: #eaf3f8;
  --bbs-button-primary-bg: #edf5ef;
  --bbs-button-primary-hover: #e2efe5;
  --bbs-button-primary-border: #b8d2bf;
  --bbs-button-primary-text: #14522b;
  --bbs-button-secondary-bg: #f3f2ed;
  --bbs-button-danger-bg: #fbefed;
  --bbs-button-danger-border: #e7b9b4;
  --bbs-button-danger-text: #9f332e;
  --bbs-radius-xs: 8px;
  --bbs-radius-sm: 12px;
  --bbs-radius-md: 16px;
  --bbs-radius-lg: 22px;
  --bbs-radius-xl: 28px;
  --bbs-shadow-xs: 0 1px 2px rgba(11, 52, 34, 0.05);
  --bbs-shadow-sm: 0 8px 24px rgba(11, 52, 34, 0.07);
  --bbs-shadow-md: 0 18px 48px rgba(11, 52, 34, 0.13);
  --bbs-focus: 0 0 0 3px rgba(25, 162, 74, 0.2);
  --bbs-space-1: 4px;
  --bbs-space-2: 8px;
  --bbs-space-3: 12px;
  --bbs-space-4: 16px;
  --bbs-space-5: 20px;
  --bbs-space-6: 24px;
  --bbs-space-8: 32px;
  --bbs-space-10: 40px;
  --bbs-control-height: 44px;
  --bbs-environment-height: 24px;
  --bbs-header-height: 70px;
  --bbs-touch-target: 44px;
  --bbs-dialog-width: 760px;
  --bbs-dialog-compact-width: 560px;
  --bbs-dialog-sheet-width: 620px;
  --bbs-dialog-viewport-gap: 24px;
  --bg: var(--bbs-cream);
  --card: var(--bbs-surface);
  --soft-border: var(--bbs-line);
  --text: var(--bbs-ink);
  --muted: var(--bbs-muted);
  --green: var(--bbs-green-100);
  --accent: var(--bbs-green-800);
  --ui-control-height: var(--bbs-control-height);
  --ui-control-radius: var(--bbs-radius-sm);
  --ui-focus-ring: var(--bbs-focus);
}

html {
  min-height: 100%;
  background: var(--bbs-cream);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
body.admin-view,
body.employee-view {
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 0 0, rgba(224, 242, 229, 0.82), transparent 36rem),
    linear-gradient(180deg, var(--bbs-paper) 0, var(--bbs-cream) 26rem, #f2f6f2 100%);
  color: var(--bbs-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

::selection {
  background: var(--bbs-green-200);
  color: var(--bbs-green-950);
}

.environment-banner {
  min-height: calc(var(--bbs-environment-height) + env(safe-area-inset-top, 0px));
  padding: calc(5px + env(safe-area-inset-top, 0px)) 14px 5px;
  border: 0;
  border-bottom: 1px solid #ded0bb;
  background: #eee3d2;
  box-shadow: none;
  color: #6b5a42;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 14px;
}

body > header,
body.admin-view > header,
body.employee-view > header {
  position: sticky;
  top: 0;
  z-index: 950;
  min-height: calc(var(--bbs-header-height) + env(safe-area-inset-top, 0px));
  padding: calc(10px + env(safe-area-inset-top, 0px)) clamp(16px, 3vw, 34px) 10px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(118deg, var(--bbs-header-green) 0%, #114326 52%, var(--bbs-header-anthracite) 100%);
  box-shadow: 0 10px 32px rgba(11, 52, 34, 0.16);
  color: #fff;
}

body:has(> .environment-banner:not(.hidden)) > header,
body.admin-view:has(> .environment-banner:not(.hidden)) > header,
body.employee-view:has(> .environment-banner:not(.hidden)) > header {
  top: calc(var(--bbs-environment-height) + env(safe-area-inset-top, 0px));
  min-height: var(--bbs-header-height);
  padding-top: 10px;
}

body > header .brand-lockup {
  min-width: 0;
  gap: 12px;
}

body > header .app-logo {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}

body > header h1,
body.admin-view > header h1,
body.employee-view > header h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 780;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-transform: none;
}

body.local-preview-environment > header h1 .brand-name,
body.local-preview-environment.admin-view > header h1 .brand-name,
body.local-preview-environment.employee-view > header h1 .brand-name {
  color: #fb923c;
}

body > header .sub,
body.admin-view > header .sub,
body.employee-view > header .sub {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: 0.01em;
}

body.real-mobile-app > header,
body.force-mobile-preview > header,
body.force-mobile-preview.real-mobile-app > header {
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
  padding-bottom: 6px;
}

main {
  width: min(100%, 1560px);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 36px);
  padding-bottom: max(36px, env(safe-area-inset-bottom));
}

h1,
h2,
h3,
h4,
strong,
button,
label {
  text-wrap: balance;
}

h1,
h2,
h3,
h4 {
  color: var(--bbs-ink);
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 760;
  line-height: 1.2;
}

h3 {
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 730;
  line-height: 1.28;
}

.small-info,
.auth-field-note,
.project-meta,
.file-meta,
.note,
.legend,
.muted {
  color: var(--bbs-muted);
  font-size: 13px;
  font-weight: 480;
  line-height: 1.45;
}

/* Gemeinsame Karten- und Flaechensprache */
.toolbar,
.form-panel,
.project-platform,
.planner-wrap,
.home-card,
.time-card,
.account-box,
.file-card,
.storage-card,
.settings-menu,
.settings-content,
.data-row,
.chat-shell,
.admin-block,
.request-card,
.month-item,
body.admin-view .toolbar,
body.admin-view .form-panel,
body.admin-view .project-platform,
body.admin-view .planner-wrap,
body.admin-view .home-card,
body.admin-view .time-card,
body.admin-view .account-box,
body.admin-view .file-card,
body.admin-view .settings-menu,
body.admin-view .data-row,
body.admin-view .chat-shell,
body.employee-view .toolbar,
body.employee-view .form-panel,
body.employee-view .project-platform,
body.employee-view .planner-wrap,
body.employee-view .home-card,
body.employee-view .time-card,
body.employee-view .account-box,
body.employee-view .file-card,
body.employee-view .settings-menu,
body.employee-view .data-row,
body.employee-view .chat-shell {
  border: 1px solid var(--bbs-line);
  border-radius: var(--bbs-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--bbs-shadow-sm);
  color: var(--bbs-ink);
}

.form-panel,
.home-card,
.time-card,
.account-box,
.file-card,
.storage-card,
.settings-content {
  padding: clamp(18px, 2.4vw, 28px);
}

.main-home-panel,
.leave-summary,
.data-list,
.file-list,
.project-grid,
.settings-layout {
  gap: var(--bbs-space-4);
}

.settings-head,
.time-card-head,
.table-area-title,
.project-page-head,
.material-page-head {
  min-width: 0;
  margin-bottom: var(--bbs-space-5);
  padding-bottom: var(--bbs-space-3);
  border-bottom: 1px solid var(--bbs-line);
}

.settings-head h2,
.time-card-head h3,
.table-area-title h2,
.project-page-head h2,
.material-page-head h2 {
  margin: 0;
}

#planningSectionTitle {
  color: var(--bbs-green-800);
  font-weight: 600;
}

.summary-tile,
body.admin-view .summary-tile,
body.employee-view .summary-tile {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--bbs-line);
  border-radius: var(--bbs-radius-md);
  background: var(--bbs-surface-muted);
  box-shadow: none;
  color: var(--bbs-ink);
}

.summary-number,
body.admin-view .summary-number,
body.employee-view .summary-number {
  color: var(--bbs-green-800);
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 780;
  letter-spacing: -0.02em;
}

#homeEmployeeName,
#accountEmployeeName {
  overflow-wrap: anywhere;
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.22;
}

.summary-label {
  color: var(--bbs-muted);
  font-size: 12px;
  font-weight: 600;
}

.summary-tile.sick-summary,
body.admin-view .summary-tile.sick-summary,
body.employee-view .summary-tile.sick-summary {
  border-color: #efd4d4;
  background: #fff8f7;
  color: #8f3636;
}

/* Buttons: helle skandinavische Flaechen statt massiver Volltonbloecke. */
button,
body.admin-view button,
body.employee-view button,
a.button {
  min-height: var(--bbs-control-height);
  border: 1px solid var(--bbs-button-primary-border);
  border-radius: var(--bbs-radius-sm);
  background: var(--bbs-button-primary-bg);
  box-shadow: 0 2px 8px rgba(11, 52, 34, 0.045);
  color: var(--bbs-button-primary-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 690;
  letter-spacing: -0.005em;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

button:hover,
body.admin-view button:hover,
body.employee-view button:hover,
a.button:hover {
  border-color: #9fc4aa;
  background: var(--bbs-button-primary-hover);
  color: var(--bbs-green-900);
  filter: none;
  box-shadow: 0 4px 12px rgba(20, 92, 47, 0.08);
}

button:active,
a.button:active {
  transform: translateY(1px);
}

button.secondary,
body.admin-view button.secondary,
body.employee-view button.secondary {
  border-color: var(--bbs-line-strong);
  background: var(--bbs-button-secondary-bg);
  color: var(--bbs-ink-soft);
}

button.secondary:hover,
body.admin-view button.secondary:hover,
body.employee-view button.secondary:hover {
  border-color: var(--bbs-green-200);
  background: var(--bbs-green-50);
  color: var(--bbs-green-800);
}

button.light,
body.admin-view button.light,
body.employee-view button.light,
a.button.light {
  border-color: var(--bbs-line);
  background: rgba(255, 255, 255, 0.82);
  color: var(--bbs-ink-soft);
}

button.light:hover,
body.admin-view button.light:hover,
body.employee-view button.light:hover,
a.button.light:hover {
  border-color: var(--bbs-green-200);
  background: var(--bbs-green-50);
  color: var(--bbs-green-800);
}

button.danger,
body.admin-view button.danger,
body.employee-view button.danger {
  border-color: var(--bbs-button-danger-border);
  background: var(--bbs-button-danger-bg);
  color: var(--bbs-button-danger-text);
}

button.danger:hover,
body.admin-view button.danger:hover,
body.employee-view button.danger:hover {
  border-color: #dca39d;
  background: #f7e2df;
  color: #8f2f2b;
}

button:disabled,
button[aria-disabled="true"] {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bbs-green-600);
  outline-offset: 2px;
  box-shadow: var(--bbs-focus);
}

.top-actions {
  gap: 8px;
}

body > header .top-actions > button:not(.mobile-menu-toggle):not(.mobile-home-shortcut),
body > header .view-switch {
  min-height: 38px;
  padding: 8px 12px;
  border-color: rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.82);
  box-shadow: none;
  font-size: 13px;
  backdrop-filter: blur(8px);
}

body > header .top-actions > button:hover,
body > header .top-actions > button.top-nav-active {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Formulare */
label {
  color: var(--bbs-ink-soft);
  font-size: 13px;
  font-weight: 680;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea {
  min-width: 0;
  max-width: 100%;
  min-height: var(--bbs-control-height);
  padding: 10px 12px;
  border: 1px solid var(--bbs-line-strong);
  border-radius: var(--bbs-radius-sm);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 1px rgba(13, 47, 32, 0.025);
  color: var(--bbs-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.3;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #afc0b3;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--bbs-green-600);
  background: #fff;
}

input::placeholder,
textarea::placeholder {
  color: #98a39c;
}

textarea {
  min-height: 104px;
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--bbs-green-700);
}

.check-pill,
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  min-height: 40px;
  gap: 9px;
  color: var(--bbs-ink-soft);
}

.form-actions,
.ui-action-bar,
.time-mini-actions {
  gap: 10px;
}

.form-actions {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
  padding-top: 14px;
  padding-right: 0;
  padding-left: 0;
  border-top: 1px solid var(--bbs-line);
}

.form-actions > button,
.form-actions > a.button {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.auth-intro {
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--bbs-green-100);
  border-radius: var(--bbs-radius-lg);
  background: linear-gradient(135deg, rgba(237, 247, 240, 0.95), rgba(255, 254, 250, 0.92));
}

.auth-brand {
  gap: 16px;
}

.auth-brand-logo {
  border-radius: var(--bbs-radius-md);
  box-shadow: var(--bbs-shadow-sm);
}

.auth-choice-panel button {
  border-color: var(--bbs-line);
  background: var(--bbs-surface-muted);
  color: var(--bbs-ink);
}

/* Datenlisten, Tabellen und Karten */
.data-row,
.file-row,
.request-card,
.month-item,
.material-request-row,
.delivery-mobile-card {
  border-color: var(--bbs-line);
  border-radius: var(--bbs-radius-md);
  background: var(--bbs-surface);
}

.data-row:hover,
.file-row:hover,
.request-card:hover,
.month-item:hover,
.material-request-row:hover,
.delivery-mobile-card:hover {
  border-color: var(--bbs-green-200);
  background: var(--bbs-green-50);
}

#projectList .data-row.active,
.chat-person.active,
.plan-subfolder.active,
.folder-row.active {
  border-color: var(--bbs-green-200);
  background: var(--bbs-green-50);
  color: var(--bbs-green-950);
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  background: var(--bbs-sage-100);
  color: var(--bbs-ink-soft);
  font-size: 12px;
  font-weight: 730;
  letter-spacing: 0.02em;
}

td {
  border-color: var(--bbs-line);
  background: rgba(255, 255, 255, 0.9);
  color: var(--bbs-ink);
}

.planner th,
.time-month-table th,
body.admin-view .planner th,
body.admin-view .time-month-table th {
  background: var(--bbs-sage-100);
  color: var(--bbs-ink-soft);
}

.planner td,
.time-month-table td,
body.admin-view .planner td,
body.admin-view .time-month-table td {
  border-color: var(--bbs-line);
  background: #fff;
}

.badge,
.status-pill,
.project-chip,
.folder-badge,
.material-status {
  border-radius: 999px;
  font-weight: 680;
}

/* Desktop time review: deliberately scoped, including its parent grid sizing. */
.time-review-month-arrow { display: none; }
@media (min-width: 761px) {
  body:not(.force-mobile-preview) #timeTrackingPanel:has(#timeContentReview.desktop-time-review.active),
  body:not(.force-mobile-preview) #timeTrackingPanel:has(#timeContentReview.desktop-time-review.active) .settings-layout,
  body:not(.force-mobile-preview) #timeTrackingPanel:has(#timeContentReview.desktop-time-review.active) .settings-layout > div {
    min-width: 0;
    max-width: 100%;
  }
  #timeContentReview.desktop-time-review,
  #timeContentReview.desktop-time-review > .time-card,
  #timeContentReview.desktop-time-review #timeAdminList {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  #timeContentReview.desktop-time-review > .time-card { padding: 16px; }
  #timeContentReview.desktop-time-review .time-review-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding-top: 0;
    border-top: 0;
  }
  #timeContentReview.desktop-time-review .time-review-month-label { display: none; }
  #timeContentReview.desktop-time-review .time-review-month-arrow { display: inline; font-size: 24px; line-height: 1; }
  #timeContentReview.desktop-time-review .time-review-toolbar button {
    width: auto; min-width: 34px; min-height: 34px; height: auto; padding: 5px 10px; margin: 0; font-size: 13px;
  }
  #timeContentReview.desktop-time-review #timeCloseMonthButton { margin-left: auto; }
  #timeContentReview.desktop-time-review > .time-card > .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
    gap: 10px;
    margin-bottom: 14px;
  }
  #timeContentReview.desktop-time-review > .time-card > .grid > div { min-width: 0; }
  #timeContentReview.desktop-time-review label { font-size: 12px; margin-bottom: 4px; }
  #timeContentReview.desktop-time-review select {
    min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; min-height: 36px; height: 36px; padding: 5px 8px; font-size: 13px;
  }
  #timeContentReview.desktop-time-review .time-review-group { margin: 0 0 10px; border: 1px solid var(--bbs-line); border-radius: 10px; }
  #timeContentReview.desktop-time-review .time-review-group h4 { margin: 0; padding: 0; border: 0; }
  #timeContentReview.desktop-time-review .time-review-group-toggle {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    width: 100%; min-width: 0; max-width: 100%; min-height: 46px; height: auto; margin: 0; padding: 9px 12px;
    box-sizing: border-box; text-align: left; font-size: 13px; line-height: 1.4; color: var(--bbs-ink);
    background: var(--bbs-sage-100); border: 0; border-radius: 9px; box-shadow: none;
  }
  #timeContentReview.desktop-time-review .time-review-person { overflow-wrap: anywhere; flex: 1 1 150px; }
  #timeContentReview.desktop-time-review .time-review-person strong { margin-right: 6px; }
  #timeContentReview.desktop-time-review .time-review-total { font-weight: 400; white-space: nowrap; }
  #timeContentReview.desktop-time-review .time-review-chevron { font-size: 22px; line-height: 1; }
  #timeContentReview.desktop-time-review [aria-expanded="true"] .time-review-chevron { transform: rotate(90deg); }
  #timeContentReview.desktop-time-review .time-review-counts { display: flex; flex-wrap: wrap; gap: 5px; }
  #timeContentReview.desktop-time-review .time-review-count { background: #fff; border-radius: 12px; padding: 2px 7px; font-size: 11px; font-weight: 500; }
  #timeContentReview.desktop-time-review .time-review-count.missing,
  #timeContentReview.desktop-time-review .time-review-count.deviation,
  #timeContentReview.desktop-time-review .time-review-count.incomplete { background: #fbecee; color: #a93131; }
  #timeContentReview.desktop-time-review .time-review-count.confirmed { background: #e3f1e7; color: #21613b; }
  #timeContentReview.desktop-time-review .time-review-table-wrap[hidden] { display: none; }
  #timeContentReview.desktop-time-review .time-review-table-wrap { overflow: visible; }
  #timeContentReview.desktop-time-review .time-review-table {
    table-layout: fixed; width: 100%; min-width: 0; max-width: 100%; margin: 0; overflow: visible; border: 0; border-collapse: separate; border-spacing: 0;
  }
  #timeContentReview.desktop-time-review .review-date { width: 14%; }
  #timeContentReview.desktop-time-review .review-time { width: 7%; }
  #timeContentReview.desktop-time-review .review-break { width: 8%; }
  #timeContentReview.desktop-time-review .review-work { width: 10%; }
  #timeContentReview.desktop-time-review .review-project { width: 17%; }
  #timeContentReview.desktop-time-review .review-status { width: 12%; }
  #timeContentReview.desktop-time-review .review-actions { width: 25%; }
  #timeContentReview.desktop-time-review .time-review-table th,
  #timeContentReview.desktop-time-review .time-review-table td {
    min-width: 0; height: auto; padding: 7px 6px; font-size: 13px; line-height: 1.35;
    white-space: normal; overflow-wrap: anywhere; vertical-align: middle; text-align: left;
  }
  #timeContentReview.desktop-time-review .time-review-table th {
    position: sticky; top: var(--desktop-navigation-header-bottom, 0px); z-index: 5; font-size: 12px; overflow-wrap: normal; hyphens: auto;
  }
  #timeContentReview.desktop-time-review .time-review-table td:nth-child(2),
  #timeContentReview.desktop-time-review .time-review-table td:nth-child(3) { white-space: nowrap; overflow-wrap: normal; }
  #timeContentReview.desktop-time-review .time-review-table tbody tr:hover > td { background: #f1f7f2; }
  #timeContentReview.desktop-time-review .time-review-table .small-info { font-size: 12px; line-height: 1.35; }
  #timeContentReview.desktop-time-review .time-review-table .status-pill,
  #timeContentReview.desktop-time-review .time-review-table .leave-status { font-size: 11px; padding: 3px 6px; white-space: normal; }
  #timeContentReview.desktop-time-review .time-mini-actions { display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap; justify-content: flex-start; }
  #timeContentReview.desktop-time-review .time-mini-actions > .time-compare-cell { display: inline-flex; width: auto; min-width: 0; max-width: 100%; flex: 0 1 auto; }
  #timeContentReview.desktop-time-review .time-review-table button {
    display: inline-flex; justify-content: center; align-items: center;
    width: auto; min-width: 0; max-width: 100%; min-height: 30px; height: auto; margin: 0; padding: 4px 6px; flex: 0 1 auto;
    font-size: 12px; line-height: 1.25; white-space: normal; box-shadow: none; border-radius: 6px;
  }
  #timeContentReview.desktop-time-review .time-review-table button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  #timeContentReview.desktop-time-review .time-review-table button.time-review-delete { width: 30px !important; min-width: 30px !important; min-height: 30px !important; height: 30px !important; padding: 5px !important; }
  #timeContentReview.desktop-time-review .time-review-table button.time-review-edit { width: 30px; height: 30px; padding: 5px; }
  #timeContentReview.desktop-time-review .time-compare-cell:is(:hover, :focus, :focus-within) { z-index: 6; }
  #timeContentReview.desktop-time-review .time-compare-cell:is(:focus, :focus-within) > .time-compare-popover { display: block; }
  #timeContentReview.desktop-time-review :is(button, select, [tabindex]):focus-visible { outline: 2px solid #24763d; outline-offset: 2px; }
}

/* Dashboard */
.main-home-panel {
  align-items: start;
}

.leave-summary .summary-tile {
  border: 1px solid var(--bbs-line);
  border-radius: var(--bbs-radius-md);
  background: var(--bbs-paper);
  box-shadow: none;
}

.leave-summary .summary-number {
  color: var(--bbs-green-900);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 720;
  letter-spacing: -0.025em;
}

#mainHomePanel > .home-card:first-child,
.home-punch-card {
  border-color: var(--bbs-green-100);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(237, 247, 240, 0.9));
}

.home-punch-time {
  color: var(--bbs-logo-green);
  font-weight: 760;
  letter-spacing: -0.045em;
}

.home-time-clock {
  color: var(--bbs-logo-green);
}

.home-time-category,
.home-pause-panel,
.home-pause-clock {
  color: var(--bbs-green-900);
}

#mainHomePanel .home-time-category {
  color: var(--bbs-logo-green) !important;
}

/* Die kompakte Desktop-Navigation stammt aus der Bestandsoberfläche und
   setzte bislang helle bzw. neonfarbene Schrift für den alten dunklen Header. */
body header .top-actions > button:not(.mobile-menu-toggle):not(.mobile-home-shortcut) {
  color: rgba(255, 255, 255, 0.68) !important;
}

body header .top-actions > button:not(.mobile-menu-toggle):not(.mobile-home-shortcut):hover,
body.employee-view header .top-actions > button.top-nav-active:not(.mobile-menu-toggle),
body.admin-view header .top-actions > button.top-nav-active:not(.mobile-menu-toggle) {
  color: #c5e8ce !important;
}

.home-punch-button,
.home-punch-button.secondary {
  border-radius: var(--bbs-radius-sm);
  border-color: var(--bbs-logo-green);
  background: var(--bbs-logo-green);
  color: #fff;
}

.home-project-shortcut-item,
.home-project-shortcut-card button,
body.admin-view .home-project-shortcut-item,
body.admin-view .home-project-shortcut-card button,
body.employee-view .home-project-shortcut-item,
body.employee-view .home-project-shortcut-card button,
body.design-theme-active .home-project-shortcut-item,
body.design-theme-active .home-project-shortcut-card button {
  border-color: var(--bbs-line);
  background: var(--bbs-surface-muted) !important;
  color: var(--bbs-ink) !important;
}

.home-project-shortcut-item:hover,
.home-project-shortcut-card button:hover,
body.admin-view .home-project-shortcut-item:hover,
body.employee-view .home-project-shortcut-item:hover,
body.design-theme-active .home-project-shortcut-item:hover {
  border-color: var(--bbs-green-200);
  background: var(--bbs-green-50) !important;
  color: var(--bbs-green-800) !important;
}

/* App-Navigation */
.mobile-home-shortcut,
.mobile-menu-toggle,
.mobile-menu-close {
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  box-shadow: none;
}

.mobile-home-shortcut svg,
.mobile-menu-toggle svg,
.mobile-menu-icon svg,
.bbs-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-side-menu {
  border: 0;
  background: rgba(255, 254, 250, 0.98);
  box-shadow: -16px 0 48px rgba(11, 47, 32, 0.18);
  backdrop-filter: blur(18px);
}

.mobile-menu-head {
  min-height: 62px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid var(--bbs-line);
  color: var(--bbs-green-950);
}

.mobile-menu-head strong {
  font-size: 15px;
  font-weight: 760;
}

.mobile-side-menu .mobile-menu-close {
  border-color: transparent;
  background: transparent;
  color: var(--bbs-ink-soft);
  font-size: 0;
}

.mobile-side-menu .mobile-menu-close::before,
.modal-x-button::before {
  content: "";
  width: 20px;
  height: 20px;
  background:
    linear-gradient(45deg, transparent 46%, currentColor 47%, currentColor 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, currentColor 47%, currentColor 53%, transparent 54%);
}

.vehicle-line-icon {
  width: 22px;
  height: 22px;
  color: var(--bbs-green-800);
  vertical-align: middle;
}

/* A modal close control owns exactly one line icon. Older modal markup still
   contains a multiplication sign for no-script compatibility; keep that glyph
   visually suppressed so it can never overlap the shared icon. */
.modal-x-button {
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  -webkit-text-fill-color: transparent !important;
}

.modal-x-button::before {
  display: block;
  flex: 0 0 20px;
  color: var(--bbs-ink-soft);
}

.modal-x-button:hover::before,
.modal-x-button:focus-visible::before {
  color: var(--bbs-green-800);
}

.account-profile-head {
  border-bottom-color: var(--bbs-line);
}

.welcome-text {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bbs-muted);
  font-size: 12px;
  font-weight: 600;
}

.account-profile-name,
body.admin-view .account-profile-name,
body.employee-view .account-profile-name {
  color: var(--bbs-ink);
  font-size: clamp(20px, 3vw, 25px);
  font-weight: 720;
  letter-spacing: -0.025em;
}

.account-avatar,
.account-avatar.no-photo {
  border: 1px solid var(--bbs-line);
  border-radius: 50%;
  background: var(--bbs-sage-100);
  color: var(--bbs-green-900);
}

.account-avatar-hint {
  background: var(--bbs-green-800);
}

.task-modal-close,
.camera-review-close,
.employee-modal-close,
.mobile-pdf-close {
  position: relative;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  -webkit-text-fill-color: transparent !important;
}

.mobile-image-fullscreen-close {
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  -webkit-text-fill-color: transparent !important;
}

.task-modal-close > span {
  display: none !important;
}

.task-modal-close::before,
.camera-review-close::before,
.employee-modal-close::before,
.mobile-pdf-close::before,
.mobile-image-fullscreen-close::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--bbs-ink-soft);
  background:
    linear-gradient(45deg, transparent 46%, currentColor 47%, currentColor 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, currentColor 47%, currentColor 53%, transparent 54%);
}

.mobile-pdf-close::before,
.mobile-image-fullscreen-close::before {
  color: #fff;
}

#mainHomePanel #homePunchButton:not(.danger),
body.design-theme-active #mainHomePanel #homePunchButton:not(.danger) {
  border-color: var(--bbs-logo-green) !important;
  background: var(--bbs-logo-green) !important;
  color: #fff !important;
  box-shadow: none;
}

#mainHomePanel #homePunchButton:not(.danger):hover {
  border-color: #13863e !important;
  background: #13863e !important;
}

#mainHomePanel #homeProjectButton,
body.design-theme-active #mainHomePanel #homeProjectButton {
  border-color: var(--bbs-button-primary-border) !important;
  background: var(--bbs-button-primary-bg) !important;
  color: var(--bbs-button-primary-text) !important;
  box-shadow: none;
}

#mainHomePanel #homeProjectButton:hover {
  border-color: #9fc4aa !important;
  background: var(--bbs-button-primary-hover) !important;
}

#mainHomePanel #homeProjectButton {
  border-radius: var(--bbs-radius-md);
}

.mobile-menu-item,
body.admin-view button.mobile-menu-item,
body.employee-view button.mobile-menu-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: calc(100% - 20px);
  min-height: 50px;
  margin: 3px 10px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: var(--bbs-radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--bbs-ink-soft);
  text-align: left;
}

.mobile-menu-item:hover,
.mobile-menu-item:focus-visible,
.mobile-menu-item.active,
body.admin-view button.mobile-menu-item:hover,
body.admin-view button.mobile-menu-item.active,
body.employee-view button.mobile-menu-item:hover,
body.employee-view button.mobile-menu-item.active {
  border-color: var(--bbs-green-100);
  background: var(--bbs-green-50);
  color: var(--bbs-green-800);
}

.mobile-menu-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--bbs-sage-100);
  color: var(--bbs-green-800);
  font-size: 0;
}

.mobile-menu-backdrop {
  background: rgba(11, 47, 32, 0.3);
  backdrop-filter: blur(2px);
}

.project-section-switch {
  border-color: var(--bbs-line);
  background: rgba(255, 254, 250, 0.96);
  box-shadow: 0 -10px 30px rgba(11, 47, 32, 0.09);
}

.project-section-switch button,
body.admin-view .project-section-switch button,
body.employee-view .project-section-switch button {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--bbs-muted);
}

.project-section-switch button.active,
body.admin-view .project-section-switch button.active,
body.employee-view .project-section-switch button.active {
  border-color: transparent;
  background: var(--bbs-green-50);
  color: var(--bbs-green-800);
}

.project-section-switch button.active::after {
  background: currentColor;
}

.settings-menu {
  padding: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.settings-menu button,
body.admin-view .settings-menu button,
body.employee-view .settings-menu button {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--bbs-ink-soft);
  text-align: left;
}

.settings-menu button:hover,
.settings-menu button.active,
body.admin-view .settings-menu button:hover,
body.admin-view .settings-menu button.active,
body.employee-view .settings-menu button:hover,
body.employee-view .settings-menu button.active {
  border-color: var(--bbs-green-100);
  background: var(--bbs-green-50);
  color: var(--bbs-green-800);
}

.request-tabs,
.project-tabs,
.planning-tabs,
.task-filter-tabs {
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--bbs-line);
  border-radius: 14px;
  background: var(--bbs-sage-100);
}

.request-tab,
.project-tab,
.planning-tab,
.task-filter-tab {
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--bbs-muted);
}

.request-tab.active,
.project-tab.active,
.planning-tab.active,
.task-filter-tab.active {
  border-color: var(--bbs-line);
  background: #fff;
  box-shadow: var(--bbs-shadow-xs);
  color: var(--bbs-green-800);
}

.platform-pill,
.planning-mode-badge {
  border: 1px solid var(--bbs-green-100);
  border-radius: 999px;
  background: var(--bbs-green-50);
  color: var(--bbs-green-800);
  font-size: 11px;
  font-weight: 720;
}

.leave-status,
.status-badge {
  border-radius: 999px;
  font-weight: 680;
}

.leave-status.org-approved,
.leave-status.approved,
.status-badge.done {
  border-color: var(--bbs-green-200);
  background: var(--bbs-green-50);
  color: var(--bbs-green-800);
}

.leave-status.rejected,
.status-badge.error {
  border-color: #efcaca;
  background: var(--bbs-danger-soft);
  color: #9d3232;
}

.leave-status.pending,
.status-badge.warning {
  border-color: #f0d4a4;
  background: var(--bbs-warning-soft);
  color: #8f5a13;
}

.collapse-button,
.doc-month-btn,
.time-month-arrow,
.image-nav {
  border-color: var(--bbs-line);
  background: transparent;
  box-shadow: none;
  color: var(--bbs-ink-soft);
}

.collapse-button:hover,
.doc-month-btn:hover,
.time-month-arrow:hover,
.image-nav:hover {
  border-color: var(--bbs-green-100);
  background: var(--bbs-green-50);
  color: var(--bbs-green-800);
}

.project-main-area,
.project-main-area > .file-card {
  min-width: 0;
}

.project-platform > .settings-head {
  border-bottom-color: var(--bbs-line);
}

.upload-zone,
.project-upload-zone,
.photo-upload-tile,
.camera-upload-placeholder,
.material-photo-picker {
  border-color: var(--bbs-green-200);
  border-radius: var(--bbs-radius-md);
  background: var(--bbs-green-50);
  color: var(--bbs-green-800);
}

.upload-zone:hover,
.project-upload-zone:hover,
.photo-upload-tile:hover,
.camera-upload-placeholder:hover,
.material-photo-picker:hover {
  border-color: var(--bbs-green-500);
  background: #e5f4e9;
}

.doc-day-image-tile,
.doc-day-gallery-more,
.material-thumb,
.task-photo,
.file-preview {
  overflow: hidden;
  border-radius: var(--bbs-radius-sm);
  background: var(--bbs-sage-100);
}

.camera-review-check-mark svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#editModal.photo-review-modal .camera-review-check {
  appearance: none;
  -webkit-appearance: none;
  opacity: 0 !important;
}

#editModal.photo-review-modal .camera-review-check-mark {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
  color: #fff;
}

body .modal-backdrop.mobile-image-fullscreen .mobile-image-fullscreen-close {
  position: absolute;
  z-index: 4;
}

@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  #editModal.photo-review-modal .camera-review-check-wrap {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: none;
  }
}

/* Mobile Browser und installierte iPhone-App koennen nach Tastatur, Auswahlfeld
   oder nativer Fotoauswahl einen kleineren beziehungsweise versetzten sichtbaren
   Viewport melden. Normale Dialoge richten sich deshalb an dieser sichtbaren
   Flaeche aus. Spezialviewer behalten ihre eigene Vollbildsteuerung. */
#editModal.bbs-dialog-mobile-viewport[data-dialog-layout="standard"] {
  inset: auto !important;
  top: var(--bbs-dialog-visual-top, 0px) !important;
  left: var(--bbs-dialog-visual-left, 0px) !important;
  width: var(--bbs-dialog-visual-width, 100vw) !important;
  height: var(--bbs-dialog-visual-height, 100dvh) !important;
  max-width: var(--bbs-dialog-visual-width, 100vw) !important;
  max-height: var(--bbs-dialog-visual-height, 100dvh) !important;
  overflow: hidden !important;
}

#editModal.bbs-dialog-mobile-viewport[data-dialog-layout="standard"] > .edit-modal {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: calc(
    var(--bbs-dialog-visual-height, 100dvh)
    - max(16px, env(safe-area-inset-top))
    - max(16px, env(safe-area-inset-bottom))
  ) !important;
  overflow-x: hidden !important;
}

#editModal.bbs-dialog-mobile-viewport[data-dialog-layout="standard"] > .edit-modal > .bbs-dialog-body,
#editModal.bbs-dialog-mobile-viewport[data-dialog-layout="standard"] > .edit-modal > .bbs-dialog-actions {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  overflow-x: hidden !important;
}

#editModal.bbs-dialog-mobile-viewport[data-dialog-layout="standard"] > .edit-modal > .bbs-dialog-actions {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

#editModal.bbs-dialog-mobile-viewport[data-dialog-layout="standard"] > .edit-modal > .bbs-dialog-actions > .bbs-dialog-action:not(.cancel-action-replaced):not(.delete-action-replaced) {
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#editModal.bbs-dialog-mobile-viewport[data-dialog-layout="standard"] :is(input, select, textarea) {
  font-size: 16px;
}

/* Gemeinsame Desktop-/Mobilnavigation */
.desktop-app-shell {
  display: block;
  min-width: 0;
}

.desktop-side-navigation,
.desktop-navigation-backdrop,
.desktop-navigation-toggle {
  display: none;
}

.app-navigation-items {
  min-width: 0;
}

.app-navigation-item .message-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin: 0;
  transform: none;
}

.app-navigation-item .message-badge.hidden {
  display: none !important;
}

@media (min-width: 761px) {
  /* Vor der Anmeldung weder Navigation noch ihre reservierte Spalte anzeigen. */
  body.auth-locked .desktop-side-navigation,
  body.auth-locked .desktop-navigation-backdrop,
  body.auth-locked .desktop-navigation-toggle {
    display: none !important;
  }

  body.auth-locked .desktop-app-shell {
    display: block;
  }

  body > header .top-actions > #mainMenuBtn,
  body > header .top-actions > #timeTrackingBtn,
  body > header .top-actions > #projectMenuBtn,
  body > header .top-actions > #adminMessagesBtn,
  body > header .top-actions > #adminLeaveRequestsBtn,
  body > header .top-actions > #tasksBtn,
  body > header .top-actions > #materialRequestsBtn,
  body > header .top-actions > #employeeMessagesBtn,
  body > header .top-actions > #leaveRequestBtn,
  body > header .top-actions > #settingsBtn,
  body > header .top-actions > #accountBtn {
    display: none !important;
  }

  body > header .top-actions {
    flex: 0 1 auto;
    margin-left: auto;
    justify-content: flex-end;
  }

  body > header .mobile-menu-toggle {
    display: none !important;
  }

  body > header .desktop-navigation-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--bbs-radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.94) !important;
    box-shadow: none;
    font-size: 14px;
    font-weight: 720;
    transition: opacity 150ms ease, background 150ms ease;
  }

  body > header .desktop-navigation-toggle:hover,
  body > header .desktop-navigation-toggle:focus-visible {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.14);
  }

  body > header .desktop-navigation-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  /* Die erzwungene Handyvorschau verwendet auch bei breitem Desktopfenster
     ausschließlich die mobile Navigation. */
  body.force-mobile-preview > header .desktop-navigation-toggle,
  body.force-mobile-preview .desktop-side-navigation,
  body.force-mobile-preview .desktop-navigation-backdrop {
    display: none !important;
  }

  body.force-mobile-preview > header .mobile-menu-toggle {
    display: inline-flex !important;
  }

  body > header .mobile-home-shortcut {
    display: none !important;
  }

  .desktop-app-shell {
    position: relative;
    min-height: calc(100dvh - 96px);
  }

  .desktop-side-navigation {
    z-index: 900;
    display: flex;
    flex-direction: column;
    width: min(82vw, 282px);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--bbs-line);
    border-radius: var(--bbs-radius-lg);
    background: rgba(255, 254, 250, 0.98);
    box-shadow: var(--bbs-shadow-md);
    color: var(--bbs-ink);
  }

  .desktop-navigation-head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    min-height: 62px;
    padding: 9px 10px 9px 18px;
    border-bottom: 1px solid var(--bbs-line);
  }

  .desktop-navigation-head strong {
    color: var(--bbs-green-950);
    font-size: 15px;
    font-weight: 760;
  }

  .desktop-navigation-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    min-width: 44px !important;
    width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bbs-ink-soft);
    font-size: 0;
  }

  .desktop-navigation-close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  .desktop-navigation-items {
    display: grid;
    min-height: 0;
    gap: 4px;
    padding: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .desktop-navigation-item,
  body.admin-view button.desktop-navigation-item,
  body.employee-view button.desktop-navigation-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: var(--bbs-radius-sm);
    background: transparent;
    box-shadow: none;
    color: var(--bbs-ink-soft);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
  }

  .desktop-navigation-item:hover,
  .desktop-navigation-item:focus-visible,
  .desktop-navigation-item.active,
  body.admin-view button.desktop-navigation-item:hover,
  body.admin-view button.desktop-navigation-item.active,
  body.employee-view button.desktop-navigation-item:hover,
  body.employee-view button.desktop-navigation-item.active {
    border-color: var(--bbs-green-100);
    background: var(--bbs-green-50);
    color: var(--bbs-green-800);
  }

  .desktop-navigation-item.active {
    font-weight: 760;
  }

  .desktop-project-list {
    display: none;
    min-width: 0;
    margin: 0 0 4px 18px;
    padding: 0;
    list-style: none;
  }

  body:not(.force-mobile-preview) .desktop-project-list:not([hidden]) { display: block; }
  .desktop-project-chevron { width: 16px; height: 16px; }
  #desktopNavigation-projects[aria-expanded="true"] .desktop-project-chevron { transform: rotate(90deg); }
  .desktop-project-list li { min-width: 0; }
  .desktop-project-list .desktop-project-link,
  body.admin-view .desktop-project-list button.desktop-project-link,
  body.employee-view .desktop-project-list button.desktop-project-link {
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    margin: 2px 0;
    padding: 7px 8px;
    font-size: 12px;
    min-height: 44px;
  }
  .desktop-project-link > svg { width: 18px; height: 18px; margin-top: 2px; }
  .desktop-project-label { display: block; min-width: 0; overflow-wrap: anywhere; }
  .desktop-project-number { display: block; line-height: 1.4; }
  .desktop-project-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-weight: 500;
    line-height: 1.35;
  }

  .desktop-navigation-item .app-navigation-label {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
  }

  .desktop-navigation-item .app-navigation-icon {
    width: 36px;
    height: 36px;
  }

  .desktop-navigation-backdrop {
    position: fixed;
    inset: var(--desktop-navigation-header-bottom, 94px) 0 0;
    z-index: 899;
    background: rgba(11, 47, 32, 0.3);
    backdrop-filter: blur(2px);
  }
}

@media (min-width: 1180px) {
  .desktop-app-shell {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    padding: 18px 18px 0;
    transition: grid-template-columns 180ms ease, gap 180ms ease;
  }

  .desktop-app-shell > main {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
  }

  .desktop-side-navigation {
    position: fixed;
    top: var(--desktop-navigation-top, 106px);
    left: 18px;
    width: 252px;
    max-height: var(--desktop-navigation-height, calc(100dvh - 118px));
    opacity: 1;
    transform: translateX(0);
    transition: opacity 150ms ease, transform 180ms ease;
  }

  body.desktop-navigation-closed .desktop-app-shell {
    grid-template-columns: 0 minmax(0, 1fr);
    gap: 0;
  }

  body.desktop-navigation-closed .desktop-side-navigation {
    pointer-events: none;
    opacity: 0;
    transform: translateX(-24px);
  }

  .desktop-navigation-backdrop {
    display: none !important;
  }

  #managePanel,
  #managePanel .settings-layout,
  #managePanel .settings-layout > div,
  #managePanel .settings-content,
  #managePanel .admin-block {
    min-width: 0;
    max-width: 100%;
  }

  #managePanel .settings-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  #managePanel .settings-content .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #projectPlatform .photo-doc-card .doc-calendar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
  }

  #projectPlatform .photo-doc-card .doc-calendar > * {
    min-width: 0;
  }

  body.desktop-navigation-open #mainHomePanel > * {
    min-width: 0;
  }

  body.desktop-navigation-open #homeTimeClockCard {
    container-type: inline-size;
  }

  body.desktop-navigation-open #mainHomePanel .home-time-clock {
    max-width: 100%;
    font-size: clamp(54px, 15cqi, 92px);
    white-space: nowrap;
  }
}

@media (min-width: 761px) {
  body.fachbauleiter-desktop:not(.force-mobile-preview) #mainHomePanel > :not(#homeProjectShortcutCard) {
    display: none !important;
  }
  body.fachbauleiter-desktop:not(.force-mobile-preview):not(.content-focused) #mainHomePanel {
    display: block;
    grid-template-columns: minmax(0, 1fr);
  }
  body.fachbauleiter-desktop.fachbauleiter-desktop-empty-home:not(.force-mobile-preview) #mainHomePanel {
    display: none !important;
  }
  body.fachbauleiter-desktop:not(.force-mobile-preview) :is(#mainHomePanel, .table-area-title) {
    scroll-margin-top: var(--desktop-navigation-top, 106px);
  }
}

@media (min-width: 1180px) and (max-width: 1539px) {
  body.desktop-navigation-open #mainHomePanel {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1540px) {
  body.desktop-navigation-open #mainHomePanel {
    grid-template-columns: minmax(500px, 0.9fr) minmax(0, 1.1fr);
  }
}

@media (min-width: 1180px) {
  body.force-mobile-preview .desktop-side-navigation {
    position: sticky;
    top: 18px;
    left: auto;
    max-height: calc(100dvh - 36px);
  }
}

@media (min-width: 761px) and (max-width: 1179px) {
  .desktop-side-navigation {
    position: fixed;
    top: var(--desktop-navigation-top, 106px);
    bottom: 12px;
    left: 12px;
    max-height: var(--desktop-navigation-height, calc(100dvh - 118px));
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(-100% - 24px));
    transition: opacity 150ms ease, transform 180ms ease;
  }

  body.desktop-navigation-overlay-open .desktop-side-navigation {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  body.desktop-navigation-overlay-open .desktop-navigation-backdrop {
    display: block;
  }
  body.force-mobile-preview .desktop-side-navigation {
    top: 12px;
    max-height: calc(100dvh - 24px);
  }
}

@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  body > header .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .desktop-app-shell {
    display: block;
  }

  .desktop-side-navigation,
  .desktop-navigation-backdrop,
  .desktop-navigation-toggle {
    display: none !important;
  }
}

/* Antraege verwenden dieselbe ruhige, safe-area-feste Navigationssprache wie
   die Projektplattform. Symbole und Aktionsgeometrie bleiben lokal gekapselt,
   damit allgemeine Button-Regeln sie nicht wieder ueberschreiben. */
#leaveRequestPanel .request-action-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid var(--bbs-line);
  border-radius: 12px;
  background: var(--bbs-green-50);
  color: var(--bbs-green-800);
}

#leaveRequestPanel :is(.request-action-icon, .tab-icon, .request-primary-send) svg {
  display: block;
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#leaveRequestPanel .request-primary-send svg {
  width: 24px;
  height: 24px;
}

#leaveRequestPanel .request-action-tile > span:last-child {
  min-width: 0;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 900px) {
  #leaveRequestPanel,
  body.force-mobile-preview #leaveRequestPanel {
    --bbs-mobile-request-nav-height: 66px;
    padding-bottom: calc(var(--bbs-mobile-request-nav-height) + env(safe-area-inset-bottom, 0px) + 16px) !important;
  }

  #leaveRequestPanel .bbs-mobile-tabbar,
  body.force-mobile-preview #leaveRequestPanel .bbs-mobile-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 96;
    box-sizing: border-box;
    display: flex !important;
    flex-flow: row nowrap;
    align-items: start;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--bbs-mobile-request-nav-height) + env(safe-area-inset-bottom, 0px));
    margin: 0 !important;
    padding:
      5px max(6px, env(safe-area-inset-right, 0px))
      calc(5px + env(safe-area-inset-bottom, 0px))
      max(6px, env(safe-area-inset-left, 0px)) !important;
    border-top: 1px solid var(--bbs-line);
    background: rgba(255, 254, 250, 0.97);
    box-shadow: 0 -10px 30px rgba(11, 47, 32, 0.09);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  #leaveRequestPanel .mobile-request-tab,
  body.force-mobile-preview #leaveRequestPanel .mobile-request-tab {
    box-sizing: border-box;
    display: flex !important;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: calc(100% - 6px) !important;
    min-width: 44px !important;
    max-width: none;
    min-height: 56px !important;
    height: 56px !important;
    margin: 0 3px;
    padding: 4px 2px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--bbs-muted) !important;
    text-align: center;
  }

  #leaveRequestPanel .mobile-request-tab.active,
  body.force-mobile-preview #leaveRequestPanel .mobile-request-tab.active {
    border-color: transparent !important;
    background: var(--bbs-green-50) !important;
    color: var(--bbs-green-800) !important;
  }

  #leaveRequestPanel .mobile-request-tab:focus-visible {
    outline: 3px solid rgba(25, 162, 74, 0.28);
    outline-offset: -3px;
  }

  #leaveRequestPanel .mobile-request-tab .tab-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    margin: 0;
    border-radius: 9px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: inherit;
  }

  #leaveRequestPanel .mobile-request-tab .tab-icon svg {
    width: 20px;
    height: 20px;
  }

  #leaveRequestPanel .mobile-request-tab .tab-label {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    color: inherit;
    font-size: clamp(10.5px, 3.15vw, 12px);
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
  }

  #leaveRequestPanel .sick-section > .form-actions,
  body.force-mobile-preview #leaveRequestPanel .sick-section > .form-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100%;
    min-width: 0;
  }

  #leaveRequestPanel .sick-section > .form-actions .request-action-tile,
  body.force-mobile-preview #leaveRequestPanel .sick-section > .form-actions .request-action-tile {
    display: grid !important;
    grid-template-rows: 36px auto;
    place-items: center;
    align-content: center;
    gap: 6px;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 86px !important;
    height: 86px !important;
    padding: 8px 4px !important;
    border: 1px solid var(--bbs-line) !important;
    border-radius: 14px !important;
    background: var(--bbs-sage-50) !important;
    color: var(--bbs-ink-soft) !important;
    box-shadow: none !important;
    font-size: clamp(11px, 3.1vw, 13px) !important;
    text-align: center;
  }

  #leaveRequestPanel .sick-section > .form-actions .request-action-tile:is(:hover, :focus-visible) {
    border-color: var(--bbs-line-strong) !important;
    background: var(--bbs-green-50) !important;
    color: var(--bbs-green-800) !important;
  }
}

.task-description-tool .bbs-icon,
.material-ai-button .bbs-icon,
.downloaded-check-icon {
  width: 18px;
  height: 18px;
}

.task-description-tool .bbs-icon {
  margin-right: 6px;
}

.mobile-project-section-toggle,
.leave-status.org-approved {
  align-items: center;
  gap: 7px;
}

.project-nav-pin {
  color: var(--bbs-green-700);
  font-size: 0;
}

.camera-review-check:not(:checked) + .camera-review-check-mark {
  opacity: 0;
  visibility: hidden;
}

.camera-review-check:checked + .camera-review-check-mark {
  opacity: 1;
  visibility: visible;
}

/* A foreground modal must be the only visible action layer. */
body:has(#editModal.active) .doc-overview-add,
body:has(#editModal.active) .task-global-add-fab,
body:has(#editModal.active) .material-add-fab {
  visibility: hidden;
  pointer-events: none;
}

.time-day,
.doc-day {
  border-radius: 10px;
}

.time-day.selected,
.doc-day.selected {
  border-color: var(--bbs-green-500);
  box-shadow: inset 0 0 0 1px var(--bbs-green-500);
}

/* Chat */
.chat-people {
  gap: 8px;
  padding: 10px;
}

.chat-person,
body.admin-view .chat-person,
body.employee-view .chat-person {
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--bbs-line);
  border-radius: var(--bbs-radius-sm);
  background: var(--bbs-paper);
  box-shadow: none;
  color: var(--bbs-ink);
}

.chat-person:hover,
body.admin-view .chat-person:hover,
body.employee-view .chat-person:hover {
  border-color: var(--bbs-green-200);
  background: var(--bbs-sage-50);
}

.chat-person.active,
body.admin-view .chat-person.active,
body.employee-view .chat-person.active {
  border-color: var(--bbs-green-200);
  background: var(--bbs-green-50);
  color: var(--bbs-green-900);
}

.chat-person strong {
  font-size: 14px;
  font-weight: 680;
}

.chat-avatar {
  border: 1px solid var(--bbs-line);
  background: var(--bbs-sage-50);
  color: var(--bbs-ink-soft);
  font-weight: 700;
}

.chat-title {
  border-bottom: 1px solid var(--bbs-line);
  background: var(--bbs-surface);
  color: var(--bbs-ink);
}

.chat-messages,
body.admin-view .chat-messages,
body.employee-view .chat-messages {
  background:
    radial-gradient(circle at 20% 10%, rgba(223, 240, 228, 0.72), transparent 34%),
    var(--bbs-sage-50);
}

.chat-bubble,
body.admin-view .chat-bubble,
body.employee-view .chat-bubble {
  border-color: var(--bbs-line);
  border-radius: 16px 16px 16px 5px;
  background: #fff;
  box-shadow: var(--bbs-shadow-xs);
  color: var(--bbs-ink);
}

.chat-bubble.mine,
body.admin-view .chat-bubble.mine,
body.employee-view .chat-bubble.mine {
  border-color: var(--bbs-green-100);
  border-radius: 16px 16px 5px 16px;
  background: var(--bbs-green-100);
}

.chat-compose {
  border-top: 1px solid var(--bbs-line);
  background: rgba(255, 255, 255, 0.94);
}

/* Kalender, Fotos, Lieferscheine, Aufgaben */
.doc-calendar,
.doc-day,
.doc-detail-card,
.doc-day-image-tile,
.delivery-mobile-card,
.task-card,
.material-request-row {
  border-color: var(--bbs-line);
}

.doc-day.today,
.time-day.today {
  outline-offset: -2px;
}

.time-day.today {
  outline: 2px solid var(--bbs-ink-soft);
}

.doc-day {
  border-color: var(--bbs-line) !important;
  background: var(--bbs-paper) !important;
  color: var(--bbs-ink) !important;
}

.doc-day:hover,
.doc-day.has-content:hover {
  border-color: var(--bbs-green-200) !important;
  background: var(--bbs-green-50) !important;
  color: var(--bbs-green-900) !important;
}

.doc-day.has-content,
.task-card,
.delivery-mobile-card,
.material-request-row {
  background: var(--bbs-surface);
}

.doc-day.has-content:hover,
.task-card:hover,
.delivery-mobile-card:hover,
.material-request-row:hover {
  background: var(--bbs-green-50);
}

.doc-detail-section + .doc-detail-section {
  margin-top: var(--bbs-space-2);
  padding-top: var(--bbs-space-5);
  border-top: 1px solid var(--bbs-line);
}

@media (min-width: 901px) {
  #projectPlatform .project-main-area.project-section-delivery .delivery-table-wrap .time-month-table th,
  #projectPlatform .project-main-area.project-section-delivery .delivery-table-wrap .time-month-table td {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #projectPlatform .project-main-area.project-section-delivery .delivery-table-wrap .delivery-action-links {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  #projectPlatform .project-main-area.project-section-delivery .delivery-table-wrap .delivery-action-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    flex: 0 1 auto;
  }
}

@media (min-width: 901px) and (max-width: 1099px) {
  #projectPlatform .project-main-area.project-section-delivery .delivery-table-wrap {
    display: none !important;
  }

  #projectPlatform .project-main-area.project-section-delivery .delivery-mobile-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bbs-space-3);
  }

  #projectPlatform .project-main-area.project-section-delivery .delivery-mobile-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bbs-space-3) var(--bbs-space-5);
    min-width: 0;
    padding: var(--bbs-space-4);
    border: 1px solid var(--bbs-line);
    border-radius: var(--bbs-radius-md);
    background: var(--bbs-surface);
  }

  #projectPlatform .project-main-area.project-section-delivery .delivery-mobile-card > div {
    min-width: 0;
  }

  #projectPlatform .project-main-area.project-section-delivery .delivery-mobile-card strong,
  #projectPlatform .project-main-area.project-section-delivery .delivery-mobile-card .delivery-file-btn {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #projectPlatform .project-main-area.project-section-delivery .delivery-mobile-card .delivery-action-links,
  #projectPlatform .project-main-area.project-section-delivery .delivery-mobile-card > .leave-status {
    grid-column: 1 / -1;
  }
}

.doc-detail-heading {
  margin-bottom: var(--bbs-space-3);
  color: var(--bbs-ink);
}

.doc-detail-heading strong {
  font-size: 15px;
  font-weight: 700;
}

.doc-detail-heading .doc-line-icon {
  color: var(--bbs-green-800);
}

.doc-detail-heading small {
  background: var(--bbs-sage-100);
  color: var(--bbs-muted);
}

.doc-detail-event,
.doc-detail-note,
.doc-detail-delivery {
  min-height: 54px;
  border: 1px solid var(--bbs-line);
  border-left: 3px solid var(--bbs-green-200);
  border-radius: var(--bbs-radius-sm);
  background: var(--bbs-paper);
  box-shadow: none;
  color: var(--bbs-ink);
}

.doc-detail-event:hover,
.doc-detail-note:hover,
.doc-detail-delivery:hover {
  border-color: var(--bbs-green-200);
  background: var(--bbs-sage-50);
}

.doc-detail-delivery {
  border-left-color: var(--bbs-warning);
  background: #fffaf0;
}

.doc-detail-event strong,
.doc-detail-note strong,
.doc-detail-delivery strong {
  font-weight: 680;
}

.doc-detail-event small,
.doc-detail-note small,
.doc-detail-delivery small {
  color: var(--bbs-muted);
}

.doc-day-gallery {
  align-items: stretch;
}

.doc-day-gallery .doc-bulk-item,
.doc-day-image-tile,
.doc-day-image-tile .bbs-image-load-frame--tile,
.doc-day-image-tile img {
  width: 100%;
  aspect-ratio: 1;
}

.doc-day-image-tile {
  min-height: 0;
  padding: 0 !important;
  border: 1px solid var(--bbs-line) !important;
  border-radius: var(--bbs-radius-sm);
  background: var(--bbs-sage-100) !important;
  box-shadow: none;
  color: var(--bbs-ink) !important;
}

.doc-day-gallery-more {
  border-color: var(--bbs-line-strong) !important;
  background: var(--bbs-sage-100) !important;
  color: var(--bbs-green-900) !important;
}

.doc-day-image-tile img {
  display: block;
  object-fit: cover;
}

.doc-day-date {
  color: var(--bbs-muted);
  font-size: 13px;
}

.task-add-floating,
.task-global-add-fab,
.material-add-fab,
.doc-overview-add,
.doc-day-floating-add {
  border: 1px solid var(--bbs-button-primary-border);
  background: var(--bbs-button-primary-bg);
  box-shadow: 0 8px 22px rgba(20, 92, 47, 0.12);
  color: var(--bbs-button-primary-text);
}

/* Ein erledigter Aufgabenstatus bleibt in allen Rollen als ruhiger Haken
   erkennbar. Offene und laufende Aufgaben behalten ihre Statuspunkte. */
.task-status.task-status-dot.done,
.task-card-compact .task-status.task-status-dot.done {
  position: relative;
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  padding: 0 !important;
  border: 1px solid var(--bbs-green-200) !important;
  border-radius: 50% !important;
  background: var(--bbs-green-100) !important;
  box-shadow: none !important;
}

.task-status.task-status-dot.done::after,
.task-card-compact .task-status.task-status-dot.done::after {
  content: "";
  width: 8px;
  height: 4px;
  border-bottom: 2px solid var(--bbs-green-800);
  border-left: 2px solid var(--bbs-green-800);
  transform: translateY(-1px) rotate(-45deg);
}

.task-status-choice.done.selected {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: var(--bbs-green-200) !important;
  background: var(--bbs-green-100) !important;
  box-shadow: inset 0 0 0 1px var(--bbs-green-200) !important;
  color: var(--bbs-green-900) !important;
}

.task-status-choice.done.selected::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 4px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translateY(-1px) rotate(-45deg);
}

/* Abweichungen bleiben fachlich sichtbar, ohne als harte Vollgruenflaeche
   aus der ansonsten milden Stundenansicht herauszufallen. */
.time-day.deviation-hours {
  border-color: #879e8d !important;
  background: #dce8df !important;
  color: var(--bbs-green-950) !important;
}

.time-day.deviation-hours .time-entry-dot {
  background: var(--bbs-green-800) !important;
}

.time-color-dot.deviation {
  border-color: #879e8d !important;
  background: #dce8df !important;
}

/* Mitarbeiter sehen gespeicherte Fachhinweise als ruhigen Statuspunkt. Die
   vollstaendigen Gruende bleiben ueber eine ausreichend grosse Aktion erreichbar. */
.employee-time-entry-row {
  align-items: start;
}

.time-entry-row-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
}

.time-entry-notice-button {
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 var(--bbs-touch-target);
  width: var(--bbs-touch-target) !important;
  min-width: var(--bbs-touch-target) !important;
  height: var(--bbs-touch-target) !important;
  min-height: var(--bbs-touch-target) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bbs-green-900) !important;
}

.time-entry-notice-button:hover,
.time-entry-notice-button:focus-visible {
  background: rgba(220, 232, 223, 0.72) !important;
}

.time-entry-notice-button:focus-visible {
  outline: 2px solid #879e8d;
  outline-offset: 1px;
}

.time-entry-notice-dot {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #879e8d;
  border-radius: 999px;
  background: #dce8df;
  box-shadow: inset 0 0 0 3px var(--bbs-green-800);
}

#editModal.time-entry-notice-modal {
  align-items: center;
  justify-content: center;
}

#editModal.time-entry-notice-modal > .edit-modal {
  width: min(440px, calc(100vw - 24px));
  margin: auto;
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
}

#editModal.time-entry-notice-modal #editModalMessage {
  text-align: center;
}

#editModal.time-entry-notice-modal #editModalFields {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.time-entry-notice-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.time-entry-notice-list li {
  position: relative;
  padding: 12px 14px 12px 34px;
  border: 1px solid #b9c9bd;
  border-radius: var(--bbs-radius-md);
  background: rgba(220, 232, 223, 0.58);
  color: var(--bbs-green-950);
  line-height: 1.45;
}

.time-entry-notice-list li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--bbs-green-800);
}

#editModal.time-entry-notice-modal #editModalActions:empty {
  display: none !important;
}

/* Der hardwaregetestete Pruefviewer behaelt seine freigegebene Aktivfarbe. */
body .plan-review-viewer-prototype .plan-review-header-controls .plan-review-supervisor-toggle.active {
  background: transparent !important;
  color: #168642 !important;
  transition: none !important;
}

/* Im hellen Prüfviewer wird das Schließen-X als echtes Linien-SVG gerendert.
   Damit bleibt es unabhängig von Textfarbe und -webkit-text-fill sichtbar. */
body .plan-review-viewer-prototype .plan-review-header-controls .mobile-pdf-close,
body .plan-review-viewer-prototype .plan-review-work-close {
  color: #0f172a !important;
  -webkit-text-fill-color: currentColor !important;
}

body .plan-review-viewer-prototype .plan-review-header-controls .mobile-pdf-close::before {
  content: none !important;
}

body .plan-review-viewer-prototype .plan-review-header-controls .mobile-pdf-close .bbs-icon,
body .plan-review-viewer-prototype .plan-review-work-close .bbs-icon {
  display: block;
  width: 22px;
  height: 22px;
  color: #0f172a;
  stroke-width: 2;
}

/* Einheitliche Dialogsprache. Spezialviewer bleiben ausgeschlossen. */
.modal-backdrop:not(.camera-fullscreen):not(.camera-gallery-fullscreen):not(.mobile-pdf-fullscreen):not(.plan-review-prototype) {
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(11, 32, 23, 0.46);
  backdrop-filter: blur(8px);
}

.modal-backdrop:not(.camera-fullscreen):not(.camera-gallery-fullscreen):not(.mobile-pdf-fullscreen):not(.plan-review-prototype) > .edit-modal {
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 24px));
  height: auto;
  max-width: min(760px, calc(100vw - 24px));
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  overflow: hidden;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: var(--bbs-radius-xl);
  background: var(--bbs-paper);
  box-shadow: var(--bbs-shadow-md);
  color: var(--bbs-ink);
}

/* Der Stundenkalender-Hinweis ist ein echter Dialog. Seine Aktionszeile liegt
   immer innerhalb der Safe Area und der Inhalt scrollt getrennt davon. */
#editModal.time-color-legend-modal > .edit-modal {
  display: flex;
  flex-direction: column;
  width: min(620px, calc(100vw - 24px));
  height: auto !important;
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
}

#editModal.time-color-legend-modal #editModalFields {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#editModal.time-color-legend-modal #editModalActions {
  position: static !important;
  z-index: auto;
  flex: 0 0 auto;
  margin: 14px 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--bbs-line);
  background: var(--bbs-paper) !important;
  box-shadow: none !important;
}

#editModal.time-color-legend-modal #editModalActions > button {
  width: 100%;
  min-height: var(--bbs-touch-target);
}

.edit-modal-title-row {
  min-height: 44px;
  margin: -4px 0 12px;
  padding: 0;
  border: 0;
}

.edit-modal-title-row > h2,
#editModalTitle {
  margin: 0;
  color: var(--bbs-ink);
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 760;
  line-height: 1.2;
}

.modal-x-button,
.modal-plain-close {
  display: grid;
  place-items: center;
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--bbs-ink-soft);
  font-size: 0;
}

.modal-x-button:hover,
.modal-plain-close:hover {
  border-color: var(--bbs-green-100);
  background: var(--bbs-green-50);
  color: var(--bbs-green-800);
}

#editModalMessage:not(:empty) {
  margin-bottom: 14px;
  color: var(--bbs-muted);
  line-height: 1.5;
}

#editModalFields {
  min-width: 0;
  max-width: 100%;
}

#editModalFields > *,
#editModalFields .grid > *,
#editModalFields .doc-form-grid > *,
#editModalFields .doc-entry-form > * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

#editModalFields :is(input, select, textarea, button) {
  box-sizing: border-box;
  max-width: 100%;
}

#editModalActions {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
  gap: 10px;
  margin-top: 18px;
  padding-right: 0;
  padding-left: 0;
  padding-top: 16px;
  border-top: 1px solid var(--bbs-line);
  background: transparent;
}

#editModalActions > button,
#editModalActions > a.button {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

#editModal.photo-insert-sheet #editModalActions {
  grid-template-columns: minmax(0, 1fr);
}

#editModal.photo-insert-sheet #editModalActions > button {
  width: 100%;
  min-height: var(--bbs-touch-target);
}

/* Der Stundeneintrags-Editor besitzt einen festen Kopf, einen einzigen
   scrollbaren Formularbereich und eine statische, zentrierte Speicheraktion. */
#editModal.time-entry-edit-modal {
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

#editModal.time-entry-edit-modal > .edit-modal {
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 24px));
  height: auto;
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  overflow: hidden;
}

#editModal.time-entry-edit-modal .edit-modal-title-row {
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  margin: 0 0 8px;
}

#editModal.time-entry-edit-modal .edit-modal-title-row > h2 {
  margin: 0;
}

#editModal.time-entry-edit-modal .edit-modal-title-actions {
  align-self: center;
  align-items: center;
  margin: 0 0 0 auto;
}

#editModal.time-entry-edit-modal :where(#editModalDeleteIcon, #editModalCancelX) {
  align-self: center;
  margin: 0 !important;
}

#editModal.time-entry-edit-modal #editModalMessage {
  flex: 0 0 auto;
  max-height: none;
  margin: 0 0 12px;
  overflow: visible;
}

#editModal.time-entry-edit-modal #editModalFields {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px 4px 14px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

#editModal.time-entry-edit-modal #editModalActions {
  position: static !important;
  z-index: auto;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  width: 100%;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--bbs-line);
  background: var(--bbs-paper) !important;
  box-shadow: none !important;
}

#editModal.time-entry-edit-modal #editModalActions > button:not(.delete-action-replaced):not(.cancel-action-replaced) {
  width: min(100%, 460px);
  min-height: var(--bbs-touch-target);
  margin: 0 auto;
}

#editModal.time-entry-edit-modal .ceiling-check:has(input:disabled) {
  color: var(--bbs-muted);
  opacity: 0.72;
}

/* Der Fachbauleiter-Tagesdialog folgt derselben stabilen Struktur wie der
   einzelne Stundeneditor: Kopf und Speicheraktion bleiben stehen, nur der
   fachliche Inhalt scrollt innerhalb der iPhone-Safe-Area. */
#editModal.admin-time-day-modal {
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}

#editModal.admin-time-day-modal > .edit-modal {
  display: flex;
  flex-direction: column;
  width: min(980px, 100%);
  height: auto;
  max-height: 100%;
  overflow: hidden;
}

#editModal.admin-time-day-modal .edit-modal-title-row {
  flex: 0 0 auto;
  align-items: center;
  min-height: var(--bbs-touch-target);
  margin: 0 0 6px;
}

#editModal.admin-time-day-modal .edit-modal-title-row > h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

#editModal.admin-time-day-modal .edit-modal-title-actions {
  flex: 0 0 auto;
  align-self: center;
  align-items: center;
  margin-left: auto;
}

#editModal.admin-time-day-modal #editModalCancelX {
  align-self: center;
  margin: 0 !important;
}

#editModal.admin-time-day-modal #editModalMessage {
  flex: 0 0 auto;
  max-height: none;
  margin: 0 0 12px;
  overflow: visible;
}

#editModal.admin-time-day-modal #editModalFields {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 2px 4px 16px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

#editModal.admin-time-day-modal #editModalActions {
  position: static !important;
  z-index: auto;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  width: 100%;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--bbs-line);
  background: var(--bbs-paper) !important;
  box-shadow: none !important;
}

#editModal.admin-time-day-modal #editModalActions > button:not(.cancel-action-replaced) {
  width: min(100%, 460px);
  min-height: var(--bbs-touch-target);
  margin: 0 auto;
}

#editModal.admin-time-day-modal .admin-time-entry-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bbs-touch-target);
  align-items: center;
  gap: 10px;
}

#editModal.admin-time-day-modal .admin-time-entry-actions > .secondary {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

#editModal.admin-time-day-modal .admin-time-entry-actions > .danger,
#editModal.admin-time-day-modal .admin-time-entry-actions > .delete-action-replaced {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

#editModal.admin-time-day-modal .admin-time-entry-actions > .time-compare-cell {
  grid-column: 1 / -1;
  grid-row: 2;
}

#editModal .time-entry-overlap-field {
  border-color: var(--bbs-danger, #c62828) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bbs-danger, #c62828) 22%, transparent) !important;
}

/* Auf dem Desktop besitzt das Stundenfenster genau einen Scrollbereich:
   den Dialoginhalt zwischen fester Überschrift und fester Aktionsleiste. */
@media (min-width: 761px) {
  body:not(.real-mobile-app):not(.force-mobile-preview)
  #editModal:is(.time-entry-edit-modal, .admin-time-day-modal) > .edit-modal > #editModalScroll {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body:not(.real-mobile-app):not(.force-mobile-preview)
  #editModal:is(.time-entry-edit-modal, .admin-time-day-modal) #editModalFields {
    flex: none;
    min-height: auto;
    max-height: none;
    padding-right: 0;
    overflow: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }
}

@media (min-width: 761px) {
  body:not(.force-mobile-preview) #editModal.admin-time-day-modal .admin-time-compare-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
  }

  body:not(.force-mobile-preview) #editModal.admin-time-day-modal button.admin-time-compare-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--bbs-line);
    border-radius: 12px;
    background: var(--bbs-paper);
    color: inherit;
    text-align: left;
    box-shadow: none;
  }

  body:not(.force-mobile-preview) #editModal.admin-time-day-modal button.admin-time-compare-row:hover,
  body:not(.force-mobile-preview) #editModal.admin-time-day-modal button.admin-time-compare-row:focus-visible {
    border-color: var(--bbs-green);
    background: var(--bbs-green-soft);
  }

  body:not(.force-mobile-preview) #editModal.admin-time-day-modal button.admin-time-compare-row > span {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  body:not(.force-mobile-preview) #editModal.admin-time-day-modal button.admin-time-compare-row > span:last-child {
    justify-items: end;
    text-align: right;
  }

  body:not(.force-mobile-preview) #editModal.admin-time-day-modal button.admin-time-compare-row small {
    color: var(--bbs-muted);
    font-size: 0.78rem;
    font-weight: 600;
  }
}

@media (max-width: 760px) {
  #editModal.time-entry-edit-modal > .edit-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding: 18px;
  }

  #editModal.time-entry-edit-modal #editModalFields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 14px;
  }

  #editModal.time-entry-edit-modal #editModalFields > div {
    grid-column: 1 / -1;
  }

  #editModal.time-entry-edit-modal #editModalFields > div:nth-child(3) {
    grid-column: 1;
  }

  #editModal.time-entry-edit-modal #editModalFields > div:nth-child(4) {
    grid-column: 2;
  }

  #editModal.admin-time-day-modal {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }

  #editModal.admin-time-day-modal > .edit-modal {
    width: 100%;
    max-width: 100%;
    padding: 18px;
  }

  #editModal.admin-time-day-modal .admin-time-entry-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  }

  #editModal.admin-time-day-modal .admin-time-entry-grid :is(.wide, .full) {
    grid-column: 1 / -1;
  }

  #editModal.admin-time-day-modal .admin-time-entry-grid :is(
    .admin-time-field-date,
    .admin-time-field-section,
    .admin-time-field-floor,
    .admin-time-field-ceiling
  ) {
    grid-column: 1 / -1;
  }

  #editModal.admin-time-day-modal .admin-time-field-date input[type="date"] {
    inline-size: 100%;
    width: 100%;
  }
}

/* Der Kalender hat eine eigene, klar gegliederte Werkzeugleiste. Auf breiten
   Ansichten bleibt sie kompakt; schmale Ansichten ordnen dieselben Aktionen
   ohne geraetespezifische Sonderfaelle in zwei Zeilen an. */
.time-calendar-toolbar {
  align-items: center;
}

.time-calendar-toolbar > h3 {
  min-width: 0;
  margin: 0;
}

.time-calendar-controls {
  display: grid;
  grid-template-columns: 44px minmax(120px, 210px) 44px 44px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.time-calendar-controls .time-register-fab {
  display: none;
}

#timeCalendarCard .time-calendar-controls > .time-month-arrow {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
}

/* Die Monatsaufstellung ist eine eigene responsive Gesamtansicht. Dieselbe
   Monatsvariable steuert Kalender, Desktop-Tabelle und mobile Tageskarten. */
.time-month-overview-launch {
  display: block;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bbs-line);
}

.time-month-overview-launch > #openTimeMonthOverviewButton {
  width: 100%;
  min-height: 50px;
  margin: 0;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.time-month-overview-modal {
  align-items: center;
  justify-content: center;
}

#timeMonthOverviewModal > .time-month-overview-dialog {
  display: flex;
  flex-direction: column;
  width: min(1180px, calc(100vw - 32px));
  height: min(860px, calc(100dvh - 32px));
  max-width: none;
  max-height: calc(100dvh - max(32px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  min-height: 0;
  overflow: hidden;
}

.time-month-overview-head {
  flex: 0 0 auto;
  align-items: flex-start;
  margin-bottom: 8px;
}

.time-month-overview-head > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

#timeMonthOverviewClose {
  flex: 0 0 44px;
  margin: 0 !important;
}

.time-month-overview-head .small-info {
  margin-top: 3px;
}

.time-month-overview-navigation {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px;
  border: 1px solid var(--bbs-line);
  border-radius: var(--bbs-radius-md);
  background: var(--bbs-sage-50);
}

.time-month-overview-navigation > strong {
  min-width: 0;
  text-align: center;
  text-transform: capitalize;
}

.time-month-overview-navigation .time-month-overview-arrow {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px;
  padding: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--bbs-ink-soft);
  font-size: 28px;
  line-height: 1;
}

.time-month-overview-navigation .time-month-overview-arrow:disabled {
  color: var(--bbs-muted);
}

.time-month-overview-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.time-month-desktop-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.time-month-desktop-table .time-month-table {
  width: 100%;
}

.time-month-mobile-cards {
  display: none;
}

.time-month-day-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--bbs-line);
  border-radius: var(--bbs-radius-lg);
  background: var(--bbs-paper);
}

.time-month-day-card + .time-month-day-card {
  margin-top: 10px;
}

body .time-month-day-card > header {
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  min-height: 0;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--bbs-line);
  background: transparent;
  box-shadow: none;
  color: var(--bbs-ink);
}

/* Vollbildwerkzeuge behalten ihre eigene Geometrie. Der gemeinsame
   Inhaltswrapper ist dort layoutneutral und veraendert Kamera/PDF nicht. */
.modal-backdrop:is(.camera-fullscreen, .camera-gallery-fullscreen, .mobile-pdf-fullscreen, .mobile-image-fullscreen, .plan-review-prototype, .site-walk-recording-modal) > .edit-modal > .edit-modal-scroll {
  display: contents;
}

body .time-month-day-card > header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.time-month-day-name,
body .time-month-day-card > header span {
  overflow-wrap: anywhere;
}

body .time-month-day-card > header span {
  color: var(--bbs-muted);
  font-size: 13px;
}

.time-month-day-state {
  flex: 0 1 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--bbs-green-50);
  color: var(--bbs-green-800) !important;
  font-weight: 700;
  text-align: right;
}

.time-month-day-card.missing .time-month-day-state {
  background: #fff1ee;
  color: var(--bbs-danger) !important;
}

.time-month-day-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.time-month-day-details > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.time-month-day-details span {
  color: var(--bbs-muted);
  font-size: 12px;
}

.time-month-day-details strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--bbs-ink);
  font-size: 14px;
}

.toast,
.server-save-status,
.auth-feedback,
.inline-feedback {
  border: 1px solid var(--bbs-line);
  border-radius: var(--bbs-radius-md);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--bbs-shadow-md);
  color: var(--bbs-ink);
}

/* Wiederverwendbares Icon-System */
.bbs-icon {
  flex: 0 0 auto;
  pointer-events: none;
}

.bbs-icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

.bbs-button-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bbs-info-button {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  width: 32px;
  min-height: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--bbs-line);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--bbs-muted);
}

.bbs-context-help {
  width: fit-content;
  max-width: 100%;
  margin-top: 12px;
  color: var(--bbs-muted);
}

.bbs-context-help > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--bbs-muted);
  font-size: 12px;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.bbs-context-help > summary::-webkit-details-marker {
  display: none;
}

.bbs-context-help > summary:hover,
.bbs-context-help[open] > summary {
  border-color: var(--bbs-line);
  background: var(--bbs-surface);
  color: var(--bbs-green-800);
}

.bbs-context-help > summary svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bbs-context-help > .legend {
  max-width: 680px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--bbs-line);
  border-radius: var(--bbs-radius-sm);
  background: var(--bbs-surface);
  box-shadow: var(--bbs-shadow-xs);
}

body:has(#timeTrackingPanel.active) > main > .bbs-context-help,
body:has(#timeTrackingPanel.active) > .desktop-app-shell > main > .bbs-context-help {
  display: none;
}

/* Die Swipe-Vorschau verwendet die echten Panels. Dadurch bleiben alle
   komponenten- und ID-basierten Designregeln auch waehrend der Bewegung aktiv. */
body .mobile-swipe-stage #mainHomePanel.mobile-swipe-live-panel {
  display: grid !important;
}

body .mobile-swipe-stage #mainHomePanel.mobile-swipe-live-panel,
body .mobile-swipe-stage #timeTrackingPanel.mobile-swipe-live-panel {
  width: var(--mobile-swipe-panel-width, 100%) !important;
  max-width: var(--mobile-swipe-panel-width, 100%) !important;
  margin-left: var(--mobile-swipe-panel-left, 0) !important;
  margin-right: 0 !important;
}

body .mobile-swipe-stage #timeTrackingPanel.mobile-swipe-live-panel {
  display: block !important;
}

@media (max-width: 900px) {
  body > header,
  body.admin-view > header,
  body.employee-view > header {
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    padding: calc(7px + env(safe-area-inset-top, 0px)) 12px 7px;
  }

  body:has(> .environment-banner:not(.hidden)) > header,
  body.admin-view:has(> .environment-banner:not(.hidden)) > header,
  body.employee-view:has(> .environment-banner:not(.hidden)) > header {
    min-height: 58px;
    padding-top: 7px;
  }

  body > header .app-logo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  body > header h1 {
    font-size: 17px;
  }

  body > header .sub {
    display: none;
  }
}

@media (max-width: 760px) {
  :root {
    --bbs-control-height: 44px;
  }

  body,
  body.admin-view,
  body.employee-view {
    font-size: 14px;
    background: var(--bbs-sage-50);
  }

  main {
    width: 100%;
    padding: 12px;
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .form-panel,
  .home-card,
  .time-card,
  .account-box,
  .file-card,
  .storage-card,
  .settings-content {
    padding: 16px;
    border-radius: 18px;
  }

  .main-home-panel,
  .leave-summary,
  .data-list,
  .file-list,
  .project-grid,
  .settings-layout {
    gap: 10px;
  }

  .settings-head,
  .time-card-head,
  .table-area-title,
  .project-page-head,
  .material-page-head {
    margin-bottom: 14px;
    padding-bottom: 10px;
  }

  h2 {
    font-size: 21px;
  }

  h3 {
    font-size: 17px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  select,
  textarea {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
  }

  .form-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-actions > button,
  .form-actions > a.button {
    width: 100%;
  }

  .summary-tile {
    padding: 13px;
    border-radius: 14px;
  }

  .summary-number {
    font-size: 19px;
  }

  .leave-summary > .summary-tile:first-child {
    grid-column: 1 / -1;
  }

  .leave-summary > .summary-tile:first-child .summary-number {
    overflow-wrap: anywhere;
    font-size: 18px;
  }

  .small-info,
  .auth-field-note,
  .project-meta,
  .file-meta,
  .note,
  .legend {
    font-size: 12px;
  }

  .modal-backdrop:not(.camera-fullscreen):not(.camera-gallery-fullscreen):not(.mobile-pdf-fullscreen):not(.plan-review-prototype) {
    align-items: center;
    justify-content: center;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(8px, env(safe-area-inset-left));
  }

  .modal-backdrop:not(.camera-fullscreen):not(.camera-gallery-fullscreen):not(.mobile-pdf-fullscreen):not(.plan-review-prototype) > .edit-modal {
    width: min(100%, 680px);
    max-width: 100%;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    padding: 18px 16px;
    border-radius: 24px;
  }

  #timeMonthOverviewModal > .time-month-overview-dialog {
    width: 100%;
    height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    max-height: none;
    padding: 16px 14px;
    border-radius: 22px;
  }

  .time-month-desktop-table {
    display: none;
  }

  .time-month-mobile-cards {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .time-month-day-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .edit-modal-title-row > h2,
  #editModalTitle {
    font-size: 22px;
  }

}

/* Die Projektbereiche verwenden auf allen Telefonbreiten genau eine kompakte
   untere Navigation. Die Safe Area wird nur an dieser aeusseren Leiste
   reserviert; der Projektinhalt haelt lediglich den passenden Platz frei. */
@media (max-width: 900px) {
  #projectPlatform,
  body.force-mobile-preview #projectPlatform {
    --bbs-mobile-project-nav-height: 66px;
    padding-bottom: calc(var(--bbs-mobile-project-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
  }

  #projectPlatformContent,
  body.force-mobile-preview #projectPlatformContent {
    padding-bottom: 12px !important;
  }

  #projectPlatform .project-section-switch,
  body.force-mobile-preview #projectPlatform .project-section-switch {
    box-sizing: border-box;
    display: flex !important;
    flex-flow: row nowrap;
    height: auto !important;
    min-height: 0 !important;
    padding: 5px max(6px, env(safe-area-inset-left, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-right, 0px)) !important;
    align-items: start !important;
  }

  #projectPlatform .project-section-switch button,
  body.force-mobile-preview #projectPlatform .project-section-switch button {
    box-sizing: border-box;
    flex: 1 1 0;
    justify-self: center;
    width: calc(100% - 6px) !important;
    min-width: 44px !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 4px 2px !important;
    border-radius: 12px !important;
  }

  #projectPlatform .project-section-switch button[data-project-section="tasks"]::before {
    content: "\2713";
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    transform: none;
  }

  #projectPlatform .project-section-switch button[data-project-section="tasks"]::after {
    content: none;
  }
}

/* Ein gemeinsames fluessiges Layout fuer alle Telefonbreiten einschliesslich
   Querformat. Die genannten Geraetebreiten sind nur Testpunkte. */
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  #managePanel .settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #managePanel,
  #managePanel .settings-layout,
  #managePanel .settings-layout > div,
  #managePanel .settings-content,
  #managePanel .admin-block,
  #managePanel .data-row,
  #managePanel .data-row-main {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #managePanel .row-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: stretch;
  }

  #managePanel .row-actions > button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #timeTrackingPanel .time-workspace,
  #timeTrackingPanel .time-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #timeTrackingPanel .time-workspace > div {
    min-width: 0;
  }

  #timeContentRegister {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  #timeCalendarCard {
    padding: clamp(12px, 4vw, 16px);
  }

  #timeCalendarCard .time-calendar-toolbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px 44px;
    grid-template-areas:
      "title title title info add"
      "previous period period period next";
    align-items: center;
    gap: clamp(6px, 2vw, 8px);
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  #timeCalendarCard .time-calendar-toolbar > h3 {
    grid-area: title;
    font-size: clamp(15px, 4.6vw, 17px);
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
  }

  #timeCalendarCard .settings-head .time-calendar-controls {
    display: contents;
  }

  #timeCalendarCard .time-calendar-controls > .time-month-arrow:first-child {
    grid-area: previous;
  }

  #timeCalendarCard #timePeriodPickerWrap {
    grid-area: period;
    width: 100%;
    max-width: none;
  }

  #timeCalendarCard #timeNextMonthButton {
    grid-area: next;
  }

  #timeCalendarCard .time-legend-info {
    grid-area: info;
    justify-self: end;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--bbs-line) !important;
    background: var(--bbs-paper) !important;
    color: var(--bbs-ink-soft) !important;
    box-shadow: none !important;
  }

  #timeTrackingPanel.active #timeCalendarCard .time-register-fab,
  #timeTrackingPanel.mobile-swipe-live-panel #timeCalendarCard .time-register-fab {
    position: static;
    grid-area: add;
    justify-self: end;
    z-index: auto;
    display: inline-grid;
    place-items: center;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: 28px !important;
    line-height: 1 !important;
  }

  #timeCalendarCard .time-month-arrow {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  #timeCalendarCard .time-calendar {
    width: 100%;
    min-width: 0;
  }

  #timeCalendarCard .time-day {
    min-height: clamp(44px, 12vmin, 56px) !important;
  }

  #timeCalendarCard .time-month-overview-launch {
    margin-top: 16px;
    padding-top: 14px;
  }
}

/* Die kuenstliche Mobilvorschau verwendet exakt dieselbe Komponentenlogik,
   auch wenn ihr Browserfenster breiter als ein Telefon ist. */
body.force-mobile-preview #timeContentRegister {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.force-mobile-preview #timeTrackingPanel .time-workspace,
body.force-mobile-preview #timeTrackingPanel .time-layout {
  grid-template-columns: minmax(0, 1fr);
}

body.force-mobile-preview #timeTrackingPanel .time-workspace > div {
  min-width: 0;
}

body.force-mobile-preview #timeCalendarCard {
  padding: clamp(12px, 4vw, 16px);
}

body.force-mobile-preview #timeCalendarCard .time-calendar-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px 44px 44px;
  grid-template-areas:
    "title title title info add"
    "previous period period period next";
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
}

body.force-mobile-preview #timeCalendarCard .time-calendar-toolbar > h3 {
  grid-area: title;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

body.force-mobile-preview #timeCalendarCard .settings-head .time-calendar-controls {
  display: contents;
}

body.force-mobile-preview #timeCalendarCard .time-calendar-controls > .time-month-arrow:first-child {
  grid-area: previous;
}

body.force-mobile-preview #timeCalendarCard #timePeriodPickerWrap {
  grid-area: period;
  width: 100%;
  max-width: none;
}

body.force-mobile-preview #timeCalendarCard #timeNextMonthButton {
  grid-area: next;
}

body.force-mobile-preview #timeCalendarCard .time-legend-info {
  grid-area: info;
  justify-self: end;
}

body.force-mobile-preview #timeTrackingPanel.active #timeCalendarCard .time-register-fab,
body.force-mobile-preview #timeTrackingPanel.mobile-swipe-live-panel #timeCalendarCard .time-register-fab {
  position: static;
  grid-area: add;
  justify-self: end;
  z-index: auto;
  display: inline-grid;
  place-items: center;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

/* Auf sehr schmalen WebKit-Ansichten brauchen die beiden 44px-Aktionen
   etwas weniger Zwischenraum, damit die Kalenderueberschrift einzeilig
   innerhalb der Karte bleibt. Die Bedienflaechen selbst bleiben unveraendert. */
@media (max-width: 340px) {
  #timeCalendarCard .time-calendar-toolbar,
  body.force-mobile-preview #timeCalendarCard .time-calendar-toolbar {
    gap: 4px;
  }

  #timeCalendarCard .time-calendar-toolbar > h3,
  body.force-mobile-preview #timeCalendarCard .time-calendar-toolbar > h3 {
    min-width: 0;
    font-size: 14px;
  }
}

@media (max-height: 520px) and (pointer: coarse) {
  #timeMonthOverviewModal > .time-month-overview-dialog {
    width: 100%;
    height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    max-height: none;
    padding: 12px 14px;
    border-radius: 20px;
  }

  .time-month-desktop-table {
    display: none;
  }

  .time-month-mobile-cards {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .time-month-day-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.force-mobile-preview .time-month-desktop-table {
  display: none;
}

body.force-mobile-preview .time-month-mobile-cards {
  display: block;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 761px) and (max-width: 1179px) {
  #managePanel,
  #managePanel .settings-layout,
  #managePanel .settings-layout > div,
  #managePanel .settings-content,
  #managePanel .admin-block {
    min-width: 0;
    max-width: 100%;
  }

  #managePanel .settings-content .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 901px) and (max-width: 1179px) {
  #projectPlatform .doc-calendar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
  }

  #projectPlatform .doc-calendar > * {
    min-width: 0;
  }
}

@media (max-width: 430px) {
  body > header .brand-text {
    max-width: calc(100vw - 150px);
  }

  body > header h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .auth-intro {
    padding: 16px;
  }

  .auth-brand {
    align-items: center;
  }

  .auth-brand h1 {
    font-size: 22px;
  }

  .auth-brand p,
  .auth-intro > p {
    font-size: 12px;
  }
}

@media (max-width: 340px) {
  main {
    padding-inline: 8px;
  }

  .form-panel,
  .home-card,
  .time-card,
  .account-box,
  .file-card,
  .storage-card,
  .settings-content {
    padding-inline: 13px;
  }
}

/* Aeltere, ansichtsspezifische Primaeraktionen nutzten noch hartes Vollgruen.
   Nur rechteckige Textaktionen werden an das gemeinsame helle System gebunden;
   kompakte runde FAB-, Kamera- und Statussymbole behalten ihren Funktionsakzent. */
body .mobile-week-tool-actions button,
body .mobile-week-floating-controls .mobile-week-tool-actions button,
body .chat-compose button,
body #editModal.documentation-event-modal .doc-primary-action,
body #editModal.photo-review-modal .camera-review-save.active:not(:disabled),
body .doc-primary-action {
  border-color: var(--bbs-button-primary-border) !important;
  background: var(--bbs-button-primary-bg) !important;
  color: var(--bbs-button-primary-text) !important;
  box-shadow: none !important;
}

body :where(.task-add-floating, .task-global-add-fab, .material-add-fab, .doc-overview-add, .doc-day-floating-add, .delivery-camera-add) {
  border-color: var(--bbs-button-primary-border) !important;
  background: var(--bbs-button-primary-bg) !important;
  color: var(--bbs-button-primary-text) !important;
  box-shadow: 0 8px 22px rgba(20, 92, 47, 0.12) !important;
}

body .mobile-week-tool-actions button:hover,
body .mobile-week-floating-controls .mobile-week-tool-actions button:hover,
body .chat-compose button:hover,
body #editModal.documentation-event-modal .doc-primary-action:hover,
body #editModal.photo-review-modal .camera-review-save.active:not(:disabled):hover,
body .doc-primary-action:hover {
  border-color: #9fc4aa !important;
  background: var(--bbs-button-primary-hover) !important;
}

/* Das optionale Live-Design darf Akzente setzen, aber keine harten
   Volltonflaechen ueber die ruhige BauBoard-Basis legen. */
body.design-theme-active button:not(.danger):not(.secondary):not(.light):not(.view-switch):not(.password-eye-button):not(.dot-menu-button):not(.camera-capture-button):not(.camera-close-button):not(.camera-done-button):not(.camera-flash-button):not(.camera-switch-button):not(.camera-finish-arrow):not(.camera-gallery-thumb) {
  border: 1px solid color-mix(in srgb, var(--live-design-accent, #19a24a) 45%, var(--bbs-line)) !important;
  background: color-mix(in srgb, var(--live-design-accent, #19a24a) 30%, var(--bbs-paper)) !important;
  color: var(--bbs-ink) !important;
  box-shadow: none;
}

/* Die Kamera-Filmleiste ist eine Bildauswahl und keine Karten-/Buttonflaeche. */
body .camera-gallery-view button.camera-gallery-thumb {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-width: 2px !important;
  border-color: transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

body .camera-gallery-view button.camera-gallery-thumb.active {
  border-color: #9fc4aa !important;
}

body .camera-gallery-view button.camera-gallery-thumb:focus-visible {
  outline: 2px solid #dcecdf;
  outline-offset: 3px;
}

body.design-theme-active .settings-menu button.active,
body.design-theme-active .project-section-switch button.active {
  border-color: color-mix(in srgb, var(--live-design-accent, #19a24a) 55%, var(--bbs-line)) !important;
  background: color-mix(in srgb, var(--live-design-accent, #19a24a) 38%, var(--bbs-paper)) !important;
  color: var(--bbs-ink) !important;
}

body.design-theme-active :where(.admin-undo-icon, .dot-menu-button, .tab-icon, .request-action-icon) svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.design-theme-active .dot-menu-button svg {
  width: 18px;
  height: 18px;
}

body.design-theme-active .dot-menu-button svg circle {
  fill: currentColor;
  stroke: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Fachansichten mit eigener, hardwaregetesteter Renderinglogik bleiben stabil. */
#editModal.plan-review-prototype,
#editModal.plan-review-prototype *,
#editModal.mobile-pdf-fullscreen,
#editModal.mobile-pdf-fullscreen *,
#editModal.camera-fullscreen,
#editModal.camera-fullscreen * {
  --bbs-focus: initial;
}

/* Verbindlicher UI-Vertrag fuer alle normalen BauBoard-Dialoge.
   Fachmodule liefern nur Inhalte und Aktionen; Geometrie, Scrollbereich,
   Safe Area, Meldungen und Aktionspositionen werden ausschliesslich hier
   festgelegt. Kamera-, Medien- und PDF-Vollbilder verwenden weiterhin ihre
   eigene, hardwaregetestete Darstellung. */
#editModal[data-dialog-layout="standard"] {
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overflow: hidden;
}

#editModal[data-dialog-layout="standard"] > .edit-modal {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(var(--bbs-dialog-width), calc(100vw - var(--bbs-dialog-viewport-gap)));
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - max(var(--bbs-dialog-viewport-gap), env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
  overflow: hidden;
}

#editModal[data-dialog-kind="compact"] > .edit-modal {
  width: min(var(--bbs-dialog-compact-width), calc(100vw - var(--bbs-dialog-viewport-gap)));
}

#editModal[data-dialog-kind="sheet"] > .edit-modal {
  width: min(var(--bbs-dialog-sheet-width), calc(100vw - var(--bbs-dialog-viewport-gap)));
}

#editModal[data-dialog-layout="standard"] > .edit-modal > .bbs-dialog-header {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bbs-space-3);
  min-width: 0;
  margin: 0 0 var(--bbs-space-3);
  padding: 0;
}

#editModal[data-dialog-layout="standard"] .bbs-dialog-header > #editModalTitle {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

#editModal[data-dialog-layout="standard"] .edit-modal-title-actions {
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bbs-space-1);
  min-width: 44px;
  margin: 0;
}

#editModal[data-dialog-layout="standard"] .edit-modal-custom-title-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--bbs-space-1);
  min-width: 0;
}

#editModal[data-dialog-layout="standard"] .edit-modal-custom-title-actions:empty {
  display: none;
}

#editModal[data-dialog-layout="standard"] .edit-modal-custom-title-actions > button {
  min-width: var(--bbs-touch-target);
  width: var(--bbs-touch-target);
  min-height: var(--bbs-touch-target);
  height: var(--bbs-touch-target);
  margin: 0;
}

#editModal[data-dialog-layout="standard"] .dialog-close-replaced,
#editModal[data-dialog-layout="standard"] .cancel-action-replaced,
#editModal[data-dialog-layout="standard"] .delete-action-replaced {
  display: none !important;
}

#editModal[data-dialog-layout="standard"] > .edit-modal > .bbs-dialog-body {
  box-sizing: border-box;
  display: block;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

#editModal[data-dialog-layout="standard"] .bbs-dialog-message[hidden],
#editModal[data-dialog-layout="standard"] .bbs-dialog-actions:empty {
  display: none !important;
}

#editModal[data-dialog-layout="standard"] .bbs-dialog-message {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: none !important;
  margin: 0 0 var(--bbs-space-4);
  color: var(--bbs-muted);
  line-height: 1.5;
  white-space: pre-line;
  overflow: visible !important;
  overflow-wrap: anywhere;
}

#editModal[data-dialog-layout="standard"] .bbs-dialog-message[data-message-tone="info"],
#editModal[data-dialog-layout="standard"] .bbs-dialog-message[data-message-tone="success"],
#editModal[data-dialog-layout="standard"] .bbs-dialog-message[data-message-tone="warning"],
#editModal[data-dialog-layout="standard"] .bbs-dialog-message[data-message-tone="error"],
#editModal[data-dialog-layout="standard"] .bbs-dialog-message[data-message-tone="required"] {
  padding: var(--bbs-space-3) var(--bbs-space-4);
  border: 1px solid var(--bbs-line);
  border-radius: var(--bbs-radius-sm);
  background: var(--bbs-sage-50);
  color: var(--bbs-ink-soft);
}

#editModal[data-dialog-layout="standard"] .bbs-dialog-message[data-message-tone="info"] {
  border-color: #c9dce8;
  background: var(--bbs-info-soft);
  color: #294f67;
}

#editModal[data-dialog-layout="standard"] .bbs-dialog-message[data-message-tone="success"] {
  border-color: var(--bbs-green-200);
  background: var(--bbs-green-50);
  color: var(--bbs-green-800);
}

#editModal[data-dialog-layout="standard"] .bbs-dialog-message[data-message-tone="warning"],
#editModal[data-dialog-layout="standard"] .bbs-dialog-message[data-message-tone="required"] {
  border-color: #f0d4a4;
  background: var(--bbs-warning-soft);
  color: #7b4d10;
}

#editModal[data-dialog-layout="standard"] .bbs-dialog-message[data-message-tone="error"] {
  border-color: #efcaca;
  background: var(--bbs-danger-soft);
  color: #8d3030;
}

#editModal[data-dialog-layout="standard"] .bbs-dialog-fields,
#editModal[data-dialog-layout="standard"] .bbs-dialog-fields > *,
#editModal[data-dialog-layout="standard"] .bbs-dialog-fields :is(.grid, .doc-form-grid, .doc-entry-form),
#editModal[data-dialog-layout="standard"] .bbs-dialog-fields :is(.grid, .doc-form-grid, .doc-entry-form) > * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

#editModal[data-dialog-layout="standard"] .bbs-dialog-fields :is(input, select, textarea, button) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

/* Zusammengehörige Standardfelder reagieren auf den verfügbaren Platz statt
   auf einzelne Gerätebreiten. Ab 302px Innenbreite stehen zwei mindestens
   145px breite Felder nebeneinander, darunter bildet das Grid eine Spalte. */
#editModal[data-dialog-layout="standard"].documentation-note-modal .doc-form-grid.note {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr));
  gap: var(--bbs-space-3);
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--bbs-space-3);
}

#editModal[data-dialog-layout="standard"].documentation-note-modal .doc-form-grid.note > div {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

/* Der Notizdialog verwendet einen einzigen kompakten Abstandsrhythmus. Damit
   addieren sich die aelteren Label- und Formularabstaende nicht erneut. */
#editModal[data-dialog-layout="standard"].documentation-note-modal > .edit-modal > .bbs-dialog-header {
  margin-bottom: var(--bbs-space-4);
}

#editModal[data-dialog-layout="standard"].documentation-note-modal .doc-entry-form {
  gap: 0;
}

#editModal[data-dialog-layout="standard"].documentation-note-modal .doc-compact-field {
  display: grid;
  gap: var(--bbs-space-1);
  min-width: 0;
}

#editModal[data-dialog-layout="standard"].documentation-note-modal .doc-compact-field > label {
  margin: 0;
}

#editModal[data-dialog-layout="standard"].documentation-note-modal .doc-entry-form > label:not(.doc-important-check) {
  margin: 0 0 var(--bbs-space-1);
}

#editModal[data-dialog-layout="standard"].documentation-note-modal .doc-entry-form > textarea {
  margin: 0 0 var(--bbs-space-3);
}

#editModal[data-dialog-layout="standard"].documentation-note-modal .doc-important-check {
  margin: 0;
}

#editModal[data-dialog-layout="standard"].documentation-note-modal .doc-native-field-shell {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  width: 100%;
  min-inline-size: 0;
  min-width: 0;
  block-size: 44px;
  height: 44px;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid var(--bbs-line);
  border-radius: var(--bbs-radius-sm);
  background: var(--bbs-paper);
  background-clip: padding-box;
}

#editModal[data-dialog-layout="standard"].documentation-note-modal .doc-form-grid.note :is(input[type="date"], input[type="time"]) {
  display: block;
  box-sizing: border-box;
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  block-size: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 10px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: inherit !important;
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  color: var(--bbs-ink);
  line-height: 42px;
  text-align: center !important;
  text-align-last: center;
  box-shadow: none !important;
}

#editModal[data-dialog-layout="standard"].documentation-note-modal .doc-form-grid.note :is(input[type="date"], input[type="time"])::-webkit-date-and-time-value {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

#editModal[data-dialog-layout="standard"].documentation-note-modal .doc-form-grid.note :is(input[type="date"], input[type="time"])::-webkit-datetime-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
}

#editModal[data-dialog-layout="standard"].documentation-note-modal > .edit-modal > .bbs-dialog-actions {
  margin-top: var(--bbs-space-3) !important;
  padding-top: var(--bbs-space-3) !important;
}

#editModal[data-dialog-layout="standard"] > .edit-modal > .bbs-dialog-actions {
  position: static !important;
  inset: auto !important;
  z-index: auto;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--bbs-space-3);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: var(--bbs-space-4) 0 0 !important;
  padding: var(--bbs-space-4) 0 0 !important;
  border-top: 1px solid var(--bbs-line);
  background: var(--bbs-paper) !important;
  box-shadow: none !important;
}

#editModal[data-dialog-layout="standard"] > .edit-modal > #editModalActions.bbs-dialog-actions > button:not(.cancel-action-replaced):not(.delete-action-replaced),
#editModal[data-dialog-layout="standard"] .bbs-dialog-actions > .bbs-dialog-action:not(.cancel-action-replaced):not(.delete-action-replaced) {
  flex: 1 1 180px;
  width: auto;
  min-width: min(180px, 100%);
  max-width: 460px;
  min-height: var(--bbs-touch-target) !important;
  margin: 0;
}

#editModal[data-dialog-layout="standard"] .bbs-dialog-actions > .bbs-dialog-action:only-child {
  flex-basis: min(100%, 460px);
  width: min(100%, 460px);
}

@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  #editModal[data-dialog-layout="standard"] {
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  #editModal[data-dialog-layout="standard"] > .edit-modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  }

  #editModal[data-dialog-layout="standard"] > .edit-modal > #editModalActions.bbs-dialog-actions > button:not(.cancel-action-replaced):not(.delete-action-replaced),
  #editModal[data-dialog-layout="standard"] .bbs-dialog-actions > .bbs-dialog-action:not(.cancel-action-replaced):not(.delete-action-replaced) {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
}